@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/animation/shapes/noses.js

@@ -1,31 +1,94 @@
-import { jsx } from 'react/jsx-runtime';
-import { pick } from '../characterTypes.js';
-
+import { jsx } from "react/jsx-runtime";
+import { pick } from "../characterTypes.js";
 function s(c) {
-    return pick(c !== null && c !== void 0 ? c : [], 0, 'var(--anim-stroke, #111)');
+  return pick(c ?? [], 0, "var(--anim-stroke, #111)");
 }
-const NoseLine = ({ colors, y = 0, scale = 1, transform, strokeWidth = 1.6, }) => (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} translate(0 ${y}) scale(${scale})`, stroke: s(colors), strokeWidth: strokeWidth, strokeLinecap: "round", children: jsx("path", { d: "M0 -4 q-2 4 0 8", fill: "none" }) }));
-const NoseTriangle = ({ colors, y = 0, scale = 1, transform, strokeWidth = 1.4, }) => (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} translate(0 ${y}) scale(${scale})`, stroke: s(colors), strokeWidth: strokeWidth, strokeLinejoin: "round", children: jsx("path", { d: "M0 -6 l6 8 h-12 z", fill: "none" }) }));
-const NoseRound = ({ colors, y = 0, scale = 1, transform, strokeWidth = 1.4, }) => (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} translate(0 ${y}) scale(${scale})`, stroke: s(colors), strokeWidth: strokeWidth, children: jsx("circle", { cx: 0, cy: 0, r: 4, fill: "none" }) }));
-const NoseButton = ({ colors, y = 0, scale = 1, transform, strokeWidth = 1.4, }) => (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} translate(0 ${y}) scale(${scale})`, stroke: s(colors), strokeWidth: strokeWidth, children: jsx("circle", { cx: 0, cy: 0, r: 3, fill: s(colors), opacity: 0.2 }) }));
+const NoseLine = ({
+  colors,
+  y = 0,
+  scale = 1,
+  transform,
+  strokeWidth = 1.6
+}) => /* @__PURE__ */ jsx(
+  "g",
+  {
+    transform: `${transform ?? ""} translate(0 ${y}) scale(${scale})`,
+    stroke: s(colors),
+    strokeWidth,
+    strokeLinecap: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M0 -4 q-2 4 0 8", fill: "none" })
+  }
+);
+const NoseTriangle = ({
+  colors,
+  y = 0,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => /* @__PURE__ */ jsx(
+  "g",
+  {
+    transform: `${transform ?? ""} translate(0 ${y}) scale(${scale})`,
+    stroke: s(colors),
+    strokeWidth,
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M0 -6 l6 8 h-12 z", fill: "none" })
+  }
+);
+const NoseRound = ({
+  colors,
+  y = 0,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => /* @__PURE__ */ jsx(
+  "g",
+  {
+    transform: `${transform ?? ""} translate(0 ${y}) scale(${scale})`,
+    stroke: s(colors),
+    strokeWidth,
+    children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 4, fill: "none" })
+  }
+);
+const NoseButton = ({
+  colors,
+  y = 0,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => /* @__PURE__ */ jsx(
+  "g",
+  {
+    transform: `${transform ?? ""} translate(0 ${y}) scale(${scale})`,
+    stroke: s(colors),
+    strokeWidth,
+    children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 3, fill: s(colors), opacity: 0.2 })
+  }
+);
 const NoseNone = () => null;
 const NOSE_RENDERERS = {
-    line: NoseLine,
-    triangle: NoseTriangle,
-    round: NoseRound,
-    button: NoseButton,
-    hook: NoseLine,
-    flat: NoseLine,
-    wide: NoseTriangle,
-    tiny: NoseButton,
-    pointy: NoseTriangle,
-    roman: NoseLine,
-    none: NoseNone,
+  line: NoseLine,
+  triangle: NoseTriangle,
+  round: NoseRound,
+  button: NoseButton,
+  hook: NoseLine,
+  flat: NoseLine,
+  wide: NoseTriangle,
+  tiny: NoseButton,
+  pointy: NoseTriangle,
+  roman: NoseLine,
+  none: NoseNone
 };
 const Nose = ({ variant, ...rest }) => {
-    var _a;
-    const Comp = (_a = NOSE_RENDERERS[variant]) !== null && _a !== void 0 ? _a : NoseLine;
-    return jsx(Comp, { ...rest });
+  const Comp = NOSE_RENDERERS[variant] ?? NoseLine;
+  return /* @__PURE__ */ jsx(Comp, { ...rest });
+};
+export {
+  NOSE_RENDERERS,
+  Nose,
+  NoseButton,
+  NoseLine,
+  NoseNone,
+  NoseRound,
+  NoseTriangle
 };
-
-export { NOSE_RENDERERS, Nose, NoseButton, NoseLine, NoseNone, NoseRound, NoseTriangle };

package/dist/esm/animation/shapes/outfits.js

@@ -1,47 +1,115 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { pick } from '../characterTypes.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import { pick } from "../characterTypes.js";
 function pal(c) {
-    return {
-        base: pick(c, 0, 'var(--anim-shirt, #3B82F6)'),
-        accent: pick(c, 1, 'var(--anim-outfit-2, #2563EB)'),
-        stroke: pick(c, 2, 'var(--anim-stroke, #111)'),
-    };
+  return {
+    base: pick(c, 0, "var(--anim-shirt, #3B82F6)"),
+    accent: pick(c, 1, "var(--anim-outfit-2, #2563EB)"),
+    stroke: pick(c, 2, "var(--anim-stroke, #111)")
+  };
 }
-const OutfitTee = ({ colors, scale = 1, transform, strokeWidth = 1.4, }) => {
-    const c = pal(colors);
-    return (jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsx("path", { d: "M-28 -20 l-12 -10 l10 -10 l10 8 h40 l10 -8 l10 10 l-12 10 v40 h-56 z", fill: c.base }), jsx("line", { x1: -10, y1: -20, x2: -10, y2: 20, stroke: c.accent, strokeWidth: 0.8, opacity: 0.3 })] }));
+const OutfitTee = ({
+  colors,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => {
+  const c = pal(colors);
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M-28 -20 l-12 -10 l10 -10 l10 8 h40 l10 -8 l10 10 l-12 10 v40 h-56 z",
+            fill: c.base
+          }
+        ),
+        /* @__PURE__ */ jsx("line", { x1: -10, y1: -20, x2: -10, y2: 20, stroke: c.accent, strokeWidth: 0.8, opacity: 0.3 })
+      ]
+    }
+  );
 };
-const OutfitHoodie = ({ colors, scale = 1, transform, strokeWidth = 1.4, }) => {
-    const c = pal(colors);
-    return (jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsx("path", { d: "M-28 -20 l-12 -10 l10 -10 l10 8 h40 l10 -8 l10 10 l-12 10 v40 h-56 z", fill: c.base }), jsx("path", { d: "M-6 -24 q6 12 12 0", fill: c.accent, stroke: c.stroke, strokeWidth: 0.8 }), jsx("rect", { x: -10, y: 0, width: 20, height: 18, rx: 4, fill: c.accent, opacity: 0.3 })] }));
+const OutfitHoodie = ({
+  colors,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => {
+  const c = pal(colors);
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M-28 -20 l-12 -10 l10 -10 l10 8 h40 l10 -8 l10 10 l-12 10 v40 h-56 z",
+            fill: c.base
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M-6 -24 q6 12 12 0", fill: c.accent, stroke: c.stroke, strokeWidth: 0.8 }),
+        /* @__PURE__ */ jsx("rect", { x: -10, y: 0, width: 20, height: 18, rx: 4, fill: c.accent, opacity: 0.3 })
+      ]
+    }
+  );
 };
-const OutfitSuit = ({ colors, scale = 1, transform, strokeWidth = 1.4, }) => {
-    const c = pal(colors);
-    return (jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsx("path", { d: "M-30 -20 l-10 -12 l10 -8 l8 6 h44 l8 -6 l10 8 l-10 12 v42 h-60 z", fill: c.base }), jsx("path", { d: "M-8 -26 l8 20 l8 -20", fill: "none", stroke: c.accent, strokeWidth: 1.2 }), jsx("path", { d: "M0 -26 v66", fill: "none", stroke: c.stroke, strokeWidth: 0.6, opacity: 0.2 })] }));
+const OutfitSuit = ({
+  colors,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4
+}) => {
+  const c = pal(colors);
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M-30 -20 l-10 -12 l10 -8 l8 6 h44 l8 -6 l10 8 l-10 12 v42 h-60 z", fill: c.base }),
+        /* @__PURE__ */ jsx("path", { d: "M-8 -26 l8 20 l8 -20", fill: "none", stroke: c.accent, strokeWidth: 1.2 }),
+        /* @__PURE__ */ jsx("path", { d: "M0 -26 v66", fill: "none", stroke: c.stroke, strokeWidth: 0.6, opacity: 0.2 })
+      ]
+    }
+  );
 };
 const OUTFIT_RENDERERS = {
-    tee: OutfitTee,
-    hoodie: OutfitHoodie,
-    suit: OutfitSuit,
-    dress: OutfitTee,
-    tank: OutfitTee,
-    jacket: OutfitSuit,
-    blazer: OutfitSuit,
-    vest: OutfitTee,
-    sweatshirt: OutfitHoodie,
-    kimono: OutfitSuit,
-    polo: OutfitTee,
-    stripes: OutfitTee,
-    checker: OutfitTee,
-    jersey: OutfitTee,
-    tux: OutfitSuit,
-    robe: OutfitSuit,
+  tee: OutfitTee,
+  hoodie: OutfitHoodie,
+  suit: OutfitSuit,
+  dress: OutfitTee,
+  tank: OutfitTee,
+  jacket: OutfitSuit,
+  blazer: OutfitSuit,
+  vest: OutfitTee,
+  sweatshirt: OutfitHoodie,
+  kimono: OutfitSuit,
+  polo: OutfitTee,
+  stripes: OutfitTee,
+  checker: OutfitTee,
+  jersey: OutfitTee,
+  tux: OutfitSuit,
+  robe: OutfitSuit
 };
 const Outfit = ({ variant, ...rest }) => {
-    var _a;
-    const Comp = (_a = OUTFIT_RENDERERS[variant]) !== null && _a !== void 0 ? _a : OutfitTee;
-    return jsx(Comp, { ...rest });
+  const Comp = OUTFIT_RENDERERS[variant] ?? OutfitTee;
+  return /* @__PURE__ */ jsx(Comp, { ...rest });
+};
+export {
+  OUTFIT_RENDERERS,
+  Outfit,
+  OutfitHoodie,
+  OutfitSuit,
+  OutfitTee
 };
-
-export { OUTFIT_RENDERERS, Outfit, OutfitHoodie, OutfitSuit, OutfitTee };

package/dist/esm/animation/shapes/torsos.js

@@ -1,11 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
-import { pick } from '../characterTypes.js';
-
-const Torso = ({ colors, scale = 1, transform, strokeWidth = 1.4, fill, }) => {
-    const arr = colors !== null && colors !== void 0 ? colors : [];
-    const skin = fill !== null && fill !== void 0 ? fill : pick(arr, 0, 'var(--anim-skin, #FFD2B3)');
-    const stroke = pick(arr, 2, 'var(--anim-stroke, #111)');
-    return (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: stroke, strokeWidth: strokeWidth, children: jsx("path", { d: "M-24 -20 h48 v44 h-48 z", fill: skin, opacity: 0.5 }) }));
+import { jsx } from "react/jsx-runtime";
+import { pick } from "../characterTypes.js";
+const Torso = ({
+  colors,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4,
+  fill
+}) => {
+  const arr = colors ?? [];
+  const skin = fill ?? pick(arr, 0, "var(--anim-skin, #FFD2B3)");
+  const stroke = pick(arr, 2, "var(--anim-stroke, #111)");
+  return /* @__PURE__ */ jsx("g", { transform: `${transform ?? ""} scale(${scale})`, stroke, strokeWidth, children: /* @__PURE__ */ jsx("path", { d: "M-24 -20 h48 v44 h-48 z", fill: skin, opacity: 0.5 }) });
+};
+export {
+  Torso
 };
-
-export { Torso };

package/dist/esm/animation/spineExport.js

@@ -1,134 +1,120 @@
-import { solveFK } from './rig/rigMath.js';
-import { DEFAULT_RIG, BONE_ORDER, DEFAULT_POSE } from './rig/rigTypes.js';
-
-/**
- * spineExport.ts — Export animations to Spine JSON format.
- *
- * Spine is a popular 2D skeletal animation tool. This module exports
- * rig configurations and pose sequences to the Spine JSON format
- * for import into Spine editor or Spine runtimes.
- */
-// ── Bone Mapping ────────────────────────────────────────────────
+import { solveFK } from "./rig/rigMath.js";
+import { DEFAULT_RIG, BONE_ORDER, DEFAULT_POSE } from "./rig/rigTypes.js";
 const BONE_PARENT_MAP = {
-    pelvis: 'root',
-    spineLower: 'pelvis',
-    spineUpper: 'spineLower',
-    neck: 'spineUpper',
-    head: 'neck',
-    lShoulder: 'spineUpper',
-    lUpperArm: 'lShoulder',
-    lForearm: 'lUpperArm',
-    lHand: 'lForearm',
-    rShoulder: 'spineUpper',
-    rUpperArm: 'rShoulder',
-    rForearm: 'rUpperArm',
-    rHand: 'rForearm',
-    lThigh: 'pelvis',
-    lShin: 'lThigh',
-    lFoot: 'lShin',
-    rThigh: 'pelvis',
-    rShin: 'rThigh',
-    rFoot: 'rShin',
+  pelvis: "root",
+  spineLower: "pelvis",
+  spineUpper: "spineLower",
+  neck: "spineUpper",
+  head: "neck",
+  lShoulder: "spineUpper",
+  lUpperArm: "lShoulder",
+  lForearm: "lUpperArm",
+  lHand: "lForearm",
+  rShoulder: "spineUpper",
+  rUpperArm: "rShoulder",
+  rForearm: "rUpperArm",
+  rHand: "rForearm",
+  lThigh: "pelvis",
+  lShin: "lThigh",
+  lFoot: "lShin",
+  rThigh: "pelvis",
+  rShin: "rThigh",
+  rFoot: "rShin"
 };
 function boneLength(rig, key, size) {
-    var _a;
-    const spec = rig[key];
-    return ((_a = spec === null || spec === void 0 ? void 0 : spec.length) !== null && _a !== void 0 ? _a : 0) * size;
+  const spec = rig[key];
+  return (spec?.length ?? 0) * size;
 }
-// ── Export ───────────────────────────────────────────────────────
-/** Export rig and animations to Spine JSON format. */
 function exportToSpine(animations, options = {}) {
-    const { name = 'nice2dev_character', size = 200, rig = DEFAULT_RIG, imagePath = './images/', } = options;
-    // Solve default pose for initial bone positions
-    const fk = solveFK(rig, DEFAULT_POSE, size);
-    // Build bones
-    const bones = BONE_ORDER.map((key) => {
-        var _a;
-        const solved = fk[key];
-        const parent = BONE_PARENT_MAP[key];
-        const parentSolved = parent ? fk[parent] : undefined;
-        const x = solved ? (parentSolved ? solved.x - parentSolved.x : solved.x) : 0;
-        const y = solved ? (parentSolved ? solved.y - parentSolved.y : solved.y) : 0;
-        const rotation = (_a = DEFAULT_POSE[key]) !== null && _a !== void 0 ? _a : 0;
-        return {
-            name: key,
-            parent: parent,
-            length: boneLength(rig, key, size),
-            x: Math.round(x * 100) / 100,
-            y: Math.round(-y * 100) / 100, // Spine uses Y-up
-            rotation: Math.round(rotation * 100) / 100,
-        };
-    });
-    // Build slots (one per bone for attachment)
-    const slots = BONE_ORDER.map((key) => ({
-        name: `${key}_slot`,
-        bone: key,
-        attachment: `${key}_img`,
-    }));
-    // Build default skin
-    const skinAttachments = {};
-    for (const key of BONE_ORDER) {
-        skinAttachments[`${key}_slot`] = {
-            [`${key}_img`]: {
-                type: 'region',
-                x: 0,
-                y: 0,
-                width: Math.round(boneLength(rig, key, size)),
-                height: 8,
-            },
-        };
-    }
-    // Build animations
-    const animationsOut = {};
-    for (const anim of animations) {
-        const sortedKf = [...anim.keyframes].sort((a, b) => a.time - b.time);
-        const boneRotations = {};
-        for (const key of BONE_ORDER) {
-            const rotateKf = sortedKf.map((kf) => {
-                var _a, _b, _c;
-                return ({
-                    time: Math.round(kf.time) / 1000, // ms → seconds
-                    angle: ((_b = (_a = kf.pose[key]) !== null && _a !== void 0 ? _a : DEFAULT_POSE[key]) !== null && _b !== void 0 ? _b : 0) - ((_c = DEFAULT_POSE[key]) !== null && _c !== void 0 ? _c : 0),
-                    curve: 'stepped',
-                });
-            });
-            boneRotations[key] = { rotate: rotateKf };
-        }
-        animationsOut[anim.name] = { bones: boneRotations };
-    }
+  const {
+    name = "nice2dev_character",
+    size = 200,
+    rig = DEFAULT_RIG,
+    imagePath = "./images/"
+  } = options;
+  const fk = solveFK(rig, DEFAULT_POSE, size);
+  const bones = BONE_ORDER.map((key) => {
+    const solved = fk[key];
+    const parent = BONE_PARENT_MAP[key];
+    const parentSolved = parent ? fk[parent] : void 0;
+    const x = solved ? parentSolved ? solved.x - parentSolved.x : solved.x : 0;
+    const y = solved ? parentSolved ? solved.y - parentSolved.y : solved.y : 0;
+    const rotation = DEFAULT_POSE[key] ?? 0;
     return {
-        skeleton: {
-            hash: generateHash(name),
-            spine: '4.1',
-            x: 0,
-            y: 0,
-            width: size,
-            height: size,
-            images: imagePath,
-        },
-        bones,
-        slots,
-        skins: { default: skinAttachments },
-        animations: animationsOut,
+      name: key,
+      parent,
+      length: boneLength(rig, key, size),
+      x: Math.round(x * 100) / 100,
+      y: Math.round(-y * 100) / 100,
+      // Spine uses Y-up
+      rotation: Math.round(rotation * 100) / 100
+    };
+  });
+  const slots = BONE_ORDER.map((key) => ({
+    name: `${key}_slot`,
+    bone: key,
+    attachment: `${key}_img`
+  }));
+  const skinAttachments = {};
+  for (const key of BONE_ORDER) {
+    skinAttachments[`${key}_slot`] = {
+      [`${key}_img`]: {
+        type: "region",
+        x: 0,
+        y: 0,
+        width: Math.round(boneLength(rig, key, size)),
+        height: 8
+      }
     };
+  }
+  const animationsOut = {};
+  for (const anim of animations) {
+    const sortedKf = [...anim.keyframes].sort((a, b) => a.time - b.time);
+    const boneRotations = {};
+    for (const key of BONE_ORDER) {
+      const rotateKf = sortedKf.map((kf) => ({
+        time: Math.round(kf.time) / 1e3,
+        // ms → seconds
+        angle: (kf.pose[key] ?? DEFAULT_POSE[key] ?? 0) - (DEFAULT_POSE[key] ?? 0),
+        curve: "stepped"
+      }));
+      boneRotations[key] = { rotate: rotateKf };
+    }
+    animationsOut[anim.name] = { bones: boneRotations };
+  }
+  return {
+    skeleton: {
+      hash: generateHash(name),
+      spine: "4.1",
+      x: 0,
+      y: 0,
+      width: size,
+      height: size,
+      images: imagePath
+    },
+    bones,
+    slots,
+    skins: { default: skinAttachments },
+    animations: animationsOut
+  };
 }
-/** Serialize Spine data to JSON string. */
 function spineToJSON(data) {
-    return JSON.stringify(data, null, 2);
+  return JSON.stringify(data, null, 2);
 }
-/** Create a downloadable Blob for the Spine JSON. */
 function spineToBlob(data) {
-    return new Blob([spineToJSON(data)], { type: 'application/json' });
+  return new Blob([spineToJSON(data)], { type: "application/json" });
 }
-// ── Helpers ─────────────────────────────────────────────────────
 function generateHash(input) {
-    let hash = 0;
-    for (let i = 0; i < input.length; i++) {
-        const char = input.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-        hash |= 0;
-    }
-    return Math.abs(hash).toString(36);
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
 }
-
-export { exportToSpine, spineToBlob, spineToJSON };
+export {
+  exportToSpine,
+  spineToBlob,
+  spineToJSON
+};