@nice2dev/ui-graphics 1.0.3 → 1.0.4

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 ko, NiceButton as Ee, NiceSelect as tn, NiceNumberInput as vi, NiceCheckbox as qi } from '../ui/dist/index.js';
+import { NiceModal as _s, NiceButton as Oe, NiceSelect as nn, NiceNumberInput as Ri, NiceCheckbox as ma } from '../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(ko, { 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(Ee, { 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(Ee, { 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(Ee, { 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(_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 => {
                                             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(Ee, { 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(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));
                                                         }) })] }, 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(Ee, { 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(tn, { 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(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: [
                                                 { 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(vi, { 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(vi, { className: styles.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasH, onChange: val => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsx(qi, { 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(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 => {
                                             var _a;
-                                            return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2 }, children: group.label }), jsx(tn, { 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(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));
                                         })] }), 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(Ee, { 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(Ee, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: "Remove", children: "\u2715" })] }, ap.partId));
-                                        })] })] })] }), jsxs("div", { className: styles.genFooter, children: [jsx(Ee, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: "Cancel" }), jsx(Ee, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: "\uD83D\uDCCB Send to Canvas" })] })] }) }));
+                                            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" })] })] }) }));
 };
 NiceSpriteGeneratorPanel.displayName = 'NiceSpriteGeneratorPanel';
 

package/dist/esm/pixel/pixel-pro.js

@@ -0,0 +1,65 @@
+/**
+ * Pixel Art Editor Pro — Aseprite-class features: Indexed color,
+ * onion skinning, animation tags, tilemap, sprite slicing,
+ * reference layer, symmetry, pixel-perfect, dithering, outline FX,
+ * palette generation, retro constraints, isometric, autotile, export.
+ *
+ * PRO-4.3 — 20 items
+ *
+ * @module @nice2dev/ui-graphics/pixel/pixel-pro
+ */
+const RETRO_PRESETS = {
+    nes: {
+        console: 'nes',
+        maxColors: 4,
+        maxPalettes: 8,
+        width: 256,
+        height: 240,
+        spriteWidth: 8,
+        spriteHeight: 16,
+        maxSprites: 64,
+    },
+    snes: {
+        console: 'snes',
+        maxColors: 16,
+        maxPalettes: 8,
+        width: 256,
+        height: 224,
+        spriteWidth: 64,
+        spriteHeight: 64,
+        maxSprites: 128,
+    },
+    'game-boy': {
+        console: 'game-boy',
+        maxColors: 4,
+        maxPalettes: 2,
+        width: 160,
+        height: 144,
+        spriteWidth: 8,
+        spriteHeight: 16,
+        maxSprites: 40,
+    },
+    c64: {
+        console: 'c64',
+        maxColors: 16,
+        maxPalettes: 1,
+        width: 320,
+        height: 200,
+        spriteWidth: 24,
+        spriteHeight: 21,
+        maxSprites: 8,
+    },
+    'pico-8': {
+        console: 'pico-8',
+        maxColors: 16,
+        maxPalettes: 1,
+        width: 128,
+        height: 128,
+        spriteWidth: 8,
+        spriteHeight: 8,
+        maxSprites: 128,
+    },
+};
+
+export { RETRO_PRESETS };
+//# sourceMappingURL=pixel-pro.js.map

package/dist/esm/pixel/pixel-pro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-pro.js","sources":["../../../src/pixel/pixel-pro.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;AASG;AA2OI,MAAM,aAAa,GAAqC;AAC7D,IAAA,GAAG,EAAE;AACH,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,EAAE;AACf,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,UAAU;AACnB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,EAAE;AACf,KAAA;AACD,IAAA,GAAG,EAAE;AACH,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,CAAC;AACd,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;;;;;"}