@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/pixel/PixelEditorRightPanel.js

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

package/dist/esm/pixel/PixelEditorStatusBar.js

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

package/dist/esm/pixel/PixelEditorTimeline.js

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