@nice2dev/ui-graphics 1.3.15 → 1.3.17

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

@@ -1,51 +1,113 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var characterTypes = require('../characterTypes.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const characterTypes = require("../characterTypes.js");
 function pal(c) {
-    return {
-        base: characterTypes.pick(c, 0, 'var(--anim-shirt, #3B82F6)'),
-        accent: characterTypes.pick(c, 1, 'var(--anim-outfit-2, #2563EB)'),
-        stroke: characterTypes.pick(c, 2, 'var(--anim-stroke, #111)'),
-    };
+  return {
+    base: characterTypes.pick(c, 0, "var(--anim-shirt, #3B82F6)"),
+    accent: characterTypes.pick(c, 1, "var(--anim-outfit-2, #2563EB)"),
+    stroke: characterTypes.pick(c, 2, "var(--anim-stroke, #111)")
+  };
 }
-const OutfitTee = ({ colors, scale = 1, transform, strokeWidth = 1.4, }) => {
-    const c = pal(colors);
-    return (jsxRuntime.jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsxRuntime.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 }), jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 (jsxRuntime.jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsxRuntime.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 }), jsxRuntime.jsx("path", { d: "M-6 -24 q6 12 12 0", fill: c.accent, stroke: c.stroke, strokeWidth: 0.8 }), jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M-6 -24 q6 12 12 0", fill: c.accent, stroke: c.stroke, strokeWidth: 0.8 }),
+        /* @__PURE__ */ jsxRuntime.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 (jsxRuntime.jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: c.stroke, strokeWidth: strokeWidth, strokeLinejoin: "round", children: [jsxRuntime.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 }), jsxRuntime.jsx("path", { d: "M-8 -26 l8 20 l8 -20", fill: "none", stroke: c.accent, strokeWidth: 1.2 }), jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `${transform ?? ""} scale(${scale})`,
+      stroke: c.stroke,
+      strokeWidth,
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M-8 -26 l8 20 l8 -20", fill: "none", stroke: c.accent, strokeWidth: 1.2 }),
+        /* @__PURE__ */ jsxRuntime.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 jsxRuntime.jsx(Comp, { ...rest });
+  const Comp = OUTFIT_RENDERERS[variant] ?? OutfitTee;
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...rest });
 };
-
 exports.OUTFIT_RENDERERS = OUTFIT_RENDERERS;
 exports.Outfit = Outfit;
 exports.OutfitHoodie = OutfitHoodie;

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

@@ -1,13 +1,17 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var characterTypes = require('../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 : characterTypes.pick(arr, 0, 'var(--anim-skin, #FFD2B3)');
-    const stroke = characterTypes.pick(arr, 2, 'var(--anim-stroke, #111)');
-    return (jsxRuntime.jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: stroke, strokeWidth: strokeWidth, children: jsxRuntime.jsx("path", { d: "M-24 -20 h48 v44 h-48 z", fill: skin, opacity: 0.5 }) }));
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const characterTypes = require("../characterTypes.js");
+const Torso = ({
+  colors,
+  scale = 1,
+  transform,
+  strokeWidth = 1.4,
+  fill
+}) => {
+  const arr = colors ?? [];
+  const skin = fill ?? characterTypes.pick(arr, 0, "var(--anim-skin, #FFD2B3)");
+  const stroke = characterTypes.pick(arr, 2, "var(--anim-stroke, #111)");
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `${transform ?? ""} scale(${scale})`, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M-24 -20 h48 v44 h-48 z", fill: skin, opacity: 0.5 }) });
 };
-
 exports.Torso = Torso;

package/dist/cjs/animation/spineExport.js

@@ -1,138 +1,120 @@
-'use strict';
-
-var rigMath = require('./rig/rigMath.js');
-var rigTypes = require('./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 ────────────────────────────────────────────────
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const rigMath = require("./rig/rigMath.js");
+const rigTypes = require("./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 = rigTypes.DEFAULT_RIG, imagePath = './images/', } = options;
-    // Solve default pose for initial bone positions
-    const fk = rigMath.solveFK(rig, rigTypes.DEFAULT_POSE, size);
-    // Build bones
-    const bones = rigTypes.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 = rigTypes.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 = rigTypes.BONE_ORDER.map((key) => ({
-        name: `${key}_slot`,
-        bone: key,
-        attachment: `${key}_img`,
-    }));
-    // Build default skin
-    const skinAttachments = {};
-    for (const key of rigTypes.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 rigTypes.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 : rigTypes.DEFAULT_POSE[key]) !== null && _b !== void 0 ? _b : 0) - ((_c = rigTypes.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 = rigTypes.DEFAULT_RIG,
+    imagePath = "./images/"
+  } = options;
+  const fk = rigMath.solveFK(rig, rigTypes.DEFAULT_POSE, size);
+  const bones = rigTypes.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 = rigTypes.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 = rigTypes.BONE_ORDER.map((key) => ({
+    name: `${key}_slot`,
+    bone: key,
+    attachment: `${key}_img`
+  }));
+  const skinAttachments = {};
+  for (const key of rigTypes.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 rigTypes.BONE_ORDER) {
+      const rotateKf = sortedKf.map((kf) => ({
+        time: Math.round(kf.time) / 1e3,
+        // ms → seconds
+        angle: (kf.pose[key] ?? rigTypes.DEFAULT_POSE[key] ?? 0) - (rigTypes.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);
 }
-
 exports.exportToSpine = exportToSpine;
 exports.spineToBlob = spineToBlob;
 exports.spineToJSON = spineToJSON;

package/dist/cjs/core/LocalUI.js

@@ -1,53 +1,118 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
 const variantMap = {
-    dark: 'secondary',
-    light: 'ghost',
-    'outline-secondary': 'outline',
-    'outline-info': 'info',
-    'outline-warning': 'warning',
-    'outline-danger': 'error',
+  dark: "secondary",
+  light: "ghost",
+  "outline-secondary": "outline",
+  "outline-info": "info",
+  "outline-warning": "warning",
+  "outline-danger": "error"
 };
 const sizeMap = {
-    sm: 'sm',
-    md: 'md',
+  sm: "sm",
+  md: "md"
 };
-const Button = ({ variant = 'dark', size = 'md', className = '', children, disabled, onClick, title, style, }) => {
-    return (jsxRuntime.jsx(ui.NiceButton, { variant: variantMap[variant], size: sizeMap[size], className: className, disabled: disabled, onClick: onClick, "aria-label": title, style: style, children: children }));
+const Button = ({
+  variant = "dark",
+  size = "md",
+  className = "",
+  children,
+  disabled,
+  onClick,
+  title,
+  style
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.NiceButton,
+    {
+      variant: variantMap[variant],
+      size: sizeMap[size],
+      className,
+      disabled,
+      onClick,
+      "aria-label": title,
+      style,
+      children
+    }
+  );
 };
-const RangeInput = ({ accentColor, style, className = '', value, min = 0, max = 100, step = 1, onChange, onMouseUp, }) => {
-    const handleChange = React.useCallback((val) => {
-        if (onChange) {
-            const syntheticEvent = {
-                target: { value: String(val) },
-                currentTarget: { value: String(val) },
-            };
-            onChange(syntheticEvent);
-        }
-        // Trigger onMouseUp on every change since NiceSlider doesn't have onChangeEnd
-        if (onMouseUp) {
-            onMouseUp({});
-        }
-    }, [onChange, onMouseUp]);
-    return (jsxRuntime.jsx(ui.NiceSlider, { value: typeof value === 'number' ? value : Number(value) || 0, min: Number(min), max: Number(max), step: Number(step), className: className, style: { ...style, '--nice-accent': accentColor }, onChange: handleChange, showValue: false }));
+const RangeInput = ({
+  accentColor,
+  style,
+  className = "",
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  onMouseUp
+}) => {
+  const handleChange = React.useCallback(
+    (val) => {
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: String(val) },
+          currentTarget: { value: String(val) }
+        };
+        onChange(syntheticEvent);
+      }
+      if (onMouseUp) {
+        onMouseUp({});
+      }
+    },
+    [onChange, onMouseUp]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.NiceSlider,
+    {
+      value: typeof value === "number" ? value : Number(value) || 0,
+      min: Number(min),
+      max: Number(max),
+      step: Number(step),
+      className,
+      style: { ...style, "--nice-accent": accentColor },
+      onChange: handleChange,
+      showValue: false
+    }
+  );
 };
-const TextArea = ({ className = '', value, onChange, rows, placeholder, disabled, style, }) => {
-    const handleChange = React.useCallback((newValue) => {
-        if (onChange) {
-            const syntheticEvent = {
-                target: { value: newValue },
-                currentTarget: { value: newValue },
-            };
-            onChange(syntheticEvent);
-        }
-    }, [onChange]);
-    return (jsxRuntime.jsx(ui.NiceTextArea, { className: className, value: typeof value === 'string' ? value : String(value !== null && value !== void 0 ? value : ''), onChange: handleChange, rows: rows, placeholder: placeholder, disabled: disabled, style: style }));
+const TextArea = ({
+  className = "",
+  value,
+  onChange,
+  rows,
+  placeholder,
+  disabled,
+  style
+}) => {
+  const handleChange = React.useCallback(
+    (newValue) => {
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: newValue },
+          currentTarget: { value: newValue }
+        };
+        onChange(syntheticEvent);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.NiceTextArea,
+    {
+      className,
+      value: typeof value === "string" ? value : String(value ?? ""),
+      onChange: handleChange,
+      rows,
+      placeholder,
+      disabled,
+      style
+    }
+  );
 };
-
 exports.Button = Button;
 exports.RangeInput = RangeInput;
 exports.TextArea = TextArea;