@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/pixel/SpriteGeneratorPanel.js

@@ -1,319 +1,501 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { NiceModal, NiceButton, NiceSelect, NiceNumberInput, NiceCheckbox } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import { ANIMAL_PRESETS, initAnimalParts, FUR_PALETTES } from './animalGeneratorPresets.js';
-import { BUILDING_PRESETS, assembleBuildingFromConfig, initBuildingParts, WALL_PALETTES, ROOF_PALETTES } from './buildingGeneratorPresets.js';
-import { CHARACTER_PRESETS, initCharacterParts, SKIN_PALETTES, HAIR_PALETTES, CLOTHING_PALETTES } from './characterGeneratorPresets.js';
-import styles from './PixelEditor.module.css.js';
-import { getAllParts, assembleSprite, applyIsometricProjection, getPart, generateAllDirections, render8DirSpriteSheet, getPartsByCategory, ALL_DIRECTIONS } from './spriteGeneratorCore.js';
-
-/* ════════════════════════════════════════════════════════════════
-   INITIALIZATION
-   ════════════════════════════════════════════════════════════════ */
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NiceModal, NiceButton, NiceSelect, NiceNumberInput, NiceCheckbox } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import { ANIMAL_PRESETS, initAnimalParts, FUR_PALETTES } from "./animalGeneratorPresets.js";
+import { BUILDING_PRESETS, assembleBuildingFromConfig, initBuildingParts, WALL_PALETTES, ROOF_PALETTES } from "./buildingGeneratorPresets.js";
+import { CHARACTER_PRESETS, initCharacterParts, SKIN_PALETTES, HAIR_PALETTES, CLOTHING_PALETTES } from "./characterGeneratorPresets.js";
+import styles from "./PixelEditor.module.css.js";
+import { getAllParts, assembleSprite, applyIsometricProjection, getPart, generateAllDirections, render8DirSpriteSheet, getPartsByCategory, ALL_DIRECTIONS } from "./spriteGeneratorCore.js";
 let _initialized = false;
 function ensureInitialized() {
-    if (_initialized) {
-        return;
-    }
-    _initialized = true;
-    initCharacterParts();
-    initBuildingParts();
-    initAnimalParts();
+  if (_initialized) {
+    return;
+  }
+  _initialized = true;
+  initCharacterParts();
+  initBuildingParts();
+  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 } = useNiceTranslation();
-    ensureInitialized();
-    /* ── State ── */
-    const [tab, setTab] = useState(mode !== null && mode !== void 0 ? mode : 'character');
-    const [selectedPresetIdx, setSelectedPresetIdx] = useState(0);
-    const [selectedParts, setSelectedParts] = useState([]);
-    const [canvasW, setCanvasW] = useState(32);
-    const [canvasH, setCanvasH] = useState(32);
-    const [direction, setDirection] = useState('S');
-    const [projection, setProjection] = useState('topDown');
-    const [generate8Dir, setGenerate8Dir] = useState(false);
-    // Color overrides
-    const [skinPalette, setSkinPalette] = useState('light');
-    const [hairPalette, setHairPalette] = useState('brown');
-    const [clothPalette, setClothPalette] = useState('leather');
-    const [furPalette, setFurPalette] = useState('orange');
-    const [wallPalette, setWallPalette] = useState('grey_stone');
-    const [roofPalette, setRoofPalette] = useState('terracotta');
-    const previewRef = useRef(null);
-    const partsMapRef = useRef(new Map());
-    /* ── Build parts map ── */
-    useEffect(() => {
-        const map = new Map();
-        for (const p of getAllParts()) {
-            map.set(p.id, p);
-        }
-        partsMapRef.current = map;
-    }, []);
-    /* ── Get presets for current tab ── */
-    const presets = useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return CHARACTER_PRESETS;
-            case 'building':
-                return BUILDING_PRESETS;
-            case 'animal':
-                return ANIMAL_PRESETS;
-        }
-    }, [tab]);
-    /* ── Apply preset ── */
-    const applyPreset = useCallback((presetIdx) => {
-        setSelectedPresetIdx(presetIdx);
-        const preset = presets[presetIdx];
-        if (!preset) {
-            return;
-        }
-        if (tab === 'building') {
-            const bp = preset;
-            const assembly = 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 ── */
-    useEffect(() => {
-        applyPreset(0);
-    }, [tab, applyPreset]);
-    /* ── Build current assembly ── */
-    const currentAssembly = 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 ── */
-    useEffect(() => {
-        const canvas = previewRef.current;
-        if (!canvas) {
-            return;
-        }
-        const img = assembleSprite(currentAssembly, partsMapRef.current, direction);
-        let finalImg = img;
-        if (projection === 'iso25d') {
-            finalImg = 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 = 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 = useCallback((partId) => {
-        if (selectedParts.some((p) => p.partId === partId)) {
-            return;
-        }
-        const part = getPart(partId);
-        if (!part) {
-            return;
+const NiceSpriteGeneratorPanel = ({
+  onSendToCanvas,
+  onClose,
+  mode
+  // presets and onGenerate are exposed for forward-compat; not currently consumed.
+}) => {
+  const { t } = useNiceTranslation();
+  ensureInitialized();
+  const [tab, setTab] = useState(mode ?? "character");
+  const [selectedPresetIdx, setSelectedPresetIdx] = useState(0);
+  const [selectedParts, setSelectedParts] = useState([]);
+  const [canvasW, setCanvasW] = useState(32);
+  const [canvasH, setCanvasH] = useState(32);
+  const [direction, setDirection] = useState("S");
+  const [projection, setProjection] = useState("topDown");
+  const [generate8Dir, setGenerate8Dir] = useState(false);
+  const [skinPalette, setSkinPalette] = useState("light");
+  const [hairPalette, setHairPalette] = useState("brown");
+  const [clothPalette, setClothPalette] = useState("leather");
+  const [furPalette, setFurPalette] = useState("orange");
+  const [wallPalette, setWallPalette] = useState("grey_stone");
+  const [roofPalette, setRoofPalette] = useState("terracotta");
+  const previewRef = useRef(null);
+  const partsMapRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of getAllParts()) {
+      map.set(p.id, p);
+    }
+    partsMapRef.current = map;
+  }, []);
+  const presets = useMemo(() => {
+    switch (tab) {
+      case "character":
+        return CHARACTER_PRESETS;
+      case "building":
+        return BUILDING_PRESETS;
+      case "animal":
+        return ANIMAL_PRESETS;
+    }
+  }, [tab]);
+  const applyPreset = useCallback(
+    (presetIdx) => {
+      setSelectedPresetIdx(presetIdx);
+      const preset = presets[presetIdx];
+      if (!preset) {
+        return;
+      }
+      if (tab === "building") {
+        const bp = preset;
+        const assembly = 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]
+  );
+  useEffect(() => {
+    applyPreset(0);
+  }, [tab, applyPreset]);
+  const currentAssembly = useMemo(
+    () => ({
+      id: `gen_${tab}_${selectedPresetIdx}`,
+      name: presets[selectedPresetIdx]?.name || "Custom",
+      parts: selectedParts,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
+      projection
+    }),
+    [tab, selectedPresetIdx, selectedParts, canvasW, canvasH, projection, presets]
+  );
+  useEffect(() => {
+    const canvas = previewRef.current;
+    if (!canvas) {
+      return;
+    }
+    const img = assembleSprite(currentAssembly, partsMapRef.current, direction);
+    let finalImg = img;
+    if (projection === "iso25d") {
+      finalImg = 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 = useCallback((partId) => {
+    setSelectedParts(
+      (prev) => prev.map((p) => p.partId === partId ? { ...p, visible: !(p.visible ?? true) } : p)
+    );
+  }, []);
+  const addPart = useCallback(
+    (partId) => {
+      if (selectedParts.some((p) => p.partId === partId)) {
+        return;
+      }
+      const part = 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 = useCallback((partId) => {
+    setSelectedParts((prev) => prev.filter((p) => p.partId !== partId));
+  }, []);
+  const handleSendToCanvas = useCallback(() => {
+    if (generate8Dir) {
+      const frames = generateAllDirections(currentAssembly, partsMapRef.current);
+      const sheet = render8DirSpriteSheet(frames);
+      onSendToCanvas?.(sheet);
+    } else {
+      let img = assembleSprite(currentAssembly, partsMapRef.current, direction);
+      if (projection === "iso25d") {
+        img = applyIsometricProjection(img);
+      }
+      onSendToCanvas?.(img);
+    }
+    onClose?.();
+  }, [generate8Dir, currentAssembly, direction, projection, onSendToCanvas, onClose]);
+  const categories = useMemo(() => {
+    switch (tab) {
+      case "character":
+        return CHAR_CATEGORIES;
+      case "building":
+        return BUILDING_CATEGORIES;
+      case "animal":
+        return ANIMAL_CATEGORIES;
+    }
+  }, [tab]);
+  const paletteGroups = useMemo(() => {
+    switch (tab) {
+      case "character":
+        return [
+          {
+            label: t("spriteGeneratorPanel.skin", "Skin"),
+            options: palettesToOptions(SKIN_PALETTES),
+            value: skinPalette,
+            set: setSkinPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.hair", "Hair"),
+            options: palettesToOptions(HAIR_PALETTES),
+            value: hairPalette,
+            set: setHairPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.clothing", "Clothing"),
+            options: palettesToOptions(CLOTHING_PALETTES),
+            value: clothPalette,
+            set: setClothPalette
+          }
+        ];
+      case "building":
+        return [
+          {
+            label: t("spriteGeneratorPanel.walls", "Walls"),
+            options: palettesToOptions(WALL_PALETTES),
+            value: wallPalette,
+            set: setWallPalette
+          },
+          {
+            label: t("spriteGeneratorPanel.roof", "Roof"),
+            options: palettesToOptions(ROOF_PALETTES),
+            value: roofPalette,
+            set: setRoofPalette
+          }
+        ];
+      case "animal":
+        return [
+          {
+            label: t("spriteGeneratorPanel.fur", "Fur"),
+            options: palettesToOptions(FUR_PALETTES),
+            value: furPalette,
+            set: setFurPalette
+          }
+        ];
+    }
+  }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
+  return /* @__PURE__ */ jsx(
+    NiceModal,
+    {
+      open: true,
+      onClose: onClose ?? (() => {
+      }),
+      title: t("spriteGeneratorPanel.spriteGenerator", "Sprite Generator"),
+      size: "xl",
+      children: /* @__PURE__ */ jsxs("div", { className: styles.genPanel, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.genTabs, children: ["character", "building", "animal"].map((t2) => /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            className: `${styles.genTabBtn} ${tab === t2 ? styles.genTabBtnActive : ""}`,
+            variant: tab === t2 ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => setTab(t2),
+            children: [
+              /* @__PURE__ */ jsx(
+                NiceIcon,
+                {
+                  name: t2 === "character" ? "user" : t2 === "building" ? "home" : "heart",
+                  size: 14
+                }
+              ),
+              " ",
+              t2.charAt(0).toUpperCase() + t2.slice(1)
+            ]
+          },
+          t2
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.genBody, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.genLeft, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("spriteGeneratorPanel.presets", "Presets") }) }),
+              /* @__PURE__ */ jsx("div", { className: styles.genPresetGrid, children: presets.map((preset, i) => /* @__PURE__ */ jsx(
+                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: `${styles.genPresetBtn} ${i === selectedPresetIdx ? styles.genPresetBtnActive : ""}`,
+                  variant: i === selectedPresetIdx ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: () => applyPreset(i),
+                  title: preset.name,
+                  children: preset.name
                 },
-            ];
-        });
-    }, [selectedParts, canvasW, canvasH]);
-    /* ── Remove part ── */
-    const removePart = useCallback((partId) => {
-        setSelectedParts((prev) => prev.filter((p) => p.partId !== partId));
-    }, []);
-    /* ── Send to canvas ── */
-    const handleSendToCanvas = useCallback(() => {
-        if (generate8Dir) {
-            const frames = generateAllDirections(currentAssembly, partsMapRef.current);
-            const sheet = render8DirSpriteSheet(frames);
-            onSendToCanvas === null || onSendToCanvas === void 0 ? void 0 : onSendToCanvas(sheet);
-        }
-        else {
-            let img = assembleSprite(currentAssembly, partsMapRef.current, direction);
-            if (projection === 'iso25d') {
-                img = 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 = useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return CHAR_CATEGORIES;
-            case 'building':
-                return BUILDING_CATEGORIES;
-            case 'animal':
-                return ANIMAL_CATEGORIES;
-        }
-    }, [tab]);
-    /* ── Available palette options ── */
-    const paletteGroups = useMemo(() => {
-        switch (tab) {
-            case 'character':
-                return [
-                    {
-                        label: t('spriteGeneratorPanel.skin', 'Skin'),
-                        options: palettesToOptions(SKIN_PALETTES),
-                        value: skinPalette,
-                        set: setSkinPalette,
-                    },
+                i
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: "auto" }, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("spriteGeneratorPanel.parts", "Parts") }) }),
+              categories.map((cat) => {
+                const parts = getPartsByCategory(cat);
+                if (parts.length === 0) {
+                  return null;
+                }
+                return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 6 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
                     {
-                        label: t('spriteGeneratorPanel.hair', 'Hair'),
-                        options: palettesToOptions(HAIR_PALETTES),
-                        value: hairPalette,
-                        set: setHairPalette,
-                    },
-                    {
-                        label: t('spriteGeneratorPanel.clothing', 'Clothing'),
-                        options: palettesToOptions(CLOTHING_PALETTES),
-                        value: clothPalette,
-                        set: setClothPalette,
-                    },
-                ];
-            case 'building':
-                return [
-                    {
-                        label: t('spriteGeneratorPanel.walls', 'Walls'),
-                        options: palettesToOptions(WALL_PALETTES),
-                        value: wallPalette,
-                        set: setWallPalette,
-                    },
-                    {
-                        label: t('spriteGeneratorPanel.roof', 'Roof'),
-                        options: palettesToOptions(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__ */ jsx("div", { className: styles.genPartGrid, children: parts.map((part) => {
+                    const active = selectedParts.some(
+                      (p) => p.partId === part.id && (p.visible ?? true)
+                    );
+                    return /* @__PURE__ */ jsx(
+                      NiceButton,
+                      {
+                        className: `${styles.miniBtn} ${styles.genPartBtn} ${active ? styles.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__ */ jsxs("div", { className: styles.genCenter, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.genPreviewWrap, children: /* @__PURE__ */ jsx("canvas", { ref: previewRef, className: styles.genPreviewCanvas }) }),
+            /* @__PURE__ */ jsx("div", { className: styles.genDirGrid, children: ALL_DIRECTIONS.map((d) => /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                className: `${styles.miniBtn} ${direction === d ? styles.miniBtnActive : ""}`,
+                variant: direction === d ? "primary" : "ghost",
+                size: "sm",
+                onClick: () => setDirection(d),
+                children: d
+              },
+              d
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: styles.genRow, children: [
+              /* @__PURE__ */ jsx("label", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: t("spriteGeneratorPanel.projection", "Projection") }),
+              /* @__PURE__ */ jsx(
+                NiceSelect,
+                {
+                  className: styles.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(FUR_PALETTES),
-                        value: furPalette,
-                        set: setFurPalette,
-                    },
-                ];
-        }
-    }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
-    /* ── Render ── */
-    return (jsx(NiceModal, { open: true, onClose: onClose !== null && onClose !== void 0 ? onClose : (() => { }), title: t('spriteGeneratorPanel.spriteGenerator', 'Sprite Generator'), size: "xl", children: jsxs("div", { className: styles.genPanel, children: [jsx("div", { className: styles.genTabs, children: ['character', 'building', 'animal'].map((t) => (jsxs(NiceButton, { className: `${styles.genTabBtn} ${tab === t ? styles.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [jsx(NiceIcon, { name: t === 'character' ? 'user' : t === 'building' ? 'home' : 'heart', size: 14 }), ' ', 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: t('spriteGeneratorPanel.presets', 'Presets') }) }), jsx("div", { className: styles.genPresetGrid, children: presets.map((preset, i) => (jsx(NiceButton, { 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: t('spriteGeneratorPanel.parts', '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(--nice-text-muted)',
-                                                            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(NiceButton, { className: `${styles.miniBtn} ${styles.genPartBtn} ${active ? styles.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => (active ? removePart(part.id) : addPart(part.id)), title: part.name, children: part.name }, 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(NiceButton, { 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(--nice-text-muted)' }, children: t('spriteGeneratorPanel.projection', 'Projection') }), jsx(NiceSelect, { className: styles.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'),
-                                                },
-                                            ] })] }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.size', 'Size') }), jsx(NiceNumberInput, { min: 8, max: 256, value: canvasW, onChange: (val) => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: "\u00D7" }), jsx(NiceNumberInput, { min: 8, max: 256, value: canvasH, onChange: (val) => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsx(NiceCheckbox, { checked: generate8Dir, onChange: (checked) => setGenerate8Dir(checked), label: t('spriteGeneratorPanel.generate8DirectionSheet', '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: t('spriteGeneratorPanel.colors', 'Colors') }) }), paletteGroups.map((group) => {
-                                            var _a;
-                                            return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--nice-text-muted)', marginBottom: 2 }, children: group.label }), jsx(NiceSelect, { 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: 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.
-                                            jsxs("div", { className: styles.genAssemblyItem, children: [jsx(NiceButton, { className: styles.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: jsx(NiceIcon, { name: ((_c = ap.visible) !== null && _c !== void 0 ? _c : true) ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.genAssemblyName, children: (_d = part === null || part === void 0 ? void 0 : part.name) !== null && _d !== void 0 ? _d : ap.partId }), 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] }), jsx(NiceButton, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: t('spriteGeneratorPanel.remove', 'Remove'), "aria-label": t('spriteGeneratorPanel.remove', 'Remove'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, `${ap.partId}-${i}`));
-                                        })] })] })] }), jsxs("div", { className: styles.genFooter, children: [jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: t('spriteGeneratorPanel.cancel', 'Cancel') }), jsxs(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('spriteGeneratorPanel.sendToCanvas', 'Send to Canvas')] })] })] }) }));
+                      value: "iso25d",
+                      label: t("spriteGeneratorPanel.n25dIsometric", "2.5D Isometric")
+                    }
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.genRow, children: [
+              /* @__PURE__ */ jsx("label", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: t("spriteGeneratorPanel.size", "Size") }),
+              /* @__PURE__ */ jsx(
+                NiceNumberInput,
+                {
+                  min: 8,
+                  max: 256,
+                  value: canvasW,
+                  onChange: (val) => setCanvasW(val ?? 32)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "var(--nice-text-muted)" }, children: "×" }),
+              /* @__PURE__ */ jsx(
+                NiceNumberInput,
+                {
+                  min: 8,
+                  max: 256,
+                  value: canvasH,
+                  onChange: (val) => setCanvasH(val ?? 32)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              NiceCheckbox,
+              {
+                checked: generate8Dir,
+                onChange: (checked) => setGenerate8Dir(checked),
+                label: t(
+                  "spriteGeneratorPanel.generate8DirectionSheet",
+                  "Generate 8-direction sheet"
+                ),
+                className: styles.checkLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.genRight, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("spriteGeneratorPanel.colors", "Colors") }) }),
+              paletteGroups.map((group) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 6 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: 9, color: "var(--nice-text-muted)", marginBottom: 2 }, children: group.label }),
+                /* @__PURE__ */ jsx(
+                  NiceSelect,
+                  {
+                    className: styles.propSelect,
+                    value: group.value,
+                    onChange: (val) => group.set(val),
+                    options: group.options.map((opt) => ({
+                      value: opt.id,
+                      label: opt.name
+                    }))
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: styles.genColorSwatches, children: group.options.find((o) => o.id === group.value)?.colors.map((c, i) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles.genColorSwatch,
+                    style: { backgroundColor: c },
+                    title: c
+                  },
+                  i
+                )) })
+              ] }, group.label))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: "auto" }, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: styles.genAssemblyItem, children: [
+                    /* @__PURE__ */ jsx(
+                      NiceButton,
+                      {
+                        className: styles.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__ */ jsx(NiceIcon, { name: ap.visible ?? true ? "eye" : "eye-off", size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: styles.genAssemblyName, children: part?.name ?? ap.partId }),
+                    /* @__PURE__ */ jsxs("span", { style: { fontSize: 9, color: "var(--nice-text-muted)" }, children: [
+                      "z:",
+                      part?.zOrder ?? 0
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      NiceButton,
+                      {
+                        className: styles.btnIcon,
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => removePart(ap.partId),
+                        title: t("spriteGeneratorPanel.remove", "Remove"),
+                        "aria-label": t("spriteGeneratorPanel.remove", "Remove"),
+                        children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+                      }
+                    )
+                  ] }, `${ap.partId}-${i}`)
+                );
+              })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.genFooter, children: [
+          /* @__PURE__ */ jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: t("spriteGeneratorPanel.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxs(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [
+            /* @__PURE__ */ jsx(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";
 }
-
-export { NiceSpriteGeneratorPanel as default };
+export {
+  NiceSpriteGeneratorPanel as default
+};