import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import styles from './PixelEditor.module.css.js';
import { NiceSlider as so, NiceButton as We, NiceCheckbox as Fr, NiceTextInput as Tt, NiceSelect as fn } from '../packages/ui/dist/index.js';
import { BRUSH_SHAPES, BLEND_MODES } from './pixelEditorTypes.js';
import { HSVPicker } from './HSVPicker.js';

const PixelEditorRightPanel = React.memo(({ api }) => (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Brush" }) }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: "Size" }), jsx(so, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": "Brush size" }), jsx("span", { children: api.brush.size })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: "Opacity" }), jsx(so, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": "Brush opacity" }), jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: "Flow" }), jsx(so, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": "Brush flow" }), jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: "Hard" }), jsx(so, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": "Brush hardness" }), jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxs("div", { className: styles.brushSlider, children: [jsx("label", { children: "Space" }), jsx(so, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": "Brush spacing" }), jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsx("div", { className: styles.brushShapes, children: BRUSH_SHAPES.map((s) => (jsx(We, { 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, children: s.icon }, s.id))) }), jsxs("div", { className: styles.pressureToggles, children: [jsx(Fr, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: "Pressure\u2192Size", className: styles.checkLabel }), jsx(Fr, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: "Pressure\u2192Opacity", className: styles.checkLabel })] })] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx("span", { children: "Colour" }), jsx(We, { variant: "ghost", size: "sm", onClick: () => api.setShowHSV(!api.showHSV), title: "Toggle HSV Picker", children: api.showHSV ? "▾" : "▸" })] }), api.showHSV && jsx(HSVPicker, { color: api.col1, onChange: api.setCol1 })] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx("span", { children: "Layers" }), jsxs("span", { children: [jsx(We, { variant: "ghost", size: "sm", onClick: api.addLayer, title: "Add Layer", "aria-label": "Add Layer", children: "+" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: "Duplicate Layer", "aria-label": "Duplicate Layer", children: "\u29C9" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: "Remove Layer", "aria-label": "Remove Layer", children: "\u2212" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: "Merge Down", "aria-label": "Merge Down", children: "\u2913" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: "Move Up", "aria-label": "Move Up", children: "\u2191" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: "Move Down", "aria-label": "Move Down", children: "\u2193" })] })] }), [...api.layers].map((l, i) => ({ l, i })).reverse().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) => { e.stopPropagation(); api.toggleVis(i); }, children: l.visible ? "👁" : "─" }), jsx("span", { className: styles.layerLock, onClick: (e) => { e.stopPropagation(); api.toggleLock(i); }, title: l.locked ? "Locked" : "Unlocked", children: l.locked ? "🔒" : "🔓" }), api.editingLayerName === l.id ? (jsx(Tt, { 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": "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(fn, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: styles.blendSelect, "aria-label": "Blend mode", options: BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsx(so, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: styles.layerOpSlider, title: `Opacity: ${Math.round((api.layers[api.aLi].opacity / 255) * 100)}%` })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx("span", { children: "Palette" }), jsx(We, { variant: "ghost", size: "sm", onClick: () => { if (!api.pal.includes(api.col1))
                                api.setPal((p) => [...p, api.col1]); }, title: "Add current colour", children: "+" })] }), 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) => { e.preventDefault(); api.setCol2(c); }, title: c }, i))) })] })] })));
PixelEditorRightPanel.displayName = "PixelEditorRightPanel";

export { PixelEditorRightPanel as default };
//# sourceMappingURL=PixelEditorRightPanel.js.map
