anim-3d-obj 2.0.2 → 2.0.5

package/dist/index.cjs

@@ -1,35 +1,303 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 // src/components/Obj.tsx
-var Obj = ({
-  width = "160px",
-  height = "160px",
-  depth = "150px",
-  perspective = 500,
-  perspectiveOrigin = "50% 50%",
-  rotation,
-  className,
-  style,
-  global,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className,
-      style: {
-        perspective,
-        perspectiveOrigin,
-        ...style
-      },
-      "data-anim-3d-obj": true,
-      children
-    }
+
+// src/keyframes.ts
+function ensureStyleTag() {
+  let tag = document.getElementById(
+    "anim3d-keyframes"
   );
-};
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = "anim3d-keyframes";
+    document.head.appendChild(tag);
+  }
+  return tag;
+}
+function inject(css) {
+  if (typeof document === "undefined") return;
+  const tag = ensureStyleTag();
+  tag.appendChild(document.createTextNode(css));
+}
+function builtInKeyframes(name, cfg) {
+  const hi = cfg.degreesHi ?? 15;
+  const lo = cfg.degreesLow ?? -15;
+  switch (name) {
+    case "Y360":
+      return `@keyframes Y360 { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }`;
+    case "X360":
+      return `@keyframes X360 { from { transform: rotateX(0deg) } to { transform: rotateX(360deg) } }`;
+    case "Z360":
+      return `@keyframes Z360 { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }`;
+    case "rockY":
+      return `@keyframes rockY { 0%{ transform: rotateY(${lo}deg) } 50%{ transform: rotateY(${hi}deg) } 100%{ transform: rotateY(${lo}deg) } }`;
+    case "rockX":
+      return `@keyframes rockX { 0%{ transform: rotateX(${lo}deg) } 50%{ transform: rotateX(${hi}deg) } 100%{ transform: rotateX(${lo}deg) } }`;
+    default:
+      return "";
+  }
+}
+function resolveAnimation(cfg) {
+  if (!cfg) return null;
+  const name = cfg.name;
+  const builtIn = builtInKeyframes(name, cfg);
+  if (builtIn) {
+    const marker = `/*kf-${name}*/`;
+    if (typeof document !== "undefined") {
+      const tag = ensureStyleTag();
+      if (!tag.innerHTML.includes(marker)) {
+        inject(`${builtIn}
+${marker}`);
+      }
+    }
+    return name;
+  }
+  return name;
+}
+function toAnimationShorthand(cfg) {
+  const name = resolveAnimation(cfg);
+  if (!cfg || !name) return null;
+  const dur = (cfg.duration ?? 10) + "s";
+  const delay = (cfg.delay ?? 0) + "s";
+  const iter = cfg.iterationCount ?? "infinite";
+  const dir = cfg.direction ?? "normal";
+  const timing = cfg.timing ?? "linear";
+  const fill = cfg.fillMode ?? "forwards";
+  const play = cfg.animationPlayState ?? "running";
+  return `${name} ${dur} ${timing} ${delay} ${iter} ${dir} ${fill} ${play}`;
+}
+function faceTransform3D(name, w, h, d) {
+  const hw = w / 2;
+  const hh = h / 2;
+  const hd = d / 2;
+  switch (name) {
+    case "front":
+      return `translate(-50%, -50%) translateZ(${hd}px)`;
+    case "back":
+      return `translate(-50%, -50%) rotateY(180deg) translateZ(${hd}px)`;
+    case "left":
+      return `translate(-50%, -50%) rotateY(-90deg) translateZ(${hw}px)`;
+    case "right":
+      return `translate(-50%, -50%) rotateY(90deg) translateZ(${hw}px)`;
+    case "top":
+      return `translate(-50%, -50%) rotateX(90deg) translateZ(${hh}px)`;
+    case "bottom":
+      return `translate(-50%, -50%) rotateX(-90deg) translateZ(${hh}px)`;
+    case "top_front":
+      return `translate(-50%, -50%) rotateX(45deg) translateZ(${hh}px)`;
+    case "top_rear":
+      return `translate(-50%, -50%) rotateX(135deg) translateZ(${hh}px)`;
+    case "bottom_front":
+      return `translate(-50%, -50%) rotateX(-45deg) translateZ(${hh}px)`;
+    case "bottom_rear":
+      return `translate(-50%, -50%) rotateX(-135deg) translateZ(${hh}px)`;
+    default:
+      return `translate(-50%, -50%) translateZ(${hd}px)`;
+  }
+}
+function faceTransformFlat(name, w, _h, d) {
+  const total = 2 * d + 2 * w;
+  const halfTotal = total / 2;
+  let cx;
+  switch (name) {
+    case "left":
+      cx = d / 2;
+      break;
+    case "front":
+      cx = d + w / 2;
+      break;
+    case "right":
+      cx = d + w + d / 2;
+      break;
+    case "back":
+      cx = d + w + d + w / 2;
+      break;
+    case "top":
+    case "top_front":
+    case "top_rear":
+      cx = d + w / 2;
+      return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(-${_h}px)`;
+    case "bottom":
+    case "bottom_front":
+    case "bottom_rear":
+      cx = d + w / 2;
+      return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(${_h}px)`;
+    default:
+      cx = d + w / 2;
+      break;
+  }
+  const offsetX = cx - halfTotal;
+  return `translate(-50%, -50%) translateX(${offsetX}px)`;
+}
+function parseCssText(css) {
+  if (!css) return {};
+  const style = {};
+  css.split(";").forEach((rule) => {
+    const [prop, ...rest] = rule.split(":");
+    if (!prop || rest.length === 0) return;
+    const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    style[key] = rest.join(":").trim();
+  });
+  return style;
+}
+function faceDimensions(name, w, h, d) {
+  switch (name) {
+    case "left":
+    case "right":
+      return { width: d, height: h };
+    case "top":
+    case "bottom":
+    case "top_front":
+    case "top_rear":
+    case "bottom_front":
+    case "bottom_rear":
+      return { width: w, height: d };
+    default:
+      return { width: w, height: h };
+  }
+}
+var DEFAULT_FACE_NAMES = [
+  "front",
+  "back",
+  "left",
+  "right",
+  "top",
+  "bottom"
+];
+var Obj = React__namespace.memo(
+  ({
+    width = 160,
+    height = 160,
+    depth = 150,
+    perspective = 600,
+    perspectiveOrigin = "50% 50%",
+    faces,
+    global: globalDef,
+    anim1,
+    anim2,
+    showCenterDiv = false,
+    flat = false,
+    transitionDuration = 1,
+    className,
+    style
+  }) => {
+    const w = typeof width === "number" ? width : parseFloat(width);
+    const h = typeof height === "number" ? height : parseFloat(height);
+    const d = typeof depth === "number" ? depth : parseFloat(depth);
+    const animation1 = toAnimationShorthand(anim1) ?? void 0;
+    const animation2 = toAnimationShorthand(anim2) ?? void 0;
+    const faceList = faces && faces.length > 0 ? faces : DEFAULT_FACE_NAMES.map((name) => ({ name }));
+    const transitionCss = `transform ${transitionDuration}s ease-in-out`;
+    const renderFace = (face, i) => {
+      const dims = faceDimensions(face.name, w, h, d);
+      const transform = flat ? faceTransformFlat(face.name, w, h, d) : faceTransform3D(face.name, w, h, d);
+      const globalStyle = parseCssText(globalDef?.css);
+      const faceInlineStyle = parseCssText(face.css);
+      const mergedStyle = {
+        ...globalStyle,
+        ...globalDef?.style ?? {},
+        ...faceInlineStyle,
+        ...face.style ?? {},
+        width: dims.width,
+        height: dims.height,
+        transform,
+        transition: transitionCss
+      };
+      const body = face.body ?? globalDef?.body ?? null;
+      const faceClassName = [
+        "anim3d-face",
+        face.className
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: faceClassName,
+          style: mergedStyle,
+          children: body
+        },
+        face.name + "-" + i
+      );
+    };
+    const cssVars = {
+      "--obj-w": w + "px",
+      "--obj-h": h + "px",
+      "--obj-d": d + "px"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ["anim3d-stage", className].filter(Boolean).join(" "),
+        style: {
+          perspective: flat ? "none" : perspective,
+          perspectiveOrigin,
+          ...cssVars,
+          ...style
+        },
+        "data-anim-3d-obj": true,
+        role: "img",
+        "aria-label": "3D object",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "anim3d-wrapper",
+            style: {
+              ...cssVars,
+              animation: flat ? "none" : animation1,
+              transformStyle: "preserve-3d",
+              transition: transitionCss
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "anim3d-wrapper",
+                style: {
+                  ...cssVars,
+                  animation: flat ? "none" : animation2,
+                  transformStyle: "preserve-3d",
+                  transition: transitionCss
+                },
+                children: [
+                  showCenterDiv && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "anim3d-center" }),
+                  faceList.map(renderFace)
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Obj.displayName = "Obj";
 
 exports.Obj = Obj;
+exports.default = Obj;
+exports.resolveAnimation = resolveAnimation;
+exports.toAnimationShorthand = toAnimationShorthand;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Obj.tsx"],"names":["jsx"],"mappings":";;;;;AAmBO,IAAM,MAA0B,CAAC;AAAA,EACrC,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,OAAA;AAAA,EACT,KAAA,GAAQ,OAAA;AAAA,EACR,WAAA,GAAc,GAAA;AAAA,EACd,iBAAA,GAAoB,SAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACH,CAAA,KAAM;AAEH,EAAA,uBACGA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACJ,WAAA;AAAA,QACA,iBAAA;AAAA,QACA,GAAG;AAAA,OACN;AAAA,MACA,kBAAA,EAAgB,IAAA;AAAA,MAGf;AAAA;AAAA,GACJ;AAEN","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport \"./../styles/obj.css\";\n\nexport type ObjProps = {\n   width?: string | number;\n   height?: string | number;\n   depth?: string | number;\n   perspective?: string | number;\n   perspectiveOrigin?: string;\n   rotation?: string; // e.g., \"x 1s linear infinite\"\n   className?: string;\n   style?: React.CSSProperties;\n   global?: {\n      css?: string;\n      body?: string;\n   };\n   children?: React.ReactNode;\n};\n\nexport const Obj: React.FC<ObjProps> = ({\n   width = \"160px\",\n   height = \"160px\",\n   depth = \"150px\",\n   perspective = 500,\n   perspectiveOrigin = \"50% 50%\",\n   rotation,\n   className,\n   style,\n   global,\n   children,\n}) => {\n   // … your existing DOM/CSS 3D layout & animations\n   return (\n      <div\n         className={className}\n         style={{\n            perspective,\n            perspectiveOrigin,\n            ...style,\n         }}\n         data-anim-3d-obj\n      >\n         {/* faces, wrappers, animations… */}\n         {children}\n      </div>\n   );\n};\n"]}
+{"version":3,"sources":["../src/keyframes.ts","../src/components/Obj.tsx"],"names":["React","jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { AnimationConfig } from \"./types\";\n\n/** Create (or reuse) a <style> tag for dynamic keyframes */\nfunction ensureStyleTag(): HTMLStyleElement {\n   let tag = document.getElementById(\n      \"anim3d-keyframes\"\n   ) as HTMLStyleElement | null;\n   if (!tag) {\n      tag = document.createElement(\"style\");\n      tag.id = \"anim3d-keyframes\";\n      document.head.appendChild(tag);\n   }\n   return tag;\n}\n\nfunction inject(css: string) {\n   if (typeof document === \"undefined\") return; // SSR\n   const tag = ensureStyleTag();\n   tag.appendChild(document.createTextNode(css));\n}\n\n/** Keyframes text for built-ins */\nfunction builtInKeyframes(name: string, cfg: AnimationConfig) {\n   const hi = cfg.degreesHi ?? 15;\n   const lo = cfg.degreesLow ?? -15;\n   switch (name) {\n      case \"Y360\":\n         return `@keyframes Y360 { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }`;\n      case \"X360\":\n         return `@keyframes X360 { from { transform: rotateX(0deg) } to { transform: rotateX(360deg) } }`;\n      case \"Z360\":\n         return `@keyframes Z360 { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }`;\n      case \"rockY\":\n         return `@keyframes rockY { 0%{ transform: rotateY(${lo}deg) } 50%{ transform: rotateY(${hi}deg) } 100%{ transform: rotateY(${lo}deg) } }`;\n      case \"rockX\":\n         return `@keyframes rockX { 0%{ transform: rotateX(${lo}deg) } 50%{ transform: rotateX(${hi}deg) } 100%{ transform: rotateX(${lo}deg) } }`;\n      default:\n         // Custom names: let authors supply their own @keyframes in global CSS with that name.\n         return \"\";\n   }\n}\n\n/** Returns a concrete animation-name and ensures keyframes exist (for built-ins) */\nexport function resolveAnimation(cfg?: AnimationConfig): string | null {\n   if (!cfg) return null;\n   const name = cfg.name;\n   const builtIn = builtInKeyframes(name, cfg);\n   if (builtIn) {\n      // Ensure single injection per built-in name\n      const marker = `/*kf-${name}*/`;\n      if (typeof document !== \"undefined\") {\n         const tag = ensureStyleTag();\n         if (!tag.innerHTML.includes(marker)) {\n            inject(`${builtIn}\\n${marker}`);\n         }\n      }\n      return name; // use built-in name as animation-name\n   }\n   // custom: use author-provided @keyframes by name\n   return name;\n}\n\n/** Build the full CSS animation shorthand from a config and resolved name */\nexport function toAnimationShorthand(cfg?: AnimationConfig): string | null {\n   const name = resolveAnimation(cfg);\n   if (!cfg || !name) return null;\n   const dur = (cfg.duration ?? 10) + \"s\";\n   const delay = (cfg.delay ?? 0) + \"s\";\n   const iter = cfg.iterationCount ?? \"infinite\";\n   const dir = cfg.direction ?? \"normal\";\n   const timing = cfg.timing ?? \"linear\";\n   const fill = cfg.fillMode ?? \"forwards\";\n   const play = cfg.animationPlayState ?? \"running\";\n   // name duration timing delay iteration-count direction fill-mode play-state\n   return `${name} ${dur} ${timing} ${delay} ${iter} ${dir} ${fill} ${play}`;\n}\n","import * as React from \"react\";\nimport type {\n   ObjProps,\n   FaceDef,\n   FaceName,\n   GlobalDef,\n} from \"../types\";\nimport { toAnimationShorthand } from \"../keyframes\";\nimport \"../styles/obj.css\";\n\n// Re-export the canonical ObjProps from types.ts\nexport type { ObjProps } from \"../types\";\n\n/* ------------------------------------------------------------------ */\n/*  Face transform — 3D cuboid positions                               */\n/* ------------------------------------------------------------------ */\n\nfunction faceTransform3D(\n   name: string,\n   w: number,\n   h: number,\n   d: number\n): string {\n   const hw = w / 2;\n   const hh = h / 2;\n   const hd = d / 2;\n\n   switch (name as FaceName) {\n      case \"front\":\n         return `translate(-50%, -50%) translateZ(${hd}px)`;\n      case \"back\":\n         return `translate(-50%, -50%) rotateY(180deg) translateZ(${hd}px)`;\n      case \"left\":\n         return `translate(-50%, -50%) rotateY(-90deg) translateZ(${hw}px)`;\n      case \"right\":\n         return `translate(-50%, -50%) rotateY(90deg) translateZ(${hw}px)`;\n      case \"top\":\n         return `translate(-50%, -50%) rotateX(90deg) translateZ(${hh}px)`;\n      case \"bottom\":\n         return `translate(-50%, -50%) rotateX(-90deg) translateZ(${hh}px)`;\n      case \"top_front\":\n         return `translate(-50%, -50%) rotateX(45deg) translateZ(${hh}px)`;\n      case \"top_rear\":\n         return `translate(-50%, -50%) rotateX(135deg) translateZ(${hh}px)`;\n      case \"bottom_front\":\n         return `translate(-50%, -50%) rotateX(-45deg) translateZ(${hh}px)`;\n      case \"bottom_rear\":\n         return `translate(-50%, -50%) rotateX(-135deg) translateZ(${hh}px)`;\n      default:\n         return `translate(-50%, -50%) translateZ(${hd}px)`;\n   }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Face transform — flat (unfolded) positions                         */\n/*                                                                     */\n/*  Layout order:  … | left | front | right | back | …                 */\n/*  Centered on the midpoint of the full row.                          */\n/* ------------------------------------------------------------------ */\n\n/** Ordered face names for the flat row (left-to-right) */\nconst FLAT_ORDER: FaceName[] = [\"left\", \"front\", \"right\", \"back\"];\n\n/**\n * Returns the flat-layout transform for a face.\n *\n * Side faces (left, right) have a rendered width of `d` (depth).\n * Front/back faces have a rendered width of `w`.\n * Row order: left(d) | front(w) | right(d) | back(w)\n * Total row width = 2d + 2w.  We centre the row on 0.\n */\nfunction faceTransformFlat(\n   name: string,\n   w: number,\n   _h: number,\n   d: number\n): string {\n   // Total row width\n   const total = 2 * d + 2 * w;\n   const halfTotal = total / 2;\n\n   // Cumulative left-edge x positions (relative to row start = 0)\n   // left  : 0          width d\n   // front : d          width w\n   // right : d + w      width d\n   // back  : d + w + d  width w\n   let cx: number; // centre-x of this face in the row\n\n   switch (name as FaceName) {\n      case \"left\":\n         cx = d / 2;\n         break;\n      case \"front\":\n         cx = d + w / 2;\n         break;\n      case \"right\":\n         cx = d + w + d / 2;\n         break;\n      case \"back\":\n         cx = d + w + d + w / 2;\n         break;\n      case \"top\":\n      case \"top_front\":\n      case \"top_rear\":\n         // Top faces slide upward out of the way\n         cx = d + w / 2;\n         return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(-${_h}px)`;\n      case \"bottom\":\n      case \"bottom_front\":\n      case \"bottom_rear\":\n         cx = d + w / 2;\n         return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(${_h}px)`;\n      default:\n         cx = d + w / 2;\n         break;\n   }\n\n   // Shift so the row is centred on x=0\n   const offsetX = cx - halfTotal;\n   return `translate(-50%, -50%) translateX(${offsetX}px)`;\n}\n\n/* ------------------------------------------------------------------ */\n/*  Parse a legacy CSS text string into a CSSProperties object         */\n/* ------------------------------------------------------------------ */\n\nfunction parseCssText(css?: string): React.CSSProperties {\n   if (!css) return {};\n   const style: Record<string, string> = {};\n   css.split(\";\").forEach((rule) => {\n      const [prop, ...rest] = rule.split(\":\");\n      if (!prop || rest.length === 0) return;\n      const key = prop\n         .trim()\n         .replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n      style[key] = rest.join(\":\").trim();\n   });\n   return style as React.CSSProperties;\n}\n\n/* ------------------------------------------------------------------ */\n/*  Resolve face dimensions for non-standard faces                     */\n/* ------------------------------------------------------------------ */\n\nfunction faceDimensions(\n   name: string,\n   w: number,\n   h: number,\n   d: number\n): { width: number; height: number } {\n   switch (name as FaceName) {\n      case \"left\":\n      case \"right\":\n         return { width: d, height: h };\n      case \"top\":\n      case \"bottom\":\n      case \"top_front\":\n      case \"top_rear\":\n      case \"bottom_front\":\n      case \"bottom_rear\":\n         return { width: w, height: d };\n      default:\n         return { width: w, height: h };\n   }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Default 6-sided cube when no faces are provided                    */\n/* ------------------------------------------------------------------ */\n\nconst DEFAULT_FACE_NAMES: FaceName[] = [\n   \"front\",\n   \"back\",\n   \"left\",\n   \"right\",\n   \"top\",\n   \"bottom\",\n];\n\n/* ------------------------------------------------------------------ */\n/*  Component                                                          */\n/* ------------------------------------------------------------------ */\n\nexport const Obj: React.FC<ObjProps> = React.memo(\n   ({\n      width = 160,\n      height = 160,\n      depth = 150,\n      perspective = 600,\n      perspectiveOrigin = \"50% 50%\",\n      faces,\n      global: globalDef,\n      anim1,\n      anim2,\n      showCenterDiv = false,\n      flat = false,\n      transitionDuration = 1,\n      className,\n      style,\n   }) => {\n      const w = typeof width === \"number\" ? width : parseFloat(width);\n      const h = typeof height === \"number\" ? height : parseFloat(height);\n      const d = typeof depth === \"number\" ? depth : parseFloat(depth);\n\n      // Resolve animation shorthands\n      const animation1 = toAnimationShorthand(anim1) ?? undefined;\n      const animation2 = toAnimationShorthand(anim2) ?? undefined;\n\n      // Determine which faces to render\n      const faceList: FaceDef[] =\n         faces && faces.length > 0\n            ? faces\n            : DEFAULT_FACE_NAMES.map((name) => ({ name }));\n\n      const transitionCss = `transform ${transitionDuration}s ease-in-out`;\n\n      // Merge global defaults into each face\n      const renderFace = (face: FaceDef, i: number) => {\n         const dims = faceDimensions(face.name, w, h, d);\n         const transform = flat\n            ? faceTransformFlat(face.name, w, h, d)\n            : faceTransform3D(face.name, w, h, d);\n\n         const globalStyle = parseCssText(globalDef?.css);\n         const faceInlineStyle = parseCssText(face.css);\n\n         const mergedStyle: React.CSSProperties = {\n            ...globalStyle,\n            ...(globalDef?.style ?? {}),\n            ...faceInlineStyle,\n            ...(face.style ?? {}),\n            width: dims.width,\n            height: dims.height,\n            transform,\n            transition: transitionCss,\n         };\n\n         const body = face.body ?? globalDef?.body ?? null;\n         const faceClassName = [\n            \"anim3d-face\",\n            face.className,\n         ]\n            .filter(Boolean)\n            .join(\" \");\n\n         return (\n            <div\n               key={face.name + \"-\" + i}\n               className={faceClassName}\n               style={mergedStyle}\n            >\n               {body}\n            </div>\n         );\n      };\n\n      const cssVars = {\n         \"--obj-w\": w + \"px\",\n         \"--obj-h\": h + \"px\",\n         \"--obj-d\": d + \"px\",\n      } as React.CSSProperties;\n\n      return (\n         <div\n            className={[\"anim3d-stage\", className].filter(Boolean).join(\" \")}\n            style={{\n               perspective: flat ? \"none\" : perspective,\n               perspectiveOrigin,\n               ...cssVars,\n               ...style,\n            }}\n            data-anim-3d-obj\n            role=\"img\"\n            aria-label=\"3D object\"\n         >\n            {/* Outer animation wrapper (anim1) */}\n            <div\n               className=\"anim3d-wrapper\"\n               style={{\n                  ...cssVars,\n                  animation: flat ? \"none\" : animation1,\n                  transformStyle: \"preserve-3d\",\n                  transition: transitionCss,\n               }}\n            >\n               {/* Inner animation wrapper (anim2) */}\n               <div\n                  className=\"anim3d-wrapper\"\n                  style={{\n                     ...cssVars,\n                     animation: flat ? \"none\" : animation2,\n                     transformStyle: \"preserve-3d\",\n                     transition: transitionCss,\n                  }}\n               >\n                  {showCenterDiv && <div className=\"anim3d-center\" />}\n                  {faceList.map(renderFace)}\n               </div>\n            </div>\n         </div>\n      );\n   }\n);\n\nObj.displayName = \"Obj\";\n"]}

package/dist/index.css

@@ -3,14 +3,12 @@
   position: relative;
   width: max-content;
   height: max-content;
-  perspective: 600px;
-  perspective-origin: 50% 50%;
 }
 .anim3d-wrapper {
   position: relative;
   transform-style: preserve-3d;
-  width: var(--obj-w);
-  height: var(--obj-h);
+  width: var(--obj-w, 160px);
+  height: var(--obj-h, 160px);
 }
 .anim3d-center {
   position: absolute;
@@ -21,13 +19,12 @@
   background: #f00;
   transform: translate(-50%, -50%);
   z-index: 10;
+  pointer-events: none;
 }
 .anim3d-face {
   position: absolute;
   left: 50%;
   top: 50%;
-  width: var(--obj-w);
-  height: var(--obj-h);
   transform-style: preserve-3d;
   display: flex;
   align-items: center;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/obj.css"],"sourcesContent":[".anim3d-stage {\n   position: relative;\n   width: max-content;\n   height: max-content;\n   perspective: 600px;\n   perspective-origin: 50% 50%;\n}\n\n.anim3d-wrapper {\n   position: relative;\n   transform-style: preserve-3d;\n   width: var(--obj-w);\n   height: var(--obj-h);\n}\n\n.anim3d-center {\n   position: absolute;\n   left: 50%;\n   top: 50%;\n   width: 2px;\n   height: 2px;\n   background: #f00;\n   transform: translate(-50%, -50%);\n   z-index: 10;\n}\n\n.anim3d-face {\n   position: absolute;\n   left: 50%;\n   top: 50%;\n   width: var(--obj-w);\n   height: var(--obj-h);\n   transform-style: preserve-3d;\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   backface-visibility: visible;\n   box-sizing: border-box;\n}\n"],"mappings":";AAAA,CAAC;AACE,YAAU;AACV,SAAO;AACP,UAAQ;AACR,eAAa;AACb,sBAAoB,IAAI;AAC3B;AAEA,CAAC;AACE,YAAU;AACV,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACf;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,aAAW,UAAU,IAAI,EAAE;AAC3B,WAAS;AACZ;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,mBAAiB;AACjB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,uBAAqB;AACrB,cAAY;AACf;","names":[]}
+{"version":3,"sources":["../src/styles/obj.css"],"sourcesContent":[".anim3d-stage {\n   position: relative;\n   width: max-content;\n   height: max-content;\n   /* perspective is set inline via props */\n}\n\n.anim3d-wrapper {\n   position: relative;\n   transform-style: preserve-3d;\n   width: var(--obj-w, 160px);\n   height: var(--obj-h, 160px);\n}\n\n.anim3d-center {\n   position: absolute;\n   left: 50%;\n   top: 50%;\n   width: 2px;\n   height: 2px;\n   background: #f00;\n   transform: translate(-50%, -50%);\n   z-index: 10;\n   pointer-events: none;\n}\n\n.anim3d-face {\n   position: absolute;\n   left: 50%;\n   top: 50%;\n   transform-style: preserve-3d;\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   backface-visibility: visible;\n   box-sizing: border-box;\n   /* width/height/transform set inline per face */\n}\n"],"mappings":";AAAA,CAAC;AACE,YAAU;AACV,SAAO;AACP,UAAQ;AAEX;AAEA,CAAC;AACE,YAAU;AACV,mBAAiB;AACjB,SAAO,IAAI,OAAO,EAAE;AACpB,UAAQ,IAAI,OAAO,EAAE;AACxB;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,aAAW,UAAU,IAAI,EAAE;AAC3B,WAAS;AACT,kBAAgB;AACnB;AAEA,CAAC;AACE,YAAU;AACV,QAAM;AACN,OAAK;AACL,mBAAiB;AACjB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,uBAAqB;AACrB,cAAY;AAEf;","names":[]}

package/dist/index.d.mts

@@ -1,20 +1,60 @@
 import * as React from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
+type AnimationDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
+type AnimationFill = "none" | "forwards" | "backwards" | "both";
+type AnimationPlayState = "running" | "paused";
+type TimingFn = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | string;
+type BuiltInAnimName = "Y360" | "X360" | "Z360" | "rockY" | "rockX";
+type AnimationConfig = {
+    name: BuiltInAnimName | string;
+    degreesHi?: number;
+    degreesLow?: number;
+    duration?: number;
+    delay?: number;
+    iterationCount?: number | "infinite";
+    direction?: AnimationDirection;
+    timing?: TimingFn;
+    fillMode?: AnimationFill;
+    animationPlayState?: AnimationPlayState;
+};
+type FaceName = "front" | "back" | "left" | "right" | "top" | "bottom" | "top_rear" | "top_front" | "bottom_rear" | "bottom_front";
+type FaceDef = {
+    name: FaceName | string;
+    css?: string;
+    style?: CSSProperties;
+    body?: ReactNode | string;
+    className?: string;
+};
+type GlobalDef = {
+    css?: string;
+    style?: CSSProperties;
+    body?: ReactNode | string;
+};
 type ObjProps = {
-    width?: string | number;
-    height?: string | number;
-    depth?: string | number;
-    perspective?: string | number;
+    width?: number;
+    height?: number;
+    depth?: number;
+    perspective?: number;
     perspectiveOrigin?: string;
-    rotation?: string;
+    faces?: FaceDef[];
+    global?: GlobalDef;
+    anim1?: AnimationConfig;
+    anim2?: AnimationConfig;
+    showCenterDiv?: boolean;
+    /** When true, faces unfold from 3D cuboid into a flat side-by-side row */
+    flat?: boolean;
+    /** Seconds for the fold/unfold transition (default 1) */
+    transitionDuration?: number;
     className?: string;
-    style?: React.CSSProperties;
-    global?: {
-        css?: string;
-        body?: string;
-    };
-    children?: React.ReactNode;
+    style?: CSSProperties;
 };
+
 declare const Obj: React.FC<ObjProps>;
 
-export { Obj, type ObjProps };
+/** Returns a concrete animation-name and ensures keyframes exist (for built-ins) */
+declare function resolveAnimation(cfg?: AnimationConfig): string | null;
+/** Build the full CSS animation shorthand from a config and resolved name */
+declare function toAnimationShorthand(cfg?: AnimationConfig): string | null;
+
+export { type AnimationConfig, type AnimationDirection, type AnimationFill, type AnimationPlayState, type BuiltInAnimName, type FaceDef, type FaceName, type GlobalDef, Obj, type ObjProps, type TimingFn, Obj as default, resolveAnimation, toAnimationShorthand };

package/dist/index.d.ts

@@ -1,20 +1,60 @@
 import * as React from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
+type AnimationDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
+type AnimationFill = "none" | "forwards" | "backwards" | "both";
+type AnimationPlayState = "running" | "paused";
+type TimingFn = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | string;
+type BuiltInAnimName = "Y360" | "X360" | "Z360" | "rockY" | "rockX";
+type AnimationConfig = {
+    name: BuiltInAnimName | string;
+    degreesHi?: number;
+    degreesLow?: number;
+    duration?: number;
+    delay?: number;
+    iterationCount?: number | "infinite";
+    direction?: AnimationDirection;
+    timing?: TimingFn;
+    fillMode?: AnimationFill;
+    animationPlayState?: AnimationPlayState;
+};
+type FaceName = "front" | "back" | "left" | "right" | "top" | "bottom" | "top_rear" | "top_front" | "bottom_rear" | "bottom_front";
+type FaceDef = {
+    name: FaceName | string;
+    css?: string;
+    style?: CSSProperties;
+    body?: ReactNode | string;
+    className?: string;
+};
+type GlobalDef = {
+    css?: string;
+    style?: CSSProperties;
+    body?: ReactNode | string;
+};
 type ObjProps = {
-    width?: string | number;
-    height?: string | number;
-    depth?: string | number;
-    perspective?: string | number;
+    width?: number;
+    height?: number;
+    depth?: number;
+    perspective?: number;
     perspectiveOrigin?: string;
-    rotation?: string;
+    faces?: FaceDef[];
+    global?: GlobalDef;
+    anim1?: AnimationConfig;
+    anim2?: AnimationConfig;
+    showCenterDiv?: boolean;
+    /** When true, faces unfold from 3D cuboid into a flat side-by-side row */
+    flat?: boolean;
+    /** Seconds for the fold/unfold transition (default 1) */
+    transitionDuration?: number;
     className?: string;
-    style?: React.CSSProperties;
-    global?: {
-        css?: string;
-        body?: string;
-    };
-    children?: React.ReactNode;
+    style?: CSSProperties;
 };
+
 declare const Obj: React.FC<ObjProps>;
 
-export { Obj, type ObjProps };
+/** Returns a concrete animation-name and ensures keyframes exist (for built-ins) */
+declare function resolveAnimation(cfg?: AnimationConfig): string | null;
+/** Build the full CSS animation shorthand from a config and resolved name */
+declare function toAnimationShorthand(cfg?: AnimationConfig): string | null;
+
+export { type AnimationConfig, type AnimationDirection, type AnimationFill, type AnimationPlayState, type BuiltInAnimName, type FaceDef, type FaceName, type GlobalDef, Obj, type ObjProps, type TimingFn, Obj as default, resolveAnimation, toAnimationShorthand };

package/dist/index.js

@@ -1,33 +1,276 @@
-import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Obj.tsx
-var Obj = ({
-  width = "160px",
-  height = "160px",
-  depth = "150px",
-  perspective = 500,
-  perspectiveOrigin = "50% 50%",
-  rotation,
-  className,
-  style,
-  global,
-  children
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        perspective,
-        perspectiveOrigin,
-        ...style
-      },
-      "data-anim-3d-obj": true,
-      children
-    }
+
+// src/keyframes.ts
+function ensureStyleTag() {
+  let tag = document.getElementById(
+    "anim3d-keyframes"
   );
-};
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = "anim3d-keyframes";
+    document.head.appendChild(tag);
+  }
+  return tag;
+}
+function inject(css) {
+  if (typeof document === "undefined") return;
+  const tag = ensureStyleTag();
+  tag.appendChild(document.createTextNode(css));
+}
+function builtInKeyframes(name, cfg) {
+  const hi = cfg.degreesHi ?? 15;
+  const lo = cfg.degreesLow ?? -15;
+  switch (name) {
+    case "Y360":
+      return `@keyframes Y360 { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }`;
+    case "X360":
+      return `@keyframes X360 { from { transform: rotateX(0deg) } to { transform: rotateX(360deg) } }`;
+    case "Z360":
+      return `@keyframes Z360 { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }`;
+    case "rockY":
+      return `@keyframes rockY { 0%{ transform: rotateY(${lo}deg) } 50%{ transform: rotateY(${hi}deg) } 100%{ transform: rotateY(${lo}deg) } }`;
+    case "rockX":
+      return `@keyframes rockX { 0%{ transform: rotateX(${lo}deg) } 50%{ transform: rotateX(${hi}deg) } 100%{ transform: rotateX(${lo}deg) } }`;
+    default:
+      return "";
+  }
+}
+function resolveAnimation(cfg) {
+  if (!cfg) return null;
+  const name = cfg.name;
+  const builtIn = builtInKeyframes(name, cfg);
+  if (builtIn) {
+    const marker = `/*kf-${name}*/`;
+    if (typeof document !== "undefined") {
+      const tag = ensureStyleTag();
+      if (!tag.innerHTML.includes(marker)) {
+        inject(`${builtIn}
+${marker}`);
+      }
+    }
+    return name;
+  }
+  return name;
+}
+function toAnimationShorthand(cfg) {
+  const name = resolveAnimation(cfg);
+  if (!cfg || !name) return null;
+  const dur = (cfg.duration ?? 10) + "s";
+  const delay = (cfg.delay ?? 0) + "s";
+  const iter = cfg.iterationCount ?? "infinite";
+  const dir = cfg.direction ?? "normal";
+  const timing = cfg.timing ?? "linear";
+  const fill = cfg.fillMode ?? "forwards";
+  const play = cfg.animationPlayState ?? "running";
+  return `${name} ${dur} ${timing} ${delay} ${iter} ${dir} ${fill} ${play}`;
+}
+function faceTransform3D(name, w, h, d) {
+  const hw = w / 2;
+  const hh = h / 2;
+  const hd = d / 2;
+  switch (name) {
+    case "front":
+      return `translate(-50%, -50%) translateZ(${hd}px)`;
+    case "back":
+      return `translate(-50%, -50%) rotateY(180deg) translateZ(${hd}px)`;
+    case "left":
+      return `translate(-50%, -50%) rotateY(-90deg) translateZ(${hw}px)`;
+    case "right":
+      return `translate(-50%, -50%) rotateY(90deg) translateZ(${hw}px)`;
+    case "top":
+      return `translate(-50%, -50%) rotateX(90deg) translateZ(${hh}px)`;
+    case "bottom":
+      return `translate(-50%, -50%) rotateX(-90deg) translateZ(${hh}px)`;
+    case "top_front":
+      return `translate(-50%, -50%) rotateX(45deg) translateZ(${hh}px)`;
+    case "top_rear":
+      return `translate(-50%, -50%) rotateX(135deg) translateZ(${hh}px)`;
+    case "bottom_front":
+      return `translate(-50%, -50%) rotateX(-45deg) translateZ(${hh}px)`;
+    case "bottom_rear":
+      return `translate(-50%, -50%) rotateX(-135deg) translateZ(${hh}px)`;
+    default:
+      return `translate(-50%, -50%) translateZ(${hd}px)`;
+  }
+}
+function faceTransformFlat(name, w, _h, d) {
+  const total = 2 * d + 2 * w;
+  const halfTotal = total / 2;
+  let cx;
+  switch (name) {
+    case "left":
+      cx = d / 2;
+      break;
+    case "front":
+      cx = d + w / 2;
+      break;
+    case "right":
+      cx = d + w + d / 2;
+      break;
+    case "back":
+      cx = d + w + d + w / 2;
+      break;
+    case "top":
+    case "top_front":
+    case "top_rear":
+      cx = d + w / 2;
+      return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(-${_h}px)`;
+    case "bottom":
+    case "bottom_front":
+    case "bottom_rear":
+      cx = d + w / 2;
+      return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(${_h}px)`;
+    default:
+      cx = d + w / 2;
+      break;
+  }
+  const offsetX = cx - halfTotal;
+  return `translate(-50%, -50%) translateX(${offsetX}px)`;
+}
+function parseCssText(css) {
+  if (!css) return {};
+  const style = {};
+  css.split(";").forEach((rule) => {
+    const [prop, ...rest] = rule.split(":");
+    if (!prop || rest.length === 0) return;
+    const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    style[key] = rest.join(":").trim();
+  });
+  return style;
+}
+function faceDimensions(name, w, h, d) {
+  switch (name) {
+    case "left":
+    case "right":
+      return { width: d, height: h };
+    case "top":
+    case "bottom":
+    case "top_front":
+    case "top_rear":
+    case "bottom_front":
+    case "bottom_rear":
+      return { width: w, height: d };
+    default:
+      return { width: w, height: h };
+  }
+}
+var DEFAULT_FACE_NAMES = [
+  "front",
+  "back",
+  "left",
+  "right",
+  "top",
+  "bottom"
+];
+var Obj = React.memo(
+  ({
+    width = 160,
+    height = 160,
+    depth = 150,
+    perspective = 600,
+    perspectiveOrigin = "50% 50%",
+    faces,
+    global: globalDef,
+    anim1,
+    anim2,
+    showCenterDiv = false,
+    flat = false,
+    transitionDuration = 1,
+    className,
+    style
+  }) => {
+    const w = typeof width === "number" ? width : parseFloat(width);
+    const h = typeof height === "number" ? height : parseFloat(height);
+    const d = typeof depth === "number" ? depth : parseFloat(depth);
+    const animation1 = toAnimationShorthand(anim1) ?? void 0;
+    const animation2 = toAnimationShorthand(anim2) ?? void 0;
+    const faceList = faces && faces.length > 0 ? faces : DEFAULT_FACE_NAMES.map((name) => ({ name }));
+    const transitionCss = `transform ${transitionDuration}s ease-in-out`;
+    const renderFace = (face, i) => {
+      const dims = faceDimensions(face.name, w, h, d);
+      const transform = flat ? faceTransformFlat(face.name, w, h, d) : faceTransform3D(face.name, w, h, d);
+      const globalStyle = parseCssText(globalDef?.css);
+      const faceInlineStyle = parseCssText(face.css);
+      const mergedStyle = {
+        ...globalStyle,
+        ...globalDef?.style ?? {},
+        ...faceInlineStyle,
+        ...face.style ?? {},
+        width: dims.width,
+        height: dims.height,
+        transform,
+        transition: transitionCss
+      };
+      const body = face.body ?? globalDef?.body ?? null;
+      const faceClassName = [
+        "anim3d-face",
+        face.className
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: faceClassName,
+          style: mergedStyle,
+          children: body
+        },
+        face.name + "-" + i
+      );
+    };
+    const cssVars = {
+      "--obj-w": w + "px",
+      "--obj-h": h + "px",
+      "--obj-d": d + "px"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["anim3d-stage", className].filter(Boolean).join(" "),
+        style: {
+          perspective: flat ? "none" : perspective,
+          perspectiveOrigin,
+          ...cssVars,
+          ...style
+        },
+        "data-anim-3d-obj": true,
+        role: "img",
+        "aria-label": "3D object",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "anim3d-wrapper",
+            style: {
+              ...cssVars,
+              animation: flat ? "none" : animation1,
+              transformStyle: "preserve-3d",
+              transition: transitionCss
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "anim3d-wrapper",
+                style: {
+                  ...cssVars,
+                  animation: flat ? "none" : animation2,
+                  transformStyle: "preserve-3d",
+                  transition: transitionCss
+                },
+                children: [
+                  showCenterDiv && /* @__PURE__ */ jsx("div", { className: "anim3d-center" }),
+                  faceList.map(renderFace)
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Obj.displayName = "Obj";
 
-export { Obj };
+export { Obj, Obj as default, resolveAnimation, toAnimationShorthand };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Obj.tsx"],"names":[],"mappings":";;;AAmBO,IAAM,MAA0B,CAAC;AAAA,EACrC,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,OAAA;AAAA,EACT,KAAA,GAAQ,OAAA;AAAA,EACR,WAAA,GAAc,GAAA;AAAA,EACd,iBAAA,GAAoB,SAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACH,CAAA,KAAM;AAEH,EAAA,uBACG,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACJ,WAAA;AAAA,QACA,iBAAA;AAAA,QACA,GAAG;AAAA,OACN;AAAA,MACA,kBAAA,EAAgB,IAAA;AAAA,MAGf;AAAA;AAAA,GACJ;AAEN","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport \"./../styles/obj.css\";\n\nexport type ObjProps = {\n   width?: string | number;\n   height?: string | number;\n   depth?: string | number;\n   perspective?: string | number;\n   perspectiveOrigin?: string;\n   rotation?: string; // e.g., \"x 1s linear infinite\"\n   className?: string;\n   style?: React.CSSProperties;\n   global?: {\n      css?: string;\n      body?: string;\n   };\n   children?: React.ReactNode;\n};\n\nexport const Obj: React.FC<ObjProps> = ({\n   width = \"160px\",\n   height = \"160px\",\n   depth = \"150px\",\n   perspective = 500,\n   perspectiveOrigin = \"50% 50%\",\n   rotation,\n   className,\n   style,\n   global,\n   children,\n}) => {\n   // … your existing DOM/CSS 3D layout & animations\n   return (\n      <div\n         className={className}\n         style={{\n            perspective,\n            perspectiveOrigin,\n            ...style,\n         }}\n         data-anim-3d-obj\n      >\n         {/* faces, wrappers, animations… */}\n         {children}\n      </div>\n   );\n};\n"]}
+{"version":3,"sources":["../src/keyframes.ts","../src/components/Obj.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { AnimationConfig } from \"./types\";\n\n/** Create (or reuse) a <style> tag for dynamic keyframes */\nfunction ensureStyleTag(): HTMLStyleElement {\n   let tag = document.getElementById(\n      \"anim3d-keyframes\"\n   ) as HTMLStyleElement | null;\n   if (!tag) {\n      tag = document.createElement(\"style\");\n      tag.id = \"anim3d-keyframes\";\n      document.head.appendChild(tag);\n   }\n   return tag;\n}\n\nfunction inject(css: string) {\n   if (typeof document === \"undefined\") return; // SSR\n   const tag = ensureStyleTag();\n   tag.appendChild(document.createTextNode(css));\n}\n\n/** Keyframes text for built-ins */\nfunction builtInKeyframes(name: string, cfg: AnimationConfig) {\n   const hi = cfg.degreesHi ?? 15;\n   const lo = cfg.degreesLow ?? -15;\n   switch (name) {\n      case \"Y360\":\n         return `@keyframes Y360 { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }`;\n      case \"X360\":\n         return `@keyframes X360 { from { transform: rotateX(0deg) } to { transform: rotateX(360deg) } }`;\n      case \"Z360\":\n         return `@keyframes Z360 { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }`;\n      case \"rockY\":\n         return `@keyframes rockY { 0%{ transform: rotateY(${lo}deg) } 50%{ transform: rotateY(${hi}deg) } 100%{ transform: rotateY(${lo}deg) } }`;\n      case \"rockX\":\n         return `@keyframes rockX { 0%{ transform: rotateX(${lo}deg) } 50%{ transform: rotateX(${hi}deg) } 100%{ transform: rotateX(${lo}deg) } }`;\n      default:\n         // Custom names: let authors supply their own @keyframes in global CSS with that name.\n         return \"\";\n   }\n}\n\n/** Returns a concrete animation-name and ensures keyframes exist (for built-ins) */\nexport function resolveAnimation(cfg?: AnimationConfig): string | null {\n   if (!cfg) return null;\n   const name = cfg.name;\n   const builtIn = builtInKeyframes(name, cfg);\n   if (builtIn) {\n      // Ensure single injection per built-in name\n      const marker = `/*kf-${name}*/`;\n      if (typeof document !== \"undefined\") {\n         const tag = ensureStyleTag();\n         if (!tag.innerHTML.includes(marker)) {\n            inject(`${builtIn}\\n${marker}`);\n         }\n      }\n      return name; // use built-in name as animation-name\n   }\n   // custom: use author-provided @keyframes by name\n   return name;\n}\n\n/** Build the full CSS animation shorthand from a config and resolved name */\nexport function toAnimationShorthand(cfg?: AnimationConfig): string | null {\n   const name = resolveAnimation(cfg);\n   if (!cfg || !name) return null;\n   const dur = (cfg.duration ?? 10) + \"s\";\n   const delay = (cfg.delay ?? 0) + \"s\";\n   const iter = cfg.iterationCount ?? \"infinite\";\n   const dir = cfg.direction ?? \"normal\";\n   const timing = cfg.timing ?? \"linear\";\n   const fill = cfg.fillMode ?? \"forwards\";\n   const play = cfg.animationPlayState ?? \"running\";\n   // name duration timing delay iteration-count direction fill-mode play-state\n   return `${name} ${dur} ${timing} ${delay} ${iter} ${dir} ${fill} ${play}`;\n}\n","import * as React from \"react\";\nimport type {\n   ObjProps,\n   FaceDef,\n   FaceName,\n   GlobalDef,\n} from \"../types\";\nimport { toAnimationShorthand } from \"../keyframes\";\nimport \"../styles/obj.css\";\n\n// Re-export the canonical ObjProps from types.ts\nexport type { ObjProps } from \"../types\";\n\n/* ------------------------------------------------------------------ */\n/*  Face transform — 3D cuboid positions                               */\n/* ------------------------------------------------------------------ */\n\nfunction faceTransform3D(\n   name: string,\n   w: number,\n   h: number,\n   d: number\n): string {\n   const hw = w / 2;\n   const hh = h / 2;\n   const hd = d / 2;\n\n   switch (name as FaceName) {\n      case \"front\":\n         return `translate(-50%, -50%) translateZ(${hd}px)`;\n      case \"back\":\n         return `translate(-50%, -50%) rotateY(180deg) translateZ(${hd}px)`;\n      case \"left\":\n         return `translate(-50%, -50%) rotateY(-90deg) translateZ(${hw}px)`;\n      case \"right\":\n         return `translate(-50%, -50%) rotateY(90deg) translateZ(${hw}px)`;\n      case \"top\":\n         return `translate(-50%, -50%) rotateX(90deg) translateZ(${hh}px)`;\n      case \"bottom\":\n         return `translate(-50%, -50%) rotateX(-90deg) translateZ(${hh}px)`;\n      case \"top_front\":\n         return `translate(-50%, -50%) rotateX(45deg) translateZ(${hh}px)`;\n      case \"top_rear\":\n         return `translate(-50%, -50%) rotateX(135deg) translateZ(${hh}px)`;\n      case \"bottom_front\":\n         return `translate(-50%, -50%) rotateX(-45deg) translateZ(${hh}px)`;\n      case \"bottom_rear\":\n         return `translate(-50%, -50%) rotateX(-135deg) translateZ(${hh}px)`;\n      default:\n         return `translate(-50%, -50%) translateZ(${hd}px)`;\n   }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Face transform — flat (unfolded) positions                         */\n/*                                                                     */\n/*  Layout order:  … | left | front | right | back | …                 */\n/*  Centered on the midpoint of the full row.                          */\n/* ------------------------------------------------------------------ */\n\n/** Ordered face names for the flat row (left-to-right) */\nconst FLAT_ORDER: FaceName[] = [\"left\", \"front\", \"right\", \"back\"];\n\n/**\n * Returns the flat-layout transform for a face.\n *\n * Side faces (left, right) have a rendered width of `d` (depth).\n * Front/back faces have a rendered width of `w`.\n * Row order: left(d) | front(w) | right(d) | back(w)\n * Total row width = 2d + 2w.  We centre the row on 0.\n */\nfunction faceTransformFlat(\n   name: string,\n   w: number,\n   _h: number,\n   d: number\n): string {\n   // Total row width\n   const total = 2 * d + 2 * w;\n   const halfTotal = total / 2;\n\n   // Cumulative left-edge x positions (relative to row start = 0)\n   // left  : 0          width d\n   // front : d          width w\n   // right : d + w      width d\n   // back  : d + w + d  width w\n   let cx: number; // centre-x of this face in the row\n\n   switch (name as FaceName) {\n      case \"left\":\n         cx = d / 2;\n         break;\n      case \"front\":\n         cx = d + w / 2;\n         break;\n      case \"right\":\n         cx = d + w + d / 2;\n         break;\n      case \"back\":\n         cx = d + w + d + w / 2;\n         break;\n      case \"top\":\n      case \"top_front\":\n      case \"top_rear\":\n         // Top faces slide upward out of the way\n         cx = d + w / 2;\n         return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(-${_h}px)`;\n      case \"bottom\":\n      case \"bottom_front\":\n      case \"bottom_rear\":\n         cx = d + w / 2;\n         return `translate(-50%, -50%) translateX(${cx - halfTotal}px) translateY(${_h}px)`;\n      default:\n         cx = d + w / 2;\n         break;\n   }\n\n   // Shift so the row is centred on x=0\n   const offsetX = cx - halfTotal;\n   return `translate(-50%, -50%) translateX(${offsetX}px)`;\n}\n\n/* ------------------------------------------------------------------ */\n/*  Parse a legacy CSS text string into a CSSProperties object         */\n/* ------------------------------------------------------------------ */\n\nfunction parseCssText(css?: string): React.CSSProperties {\n   if (!css) return {};\n   const style: Record<string, string> = {};\n   css.split(\";\").forEach((rule) => {\n      const [prop, ...rest] = rule.split(\":\");\n      if (!prop || rest.length === 0) return;\n      const key = prop\n         .trim()\n         .replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n      style[key] = rest.join(\":\").trim();\n   });\n   return style as React.CSSProperties;\n}\n\n/* ------------------------------------------------------------------ */\n/*  Resolve face dimensions for non-standard faces                     */\n/* ------------------------------------------------------------------ */\n\nfunction faceDimensions(\n   name: string,\n   w: number,\n   h: number,\n   d: number\n): { width: number; height: number } {\n   switch (name as FaceName) {\n      case \"left\":\n      case \"right\":\n         return { width: d, height: h };\n      case \"top\":\n      case \"bottom\":\n      case \"top_front\":\n      case \"top_rear\":\n      case \"bottom_front\":\n      case \"bottom_rear\":\n         return { width: w, height: d };\n      default:\n         return { width: w, height: h };\n   }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Default 6-sided cube when no faces are provided                    */\n/* ------------------------------------------------------------------ */\n\nconst DEFAULT_FACE_NAMES: FaceName[] = [\n   \"front\",\n   \"back\",\n   \"left\",\n   \"right\",\n   \"top\",\n   \"bottom\",\n];\n\n/* ------------------------------------------------------------------ */\n/*  Component                                                          */\n/* ------------------------------------------------------------------ */\n\nexport const Obj: React.FC<ObjProps> = React.memo(\n   ({\n      width = 160,\n      height = 160,\n      depth = 150,\n      perspective = 600,\n      perspectiveOrigin = \"50% 50%\",\n      faces,\n      global: globalDef,\n      anim1,\n      anim2,\n      showCenterDiv = false,\n      flat = false,\n      transitionDuration = 1,\n      className,\n      style,\n   }) => {\n      const w = typeof width === \"number\" ? width : parseFloat(width);\n      const h = typeof height === \"number\" ? height : parseFloat(height);\n      const d = typeof depth === \"number\" ? depth : parseFloat(depth);\n\n      // Resolve animation shorthands\n      const animation1 = toAnimationShorthand(anim1) ?? undefined;\n      const animation2 = toAnimationShorthand(anim2) ?? undefined;\n\n      // Determine which faces to render\n      const faceList: FaceDef[] =\n         faces && faces.length > 0\n            ? faces\n            : DEFAULT_FACE_NAMES.map((name) => ({ name }));\n\n      const transitionCss = `transform ${transitionDuration}s ease-in-out`;\n\n      // Merge global defaults into each face\n      const renderFace = (face: FaceDef, i: number) => {\n         const dims = faceDimensions(face.name, w, h, d);\n         const transform = flat\n            ? faceTransformFlat(face.name, w, h, d)\n            : faceTransform3D(face.name, w, h, d);\n\n         const globalStyle = parseCssText(globalDef?.css);\n         const faceInlineStyle = parseCssText(face.css);\n\n         const mergedStyle: React.CSSProperties = {\n            ...globalStyle,\n            ...(globalDef?.style ?? {}),\n            ...faceInlineStyle,\n            ...(face.style ?? {}),\n            width: dims.width,\n            height: dims.height,\n            transform,\n            transition: transitionCss,\n         };\n\n         const body = face.body ?? globalDef?.body ?? null;\n         const faceClassName = [\n            \"anim3d-face\",\n            face.className,\n         ]\n            .filter(Boolean)\n            .join(\" \");\n\n         return (\n            <div\n               key={face.name + \"-\" + i}\n               className={faceClassName}\n               style={mergedStyle}\n            >\n               {body}\n            </div>\n         );\n      };\n\n      const cssVars = {\n         \"--obj-w\": w + \"px\",\n         \"--obj-h\": h + \"px\",\n         \"--obj-d\": d + \"px\",\n      } as React.CSSProperties;\n\n      return (\n         <div\n            className={[\"anim3d-stage\", className].filter(Boolean).join(\" \")}\n            style={{\n               perspective: flat ? \"none\" : perspective,\n               perspectiveOrigin,\n               ...cssVars,\n               ...style,\n            }}\n            data-anim-3d-obj\n            role=\"img\"\n            aria-label=\"3D object\"\n         >\n            {/* Outer animation wrapper (anim1) */}\n            <div\n               className=\"anim3d-wrapper\"\n               style={{\n                  ...cssVars,\n                  animation: flat ? \"none\" : animation1,\n                  transformStyle: \"preserve-3d\",\n                  transition: transitionCss,\n               }}\n            >\n               {/* Inner animation wrapper (anim2) */}\n               <div\n                  className=\"anim3d-wrapper\"\n                  style={{\n                     ...cssVars,\n                     animation: flat ? \"none\" : animation2,\n                     transformStyle: \"preserve-3d\",\n                     transition: transitionCss,\n                  }}\n               >\n                  {showCenterDiv && <div className=\"anim3d-center\" />}\n                  {faceList.map(renderFace)}\n               </div>\n            </div>\n         </div>\n      );\n   }\n);\n\nObj.displayName = \"Obj\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "anim-3d-obj",
-   "version": "2.0.2",
+   "version": "2.0.5",
    "description": "Configurable 3D object with animated rotations and face content",
    "license": "MIT",
    "author": "mdnelles",