@nice2dev/ui-graphics 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +425 -0
  2. package/dist/cjs/font/NiceFontEditor.js +1 -1
  3. package/dist/cjs/game/GameAsset2dEditor.js +9 -9
  4. package/dist/cjs/photo/PhotoEditorLeftPanel.js +3 -3
  5. package/dist/cjs/pixel/PixelEditorRightPanel.js +3 -3
  6. package/dist/cjs/pixel/PixelEditorTimeline.js +1 -1
  7. package/dist/cjs/texture/Nice3DTexturePainter.js +1 -1
  8. package/dist/cjs/ui/NiceUIDesigner.js +2 -2
  9. package/dist/cjs/vector/VectorEditorRightPanel.js +2 -2
  10. package/dist/cjs/vector/useVectorEditor.js +26 -16
  11. package/dist/esm/font/NiceFontEditor.js +2 -2
  12. package/dist/esm/game/GameAsset2dEditor.js +10 -10
  13. package/dist/esm/photo/PhotoEditorLeftPanel.js +4 -4
  14. package/dist/esm/pixel/PixelEditorRightPanel.js +4 -4
  15. package/dist/esm/pixel/PixelEditorTimeline.js +2 -2
  16. package/dist/esm/texture/Nice3DTexturePainter.js +2 -2
  17. package/dist/esm/ui/NiceUIDesigner.js +3 -3
  18. package/dist/esm/vector/VectorEditorRightPanel.js +3 -3
  19. package/dist/esm/vector/useVectorEditor.js +26 -16
  20. package/package.json +4 -4
package/dist/cjs/photo/PhotoEditorLeftPanel.js CHANGED
@@ -73,7 +73,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
73
73
  }, 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: () => {
74
74
  setSelectedFilter(filter.id);
75
75
  pushHistory();
76
- }, 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: {
76
+ }, 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", { role: "button", tabIndex: 0, "aria-label": t('photoEditor.reset', 'Reset'), onKeyDown: uiCore.clickOnActivationKey, className: PhotoEditor_module.adjustValue, style: {
77
77
  color: adjustments[sl.key] !== 0 ? accent : 'var(--nice-text-secondary, #666)',
78
78
  }, 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: () => {
79
79
  handleAdjChange('brightness', 0);
@@ -130,7 +130,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
130
130
  const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
131
131
  const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
132
132
  addOverlay(createEmojiOverlay(em, cw, ch));
133
- }, className: PhotoEditor_module.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlaySection, children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxRuntime.jsxs("div", { onClick: () => setSelectedOverlayId(ov.id), className: PhotoEditor_module.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "pen", size: 14 })) : (jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 14 })) }), jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayName, children: ov.type === 'text'
133
+ }, className: PhotoEditor_module.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlaySection, children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, onClick: () => setSelectedOverlayId(ov.id), className: PhotoEditor_module.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "pen", size: 14 })) : (jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 14 })) }), jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayName, children: ov.type === 'text'
134
134
  ? ov.text.slice(0, 20)
135
135
  : ov.type === 'emoji'
136
136
  ? t('photoEditor.emoji', 'Emoji')
@@ -191,7 +191,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
191
191
  '#ff00ff',
192
192
  '#ffffff',
193
193
  '#000000',
194
- ].map((c) => (jsxRuntime.jsx("div", { onClick: () => setDrawColor(c), className: PhotoEditor_module.quickColorSwatch, style: {
194
+ ].map((c) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, "aria-label": c, "aria-pressed": drawColor === c, onKeyDown: uiCore.clickOnActivationKey, onClick: () => setDrawColor(c), className: PhotoEditor_module.quickColorSwatch, style: {
195
195
  background: c,
196
196
  border: drawColor === c ? `2px solid ${accent}` : undefined,
197
197
  } }, c)))] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, style: { marginBottom: 12 }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.drawPreview, children: jsxRuntime.jsx("div", { style: {
package/dist/cjs/pixel/PixelEditorRightPanel.js CHANGED
@@ -17,12 +17,12 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
17
17
  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]
18
18
  .map((l, i) => ({ l, i }))
19
19
  .reverse()
20
- .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) => {
20
+ .map(({ l, i }) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${PixelEditor_module.layerItem} ${i === api.aLi ? PixelEditor_module.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.visible, onKeyDown: uiCore.clickOnActivationKey, className: PixelEditor_module.layerVis, onClick: (e) => {
21
21
  e.stopPropagation();
22
22
  api.toggleVis(i);
23
23
  }, title: l.visible
24
24
  ? t('pixelEditorRightPanel.visible', 'Visible')
25
- : t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { className: PixelEditor_module.layerLock, onClick: (e) => {
25
+ : t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.locked, onKeyDown: uiCore.clickOnActivationKey, className: PixelEditor_module.layerLock, onClick: (e) => {
26
26
  e.stopPropagation();
27
27
  api.toggleLock(i);
28
28
  }, title: l.locked
@@ -38,7 +38,7 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
38
38
  if (!api.pal.includes(api.col1)) {
39
39
  api.setPal((p) => [...p, api.col1]);
40
40
  }
41
- }, 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) => {
41
+ }, 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", { role: "button", tabIndex: 0, "aria-pressed": c === api.col1, onKeyDown: uiCore.clickOnActivationKey, className: `${PixelEditor_module.paletteSwatch} ${c === api.col1 ? PixelEditor_module.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
42
42
  e.preventDefault();
43
43
  api.setCol2(c);
44
44
  }, title: c }, i))) })] })] }));
package/dist/cjs/pixel/PixelEditorTimeline.js CHANGED
@@ -14,7 +14,7 @@ const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
14
14
  ? t('pixelEditorTimeline.pause', 'Pause')
15
15
  : t('pixelEditorTimeline.play', 'Play'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsxRuntime.jsx("label", { children: t('pixelEditorTimeline.fps', '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.jsx("span", { children: api.fc !== 1
16
16
  ? t('pixelEditorTimeline.framesMany', '{fc} frames').replace('{fc}', String(api.fc))
17
- : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), 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: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
17
+ : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, "aria-label": t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), "aria-pressed": fi === api.afi, onKeyDown: uiCore.clickOnActivationKey, 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: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
18
18
  width: 36,
19
19
  height: 36,
20
20
  imageRendering: 'pixelated',
package/dist/cjs/texture/Nice3DTexturePainter.js CHANGED
@@ -393,7 +393,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
393
393
  color: painter.activeLayerId === l.id
394
394
  ? 'var(--nice-color-white, #fff)'
395
395
  : 'var(--nice-text, #c1c2c5)',
396
- }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }, onClick: () => painter.setActiveLayerId(l.id), children: [jsxRuntime.jsx("button", { onClick: (e) => {
396
+ }, children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }, onClick: () => painter.setActiveLayerId(l.id), children: [jsxRuntime.jsx("button", { onClick: (e) => {
397
397
  e.stopPropagation();
398
398
  painter.toggleLayerVisibility(l.id);
399
399
  }, style: {
package/dist/cjs/ui/NiceUIDesigner.js CHANGED
@@ -375,7 +375,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
375
375
  var _a, _b, _c, _d;
376
376
  const isSelected = designer.selectedId === node.id;
377
377
  const def = COMPONENT_DEFS.find((d) => d.type === node.type);
378
- return (jsxRuntime.jsxs("div", { onClick: (e) => {
378
+ return (jsxRuntime.jsxs("div", { role: "presentation", onClick: (e) => {
379
379
  e.stopPropagation();
380
380
  designer.setSelectedId(node.id);
381
381
  }, onDrop: (e) => ((def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDrop(e, node.id) : undefined), onDragOver: (def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDragOver : undefined, style: {
@@ -415,7 +415,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
415
415
  };
416
416
  const renderTreeItem = (node, depth = 0) => {
417
417
  const def = COMPONENT_DEFS.find((d) => d.type === node.type);
418
- return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { onClick: () => designer.setSelectedId(node.id), style: {
418
+ return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, onClick: () => designer.setSelectedId(node.id), style: {
419
419
  padding: '2px 4px',
420
420
  paddingLeft: 4 + depth * 12,
421
421
  fontSize: 10,
package/dist/cjs/vector/VectorEditorRightPanel.js CHANGED
@@ -37,7 +37,7 @@ const VectorEditorRightPanel = ({ api, library, artW = 512, artH = 512 }) => {
37
37
  } }) }), jsxRuntime.jsx(ui.NiceTextInput, { className: VectorEditor_module.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => {
38
38
  setFillCol(val);
39
39
  updateSel({ fill: val });
40
- } })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: VectorEditor_module.propRow, style: { flexWrap: 'wrap', gap: 4 }, children: vectorGradients.PRESET_GRADIENTS.map((grad, i) => (jsxRuntime.jsx("div", { style: {
40
+ } })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: VectorEditor_module.propRow, style: { flexWrap: 'wrap', gap: 4 }, children: vectorGradients.PRESET_GRADIENTS.map((grad, i) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, style: {
41
41
  width: 24,
42
42
  height: 24,
43
43
  borderRadius: 4,
@@ -233,7 +233,7 @@ const VectorEditorRightPanel = ({ api, library, artW = 512, artH = 512 }) => {
233
233
  var _a;
234
234
  const realIdx = shapes.length - 1 - revIdx;
235
235
  const active = s.id === selId;
236
- return (jsxRuntime.jsxs("div", { className: `${VectorEditor_module.layerRow} ${active ? VectorEditor_module.layerRowActive : ''} ${s.locked ? VectorEditor_module.layerRowLocked : ''}`, onClick: () => {
236
+ return (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${VectorEditor_module.layerRow} ${active ? VectorEditor_module.layerRowActive : ''} ${s.locked ? VectorEditor_module.layerRowLocked : ''}`, onClick: () => {
237
237
  setSelId(s.id);
238
238
  setTool('pointer');
239
239
  }, children: [jsxRuntime.jsx("button", { type: "button", className: VectorEditor_module.layerIconBtn, title: s.hidden
package/dist/cjs/vector/useVectorEditor.js CHANGED
@@ -94,8 +94,12 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
94
94
  if (!r) {
95
95
  return { x: 0, y: 0 };
96
96
  }
97
- let x = (cx - r.left - r.width / 2 - px) / zoom + artW / 2;
98
- let y = (cy - r.top - r.height / 2 - py) / zoom + artH / 2;
97
+ // The <svg> fills the box and its viewBox fits the artboard into it (xMidYMid meet), so one
98
+ // art unit is `fit` screen px before the zoom. Dividing by the zoom alone put every shape
99
+ // closer to the centre than the pointer — off by half in the 900×520 showcase demo.
100
+ const fit = Math.min(r.width / artW, r.height / artH) || 1;
101
+ let x = (cx - r.left - r.width / 2 - px) / (zoom * fit) + artW / 2;
102
+ let y = (cy - r.top - r.height / 2 - py) / (zoom * fit) + artH / 2;
99
103
  if (snapGrid) {
100
104
  x = vectorEditorTypes.snapToGrid(x, gridSize);
101
105
  y = vectorEditorTypes.snapToGrid(y, gridSize);
@@ -333,32 +337,37 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
333
337
  }));
334
338
  return;
335
339
  }
336
- if (!pendingShape.current) {
340
+ const pending = pendingShape.current;
341
+ if (!pending) {
337
342
  return;
338
343
  }
339
- const t = pendingShape.current.type;
344
+ // The pending shape's ref follows the drag as well. onUp sizes the result from the ref,
345
+ // which kept the 0×0 shape of the press — so every dragged rectangle, ellipse, line and
346
+ // arrow counted as "tiny" and was deleted on release: nothing appeared on the canvas.
347
+ const resize = (patch) => {
348
+ pendingShape.current = { ...pending, ...patch };
349
+ setShapes((prev) => prev.map((s) => (s.id === pending.id ? { ...s, ...patch } : s)));
350
+ };
351
+ const t = pending.type;
340
352
  if (t === 'polygon' || t === 'star') {
341
353
  const cx = startPt.current.x;
342
354
  const cy = startPt.current.y;
343
355
  const dx = p.x - cx;
344
356
  const dy = p.y - cy;
345
357
  const r2 = Math.sqrt(dx * dx + dy * dy);
346
- setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id
347
- ? { ...s, x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 }
348
- : s));
358
+ resize({ x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 });
349
359
  return;
350
360
  }
351
361
  if (t === 'rect' || t === 'roundrect' || t === 'ellipse') {
352
- const x1 = Math.min(startPt.current.x, p.x);
353
- const y1 = Math.min(startPt.current.y, p.y);
354
- const w2 = Math.abs(p.x - startPt.current.x);
355
- const h2 = Math.abs(p.y - startPt.current.y);
356
- setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id ? { ...s, x: x1, y: y1, w: w2, h: h2 } : s));
362
+ resize({
363
+ x: Math.min(startPt.current.x, p.x),
364
+ y: Math.min(startPt.current.y, p.y),
365
+ w: Math.abs(p.x - startPt.current.x),
366
+ h: Math.abs(p.y - startPt.current.y),
367
+ });
357
368
  }
358
369
  else if (t === 'line' || t === 'arrow') {
359
- setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id
360
- ? { ...s, w: Math.abs(p.x - s.x), h: Math.abs(p.y - s.y), x2: p.x, y2: p.y }
361
- : s));
370
+ resize({ w: Math.abs(p.x - pending.x), h: Math.abs(p.y - pending.y), x2: p.x, y2: p.y });
362
371
  }
363
372
  }, [tool, scr2art, selId]);
364
373
  const onUp = React.useCallback(() => {
@@ -408,7 +417,8 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
408
417
  dragStarted.current = false;
409
418
  return;
410
419
  }
411
- snap(shapesRef.current);
420
+ // the ref holds the final geometry even when the last move has not rendered yet
421
+ snap(shapesRef.current.map((s) => (s.id === ps.id ? ps : s)));
412
422
  setSelId(ps.id);
413
423
  pendingShape.current = null;
414
424
  dragStarted.current = false;
package/dist/esm/font/NiceFontEditor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { NiceTutorialButton, resolveTutorial } from '@nice2dev/ui';
3
- import { NiceIcon } from '@nice2dev/ui-core';
3
+ import { clickOnActivationKey, NiceIcon } from '@nice2dev/ui-core';
4
4
  import React from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
 
@@ -247,7 +247,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
247
247
  gap: 2,
248
248
  maxHeight: 300,
249
249
  overflowY: 'auto',
250
- }, children: editor.glyphs.map((g) => (jsx("div", { onClick: () => {
250
+ }, children: editor.glyphs.map((g) => (jsx("div", { role: "button", tabIndex: 0, "aria-pressed": editor.selectedGlyph === g.unicode, onKeyDown: clickOnActivationKey, onClick: () => {
251
251
  editor.setSelectedGlyph(g.unicode);
252
252
  setPathPoints([]);
253
253
  }, title: `U+${g.unicode.toString(16).toUpperCase().padStart(4, '0')} - ${g.name}`, style: {
package/dist/esm/game/GameAsset2dEditor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { NiceAppShell, NiceButton, NiceTextInput, NiceSelect, NiceNumberInput } from '@nice2dev/ui';
3
- import { NiceIcon, resolveCssColor } from '@nice2dev/ui-core';
3
+ import { NiceIcon, clickOnActivationKey, resolveCssColor } from '@nice2dev/ui-core';
4
4
  import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
  import styles from './GameAsset2dEditor.module.css.js';
@@ -69,7 +69,7 @@ const SpriteSheetToolbar = ({ api }) => {
69
69
  const TilePalette = ({ api }) => {
70
70
  const { t } = useNiceTranslation();
71
71
  const fileInputRef = useRef(null);
72
- return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map((tile) => (jsx("div", { className: `${styles.tileItem} ${api.editorState.selectedTileId === tile.id ? styles.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
72
+ return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map((tile) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.tileItem} ${api.editorState.selectedTileId === tile.id ? styles.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
73
73
  var _a;
74
74
  const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
75
75
  if (file) {
@@ -84,12 +84,12 @@ const TilePalette = ({ api }) => {
84
84
  const LayersPanel = ({ api }) => {
85
85
  const { t } = useNiceTranslation();
86
86
  const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
87
- return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: activeMap ? (jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsx(NiceButton, { className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
87
+ return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: activeMap ? (jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsx(NiceButton, { className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
88
88
  e.stopPropagation();
89
89
  api.toggleLayerVisibility(layer.id);
90
90
  }, "aria-label": layer.visible
91
91
  ? t('gameAsset2dEditor.hideLayer', 'Hide layer')
92
- : t('gameAsset2dEditor.showLayer', 'Show layer'), children: jsx(NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsx("span", { className: styles.layerName, children: layer.name }), jsxs("span", { className: styles.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map((map) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeTileMapId === map.id ? styles.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsx("span", { className: styles.layerName, children: map.name }), jsxs("span", { className: styles.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
92
+ : t('gameAsset2dEditor.showLayer', 'Show layer'), children: jsx(NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsx("span", { className: styles.layerName, children: layer.name }), jsxs("span", { className: styles.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map((map) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeTileMapId === map.id ? styles.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsx("span", { className: styles.layerName, children: map.name }), jsxs("span", { className: styles.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
93
93
  };
94
94
  /* ────────────────────────────────────────────────────────────────
95
95
  TILE MAP CANVAS
@@ -271,7 +271,7 @@ const SpriteSheetCanvas = ({ api }) => {
271
271
  const SpriteSheetsList = ({ api }) => {
272
272
  const { t } = useNiceTranslation();
273
273
  const fileInputRef = useRef(null);
274
- return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.import', '+ Import') })] }), jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map((sheet) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsx("span", { className: styles.layerName, children: sheet.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.frames', '{frames} frames').replace('{frames}', String(sheet.frames.length)) })] }, sheet.id))) })) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
274
+ return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.import', '+ Import') })] }), jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map((sheet) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsx("span", { className: styles.layerName, children: sheet.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.frames', '{frames} frames').replace('{frames}', String(sheet.frames.length)) })] }, sheet.id))) })) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
275
275
  var _a;
276
276
  const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
277
277
  if (file) {
@@ -294,7 +294,7 @@ const FramesPanel = ({ api }) => {
294
294
  setAnimName('');
295
295
  }
296
296
  }, [animName, api]);
297
- return (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.frames2', 'Frames ({frames})').replace('{frames}', String((_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0)) }) }), jsx("div", { className: styles.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? styles.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsx("span", { className: styles.layerName, children: frame.name }), jsxs("span", { className: styles.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxs("div", { className: styles.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsx(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxs("div", { className: styles.layerItem, children: [jsx("span", { className: styles.layerName, children: anim.name }), jsxs("span", { className: styles.layerOpacity, children: [anim.frameIds.length, "f"] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
297
+ return (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.frames2', 'Frames ({frames})').replace('{frames}', String((_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0)) }) }), jsx("div", { className: styles.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? styles.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsx("span", { className: styles.layerName, children: frame.name }), jsxs("span", { className: styles.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxs("div", { className: styles.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsx(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxs("div", { className: styles.layerItem, children: [jsx("span", { className: styles.layerName, children: anim.name }), jsxs("span", { className: styles.layerOpacity, children: [anim.frameIds.length, "f"] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
298
298
  };
299
299
  /* ────────────────────────────────────────────────────────────────
300
300
  ANIMATION STATE MACHINE
@@ -314,7 +314,7 @@ const AnimationStateMachineView = ({ api }) => {
314
314
  }
315
315
  return result;
316
316
  }, [api.project.spriteSheets]);
317
- return (jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsx("button", { className: styles.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsx("span", { className: styles.layerName, children: sm.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.states2', '{states} states').replace('{states}', String(sm.states.length)) })] }, sm.id))) }), activeSM && (jsxs(Fragment, { children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsx(NiceSelect, { className: styles.panelInput, style: { marginTop: 4 }, onChange: (val) => {
317
+ return (jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsx("button", { className: styles.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsx("span", { className: styles.layerName, children: sm.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.states2', '{states} states').replace('{states}', String(sm.states.length)) })] }, sm.id))) }), activeSM && (jsxs(Fragment, { children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsx(NiceSelect, { className: styles.panelInput, style: { marginTop: 4 }, onChange: (val) => {
318
318
  if (val) {
319
319
  api.addState(newStateName, val);
320
320
  setNewStateName('');
@@ -328,7 +328,7 @@ const AnimationStateMachineView = ({ api }) => {
328
328
  value: anim.id,
329
329
  label: `${anim.sheetName}: ${anim.name}`,
330
330
  })),
331
- ] }))] }), activeSM.states.map((state) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxs("span", { className: styles.layerName, children: [activeSM.entryStateId === state.id && jsx(NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
331
+ ] }))] }), activeSM.states.map((state) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxs("span", { className: styles.layerName, children: [activeSM.entryStateId === state.id && jsx(NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
332
332
  e.stopPropagation();
333
333
  api.removeState(state.id);
334
334
  }, "aria-label": t('gameAsset2dEditor.removeState', 'Remove state'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, state.id)))] })] }))] }), jsx("div", { className: styles.stateGraph, children: activeSM ? (jsxs("svg", { width: "100%", height: "100%", children: [jsx("defs", { children: jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--nice-text-secondary, #4a5a7e)" }) }) }), activeSM.transitions.map((trans) => {
@@ -340,7 +340,7 @@ const AnimationStateMachineView = ({ api }) => {
340
340
  return (jsx("line", { x1: from.position.x + 60, y1: from.position.y + 20, x2: to.position.x + 60, y2: to.position.y + 20, className: styles.transition, onClick: () => api.removeTransition(trans.id) }, trans.id));
341
341
  }), activeSM.states.map((state) => {
342
342
  var _a, _b;
343
- return (jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxs("div", { className: `${styles.stateNode} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsx("div", { className: styles.stateNodeName, children: state.name }), jsx("div", { className: styles.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : t('gameAsset2dEditor.noAnimation', 'No animation') })] }) }, state.id));
343
+ return (jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.stateNode} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsx("div", { className: styles.stateNodeName, children: state.name }), jsx("div", { className: styles.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : t('gameAsset2dEditor.noAnimation', 'No animation') })] }) }, state.id));
344
344
  })] })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxs("div", { className: styles.layerItem, children: [jsx("span", { className: styles.layerOpacity, children: param.type }), jsx("span", { className: styles.layerName, children: param.name }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxs("div", { className: styles.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
345
345
  var _a, _b;
346
346
  const from = activeSM.states.find((s) => s.id === trans.fromStateId);
@@ -384,7 +384,7 @@ const EffectsView = ({ api }) => {
384
384
  api.saveEffectPreset(presetName);
385
385
  setPresetName('');
386
386
  }
387
- }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxs("div", { className: styles.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsx("span", { className: styles.layerName, children: preset.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.effects', '{effects} effects').replace('{effects}', String(preset.effects.length)) })] }, preset.id)))] })] }), jsx("div", { className: styles.viewport, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsx("div", { className: styles.panelContent, children: jsx("div", { className: styles.effectsList, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
387
+ }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsx("span", { className: styles.layerName, children: preset.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.effects', '{effects} effects').replace('{effects}', String(preset.effects.length)) })] }, preset.id)))] })] }), jsx("div", { className: styles.viewport, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsx("div", { className: styles.panelContent, children: jsx("div", { className: styles.effectsList, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
388
388
  };
389
389
  /* ────────────────────────────────────────────────────────────────
390
390
  STATUS BAR
package/dist/esm/photo/PhotoEditorLeftPanel.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { NiceIcon } from '@nice2dev/ui-core';
2
+ import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
3
3
  import React from 'react';
4
4
  import { RangeInput, Button, TextArea } from '../core/LocalUI.js';
5
5
  import FilterThumb from './FilterThumb.js';
@@ -71,7 +71,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
71
71
  }, children: cat.label }, cat.key))) }), jsx("div", { className: cs.filterGrid, children: filteredList.map((filter) => (jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
72
72
  setSelectedFilter(filter.id);
73
73
  pushHistory();
74
- }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map((sl) => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsx("span", { className: cs.adjustValue, style: {
74
+ }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map((sl) => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsx("span", { role: "button", tabIndex: 0, "aria-label": t('photoEditor.reset', 'Reset'), onKeyDown: clickOnActivationKey, className: cs.adjustValue, style: {
75
75
  color: adjustments[sl.key] !== 0 ? accent : 'var(--nice-text-secondary, #666)',
76
76
  }, onClick: () => handleAdjChange(sl.key, sl.key === 'blur' ? 0 : 0), title: t('photoEditor.reset', 'Reset'), children: adjustments[sl.key] })] }), jsx(RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
77
77
  handleAdjChange('brightness', 0);
@@ -128,7 +128,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
128
128
  const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
129
129
  const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
130
130
  addOverlay(createEmojiOverlay(em, cw, ch));
131
- }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsx("div", { className: cs.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxs("div", { onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsx(NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsx(NiceIcon, { name: "pen", size: 14 })) : (jsx(NiceIcon, { name: "square", size: 14 })) }), jsx("span", { className: cs.overlayName, children: ov.type === 'text'
131
+ }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsx("div", { className: cs.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsx(NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsx(NiceIcon, { name: "pen", size: 14 })) : (jsx(NiceIcon, { name: "square", size: 14 })) }), jsx("span", { className: cs.overlayName, children: ov.type === 'text'
132
132
  ? ov.text.slice(0, 20)
133
133
  : ov.type === 'emoji'
134
134
  ? t('photoEditor.emoji', 'Emoji')
@@ -189,7 +189,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
189
189
  '#ff00ff',
190
190
  '#ffffff',
191
191
  '#000000',
192
- ].map((c) => (jsx("div", { onClick: () => setDrawColor(c), className: cs.quickColorSwatch, style: {
192
+ ].map((c) => (jsx("div", { role: "button", tabIndex: 0, "aria-label": c, "aria-pressed": drawColor === c, onKeyDown: clickOnActivationKey, onClick: () => setDrawColor(c), className: cs.quickColorSwatch, style: {
193
193
  background: c,
194
194
  border: drawColor === c ? `2px solid ${accent}` : undefined,
195
195
  } }, c)))] }), jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsx(RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsx("div", { className: cs.drawPreview, children: jsx("div", { style: {
package/dist/esm/pixel/PixelEditorRightPanel.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { NiceCollapse, NiceSlider, NiceButton, NiceCheckbox, NiceTextInput, NiceSelect } from '@nice2dev/ui';
3
- import { NiceIcon } from '@nice2dev/ui-core';
3
+ import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
4
4
  import React from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
  import { HSVPicker } from './HSVPicker.js';
@@ -15,12 +15,12 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
15
15
  return (jsxs("div", { className: styles.rightPanel, children: [jsxs(NiceCollapse, { className: styles.panelSection, defaultExpanded: true, trigger: sectionTrigger('Brush'), children: [jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: t('pixelEditorRightPanel.size', 'Size') }), jsx(NiceSlider, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": t('pixelEditorRightPanel.brushSize', 'Brush size') }), jsx("span", { children: api.brush.size })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: t('pixelEditorRightPanel.opacity', 'Opacity') }), jsx(NiceSlider, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": t('pixelEditorRightPanel.brushOpacity', 'Brush opacity') }), jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: t('pixelEditorRightPanel.flow', 'Flow') }), jsx(NiceSlider, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": t('pixelEditorRightPanel.brushFlow', 'Brush flow') }), jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: t('pixelEditorRightPanel.hard', 'Hard') }), jsx(NiceSlider, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": t('pixelEditorRightPanel.brushHardness', 'Brush hardness') }), jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: t('pixelEditorRightPanel.space', 'Space') }), jsx(NiceSlider, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": t('pixelEditorRightPanel.brushSpacing', 'Brush spacing') }), jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsx("div", { className: styles.brushShapes, children: BRUSH_SHAPES.map((s) => (jsx(NiceButton, { className: `${styles.miniBtn} ${api.brush.shape === s.id ? styles.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: jsx(NiceIcon, { name: s.icon, size: 16 }) }, s.id))) }), jsxs("div", { className: styles.pressureToggles, children: [jsx(NiceCheckbox, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: t('pixelEditorRightPanel.pressureSize', 'Pressure→Size'), className: styles.checkLabel }), jsx(NiceCheckbox, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: t('pixelEditorRightPanel.pressureOpacity', 'Pressure→Opacity'), className: styles.checkLabel })] })] }), jsx(NiceCollapse, { className: styles.panelSection, defaultExpanded: true, trigger: sectionTrigger('Colour'), children: jsx(HSVPicker, { color: api.col1, onChange: api.setCol1 }) }), jsxs(NiceCollapse, { className: styles.panelSection, defaultExpanded: true, trigger: sectionTrigger('Layers'), children: [jsxs("div", { className: styles.layerActions, children: [jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.addLayer, title: t('pixelEditorRightPanel.addLayer', 'Add Layer'), "aria-label": t('pixelEditorRightPanel.addLayer', 'Add Layer'), children: jsx(NiceIcon, { name: "plus", size: 16 }) }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), "aria-label": t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), children: jsx(NiceIcon, { name: "copy", size: 16 }) }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), "aria-label": t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), children: jsx(NiceIcon, { name: "minus", size: 16 }) }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: t('pixelEditorRightPanel.mergeDown', 'Merge Down'), "aria-label": t('pixelEditorRightPanel.mergeDown', 'Merge Down'), children: jsx(NiceIcon, { name: "arrow-down", size: 16 }) }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: t('pixelEditorRightPanel.moveUp', 'Move Up'), "aria-label": t('pixelEditorRightPanel.moveUp', 'Move Up'), children: jsx(NiceIcon, { name: "arrow-up", size: 16 }) }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: t('pixelEditorRightPanel.moveDown', 'Move Down'), "aria-label": t('pixelEditorRightPanel.moveDown', 'Move Down'), children: jsx(NiceIcon, { name: "arrow-down", size: 16 }) })] }), [...api.layers]
16
16
  .map((l, i) => ({ l, i }))
17
17
  .reverse()
18
- .map(({ l, i }) => (jsxs("div", { className: `${styles.layerItem} ${i === api.aLi ? styles.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsx("span", { className: styles.layerVis, onClick: (e) => {
18
+ .map(({ l, i }) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${i === api.aLi ? styles.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.visible, onKeyDown: clickOnActivationKey, className: styles.layerVis, onClick: (e) => {
19
19
  e.stopPropagation();
20
20
  api.toggleVis(i);
21
21
  }, title: l.visible
22
22
  ? t('pixelEditorRightPanel.visible', 'Visible')
23
- : t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.layerLock, onClick: (e) => {
23
+ : t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.locked, onKeyDown: clickOnActivationKey, className: styles.layerLock, onClick: (e) => {
24
24
  e.stopPropagation();
25
25
  api.toggleLock(i);
26
26
  }, title: l.locked
@@ -36,7 +36,7 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
36
36
  if (!api.pal.includes(api.col1)) {
37
37
  api.setPal((p) => [...p, api.col1]);
38
38
  }
39
- }, title: t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), "aria-label": t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), children: jsx(NiceIcon, { name: "plus", size: 16 }) }) }), jsx("div", { className: styles.paletteGrid, children: api.pal.map((c, i) => (jsx("div", { className: `${styles.paletteSwatch} ${c === api.col1 ? styles.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
39
+ }, title: t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), "aria-label": t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), children: jsx(NiceIcon, { name: "plus", size: 16 }) }) }), jsx("div", { className: styles.paletteGrid, children: api.pal.map((c, i) => (jsx("div", { role: "button", tabIndex: 0, "aria-pressed": c === api.col1, onKeyDown: clickOnActivationKey, className: `${styles.paletteSwatch} ${c === api.col1 ? styles.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
40
40
  e.preventDefault();
41
41
  api.setCol2(c);
42
42
  }, title: c }, i))) })] })] }));
package/dist/esm/pixel/PixelEditorTimeline.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { NiceButton, NiceNumberInput, NiceCheckbox } from '@nice2dev/ui';
3
- import { NiceIcon } from '@nice2dev/ui-core';
3
+ import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
4
4
  import React from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
  import styles from './PixelEditor.module.css.js';
@@ -12,7 +12,7 @@ const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
12
12
  ? t('pixelEditorTimeline.pause', 'Pause')
13
13
  : t('pixelEditorTimeline.play', 'Play'), children: jsx(NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsx("label", { children: t('pixelEditorTimeline.fps', 'FPS:') }), jsx(NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": t('pixelEditorTimeline.framesPerSecond', 'Frames per second') }), jsx("div", { className: styles.menuSep }), jsx(NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsx("div", { style: { flex: 1 } }), jsx("span", { children: api.fc !== 1
14
14
  ? t('pixelEditorTimeline.framesMany', '{fc} frames').replace('{fc}', String(api.fc))
15
- : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsx("div", { className: styles.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxs("div", { className: `${styles.frameThumb} ${fi === api.afi ? styles.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsx("img", { src: api.thumbs[fi], alt: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
15
+ : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsx("div", { className: styles.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxs("div", { role: "button", tabIndex: 0, "aria-label": t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), "aria-pressed": fi === api.afi, onKeyDown: clickOnActivationKey, className: `${styles.frameThumb} ${fi === api.afi ? styles.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsx("img", { src: api.thumbs[fi], alt: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
16
16
  width: 36,
17
17
  height: 36,
18
18
  imageRendering: 'pixelated',
package/dist/esm/texture/Nice3DTexturePainter.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { resolveCssColor, NiceIcon } from '@nice2dev/ui-core';
2
+ import { resolveCssColor, NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
3
3
  import React from 'react';
4
4
  import { useNiceTranslation } from '../core/i18n.js';
5
5
 
@@ -391,7 +391,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
391
391
  color: painter.activeLayerId === l.id
392
392
  ? 'var(--nice-color-white, #fff)'
393
393
  : 'var(--nice-text, #c1c2c5)',
394
- }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }, onClick: () => painter.setActiveLayerId(l.id), children: [jsx("button", { onClick: (e) => {
394
+ }, children: [jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }, onClick: () => painter.setActiveLayerId(l.id), children: [jsx("button", { onClick: (e) => {
395
395
  e.stopPropagation();
396
396
  painter.toggleLayerVisibility(l.id);
397
397
  }, style: {
package/dist/esm/ui/NiceUIDesigner.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
3
- import { NiceIcon } from '@nice2dev/ui-core';
3
+ import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
4
4
  import React from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
 
@@ -373,7 +373,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
373
373
  var _a, _b, _c, _d;
374
374
  const isSelected = designer.selectedId === node.id;
375
375
  const def = COMPONENT_DEFS.find((d) => d.type === node.type);
376
- return (jsxs("div", { onClick: (e) => {
376
+ return (jsxs("div", { role: "presentation", onClick: (e) => {
377
377
  e.stopPropagation();
378
378
  designer.setSelectedId(node.id);
379
379
  }, onDrop: (e) => ((def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDrop(e, node.id) : undefined), onDragOver: (def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDragOver : undefined, style: {
@@ -413,7 +413,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
413
413
  };
414
414
  const renderTreeItem = (node, depth = 0) => {
415
415
  const def = COMPONENT_DEFS.find((d) => d.type === node.type);
416
- return (jsxs(React.Fragment, { children: [jsxs("div", { onClick: () => designer.setSelectedId(node.id), style: {
416
+ return (jsxs(React.Fragment, { children: [jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, onClick: () => designer.setSelectedId(node.id), style: {
417
417
  padding: '2px 4px',
418
418
  paddingLeft: 4 + depth * 12,
419
419
  fontSize: 10,
package/dist/esm/vector/VectorEditorRightPanel.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { NiceButton, NiceColorPicker, NiceTextInput, NiceSelect, NiceSlider, NiceNumberInput, NiceTabs } from '@nice2dev/ui';
3
- import { NiceIcon } from '@nice2dev/ui-core';
3
+ import { clickOnActivationKey, NiceIcon } from '@nice2dev/ui-core';
4
4
  import React, { useState } from 'react';
5
5
  import { useNiceTranslation } from '../core/i18n.js';
6
6
  import { ANIMATION_PRESETS, animationToCSSKeyframes, animationToCSSRule } from './vectorAnimation.js';
@@ -35,7 +35,7 @@ const VectorEditorRightPanel$1 = ({ api, library, artW = 512, artH = 512 }) => {
35
35
  } }) }), jsx(NiceTextInput, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => {
36
36
  setFillCol(val);
37
37
  updateSel({ fill: val });
38
- } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: 'wrap', gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { style: {
38
+ } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: 'wrap', gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, style: {
39
39
  width: 24,
40
40
  height: 24,
41
41
  borderRadius: 4,
@@ -231,7 +231,7 @@ const VectorEditorRightPanel$1 = ({ api, library, artW = 512, artH = 512 }) => {
231
231
  var _a;
232
232
  const realIdx = shapes.length - 1 - revIdx;
233
233
  const active = s.id === selId;
234
- return (jsxs("div", { className: `${styles.layerRow} ${active ? styles.layerRowActive : ''} ${s.locked ? styles.layerRowLocked : ''}`, onClick: () => {
234
+ return (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerRow} ${active ? styles.layerRowActive : ''} ${s.locked ? styles.layerRowLocked : ''}`, onClick: () => {
235
235
  setSelId(s.id);
236
236
  setTool('pointer');
237
237
  }, children: [jsx("button", { type: "button", className: styles.layerIconBtn, title: s.hidden