@nice2dev/ui-graphics 1.0.4 → 1.0.5

package/dist/esm/pixel/PixelEditor.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceModal as _s, NiceNumberInput as Ri, NiceButton as Oe } from '../ui/dist/index.js';
+import { NiceModal as Ys, NiceNumberInput as ir, NiceButton as We } from '../packages/ui/dist/index.js';
 import { usePixelEditor } from './usePixelEditor.js';
 import PixelEditorMenuBar from './PixelEditorMenuBar.js';
 import PixelEditorToolbar from './PixelEditorToolbar.js';
@@ -24,10 +24,10 @@ const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onS
                     if (f)
                         api.openFile(f);
                     e.target.value = "";
-                } }), jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxs("div", { className: styles.mainArea, children: [jsx(PixelEditorToolbar, { api: api }), jsx(PixelEditorCanvas, { api: api }), jsx(PixelEditorRightPanel, { api: api })] }), jsx(PixelEditorTimeline, { api: api }), jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsx(NiceSpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxs(_s, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "New Document", children: [jsx("label", { children: "Width (px)" }), jsx(Ri, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": "Document width" }), jsx("label", { children: "Height (px)" }), jsx(Ri, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": "Document height" }), jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8 }, children: [
+                } }), jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxs("div", { className: styles.mainArea, children: [jsx(PixelEditorToolbar, { api: api }), jsx(PixelEditorCanvas, { api: api }), jsx(PixelEditorRightPanel, { api: api })] }), jsx(PixelEditorTimeline, { api: api }), jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsx(NiceSpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxs(Ys, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "New Document", children: [jsx("label", { children: "Width (px)" }), jsx(ir, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": "Document width" }), jsx("label", { children: "Height (px)" }), jsx(ir, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": "Document height" }), jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8 }, children: [
                             [16, 16], [32, 32], [48, 48], [64, 64], [128, 128],
                             [256, 256], [16, 32], [32, 64], [48, 16], [64, 32],
-                        ].map(([w, h]) => (jsxs(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: "2px 6px" }, onClick: () => { api.setNw(w); api.setNh(h); }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(Oe, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsx(Oe, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
+                        ].map(([w, h]) => (jsxs(We, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: "2px 6px" }, onClick: () => { api.setNw(w); api.setNh(h); }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(We, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsx(We, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
 };
 /** @deprecated Use NicePixelEditor */
 const PixelEditor = NicePixelEditor;

package/dist/esm/pixel/PixelEditorMenuBar.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceButton as Oe } from '../ui/dist/index.js';
+import { NiceButton as We } from '../packages/ui/dist/index.js';
 
-const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => (jsxs("div", { className: styles.menuBar, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setDlgNew(true), children: "New" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = api.fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportAse, children: "Save .ase" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportPNG, children: "PNG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportJPG, children: "JPG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportWebP, children: "WebP" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportBMP, children: "BMP" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSVG, children: "SVG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSheet, children: "Sheet" }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] })), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, children: "Undo" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, children: "Redo" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("h"), children: "Flip H" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("v"), children: "Flip V" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.rotateCv, children: "Rot 90\u00B0" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.clearCv, children: "Clear" }), jsx("div", { className: styles.menuSep }), jsxs(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setGrid((g) => !g), children: ["Grid: ", api.grid ? "ON" : "OFF"] }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doCopy, disabled: !api.sel, children: "Copy" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doCut, disabled: !api.sel, children: "Cut" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doPaste, disabled: !api.clipboard.current, children: "Paste" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doSelectAll, children: "Sel All" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: onOpenGenerator, children: "\uD83C\uDFA8 Generator" })] })));
+const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => (jsxs("div", { className: styles.menuBar, children: [jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setDlgNew(true), children: "New" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = api.fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportAse, children: "Save .ase" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportPNG, children: "PNG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportJPG, children: "JPG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportWebP, children: "WebP" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportBMP, children: "BMP" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSVG, children: "SVG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSheet, children: "Sheet" }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] })), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, children: "Undo" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, children: "Redo" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("h"), children: "Flip H" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("v"), children: "Flip V" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.rotateCv, children: "Rot 90\u00B0" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.clearCv, children: "Clear" }), jsx("div", { className: styles.menuSep }), jsxs(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setGrid((g) => !g), children: ["Grid: ", api.grid ? "ON" : "OFF"] }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doCopy, disabled: !api.sel, children: "Copy" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doCut, disabled: !api.sel, children: "Cut" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doPaste, disabled: !api.clipboard.current, children: "Paste" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.doSelectAll, children: "Sel All" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: onOpenGenerator, children: "\uD83C\uDFA8 Generator" })] })));
 PixelEditorMenuBar.displayName = "PixelEditorMenuBar";
 
 export { PixelEditorMenuBar as default };

package/dist/esm/pixel/PixelEditorRightPanel.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceSlider as Ar, NiceButton as Oe, NiceCheckbox as ma, NiceTextInput as _t, NiceSelect as nn } from '../ui/dist/index.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(Ar, { 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(Ar, { 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(Ar, { 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(Ar, { 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(Ar, { 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(Oe, { 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(ma, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: "Pressure\u2192Size", className: styles.checkLabel }), jsx(ma, { 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(Oe, { 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(Oe, { variant: "ghost", size: "sm", onClick: api.addLayer, title: "Add Layer", "aria-label": "Add Layer", children: "+" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: "Duplicate Layer", "aria-label": "Duplicate Layer", children: "\u29C9" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: "Remove Layer", "aria-label": "Remove Layer", children: "\u2212" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: "Merge Down", "aria-label": "Merge Down", children: "\u2913" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: "Move Up", "aria-label": "Move Up", children: "\u2191" }), jsx(Oe, { 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(_t, { 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(nn, { 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(Ar, { 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(Oe, { variant: "ghost", size: "sm", onClick: () => { if (!api.pal.includes(api.col1))
+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";
 

package/dist/esm/pixel/PixelEditorTimeline.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceButton as Oe, NiceNumberInput as Ri, NiceCheckbox as ma } from '../ui/dist/index.js';
+import { NiceButton as We, NiceNumberInput as ir, NiceCheckbox as Fr } from '../packages/ui/dist/index.js';
 
-const PixelEditorTimeline = React.memo(({ api }) => (jsxs("div", { className: styles.bottomPanel, children: [jsxs("div", { className: styles.timelineControls, children: [jsx(Oe, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": "Duplicate frame", children: "Dup" }), jsx(Oe, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": "Remove frame", children: "\u2212 Frame" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), children: api.playing ? "⏸" : "▶" }), jsx("label", { children: "FPS:" }), jsx(Ri, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": "Frames per second" }), jsx("div", { className: styles.menuSep }), jsx(ma, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: "Onion" }), jsx("div", { style: { flex: 1 } }), jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? "s" : ""] })] }), 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: `Frame ${fi + 1}`, style: { width: 36, height: 36, imageRendering: "pixelated", objectFit: "contain" } })), jsx("span", { className: styles.frameNum, children: fi + 1 })] }, fi))) })] })));
+const PixelEditorTimeline = React.memo(({ api }) => (jsxs("div", { className: styles.bottomPanel, children: [jsxs("div", { className: styles.timelineControls, children: [jsx(We, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": "Duplicate frame", children: "Dup" }), jsx(We, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": "Remove frame", children: "\u2212 Frame" }), jsx("div", { className: styles.menuSep }), jsx(We, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), children: api.playing ? "⏸" : "▶" }), jsx("label", { children: "FPS:" }), jsx(ir, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": "Frames per second" }), jsx("div", { className: styles.menuSep }), jsx(Fr, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: "Onion" }), jsx("div", { style: { flex: 1 } }), jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? "s" : ""] })] }), 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: `Frame ${fi + 1}`, style: { width: 36, height: 36, imageRendering: "pixelated", objectFit: "contain" } })), jsx("span", { className: styles.frameNum, children: fi + 1 })] }, fi))) })] })));
 PixelEditorTimeline.displayName = "PixelEditorTimeline";
 
 export { PixelEditorTimeline as default };

package/dist/esm/pixel/PixelEditorToolbar.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceButton as Oe, NiceColorPicker as Nn } from '../ui/dist/index.js';
+import { NiceButton as We, NiceColorPicker as Rn } from '../packages/ui/dist/index.js';
 import { TOOLS, SYMMETRY_MODES } from './pixelEditorTypes.js';
 
-const PixelEditorToolbar = React.memo(({ api }) => (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(Oe, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ""}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, children: t.icon }, t.id))), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ""}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`, children: api.shapeFilled ? "■" : "□" }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(Oe, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ""}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, children: m.label.slice(0, 2) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: "relative", width: 28, height: 28, cursor: "pointer" }, title: "Primary Colour (click for HSV)", children: jsx(Nn, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: "relative", width: 22, height: 22, cursor: "pointer" }, title: "Secondary Colour", children: jsx(Nn, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+const PixelEditorToolbar = React.memo(({ api }) => (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(We, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ""}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, children: t.icon }, t.id))), jsx("div", { className: styles.toolSep }), jsx(We, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ""}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`, children: api.shapeFilled ? "■" : "□" }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(We, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ""}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, children: m.label.slice(0, 2) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: "relative", width: 28, height: 28, cursor: "pointer" }, title: "Primary Colour (click for HSV)", children: jsx(Rn, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: "relative", width: 22, height: 22, cursor: "pointer" }, title: "Secondary Colour", children: jsx(Rn, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                         const tmp = api.col1;
                         api.setCol1(api.col2);
                         api.setCol2(tmp);

package/dist/esm/pixel/SpriteGeneratorPanel.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import styles from './PixelEditor.module.css.js';
-import { NiceModal as _s, NiceButton as Oe, NiceSelect as nn, NiceNumberInput as Ri, NiceCheckbox as ma } from '../ui/dist/index.js';
+import { NiceModal as Ys, NiceButton as We, NiceSelect as fn, NiceNumberInput as ir, NiceCheckbox as Fr } from '../packages/ui/dist/index.js';
 import { getAllParts, assembleSprite, applyIsometricProjection, getPart, generateAllDirections, render8DirSpriteSheet, getPartsByCategory, ALL_DIRECTIONS } from './spriteGeneratorCore.js';
 import { CHARACTER_PRESETS, initCharacterParts, SKIN_PALETTES, HAIR_PALETTES, CLOTHING_PALETTES } from './characterGeneratorPresets.js';
 import { BUILDING_PRESETS, assembleBuildingFromConfig, initBuildingParts, WALL_PALETTES, ROOF_PALETTES } from './buildingGeneratorPresets.js';
@@ -195,26 +195,26 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, }) => {
         }
     }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette]);
     /* ── Render ── */
-    return (jsx(_s, { open: true, onClose: onClose, title: "Sprite Generator", children: jsxs("div", { className: styles.genPanel, children: [jsxs("div", { className: styles.genHeader, children: [jsx("h3", { children: "Sprite Generator" }), jsx(Oe, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: onClose, title: "Close", children: "\u2715" })] }), jsx("div", { className: styles.genTabs, children: ['character', 'building', 'animal'].map(t => (jsxs(Oe, { className: `${styles.genTabBtn} ${tab === t ? styles.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [t === 'character' ? '🧑' : t === 'building' ? '🏠' : '🐾', ' ', t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }), jsxs("div", { className: styles.genBody, children: [jsxs("div", { className: styles.genLeft, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Presets" }) }), jsx("div", { className: styles.genPresetGrid, children: presets.map((preset, i) => (jsx(Oe, { className: `${styles.genPresetBtn} ${i === selectedPresetIdx ? styles.genPresetBtnActive : ''}`, variant: i === selectedPresetIdx ? 'primary' : 'ghost', size: "sm", onClick: () => applyPreset(i), title: preset.name, children: preset.name }, i))) })] }), jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Parts" }) }), categories.map(cat => {
+    return (jsx(Ys, { open: true, onClose: onClose, title: "Sprite Generator", children: jsxs("div", { className: styles.genPanel, children: [jsxs("div", { className: styles.genHeader, children: [jsx("h3", { children: "Sprite Generator" }), jsx(We, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: onClose, title: "Close", children: "\u2715" })] }), jsx("div", { className: styles.genTabs, children: ['character', 'building', 'animal'].map(t => (jsxs(We, { className: `${styles.genTabBtn} ${tab === t ? styles.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [t === 'character' ? '🧑' : t === 'building' ? '🏠' : '🐾', ' ', t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }), jsxs("div", { className: styles.genBody, children: [jsxs("div", { className: styles.genLeft, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Presets" }) }), jsx("div", { className: styles.genPresetGrid, children: presets.map((preset, i) => (jsx(We, { className: `${styles.genPresetBtn} ${i === selectedPresetIdx ? styles.genPresetBtnActive : ''}`, variant: i === selectedPresetIdx ? 'primary' : 'ghost', size: "sm", onClick: () => applyPreset(i), title: preset.name, children: preset.name }, i))) })] }), jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Parts" }) }), categories.map(cat => {
                                             const parts = getPartsByCategory(cat);
                                             if (parts.length === 0)
                                                 return null;
                                             return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2, textTransform: 'uppercase' }, children: cat.replace(/([A-Z])/g, ' $1').trim() }), jsx("div", { className: styles.genPartGrid, children: parts.map(part => {
                                                             const active = selectedParts.some(p => { var _a; return p.partId === part.id && ((_a = p.visible) !== null && _a !== void 0 ? _a : true); });
-                                                            return (jsx(Oe, { className: `${styles.miniBtn} ${active ? styles.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => active ? removePart(part.id) : addPart(part.id), title: part.name, children: part.name.slice(0, 8) }, part.id));
+                                                            return (jsx(We, { className: `${styles.miniBtn} ${active ? styles.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => active ? removePart(part.id) : addPart(part.id), title: part.name, children: part.name.slice(0, 8) }, part.id));
                                                         }) })] }, cat));
-                                        })] })] }), jsxs("div", { className: styles.genCenter, children: [jsx("div", { className: styles.genPreviewWrap, children: jsx("canvas", { ref: previewRef, className: styles.genPreviewCanvas }) }), jsx("div", { className: styles.genDirGrid, children: ALL_DIRECTIONS.map(d => (jsx(Oe, { className: `${styles.miniBtn} ${direction === d ? styles.miniBtnActive : ''}`, variant: direction === d ? 'primary' : 'ghost', size: "sm", onClick: () => setDirection(d), children: d }, d))) }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Projection" }), jsx(nn, { className: styles.propSelect, value: projection, onChange: val => setProjection(val), options: [
+                                        })] })] }), jsxs("div", { className: styles.genCenter, children: [jsx("div", { className: styles.genPreviewWrap, children: jsx("canvas", { ref: previewRef, className: styles.genPreviewCanvas }) }), jsx("div", { className: styles.genDirGrid, children: ALL_DIRECTIONS.map(d => (jsx(We, { className: `${styles.miniBtn} ${direction === d ? styles.miniBtnActive : ''}`, variant: direction === d ? 'primary' : 'ghost', size: "sm", onClick: () => setDirection(d), children: d }, d))) }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Projection" }), jsx(fn, { className: styles.propSelect, value: projection, onChange: val => setProjection(val), options: [
                                                 { value: 'topDown', label: 'Top-Down' },
                                                 { value: 'sideView', label: 'Side View' },
                                                 { value: 'iso25d', label: '2.5D Isometric' },
-                                            ] })] }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Size" }), jsx(Ri, { className: styles.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasW, onChange: val => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsx("span", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "\u00D7" }), jsx(Ri, { className: styles.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasH, onChange: val => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsx(ma, { checked: generate8Dir, onChange: checked => setGenerate8Dir(checked), label: "Generate 8-direction sheet", className: styles.checkLabel })] }), jsxs("div", { className: styles.genRight, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Colors" }) }), paletteGroups.map(group => {
+                                            ] })] }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Size" }), jsx(ir, { className: styles.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasW, onChange: val => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsx("span", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "\u00D7" }), jsx(ir, { className: styles.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasH, onChange: val => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsx(Fr, { checked: generate8Dir, onChange: checked => setGenerate8Dir(checked), label: "Generate 8-direction sheet", className: styles.checkLabel })] }), jsxs("div", { className: styles.genRight, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Colors" }) }), paletteGroups.map(group => {
                                             var _a;
-                                            return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2 }, children: group.label }), jsx(nn, { className: styles.propSelect, value: group.value, onChange: val => group.set(val), options: group.options.map(opt => ({ value: opt.id, label: opt.name })) }), jsx("div", { className: styles.genColorSwatches, children: (_a = group.options.find(o => o.id === group.value)) === null || _a === void 0 ? void 0 : _a.colors.map((c, i) => (jsx("div", { className: styles.genColorSwatch, style: { backgroundColor: c }, title: c }, i))) })] }, group.label));
+                                            return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2 }, children: group.label }), jsx(fn, { className: styles.propSelect, value: group.value, onChange: val => group.set(val), options: group.options.map(opt => ({ value: opt.id, label: opt.name })) }), jsx("div", { className: styles.genColorSwatches, children: (_a = group.options.find(o => o.id === group.value)) === null || _a === void 0 ? void 0 : _a.colors.map((c, i) => (jsx("div", { className: styles.genColorSwatch, style: { backgroundColor: c }, title: c }, i))) })] }, group.label));
                                         })] }), jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Assembly" }) }), selectedParts.map((ap, i) => {
                                             var _a, _b, _c, _d;
                                             const part = partsMapRef.current.get(ap.partId);
-                                            return (jsxs("div", { className: styles.genAssemblyItem, children: [jsx(Oe, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true) ? 'Hide' : 'Show', children: ((_b = ap.visible) !== null && _b !== void 0 ? _b : true) ? '👁' : '─' }), jsx("span", { className: styles.genAssemblyName, children: (_c = part === null || part === void 0 ? void 0 : part.name) !== null && _c !== void 0 ? _c : ap.partId }), jsxs("span", { style: { fontSize: 9, color: 'var(--gray-700)' }, children: ["z:", (_d = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _d !== void 0 ? _d : 0] }), jsx(Oe, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: "Remove", children: "\u2715" })] }, ap.partId));
-                                        })] })] })] }), jsxs("div", { className: styles.genFooter, children: [jsx(Oe, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: "Cancel" }), jsx(Oe, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: "\uD83D\uDCCB Send to Canvas" })] })] }) }));
+                                            return (jsxs("div", { className: styles.genAssemblyItem, children: [jsx(We, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true) ? 'Hide' : 'Show', children: ((_b = ap.visible) !== null && _b !== void 0 ? _b : true) ? '👁' : '─' }), jsx("span", { className: styles.genAssemblyName, children: (_c = part === null || part === void 0 ? void 0 : part.name) !== null && _c !== void 0 ? _c : ap.partId }), jsxs("span", { style: { fontSize: 9, color: 'var(--gray-700)' }, children: ["z:", (_d = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _d !== void 0 ? _d : 0] }), jsx(We, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: "Remove", children: "\u2715" })] }, ap.partId));
+                                        })] })] })] }), jsxs("div", { className: styles.genFooter, children: [jsx(We, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: "Cancel" }), jsx(We, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: "\uD83D\uDCCB Send to Canvas" })] })] }) }));
 };
 NiceSpriteGeneratorPanel.displayName = 'NiceSpriteGeneratorPanel';
 

package/dist/esm/vector/VectorEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceButton as Oe, NiceModal as _s, NiceTextArea as ms } from '../ui/dist/index.js';
+import { NiceButton as We, NiceModal as Ys, NiceTextArea as Os } from '../packages/ui/dist/index.js';
 import styles from './VectorEditor.module.css.js';
 import { TOOLS } from './vectorEditorTypes.js';
 import { ShapeRenderer } from './VectorEditorShapeRenderer.js';
@@ -17,13 +17,13 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
                     if (f)
                         openFile(f);
                     e.target.value = "";
-                } }), jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxs("div", { className: styles.mainArea, children: [jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(Oe, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ""}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? "primary" : "ghost", size: "sm", children: t.icon }, t.id))) }), jsx("div", { ref: boxRef, className: styles.canvasContainer, children: jsxs("svg", { viewBox: `0 0 ${artW} ${artH}`, onMouseDown: onDown, onMouseMove: onMove, onMouseUp: onUp, onMouseLeave: () => {
+                } }), jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxs("div", { className: styles.mainArea, children: [jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(We, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ""}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? "primary" : "ghost", size: "sm", children: t.icon }, t.id))) }), jsx("div", { ref: boxRef, className: styles.canvasContainer, children: jsxs("svg", { viewBox: `0 0 ${artW} ${artH}`, onMouseDown: onDown, onMouseMove: onMove, onMouseUp: onUp, onMouseLeave: () => {
                                 /* handled internally via refs */
                             }, onDoubleClick: onDblClick, onWheel: onWheel, onContextMenu: (e) => e.preventDefault(), style: {
                                 transform: `translate(${px}px, ${py}px) scale(${zoom})`,
                                 transformOrigin: "center center",
                                 cursor: tool === "pointer" ? "default" : "crosshair",
-                            }, children: [jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsx(VectorEditorRightPanel, { api: api })] }), jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxs(_s, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(ms, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(Oe, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(Oe, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] })] }));
+                            }, children: [jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsx(VectorEditorRightPanel, { api: api })] }), jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxs(Ys, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(Os, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(We, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(We, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] })] }));
 };
 /** @deprecated Use NiceVectorEditor */
 const VectorEditor = NiceVectorEditor;

package/dist/esm/vector/VectorEditorMenuBar.js

@@ -1,16 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import { NiceButton as Oe, NiceSelect as nn, NiceCheckbox as ma } from '../ui/dist/index.js';
+import { NiceButton as We, NiceSelect as fn, NiceCheckbox as Fr } from '../packages/ui/dist/index.js';
 import styles from './VectorEditor.module.css.js';
 
 const VectorEditorMenuBar$1 = ({ api, hasOnSaveToLibrary }) => {
     const { selId, hasClipboard, snapGrid, fInp, shapes, boolSecondShape, newCanvas, setDlgSvg, setBoolSecondShape, exportSVG, exportPNG, exportJPG, exportWebP, exportBMP, undo, redo, duplicateShape, copyShape, pasteShape, deleteShape, bringToFront, sendToBack, flipH, flipV, alignShapes, setSnapGrid, saveToLibrary, unionShapes, subtractShapes, intersectShapes, excludeShapes, outlineStroke, } = api;
     // Check if we can perform boolean ops (need 2 shapes selected)
     const canBool = selId && boolSecondShape && selId !== boolSecondShape;
-    return (jsxs("div", { className: styles.menuBar, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: newCanvas, children: "New" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open SVG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setDlgSvg(true), children: "Paste SVG" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportSVG, children: "SVG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportPNG, children: "PNG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportJPG, children: "JPG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportWebP, children: "WebP" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportBMP, children: "BMP" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: undo, children: "Undo" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: redo, children: "Redo" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateShape, disabled: !selId, "aria-label": "Ctrl+D", children: "Dup" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: copyShape, disabled: !selId, "aria-label": "Ctrl+C", children: "Copy" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: pasteShape, disabled: !hasClipboard, "aria-label": "Ctrl+V", children: "Paste" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteShape, disabled: !selId, children: "Delete" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: bringToFront, disabled: !selId, children: "\u2191 Front" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: sendToBack, disabled: !selId, children: "\u2193 Back" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipH, disabled: !selId, "aria-label": "Flip H", children: "\u21D4" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipV, disabled: !selId, "aria-label": "Flip V", children: "\u21D5" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("left"), disabled: !selId, "aria-label": "Align Left", children: "\u25E7" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("center"), disabled: !selId, "aria-label": "Align Center", children: "\u25EB" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("right"), disabled: !selId, "aria-label": "Align Right", children: "\u25E8" }), jsx("div", { className: styles.menuSep }), shapes.length >= 2 && (jsxs(Fragment, { children: [jsx(nn, { className: styles.menuBtn, value: boolSecondShape || "", onChange: (val) => setBoolSecondShape(val || null), options: [
+    return (jsxs("div", { className: styles.menuBar, children: [jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: newCanvas, children: "New" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open SVG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setDlgSvg(true), children: "Paste SVG" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportSVG, children: "SVG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportPNG, children: "PNG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportJPG, children: "JPG" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportWebP, children: "WebP" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportBMP, children: "BMP" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: undo, children: "Undo" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: redo, children: "Redo" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateShape, disabled: !selId, "aria-label": "Ctrl+D", children: "Dup" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: copyShape, disabled: !selId, "aria-label": "Ctrl+C", children: "Copy" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: pasteShape, disabled: !hasClipboard, "aria-label": "Ctrl+V", children: "Paste" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteShape, disabled: !selId, children: "Delete" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: bringToFront, disabled: !selId, children: "\u2191 Front" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: sendToBack, disabled: !selId, children: "\u2193 Back" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipH, disabled: !selId, "aria-label": "Flip H", children: "\u21D4" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipV, disabled: !selId, "aria-label": "Flip V", children: "\u21D5" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("left"), disabled: !selId, "aria-label": "Align Left", children: "\u25E7" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("center"), disabled: !selId, "aria-label": "Align Center", children: "\u25EB" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("right"), disabled: !selId, "aria-label": "Align Right", children: "\u25E8" }), jsx("div", { className: styles.menuSep }), shapes.length >= 2 && (jsxs(Fragment, { children: [jsx(fn, { className: styles.menuBtn, value: boolSecondShape || "", onChange: (val) => setBoolSecondShape(val || null), options: [
                             { value: "", label: "2nd Shape" },
                             ...shapes.filter(s => s.id !== selId).map((s, i) => ({ value: s.id, label: `Shape ${i + 1}` })),
-                        ], style: { minWidth: 80 } }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: unionShapes, disabled: !canBool, "aria-label": "Union", children: "\u222A" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: subtractShapes, disabled: !canBool, "aria-label": "Subtract", children: "\u2212" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: intersectShapes, disabled: !canBool, "aria-label": "Intersect", children: "\u2229" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: excludeShapes, disabled: !canBool, "aria-label": "Exclude", children: "\u2295" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: outlineStroke, disabled: !selId, "aria-label": "Outline Stroke", children: "\u25AD" }), jsx("div", { className: styles.menuSep })] })), jsxs("label", { className: styles.menuLabel, children: [jsx(ma, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), "Snap"] }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] }))] }));
+                        ], style: { minWidth: 80 } }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: unionShapes, disabled: !canBool, "aria-label": "Union", children: "\u222A" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: subtractShapes, disabled: !canBool, "aria-label": "Subtract", children: "\u2212" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: intersectShapes, disabled: !canBool, "aria-label": "Intersect", children: "\u2229" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: excludeShapes, disabled: !canBool, "aria-label": "Exclude", children: "\u2295" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: outlineStroke, disabled: !selId, "aria-label": "Outline Stroke", children: "\u25AD" }), jsx("div", { className: styles.menuSep })] })), jsxs("label", { className: styles.menuLabel, children: [jsx(Fr, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), "Snap"] }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] }))] }));
 };
 var VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);
 

package/dist/esm/vector/VectorEditorRightPanel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState } from 'react';
-import { NiceButton as Oe, NiceColorPicker as Nn, NiceTextInput as _t, NiceSelect as nn, NiceSlider as Ar, NiceNumberInput as Ri } from '../ui/dist/index.js';
+import { NiceButton as We, NiceColorPicker as Rn, NiceTextInput as Tt, NiceSelect as fn, NiceSlider as so, NiceNumberInput as ir } from '../packages/ui/dist/index.js';
 import styles from './VectorEditor.module.css.js';
 import { FONTS } from './vectorEditorTypes.js';
 import { PRESET_GRADIENTS, gradientToCSS, gradientId, cloneGradient } from './vectorGradients.js';
@@ -21,14 +21,14 @@ const VectorEditorRightPanel$1 = ({ api }) => {
             // Store gradient data as custom property (will be used in SVG export)
         });
     };
-    return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Appearance" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Fill" }), jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsx(Oe, { className: `${styles.menuBtn} ${fillMode === "solid" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "solid" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("solid"), children: "Solid" }), jsx(Oe, { className: `${styles.menuBtn} ${fillMode === "gradient" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "gradient" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("gradient"), children: "Gradient" })] })] }), fillMode === "solid" ? (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel }), jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: jsx(Nn, { value: fillCol, onChange: (c) => { setFillCol(c); updateSel({ fill: c }); } }) }), jsx(_t, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => { setFillCol(val); updateSel({ fill: val }); } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: "wrap", gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { style: {
+    return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Appearance" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Fill" }), jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsx(We, { className: `${styles.menuBtn} ${fillMode === "solid" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "solid" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("solid"), children: "Solid" }), jsx(We, { className: `${styles.menuBtn} ${fillMode === "gradient" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "gradient" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("gradient"), children: "Gradient" })] })] }), fillMode === "solid" ? (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel }), jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: jsx(Rn, { value: fillCol, onChange: (c) => { setFillCol(c); updateSel({ fill: c }); } }) }), jsx(Tt, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => { setFillCol(val); updateSel({ fill: val }); } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: "wrap", gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { style: {
                                         width: 24,
                                         height: 24,
                                         borderRadius: 4,
                                         background: gradientToCSS(grad),
                                         cursor: "pointer",
                                         border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id ? "2px solid #fff" : "1px solid #444",
-                                    }, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: showGradientEditor ? "▼ Hide Editor" : "► Edit Gradient" }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: { padding: 4, background: "#252525", borderRadius: 4, margin: "4px 0" }, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Type" }), jsx(nn, { className: styles.propInput, value: selectedGradient.type, onChange: (val) => {
+                                    }, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: showGradientEditor ? "▼ Hide Editor" : "► Edit Gradient" }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: { padding: 4, background: "#252525", borderRadius: 4, margin: "4px 0" }, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Type" }), jsx(fn, { className: styles.propInput, value: selectedGradient.type, onChange: (val) => {
                                                     const type = val;
                                                     let newGrad;
                                                     if (type === "linear") {
@@ -54,7 +54,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                 }, options: [
                                                     { value: "linear", label: "Linear" },
                                                     { value: "radial", label: "Radial" },
-                                                ] })] }), selectedGradient.type === "linear" && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(Ar, { className: styles.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
+                                                ] })] }), selectedGradient.type === "linear" && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(so, { className: styles.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
                                                     const newGrad = {
                                                         ...selectedGradient,
                                                         id: gradientId(),
@@ -62,7 +62,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                     };
                                                     setSelectedGradient(newGrad);
                                                     updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CX" }), jsx(Ar, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
+                                                } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CX" }), jsx(so, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
                                                             const newGrad = {
                                                                 ...selectedGradient,
                                                                 id: gradientId(),
@@ -70,7 +70,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                             };
                                                             setSelectedGradient(newGrad);
                                                             updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CY" }), jsx(Ar, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
+                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CY" }), jsx(so, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
                                                             const newGrad = {
                                                                 ...selectedGradient,
                                                                 id: gradientId(),
@@ -78,7 +78,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                             };
                                                             setSelectedGradient(newGrad);
                                                             updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "R" }), jsx(Ar, { className: styles.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
+                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "R" }), jsx(so, { className: styles.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
                                                             const newGrad = {
                                                                 ...selectedGradient,
                                                                 id: gradientId(),
@@ -86,33 +86,33 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                             };
                                                             setSelectedGradient(newGrad);
                                                             updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] })] })), jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(Nn, { value: stop.color, style: { width: 24, height: 20 }, onChange: (color) => {
+                                                        } })] })] })), jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(Rn, { value: stop.color, style: { width: 24, height: 20 }, onChange: (color) => {
                                                     const newStops = [...selectedGradient.stops];
                                                     newStops[i] = { ...newStops[i], color };
                                                     const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                     setSelectedGradient(newGrad);
                                                     updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsx(Ar, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
+                                                } }), jsx(so, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
                                                     const newStops = [...selectedGradient.stops];
                                                     newStops[i] = { ...newStops[i], offset: val / 100 };
                                                     newStops.sort((a, b) => a.offset - b.offset);
                                                     const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                     setSelectedGradient(newGrad);
                                                     updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
+                                                } }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
                                                     const newStops = [...selectedGradient.stops, { offset: 0.5, color: "#888888" }];
                                                     newStops.sort((a, b) => a.offset - b.offset);
                                                     const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                     setSelectedGradient(newGrad);
                                                     updateSel({ fill: `url(#${newGrad.id})` });
-                                                }, children: "+ Add Stop" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
+                                                }, children: "+ Add Stop" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
                                                     if (selectedGradient.stops.length <= 2)
                                                         return;
                                                     const newStops = selectedGradient.stops.slice(0, -1);
                                                     const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                     setSelectedGradient(newGrad);
                                                     updateSel({ fill: `url(#${newGrad.id})` });
-                                                }, children: "- Remove" })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Stroke" }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(Nn, { value: strokeCol, onChange: (c) => { setStrokeCol(c); updateSel({ stroke: c }); } }) }), jsx(_t, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => { setStrokeCol(val); updateSel({ stroke: val }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Width" }), jsx(Ri, { className: styles.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setStrokeW(v); updateSel({ strokeWidth: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(Ar, { className: styles.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => { setShapeOpacity(val); updateSel({ opacity: val }); } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rotation" }), jsx(Ri, { className: styles.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Tool Options" }) }), (tool === "roundrect" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "roundrect") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Radius" }), jsx(Ri, { className: styles.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setCornerRadius(v); updateSel({ rx: v }); } })] })), (tool === "polygon" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "polygon") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Sides" }), jsx(Ri, { className: styles.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setPolygonSides(v); updateSel({ sides: v }); } })] })), (tool === "star" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "star") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Points" }), jsx(Ri, { className: styles.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setStarPoints2(v); updateSel({ sides: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Inner R" }), jsx(Ar, { className: styles.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => { setStarInnerRatio(val); updateSel({ innerRadius: val }); } }), jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === "text" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "text") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Size" }), jsx(Ri, { className: styles.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 12; setFontSize(v); updateSel({ fontSize: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Font" }), jsx(nn, { className: styles.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => { setFontFamily(val); updateSel({ fontFamily: val }); }, options: FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(Ri, { className: styles.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsxs("span", { children: ["Shapes (", shapes.length, ")"] }) }), [...shapes].reverse().map((s) => (jsxs("div", { className: `${styles.shapeItem} ${s.id === selId ? styles.shapeItemActive : ""}`, onClick: () => { setSelId(s.id); setTool("pointer"); }, children: [jsx("span", { className: styles.shapeIcon, children: s.type === "rect" ? "▢"
+                                                }, children: "- Remove" })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Stroke" }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(Rn, { value: strokeCol, onChange: (c) => { setStrokeCol(c); updateSel({ stroke: c }); } }) }), jsx(Tt, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => { setStrokeCol(val); updateSel({ stroke: val }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Width" }), jsx(ir, { className: styles.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setStrokeW(v); updateSel({ strokeWidth: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(so, { className: styles.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => { setShapeOpacity(val); updateSel({ opacity: val }); } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rotation" }), jsx(ir, { className: styles.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Tool Options" }) }), (tool === "roundrect" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "roundrect") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Radius" }), jsx(ir, { className: styles.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setCornerRadius(v); updateSel({ rx: v }); } })] })), (tool === "polygon" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "polygon") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Sides" }), jsx(ir, { className: styles.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setPolygonSides(v); updateSel({ sides: v }); } })] })), (tool === "star" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "star") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Points" }), jsx(ir, { className: styles.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setStarPoints2(v); updateSel({ sides: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Inner R" }), jsx(so, { className: styles.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => { setStarInnerRatio(val); updateSel({ innerRadius: val }); } }), jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === "text" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "text") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Size" }), jsx(ir, { className: styles.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 12; setFontSize(v); updateSel({ fontSize: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Font" }), jsx(fn, { className: styles.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => { setFontFamily(val); updateSel({ fontFamily: val }); }, options: FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(ir, { className: styles.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsxs("span", { children: ["Shapes (", shapes.length, ")"] }) }), [...shapes].reverse().map((s) => (jsxs("div", { className: `${styles.shapeItem} ${s.id === selId ? styles.shapeItemActive : ""}`, onClick: () => { setSelId(s.id); setTool("pointer"); }, children: [jsx("span", { className: styles.shapeIcon, children: s.type === "rect" ? "▢"
                                     : s.type === "roundrect" ? "▣"
                                         : s.type === "ellipse" ? "◯"
                                             : s.type === "line" ? "╱"
@@ -120,7 +120,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
                                                     : s.type === "polygon" ? "⬡"
                                                         : s.type === "star" ? "★"
                                                             : s.type === "polyline" ? "✎"
-                                                                : "T" }), jsxs("span", { className: styles.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Transform" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "X" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Y" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "W" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "H" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
+                                                                : "T" }), jsxs("span", { className: styles.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Transform" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "X" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Y" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "W" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "H" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
 };
 var VectorEditorRightPanel = React.memo(VectorEditorRightPanel$1);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-graphics",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",