@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/cjs/pixel/SpriteGeneratorPanel.js

@@ -1,321 +1,501 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var i18n = require('../core/i18n.js');
-var animalGeneratorPresets = require('./animalGeneratorPresets.js');
-var buildingGeneratorPresets = require('./buildingGeneratorPresets.js');
-var characterGeneratorPresets = require('./characterGeneratorPresets.js');
-var PixelEditor_module = require('./PixelEditor.module.css.js');
-var spriteGeneratorCore = require('./spriteGeneratorCore.js');
-
-/* ════════════════════════════════════════════════════════════════
-   INITIALIZATION
-   ════════════════════════════════════════════════════════════════ */
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const animalGeneratorPresets = require("./animalGeneratorPresets.js");
+const buildingGeneratorPresets = require("./buildingGeneratorPresets.js");
+const characterGeneratorPresets = require("./characterGeneratorPresets.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
+const spriteGeneratorCore = require("./spriteGeneratorCore.js");
 let _initialized = false;
 function ensureInitialized() {
-    if (_initialized) {
-        return;
-    }
-    _initialized = true;
-    characterGeneratorPresets.initCharacterParts();
-    buildingGeneratorPresets.initBuildingParts();
-    animalGeneratorPresets.initAnimalParts();
+  if (_initialized) {
+    return;
+  }
+  _initialized = true;
+  characterGeneratorPresets.initCharacterParts();
+  buildingGeneratorPresets.initBuildingParts();
+  animalGeneratorPresets.initAnimalParts();
 }
-/* ════════════════════════════════════════════════════════════════
-   HELPERS
-   ════════════════════════════════════════════════════════════════ */
 function palettesToOptions(palettes) {
-    return Object.entries(palettes).map(([id, colors]) => ({
-        id,
-        name: id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
-        colors,
-    }));
+  return Object.entries(palettes).map(([id, colors]) => ({
+    id,
+    name: id.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+    colors
+  }));
 }
 const CHAR_CATEGORIES = [
-    'head',
-    'hair',
-    'face',
-    'torso',
-    'arm',
-    'leg',
-    'hat',
-    'helmet',
-    'armor',
-    'cape',
-    'weapon',
-    'shield',
+  "head",
+  "hair",
+  "face",
+  "torso",
+  "arm",
+  "leg",
+  "hat",
+  "helmet",
+  "armor",
+  "cape",
+  "weapon",
+  "shield"
 ];
 const BUILDING_CATEGORIES = [
-    'foundation',
-    'wall',
-    'floor',
-    'roof',
-    'door',
-    'window',
-    'chimney',
-    'decoration',
+  "foundation",
+  "wall",
+  "floor",
+  "roof",
+  "door",
+  "window",
+  "chimney",
+  "decoration"
 ];
 const ANIMAL_CATEGORIES = [
-    'animalHead',
-    'animalBody',
-    'animalLeg',
-    'animalTail',
-    'animalWing',
-    'animalMane',
+  "animalHead",
+  "animalBody",
+  "animalLeg",
+  "animalTail",
+  "animalWing",
+  "animalMane"
 ];
-const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
-// presets and onGenerate are exposed for forward-compat; not currently consumed.
- }) => {
-    const { t } = i18n.useNiceTranslation();
-    ensureInitialized();
-    /* ── State ── */
-    const [tab, setTab] = React.useState(mode !== null && mode !== void 0 ? mode : 'character');
-    const [selectedPresetIdx, setSelectedPresetIdx] = React.useState(0);
-    const [selectedParts, setSelectedParts] = React.useState([]);
-    const [canvasW, setCanvasW] = React.useState(32);
-    const [canvasH, setCanvasH] = React.useState(32);
-    const [direction, setDirection] = React.useState('S');
-    const [projection, setProjection] = React.useState('topDown');
-    const [generate8Dir, setGenerate8Dir] = React.useState(false);
-    // Color overrides
-    const [skinPalette, setSkinPalette] = React.useState('light');
-    const [hairPalette, setHairPalette] = React.useState('brown');
-    const [clothPalette, setClothPalette] = React.useState('leather');
-    const [furPalette, setFurPalette] = React.useState('orange');
-    const [wallPalette, setWallPalette] = React.useState('grey_stone');
-    const [roofPalette, setRoofPalette] = React.useState('terracotta');
-    const previewRef = React.useRef(null);
-    const partsMapRef = React.useRef(new Map());
-    /* ── Build parts map ── */
-    React.useEffect(() => {
-        const map = new Map();
-        for (const p of spriteGeneratorCore.getAllParts()) {
-            map.set(p.id, p);
-        }
-        partsMapRef.current = map;
-    }, []);
-    /* ── Get presets for current tab ── */
-    const presets = React.useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return characterGeneratorPresets.CHARACTER_PRESETS;
-            case 'building':
-                return buildingGeneratorPresets.BUILDING_PRESETS;
-            case 'animal':
-                return animalGeneratorPresets.ANIMAL_PRESETS;
-        }
-    }, [tab]);
-    /* ── Apply preset ── */
-    const applyPreset = React.useCallback((presetIdx) => {
-        setSelectedPresetIdx(presetIdx);
-        const preset = presets[presetIdx];
-        if (!preset) {
-            return;
-        }
-        if (tab === 'building') {
-            const bp = preset;
-            const assembly = buildingGeneratorPresets.assembleBuildingFromConfig(bp.config);
-            setSelectedParts(assembly.parts);
-            setCanvasW(assembly.canvasWidth);
-            setCanvasH(assembly.canvasHeight);
-        }
-        else {
-            const cp = preset;
-            const assembly = cp.assembly;
-            setSelectedParts([...assembly.parts]);
-            setCanvasW(assembly.canvasWidth);
-            setCanvasH(assembly.canvasHeight);
-        }
-    }, [tab, presets]);
-    /* ── Initial preset ── */
-    React.useEffect(() => {
-        applyPreset(0);
-    }, [tab, applyPreset]);
-    /* ── Build current assembly ── */
-    const currentAssembly = React.useMemo(() => {
-        var _a;
-        return ({
-            id: `gen_${tab}_${selectedPresetIdx}`,
-            name: ((_a = presets[selectedPresetIdx]) === null || _a === void 0 ? void 0 : _a.name) || 'Custom',
-            parts: selectedParts,
-            canvasWidth: canvasW,
-            canvasHeight: canvasH,
-            projection,
-        });
-    }, [tab, selectedPresetIdx, selectedParts, canvasW, canvasH, projection, presets]);
-    /* ── Render preview ── */
-    React.useEffect(() => {
-        const canvas = previewRef.current;
-        if (!canvas) {
-            return;
-        }
-        const img = spriteGeneratorCore.assembleSprite(currentAssembly, partsMapRef.current, direction);
-        let finalImg = img;
-        if (projection === 'iso25d') {
-            finalImg = spriteGeneratorCore.applyIsometricProjection(img);
-        }
-        canvas.width = finalImg.width;
-        canvas.height = finalImg.height;
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.putImageData(finalImg, 0, 0);
-        }
-    }, [currentAssembly, direction, projection]);
-    /* ── Toggle part visibility ── */
-    const togglePart = React.useCallback((partId) => {
-        setSelectedParts((prev) => prev.map((p) => { var _a; return (p.partId === partId ? { ...p, visible: !((_a = p.visible) !== null && _a !== void 0 ? _a : true) } : p); }));
-    }, []);
-    /* ── Add part ── */
-    const addPart = React.useCallback((partId) => {
-        if (selectedParts.some((p) => p.partId === partId)) {
-            return;
-        }
-        const part = spriteGeneratorCore.getPart(partId);
-        if (!part) {
-            return;
+const NiceSpriteGeneratorPanel = ({
+  onSendToCanvas,
+  onClose,
+  mode
+  // presets and onGenerate are exposed for forward-compat; not currently consumed.
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  ensureInitialized();
+  const [tab, setTab] = React.useState(mode ?? "character");
+  const [selectedPresetIdx, setSelectedPresetIdx] = React.useState(0);
+  const [selectedParts, setSelectedParts] = React.useState([]);
+  const [canvasW, setCanvasW] = React.useState(32);
+  const [canvasH, setCanvasH] = React.useState(32);
+  const [direction, setDirection] = React.useState("S");
+  const [projection, setProjection] = React.useState("topDown");
+  const [generate8Dir, setGenerate8Dir] = React.useState(false);
+  const [skinPalette, setSkinPalette] = React.useState("light");
+  const [hairPalette, setHairPalette] = React.useState("brown");
+  const [clothPalette, setClothPalette] = React.useState("leather");
+  const [furPalette, setFurPalette] = React.useState("orange");
+  const [wallPalette, setWallPalette] = React.useState("grey_stone");
+  const [roofPalette, setRoofPalette] = React.useState("terracotta");
+  const previewRef = React.useRef(null);
+  const partsMapRef = React.useRef(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of spriteGeneratorCore.getAllParts()) {
+      map.set(p.id, p);
+    }
+    partsMapRef.current = map;
+  }, []);
+  const presets = React.useMemo(() => {
+    switch (tab) {
+      case "character":
+        return characterGeneratorPresets.CHARACTER_PRESETS;
+      case "building":
+        return buildingGeneratorPresets.BUILDING_PRESETS;
+      case "animal":
+        return animalGeneratorPresets.ANIMAL_PRESETS;
+    }
+  }, [tab]);
+  const applyPreset = React.useCallback(
+    (presetIdx) => {
+      setSelectedPresetIdx(presetIdx);
+      const preset = presets[presetIdx];
+      if (!preset) {
+        return;
+      }
+      if (tab === "building") {
+        const bp = preset;
+        const assembly = buildingGeneratorPresets.assembleBuildingFromConfig(bp.config);
+        setSelectedParts(assembly.parts);
+        setCanvasW(assembly.canvasWidth);
+        setCanvasH(assembly.canvasHeight);
+      } else {
+        const cp = preset;
+        const assembly = cp.assembly;
+        setSelectedParts([...assembly.parts]);
+        setCanvasW(assembly.canvasWidth);
+        setCanvasH(assembly.canvasHeight);
+      }
+    },
+    [tab, presets]
+  );
+  React.useEffect(() => {
+    applyPreset(0);
+  }, [tab, applyPreset]);
+  const currentAssembly = React.useMemo(
+    () => ({
+      id: `gen_${tab}_${selectedPresetIdx}`,
+      name: presets[selectedPresetIdx]?.name || "Custom",
+      parts: selectedParts,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
+      projection
+    }),
+    [tab, selectedPresetIdx, selectedParts, canvasW, canvasH, projection, presets]
+  );
+  React.useEffect(() => {
+    const canvas = previewRef.current;
+    if (!canvas) {
+      return;
+    }
+    const img = spriteGeneratorCore.assembleSprite(currentAssembly, partsMapRef.current, direction);
+    let finalImg = img;
+    if (projection === "iso25d") {
+      finalImg = spriteGeneratorCore.applyIsometricProjection(img);
+    }
+    canvas.width = finalImg.width;
+    canvas.height = finalImg.height;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.putImageData(finalImg, 0, 0);
+    }
+  }, [currentAssembly, direction, projection]);
+  const togglePart = React.useCallback((partId) => {
+    setSelectedParts(
+      (prev) => prev.map((p) => p.partId === partId ? { ...p, visible: !(p.visible ?? true) } : p)
+    );
+  }, []);
+  const addPart = React.useCallback(
+    (partId) => {
+      if (selectedParts.some((p) => p.partId === partId)) {
+        return;
+      }
+      const part = spriteGeneratorCore.getPart(partId);
+      if (!part) {
+        return;
+      }
+      setSelectedParts((prev) => [
+        ...prev,
+        {
+          partId,
+          offsetX: Math.floor(canvasW / 2) - Math.floor((part.pixels.S?.width ?? 8) / 2),
+          offsetY: Math.floor(canvasH / 2) - Math.floor((part.pixels.S?.height ?? 8) / 2),
+          visible: true
         }
-        setSelectedParts((prev) => {
-            var _a, _b, _c, _d;
-            return [
-                ...prev,
+      ]);
+    },
+    [selectedParts, canvasW, canvasH]
+  );
+  const removePart = React.useCallback((partId) => {
+    setSelectedParts((prev) => prev.filter((p) => p.partId !== partId));
+  }, []);
+  const handleSendToCanvas = React.useCallback(() => {
+    if (generate8Dir) {
+      const frames = spriteGeneratorCore.generateAllDirections(currentAssembly, partsMapRef.current);
+      const sheet = spriteGeneratorCore.render8DirSpriteSheet(frames);
+      onSendToCanvas?.(sheet);
+    } else {
+      let img = spriteGeneratorCore.assembleSprite(currentAssembly, partsMapRef.current, direction);
+      if (projection === "iso25d") {
+        img = spriteGeneratorCore.applyIsometricProjection(img);
+      }
+      onSendToCanvas?.(img);
+    }
+    onClose?.();
+  }, [generate8Dir, currentAssembly, direction, projection, onSendToCanvas, onClose]);
+  const categories = React.useMemo(() => {
+    switch (tab) {
+      case "character":
+        return CHAR_CATEGORIES;
+      case "building":
+        return BUILDING_CATEGORIES;
+      case "animal":
+        return ANIMAL_CATEGORIES;
+    }
+  }, [tab]);
+  const paletteGroups = React.useMemo(() => {
+    switch (tab) {
+      case "character":
+        return [
+          {
+            label: t("spriteGeneratorPanel.skin", "Skin"),
+            options: palettesToOptions(characterGeneratorPresets.SKIN_PALETTES),
+            value: skinPalette,
+            set: setSkinPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.hair", "Hair"),
+            options: palettesToOptions(characterGeneratorPresets.HAIR_PALETTES),
+            value: hairPalette,
+            set: setHairPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.clothing", "Clothing"),
+            options: palettesToOptions(characterGeneratorPresets.CLOTHING_PALETTES),
+            value: clothPalette,
+            set: setClothPalette
+          }
+        ];
+      case "building":
+        return [
+          {
+            label: t("spriteGeneratorPanel.walls", "Walls"),
+            options: palettesToOptions(buildingGeneratorPresets.WALL_PALETTES),
+            value: wallPalette,
+            set: setWallPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.roof", "Roof"),
+            options: palettesToOptions(buildingGeneratorPresets.ROOF_PALETTES),
+            value: roofPalette,
+            set: setRoofPalette
+          }
+        ];
+      case "animal":
+        return [
+          {
+            label: t("spriteGeneratorPanel.fur", "Fur"),
+            options: palettesToOptions(animalGeneratorPresets.FUR_PALETTES),
+            value: furPalette,
+            set: setFurPalette
+          }
+        ];
+    }
+  }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.NiceModal,
+    {
+      open: true,
+      onClose: onClose ?? (() => {
+      }),
+      title: t("spriteGeneratorPanel.spriteGenerator", "Sprite Generator"),
+      size: "xl",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genPanel, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genTabs, children: ["character", "building", "animal"].map((t2) => /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.NiceButton,
+          {
+            className: `${PixelEditor_module.default.genTabBtn} ${tab === t2 ? PixelEditor_module.default.genTabBtnActive : ""}`,
+            variant: tab === t2 ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => setTab(t2),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                uiCore.NiceIcon,
+                {
+                  name: t2 === "character" ? "user" : t2 === "building" ? "home" : "heart",
+                  size: 14
+                }
+              ),
+              " ",
+              t2.charAt(0).toUpperCase() + t2.slice(1)
+            ]
+          },
+          t2
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genBody, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genLeft, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.panelSection, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.panelTitle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("spriteGeneratorPanel.presets", "Presets") }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genPresetGrid, children: presets.map((preset, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceButton,
                 {
-                    partId,
-                    offsetX: Math.floor(canvasW / 2) - Math.floor(((_b = (_a = part.pixels.S) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 8) / 2),
-                    offsetY: Math.floor(canvasH / 2) - Math.floor(((_d = (_c = part.pixels.S) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 8) / 2),
-                    visible: true,
+                  className: `${PixelEditor_module.default.genPresetBtn} ${i === selectedPresetIdx ? PixelEditor_module.default.genPresetBtnActive : ""}`,
+                  variant: i === selectedPresetIdx ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: () => applyPreset(i),
+                  title: preset.name,
+                  children: preset.name
                 },
-            ];
-        });
-    }, [selectedParts, canvasW, canvasH]);
-    /* ── Remove part ── */
-    const removePart = React.useCallback((partId) => {
-        setSelectedParts((prev) => prev.filter((p) => p.partId !== partId));
-    }, []);
-    /* ── Send to canvas ── */
-    const handleSendToCanvas = React.useCallback(() => {
-        if (generate8Dir) {
-            const frames = spriteGeneratorCore.generateAllDirections(currentAssembly, partsMapRef.current);
-            const sheet = spriteGeneratorCore.render8DirSpriteSheet(frames);
-            onSendToCanvas === null || onSendToCanvas === void 0 ? void 0 : onSendToCanvas(sheet);
-        }
-        else {
-            let img = spriteGeneratorCore.assembleSprite(currentAssembly, partsMapRef.current, direction);
-            if (projection === 'iso25d') {
-                img = spriteGeneratorCore.applyIsometricProjection(img);
-            }
-            onSendToCanvas === null || onSendToCanvas === void 0 ? void 0 : onSendToCanvas(img);
-        }
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [generate8Dir, currentAssembly, direction, projection, onSendToCanvas, onClose]);
-    /* ── Categories for current tab ── */
-    const categories = React.useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return CHAR_CATEGORIES;
-            case 'building':
-                return BUILDING_CATEGORIES;
-            case 'animal':
-                return ANIMAL_CATEGORIES;
-        }
-    }, [tab]);
-    /* ── Available palette options ── */
-    const paletteGroups = React.useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return [
-                    {
-                        label: t('spriteGeneratorPanel.skin', 'Skin'),
-                        options: palettesToOptions(characterGeneratorPresets.SKIN_PALETTES),
-                        value: skinPalette,
-                        set: setSkinPalette,
-                    },
+                i
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.panelSection, style: { flex: 1, overflowY: "auto" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.panelTitle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("spriteGeneratorPanel.parts", "Parts") }) }),
+              categories.map((cat) => {
+                const parts = spriteGeneratorCore.getPartsByCategory(cat);
+                if (parts.length === 0) {
+                  return null;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                        label: t('spriteGeneratorPanel.hair', 'Hair'),
-                        options: palettesToOptions(characterGeneratorPresets.HAIR_PALETTES),
-                        value: hairPalette,
-                        set: setHairPalette,
-                    },
-                    {
-                        label: t('spriteGeneratorPanel.clothing', 'Clothing'),
-                        options: palettesToOptions(characterGeneratorPresets.CLOTHING_PALETTES),
-                        value: clothPalette,
-                        set: setClothPalette,
-                    },
-                ];
-            case 'building':
-                return [
-                    {
-                        label: t('spriteGeneratorPanel.walls', 'Walls'),
-                        options: palettesToOptions(buildingGeneratorPresets.WALL_PALETTES),
-                        value: wallPalette,
-                        set: setWallPalette,
-                    },
-                    {
-                        label: t('spriteGeneratorPanel.roof', 'Roof'),
-                        options: palettesToOptions(buildingGeneratorPresets.ROOF_PALETTES),
-                        value: roofPalette,
-                        set: setRoofPalette,
-                    },
-                ];
-            case 'animal':
-                return [
+                      style: {
+                        fontSize: 9,
+                        color: "var(--nice-text-muted)",
+                        marginBottom: 2,
+                        textTransform: "uppercase"
+                      },
+                      children: cat.replace(/([A-Z])/g, " $1").trim()
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genPartGrid, children: parts.map((part) => {
+                    const active = selectedParts.some(
+                      (p) => p.partId === part.id && (p.visible ?? true)
+                    );
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.NiceButton,
+                      {
+                        className: `${PixelEditor_module.default.miniBtn} ${PixelEditor_module.default.genPartBtn} ${active ? PixelEditor_module.default.miniBtnActive : ""}`,
+                        variant: active ? "primary" : "ghost",
+                        size: "sm",
+                        onClick: () => active ? removePart(part.id) : addPart(part.id),
+                        title: part.name,
+                        children: part.name
+                      },
+                      part.id
+                    );
+                  }) })
+                ] }, cat);
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genCenter, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genPreviewWrap, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: previewRef, className: PixelEditor_module.default.genPreviewCanvas }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genDirGrid, children: spriteGeneratorCore.ALL_DIRECTIONS.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                className: `${PixelEditor_module.default.miniBtn} ${direction === d ? PixelEditor_module.default.miniBtnActive : ""}`,
+                variant: direction === d ? "primary" : "ghost",
+                size: "sm",
+                onClick: () => setDirection(d),
+                children: d
+              },
+              d
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: t("spriteGeneratorPanel.projection", "Projection") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceSelect,
+                {
+                  className: PixelEditor_module.default.propSelect,
+                  value: projection,
+                  onChange: (val) => setProjection(val),
+                  options: [
+                    { value: "topDown", label: t("spriteGeneratorPanel.topDown", "Top-Down") },
+                    { value: "sideView", label: t("spriteGeneratorPanel.sideView", "Side View") },
                     {
-                        label: t('spriteGeneratorPanel.fur', 'Fur'),
-                        options: palettesToOptions(animalGeneratorPresets.FUR_PALETTES),
-                        value: furPalette,
-                        set: setFurPalette,
-                    },
-                ];
-        }
-    }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
-    /* ── Render ── */
-    return (jsxRuntime.jsx(ui.NiceModal, { open: true, onClose: onClose !== null && onClose !== void 0 ? onClose : (() => { }), title: t('spriteGeneratorPanel.spriteGenerator', 'Sprite Generator'), size: "xl", children: jsxRuntime.jsxs("div", { className: PixelEditor_module.genPanel, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.genTabs, children: ['character', 'building', 'animal'].map((t) => (jsxRuntime.jsxs(ui.NiceButton, { className: `${PixelEditor_module.genTabBtn} ${tab === t ? PixelEditor_module.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: t === 'character' ? 'user' : t === 'building' ? 'home' : 'heart', size: 14 }), ' ', t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genBody, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.genLeft, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: t('spriteGeneratorPanel.presets', 'Presets') }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genPresetGrid, children: presets.map((preset, i) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.genPresetBtn} ${i === selectedPresetIdx ? PixelEditor_module.genPresetBtnActive : ''}`, variant: i === selectedPresetIdx ? 'primary' : 'ghost', size: "sm", onClick: () => applyPreset(i), title: preset.name, children: preset.name }, i))) })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: t('spriteGeneratorPanel.parts', 'Parts') }) }), categories.map((cat) => {
-                                            const parts = spriteGeneratorCore.getPartsByCategory(cat);
-                                            if (parts.length === 0) {
-                                                return null;
-                                            }
-                                            return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: {
-                                                            fontSize: 9,
-                                                            color: 'var(--nice-text-muted)',
-                                                            marginBottom: 2,
-                                                            textTransform: 'uppercase',
-                                                        }, children: cat.replace(/([A-Z])/g, ' $1').trim() }), jsxRuntime.jsx("div", { className: PixelEditor_module.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 (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${PixelEditor_module.genPartBtn} ${active ? PixelEditor_module.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => (active ? removePart(part.id) : addPart(part.id)), title: part.name, children: part.name }, part.id));
-                                                        }) })] }, cat));
-                                        })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genCenter, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.genPreviewWrap, children: jsxRuntime.jsx("canvas", { ref: previewRef, className: PixelEditor_module.genPreviewCanvas }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genDirGrid, children: spriteGeneratorCore.ALL_DIRECTIONS.map((d) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${direction === d ? PixelEditor_module.miniBtnActive : ''}`, variant: direction === d ? 'primary' : 'ghost', size: "sm", onClick: () => setDirection(d), children: d }, d))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.projection', 'Projection') }), jsxRuntime.jsx(ui.NiceSelect, { className: PixelEditor_module.propSelect, value: projection, onChange: (val) => setProjection(val), options: [
-                                                { value: 'topDown', label: t('spriteGeneratorPanel.topDown', 'Top-Down') },
-                                                { value: 'sideView', label: t('spriteGeneratorPanel.sideView', 'Side View') },
-                                                {
-                                                    value: 'iso25d',
-                                                    label: t('spriteGeneratorPanel.n25dIsometric', '2.5D Isometric'),
-                                                },
-                                            ] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.size', 'Size') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 8, max: 256, value: canvasW, onChange: (val) => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsxRuntime.jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: "\u00D7" }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 8, max: 256, value: canvasH, onChange: (val) => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: generate8Dir, onChange: (checked) => setGenerate8Dir(checked), label: t('spriteGeneratorPanel.generate8DirectionSheet', 'Generate 8-direction sheet'), className: PixelEditor_module.checkLabel })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRight, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: t('spriteGeneratorPanel.colors', 'Colors') }) }), paletteGroups.map((group) => {
-                                            var _a;
-                                            return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 9, color: 'var(--nice-text-muted)', marginBottom: 2 }, children: group.label }), jsxRuntime.jsx(ui.NiceSelect, { className: PixelEditor_module.propSelect, value: group.value, onChange: (val) => group.set(val), options: group.options.map((opt) => ({
-                                                            value: opt.id,
-                                                            label: opt.name,
-                                                        })) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genColorSwatches, children: (_a = group.options
-                                                            .find((o) => o.id === group.value)) === null || _a === void 0 ? void 0 : _a.colors.map((c, i) => (jsxRuntime.jsx("div", { className: PixelEditor_module.genColorSwatch, style: { backgroundColor: c }, title: c }, i))) })] }, group.label));
-                                        })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: t('spriteGeneratorPanel.assembly', 'Assembly') }) }), selectedParts.map((ap, i) => {
-                                            var _a, _b, _c, _d, _e;
-                                            const part = partsMapRef.current.get(ap.partId);
-                                            return (
-                                            // A part can be placed twice (left and right leg, flipped), so its id
-                                            // alone is not a unique key.
-                                            jsxRuntime.jsxs("div", { className: PixelEditor_module.genAssemblyItem, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true)
-                                                            ? t('spriteGeneratorPanel.hide', 'Hide')
-                                                            : t('spriteGeneratorPanel.show', 'Show'), "aria-label": ((_b = ap.visible) !== null && _b !== void 0 ? _b : true)
-                                                            ? t('spriteGeneratorPanel.hide', 'Hide')
-                                                            : t('spriteGeneratorPanel.show', 'Show'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: ((_c = ap.visible) !== null && _c !== void 0 ? _c : true) ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { className: PixelEditor_module.genAssemblyName, children: (_d = part === null || part === void 0 ? void 0 : part.name) !== null && _d !== void 0 ? _d : ap.partId }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: 'var(--nice-text-muted)' }, children: ["z:", (_e = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _e !== void 0 ? _e : 0] }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: t('spriteGeneratorPanel.remove', 'Remove'), "aria-label": t('spriteGeneratorPanel.remove', 'Remove'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, `${ap.partId}-${i}`));
-                                        })] })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genFooter, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: onClose, children: t('spriteGeneratorPanel.cancel', 'Cancel') }), jsxRuntime.jsxs(ui.NiceButton, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "clipboard", size: 14 }), ' ', t('spriteGeneratorPanel.sendToCanvas', 'Send to Canvas')] })] })] }) }));
+                      value: "iso25d",
+                      label: t("spriteGeneratorPanel.n25dIsometric", "2.5D Isometric")
+                    }
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: t("spriteGeneratorPanel.size", "Size") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceNumberInput,
+                {
+                  min: 8,
+                  max: 256,
+                  value: canvasW,
+                  onChange: (val) => setCanvasW(val ?? 32)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: "×" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceNumberInput,
+                {
+                  min: 8,
+                  max: 256,
+                  value: canvasH,
+                  onChange: (val) => setCanvasH(val ?? 32)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceCheckbox,
+              {
+                checked: generate8Dir,
+                onChange: (checked) => setGenerate8Dir(checked),
+                label: t(
+                  "spriteGeneratorPanel.generate8DirectionSheet",
+                  "Generate 8-direction sheet"
+                ),
+                className: PixelEditor_module.default.checkLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genRight, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.panelSection, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.panelTitle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("spriteGeneratorPanel.colors", "Colors") }) }),
+              paletteGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 9, color: "var(--nice-text-muted)", marginBottom: 2 }, children: group.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceSelect,
+                  {
+                    className: PixelEditor_module.default.propSelect,
+                    value: group.value,
+                    onChange: (val) => group.set(val),
+                    options: group.options.map((opt) => ({
+                      value: opt.id,
+                      label: opt.name
+                    }))
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.genColorSwatches, children: group.options.find((o) => o.id === group.value)?.colors.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: PixelEditor_module.default.genColorSwatch,
+                    style: { backgroundColor: c },
+                    title: c
+                  },
+                  i
+                )) })
+              ] }, group.label))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.panelSection, style: { flex: 1, overflowY: "auto" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.panelTitle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("spriteGeneratorPanel.assembly", "Assembly") }) }),
+              selectedParts.map((ap, i) => {
+                const part = partsMapRef.current.get(ap.partId);
+                return (
+                  // A part can be placed twice (left and right leg, flipped), so its id
+                  // alone is not a unique key.
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genAssemblyItem, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.NiceButton,
+                      {
+                        className: PixelEditor_module.default.btnIcon,
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => togglePart(ap.partId),
+                        title: ap.visible ?? true ? t("spriteGeneratorPanel.hide", "Hide") : t("spriteGeneratorPanel.show", "Show"),
+                        "aria-label": ap.visible ?? true ? t("spriteGeneratorPanel.hide", "Hide") : t("spriteGeneratorPanel.show", "Show"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: ap.visible ?? true ? "eye" : "eye-off", size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: PixelEditor_module.default.genAssemblyName, children: part?.name ?? ap.partId }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 9, color: "var(--nice-text-muted)" }, children: [
+                      "z:",
+                      part?.zOrder ?? 0
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.NiceButton,
+                      {
+                        className: PixelEditor_module.default.btnIcon,
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => removePart(ap.partId),
+                        title: t("spriteGeneratorPanel.remove", "Remove"),
+                        "aria-label": t("spriteGeneratorPanel.remove", "Remove"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 })
+                      }
+                    )
+                  ] }, `${ap.partId}-${i}`)
+                );
+              })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.genFooter, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.default.btnSecondary, variant: "ghost", onClick: onClose, children: t("spriteGeneratorPanel.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.NiceButton, { className: PixelEditor_module.default.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "clipboard", size: 14 }),
+            " ",
+            t("spriteGeneratorPanel.sendToCanvas", "Send to Canvas")
+          ] })
+        ] })
+      ] })
+    }
+  );
 };
-if (process.env.NODE_ENV !== 'production') {
-    NiceSpriteGeneratorPanel.displayName = 'NiceSpriteGeneratorPanel';
+if (process.env.NODE_ENV !== "production") {
+  NiceSpriteGeneratorPanel.displayName = "NiceSpriteGeneratorPanel";
 }
-
-module.exports = NiceSpriteGeneratorPanel;
+exports.default = NiceSpriteGeneratorPanel;