@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/cjs/pixel/PixelEditorRightPanel.js

@@ -1,47 +1,379 @@
-'use strict';
-
-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 })] }));
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const HSVPicker = require("./HSVPicker.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
+const pixelEditorTypes = require("./pixelEditorTypes.js");
+const sectionTrigger = (title) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: PixelEditor_module.default.collapseChevron, children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "chevron-right", size: 12 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
+] });
 const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__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", { 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) => {
-                                    e.stopPropagation();
-                                    api.toggleVis(i);
-                                }, title: l.visible
-                                    ? t('pixelEditorRightPanel.visible', 'Visible')
-                                    : 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) => {
-                                    e.stopPropagation();
-                                    api.toggleLock(i);
-                                }, title: l.locked
-                                    ? t('pixelEditorRightPanel.locked', 'Locked')
-                                    : t('pixelEditorRightPanel.unlocked', '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: t('pixelEditorRightPanel.opacity2', 'Opacity: {opacity}%').replace('{opacity}', String(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: 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) => {
-                                e.preventDefault();
-                                api.setCol2(c);
-                            }, title: c }, i))) })] })] }));
-}), { displayName: 'PixelEditorRightPanel' });
-
-module.exports = PixelEditorRightPanel;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.rightPanel, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.NiceCollapse,
+        {
+          className: PixelEditor_module.default.panelSection,
+          defaultExpanded: true,
+          trigger: sectionTrigger("Brush"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.brushSlider, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorRightPanel.size", "Size") }),
+              /* @__PURE__ */ 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")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: api.brush.size })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.brushSlider, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorRightPanel.opacity", "Opacity") }),
+              /* @__PURE__ */ 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")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                api.brush.opacity,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.brushSlider, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorRightPanel.flow", "Flow") }),
+              /* @__PURE__ */ 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")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                api.brush.flow,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.brushSlider, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorRightPanel.hard", "Hard") }),
+              /* @__PURE__ */ 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")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                api.brush.hardness,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.brushSlider, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorRightPanel.space", "Space") }),
+              /* @__PURE__ */ 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")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                api.brush.spacing,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.brushShapes, children: pixelEditorTypes.BRUSH_SHAPES.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                className: `${PixelEditor_module.default.miniBtn} ${api.brush.shape === s.id ? PixelEditor_module.default.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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: s.icon, size: 16 })
+              },
+              s.id
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.pressureToggles, children: [
+              /* @__PURE__ */ 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.default.checkLabel
+                }
+              ),
+              /* @__PURE__ */ 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.default.checkLabel
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceCollapse,
+        {
+          className: PixelEditor_module.default.panelSection,
+          defaultExpanded: true,
+          trigger: sectionTrigger("Colour"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(HSVPicker.HSVPicker, { color: api.col1, onChange: api.setCol1 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.NiceCollapse,
+        {
+          className: PixelEditor_module.default.panelSection,
+          defaultExpanded: true,
+          trigger: sectionTrigger("Layers"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.layerActions, children: [
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "copy", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "minus", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 })
+                }
+              )
+            ] }),
+            [...api.layers].map((l, i) => ({ l, i })).reverse().map(({ l, i }) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: uiCore.clickOnActivationKey,
+                className: `${PixelEditor_module.default.layerItem} ${i === api.aLi ? PixelEditor_module.default.layerItemActive : ""}`,
+                onClick: () => api.setALi(i),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-pressed": l.visible,
+                      onKeyDown: uiCore.clickOnActivationKey,
+                      className: PixelEditor_module.default.layerVis,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        api.toggleVis(i);
+                      },
+                      title: l.visible ? t("pixelEditorRightPanel.visible", "Visible") : t("pixelEditorRightPanel.hidden", "Hidden"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? "eye" : "eye-off", size: 14 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-pressed": l.locked,
+                      onKeyDown: uiCore.clickOnActivationKey,
+                      className: PixelEditor_module.default.layerLock,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        api.toggleLock(i);
+                      },
+                      title: l.locked ? t("pixelEditorRightPanel.locked", "Locked") : t("pixelEditorRightPanel.unlocked", "Unlocked"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "lock", size: 14 })
+                    }
+                  ),
+                  api.editingLayerName === l.id ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.NiceTextInput,
+                    {
+                      className: PixelEditor_module.default.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")
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: PixelEditor_module.default.layerName,
+                      onDoubleClick: (e) => {
+                        e.stopPropagation();
+                        api.setEditingLayerName(l.id);
+                      },
+                      children: l.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: PixelEditor_module.default.layerOpacity, children: [
+                    Math.round(l.opacity / 255 * 100),
+                    "%"
+                  ] })
+                ]
+              },
+              l.id
+            )),
+            api.layers[api.aLi] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.layerControls, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceSelect,
+                {
+                  value: api.layers[api.aLi].blendMode,
+                  onChange: (val) => api.setLayerBlendMode(api.aLi, val),
+                  className: PixelEditor_module.default.blendSelect,
+                  "aria-label": t("pixelEditorRightPanel.blendMode", "Blend mode"),
+                  options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m }))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceSlider,
+                {
+                  min: 0,
+                  max: 255,
+                  value: api.layers[api.aLi].opacity,
+                  onChange: (val) => api.setLayerOpacity(api.aLi, val),
+                  className: PixelEditor_module.default.layerOpSlider,
+                  title: t("pixelEditorRightPanel.opacity2", "Opacity: {opacity}%").replace(
+                    "{opacity}",
+                    String(Math.round(api.layers[api.aLi].opacity / 255 * 100))
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.NiceCollapse,
+        {
+          className: PixelEditor_module.default.panelSection,
+          defaultExpanded: true,
+          trigger: sectionTrigger("Palette"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.layerActions, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                  if (!api.pal.includes(api.col1)) {
+                    api.setPal((p) => [...p, api.col1]);
+                  }
+                },
+                title: t("pixelEditorRightPanel.addCurrentColour", "Add current colour"),
+                "aria-label": t("pixelEditorRightPanel.addCurrentColour", "Add current colour"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.paletteGrid, children: api.pal.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-pressed": c === api.col1,
+                onKeyDown: uiCore.clickOnActivationKey,
+                className: `${PixelEditor_module.default.paletteSwatch} ${c === api.col1 ? PixelEditor_module.default.paletteSwatchActive : ""}`,
+                style: { backgroundColor: c },
+                onClick: () => api.setCol1(c),
+                onContextMenu: (e) => {
+                  e.preventDefault();
+                  api.setCol2(c);
+                },
+                title: c
+              },
+              i
+            )) })
+          ]
+        }
+      )
+    ] });
+  }),
+  { displayName: "PixelEditorRightPanel" }
+);
+exports.default = PixelEditorRightPanel;

package/dist/cjs/pixel/PixelEditorStatusBar.js

@@ -1,22 +1,49 @@
-'use strict';
-
-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');
-
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
+const pixelEditorTypes = require("./pixelEditorTypes.js");
 const PixelEditorStatusBar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
-    var _a;
+  /* @__PURE__ */ React.memo(({ api }) => {
     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.jsx("span", { children: t('pixelEditorStatusBar.brushPx', 'Brush: {size}px {shape}')
-                    .replace('{size}', String(api.brush.size))
-                    .replace('{shape}', String(api.brush.shape)) }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.pressure', 'Pressure: {pressure}%').replace('{pressure}', String(Math.round(api.pressure * 100))) }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.layer', 'Layer: {name}').replace('{name}', String((_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.jsx("span", { children: t('pixelEditorStatusBar.sym', 'Sym: {symmetry}').replace('{symmetry}', String(api.symmetry)) })), api.shapeFilled && jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.filled', 'Filled') }), api.sel && (jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.sel', 'Sel: {w}×{h}')
-                    .replace('{w}', String(api.sel.w))
-                    .replace('{h}', String(api.sel.h)) }))] }));
-}), { displayName: 'PixelEditorStatusBar' });
-
-module.exports = PixelEditorStatusBar;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.statusBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        api.dw,
+        "×",
+        api.dh
+      ] }),
+      /* @__PURE__ */ 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) && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "(",
+        api.cursor.x,
+        ", ",
+        api.cursor.y,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: api.tool }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.brushPx", "Brush: {size}px {shape}").replace("{size}", String(api.brush.size)).replace("{shape}", String(api.brush.shape)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.pressure", "Pressure: {pressure}%").replace(
+        "{pressure}",
+        String(Math.round(api.pressure * 100))
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.layer", "Layer: {name}").replace(
+        "{name}",
+        String(api.layers[api.aLi]?.name)
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.frame", "Frame {current}/{total}").replace("{current}", String(api.afi + 1)).replace("{total}", String(api.fc)) }),
+      api.symmetry !== "none" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.sym", "Sym: {symmetry}").replace(
+        "{symmetry}",
+        String(api.symmetry)
+      ) }),
+      api.shapeFilled && /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.filled", "Filled") }),
+      api.sel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("pixelEditorStatusBar.sel", "Sel: {w}×{h}").replace("{w}", String(api.sel.w)).replace("{h}", String(api.sel.h)) })
+    ] });
+  }),
+  { displayName: "PixelEditorStatusBar" }
+);
+exports.default = PixelEditorStatusBar;