anim-3d-obj 1.2.9 → 2.0.0

package/dist/components/Obj.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Obj.tsx","../../src/keyframes.ts"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { FaceDef, GlobalDef, ObjProps, FaceName } from \"../types\";\nimport { toAnimationShorthand } from \"../keyframes\";\nimport \"../styles/obj.css\";\n\n/** Map face name -> transform so it sits on a rectangular prism */\nfunction faceTransform(name: string, w: number, h: number, d: number): string {\n   const z = d / 2;\n   switch (name as FaceName) {\n      case \"front\":\n         return `translate3d(-50%, -50%, ${z}px)`;\n      case \"back\":\n         return `translate3d(-50%, -50%, ${-z}px) rotateY(180deg)`;\n      case \"left\":\n         return `translate3d(-50%, -50%, 0) rotateY(-90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"right\":\n         return `translate3d(-50%, -50%, 0) rotateY(90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"top\":\n         return `translate3d(-50%, -50%, 0) rotateX(90deg) translateZ(${\n            h / 2\n         }px)`;\n      case \"bottom\":\n         return `translate3d(-50%, -50%, 0) rotateX(-90deg) translateZ(${\n            h / 2\n         }px)`;\n      // legacy/extra – position near top/bottom, front/back edges\n      case \"top_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(75deg)`;\n      case \"top_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(105deg)`;\n      case \"bottom_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(-75deg)`;\n      case \"bottom_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(-105deg)`;\n      default:\n         return `translate3d(-50%, -50%, ${z}px)`;\n   }\n}\n\n/** Merge legacy CSS string + style object */\nfunction mergeStyles(inlineCSS?: string, style?: CSSProperties): CSSProperties {\n   const out: CSSProperties = { ...(style ?? {}) };\n   if (inlineCSS) {\n      // naive parser: split by ;, then key:value\n      inlineCSS\n         .split(\";\")\n         .map((s) => s.trim())\n         .filter(Boolean)\n         .forEach((rule) => {\n            const [k, v] = rule.split(\":\");\n            if (!k || !v) return;\n            const key = k\n               .trim()\n               .replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n            (out as any)[key] = v.trim();\n         });\n   }\n   return out;\n}\n\nfunction Face({\n   w,\n   h,\n   d,\n   face,\n   global,\n}: {\n   w: number;\n   h: number;\n   d: number;\n   face: FaceDef;\n   global?: GlobalDef;\n}) {\n   const base = useMemo(\n      () => mergeStyles(global?.css, global?.style),\n      [global]\n   );\n   const merged = useMemo(\n      () => ({ ...base, ...mergeStyles(face.css, face.style) }),\n      [base, face.css, face.style]\n   );\n\n   const content: ReactNode = face.body ?? global?.body ?? null;\n\n   return (\n      <div\n         className={`anim3d-face ${face.className ?? \"\"}`}\n         style={{\n            transform: faceTransform(face.name, w, h, d),\n            ...merged,\n         }}\n         data-face={face.name}\n      >\n         {typeof content === \"string\" ? <span>{content}</span> : content}\n      </div>\n   );\n}\n\nconst Obj: React.FC<ObjProps> = ({\n   width = 160,\n   height = 160,\n   depth = 150,\n   perspective = 500,\n   perspectiveOrigin = \"50% 50%\",\n   faces = [\n      { name: \"front\", body: \"FRONT\" },\n      { name: \"back\", body: \"BACK\" },\n      { name: \"left\", body: \"LEFT\" },\n      { name: \"right\", body: \"RIGHT\" },\n      { name: \"top\", body: \"TOP\" },\n      { name: \"bottom\", body: \"BOTTOM\" },\n   ],\n   global,\n   anim1,\n   anim2,\n   showCenterDiv = false,\n   className,\n   style,\n}) => {\n   const resolvedAnim1 = toAnimationShorthand(anim1);\n   const resolvedAnim2 = toAnimationShorthand(anim2);\n   const animation = [resolvedAnim1, resolvedAnim2].filter(Boolean).join(\", \");\n\n   const stageStyle: CSSProperties = {\n      perspective: `${perspective}px`,\n      perspectiveOrigin,\n   };\n\n   const wrapperStyle: CSSProperties = {\n      // consumed by CSS var\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      \"--obj-w\": `${width}px`,\n      \"--obj-h\": `${height}px`,\n      width,\n      height,\n      \"animation\": animation || undefined,\n   };\n\n   return (\n      <div\n         className={`anim3d-stage ${className ?? \"\"}`}\n         style={{ ...stageStyle, ...style }}\n      >\n         <div className='anim3d-wrapper' style={wrapperStyle as any}>\n            {showCenterDiv && <div className='anim3d-center' />}\n            {faces.map((f, i) => (\n               <Face\n                  key={`${f.name}-${i}`}\n                  w={width}\n                  h={height}\n                  d={depth}\n                  face={f}\n                  global={global}\n               />\n            ))}\n         </div>\n      </div>\n   );\n};\n\nexport default Obj;\nexport { Obj };\n","import type { AnimationConfig } from \"./types\";\n\nlet counter = 0;\nconst uid = () => (++counter).toString(36);\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"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+export { A as AnimationConfig, B as BuiltInAnimName, F as FaceDef, a as FaceName, G as GlobalDef, default as Obj, O as ObjProps } from './components/Obj.mjs';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { A as AnimationConfig, B as BuiltInAnimName, F as FaceDef, a as FaceName, G as GlobalDef, default as Obj, O as ObjProps } from './components/Obj.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,232 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Obj: () => Obj_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Obj.tsx
+var import_react = require("react");
+
+// 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}`;
+}
+
+// src/components/Obj.tsx
+var import_obj = require("./obj-PY72GEW6.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+function faceTransform(name, w, h, d) {
+  const z = d / 2;
+  switch (name) {
+    case "front":
+      return `translate3d(-50%, -50%, ${z}px)`;
+    case "back":
+      return `translate3d(-50%, -50%, ${-z}px) rotateY(180deg)`;
+    case "left":
+      return `translate3d(-50%, -50%, 0) rotateY(-90deg) translateZ(${w / 2}px)`;
+    case "right":
+      return `translate3d(-50%, -50%, 0) rotateY(90deg) translateZ(${w / 2}px)`;
+    case "top":
+      return `translate3d(-50%, -50%, 0) rotateX(90deg) translateZ(${h / 2}px)`;
+    case "bottom":
+      return `translate3d(-50%, -50%, 0) rotateX(-90deg) translateZ(${h / 2}px)`;
+    // legacy/extra – position near top/bottom, front/back edges
+    case "top_front":
+      return `translate3d(-50%, -50%, ${z / 2}px) rotateX(75deg)`;
+    case "top_rear":
+      return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(105deg)`;
+    case "bottom_front":
+      return `translate3d(-50%, -50%, ${z / 2}px) rotateX(-75deg)`;
+    case "bottom_rear":
+      return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(-105deg)`;
+    default:
+      return `translate3d(-50%, -50%, ${z}px)`;
+  }
+}
+function mergeStyles(inlineCSS, style) {
+  const out = { ...style ?? {} };
+  if (inlineCSS) {
+    inlineCSS.split(";").map((s) => s.trim()).filter(Boolean).forEach((rule) => {
+      const [k, v] = rule.split(":");
+      if (!k || !v) return;
+      const key = k.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      out[key] = v.trim();
+    });
+  }
+  return out;
+}
+function Face({
+  w,
+  h,
+  d,
+  face,
+  global
+}) {
+  const base = (0, import_react.useMemo)(
+    () => mergeStyles(global?.css, global?.style),
+    [global]
+  );
+  const merged = (0, import_react.useMemo)(
+    () => ({ ...base, ...mergeStyles(face.css, face.style) }),
+    [base, face.css, face.style]
+  );
+  const content = face.body ?? global?.body ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `anim3d-face ${face.className ?? ""}`,
+      style: {
+        transform: faceTransform(face.name, w, h, d),
+        ...merged
+      },
+      "data-face": face.name,
+      children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: content }) : content
+    }
+  );
+}
+var Obj = ({
+  width = 160,
+  height = 160,
+  depth = 150,
+  perspective = 500,
+  perspectiveOrigin = "50% 50%",
+  faces = [
+    { name: "front", body: "FRONT" },
+    { name: "back", body: "BACK" },
+    { name: "left", body: "LEFT" },
+    { name: "right", body: "RIGHT" },
+    { name: "top", body: "TOP" },
+    { name: "bottom", body: "BOTTOM" }
+  ],
+  global,
+  anim1,
+  anim2,
+  showCenterDiv = false,
+  className,
+  style
+}) => {
+  const resolvedAnim1 = toAnimationShorthand(anim1);
+  const resolvedAnim2 = toAnimationShorthand(anim2);
+  const animation = [resolvedAnim1, resolvedAnim2].filter(Boolean).join(", ");
+  const stageStyle = {
+    perspective: `${perspective}px`,
+    perspectiveOrigin
+  };
+  const wrapperStyle = {
+    // consumed by CSS var
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    "--obj-w": `${width}px`,
+    "--obj-h": `${height}px`,
+    width,
+    height,
+    "animation": animation || void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `anim3d-stage ${className ?? ""}`,
+      style: { ...stageStyle, ...style },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "anim3d-wrapper", style: wrapperStyle, children: [
+        showCenterDiv && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "anim3d-center" }),
+        faces.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Face,
+          {
+            w: width,
+            h: height,
+            d: depth,
+            face: f,
+            global
+          },
+          `${f.name}-${i}`
+        ))
+      ] })
+    }
+  );
+};
+var Obj_default = Obj;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Obj
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Obj.tsx","../src/keyframes.ts"],"sourcesContent":["export { default as Obj } from \"./components/Obj\";\nexport type {\n   ObjProps,\n   FaceDef,\n   GlobalDef,\n   AnimationConfig,\n   FaceName,\n   BuiltInAnimName,\n} from \"./types\";\n","import React, { useMemo } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { FaceDef, GlobalDef, ObjProps, FaceName } from \"../types\";\nimport { toAnimationShorthand } from \"../keyframes\";\nimport \"../styles/obj.css\";\n\n/** Map face name -> transform so it sits on a rectangular prism */\nfunction faceTransform(name: string, w: number, h: number, d: number): string {\n   const z = d / 2;\n   switch (name as FaceName) {\n      case \"front\":\n         return `translate3d(-50%, -50%, ${z}px)`;\n      case \"back\":\n         return `translate3d(-50%, -50%, ${-z}px) rotateY(180deg)`;\n      case \"left\":\n         return `translate3d(-50%, -50%, 0) rotateY(-90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"right\":\n         return `translate3d(-50%, -50%, 0) rotateY(90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"top\":\n         return `translate3d(-50%, -50%, 0) rotateX(90deg) translateZ(${\n            h / 2\n         }px)`;\n      case \"bottom\":\n         return `translate3d(-50%, -50%, 0) rotateX(-90deg) translateZ(${\n            h / 2\n         }px)`;\n      // legacy/extra – position near top/bottom, front/back edges\n      case \"top_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(75deg)`;\n      case \"top_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(105deg)`;\n      case \"bottom_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(-75deg)`;\n      case \"bottom_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(-105deg)`;\n      default:\n         return `translate3d(-50%, -50%, ${z}px)`;\n   }\n}\n\n/** Merge legacy CSS string + style object */\nfunction mergeStyles(inlineCSS?: string, style?: CSSProperties): CSSProperties {\n   const out: CSSProperties = { ...(style ?? {}) };\n   if (inlineCSS) {\n      // naive parser: split by ;, then key:value\n      inlineCSS\n         .split(\";\")\n         .map((s) => s.trim())\n         .filter(Boolean)\n         .forEach((rule) => {\n            const [k, v] = rule.split(\":\");\n            if (!k || !v) return;\n            const key = k\n               .trim()\n               .replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n            (out as any)[key] = v.trim();\n         });\n   }\n   return out;\n}\n\nfunction Face({\n   w,\n   h,\n   d,\n   face,\n   global,\n}: {\n   w: number;\n   h: number;\n   d: number;\n   face: FaceDef;\n   global?: GlobalDef;\n}) {\n   const base = useMemo(\n      () => mergeStyles(global?.css, global?.style),\n      [global]\n   );\n   const merged = useMemo(\n      () => ({ ...base, ...mergeStyles(face.css, face.style) }),\n      [base, face.css, face.style]\n   );\n\n   const content: ReactNode = face.body ?? global?.body ?? null;\n\n   return (\n      <div\n         className={`anim3d-face ${face.className ?? \"\"}`}\n         style={{\n            transform: faceTransform(face.name, w, h, d),\n            ...merged,\n         }}\n         data-face={face.name}\n      >\n         {typeof content === \"string\" ? <span>{content}</span> : content}\n      </div>\n   );\n}\n\nconst Obj: React.FC<ObjProps> = ({\n   width = 160,\n   height = 160,\n   depth = 150,\n   perspective = 500,\n   perspectiveOrigin = \"50% 50%\",\n   faces = [\n      { name: \"front\", body: \"FRONT\" },\n      { name: \"back\", body: \"BACK\" },\n      { name: \"left\", body: \"LEFT\" },\n      { name: \"right\", body: \"RIGHT\" },\n      { name: \"top\", body: \"TOP\" },\n      { name: \"bottom\", body: \"BOTTOM\" },\n   ],\n   global,\n   anim1,\n   anim2,\n   showCenterDiv = false,\n   className,\n   style,\n}) => {\n   const resolvedAnim1 = toAnimationShorthand(anim1);\n   const resolvedAnim2 = toAnimationShorthand(anim2);\n   const animation = [resolvedAnim1, resolvedAnim2].filter(Boolean).join(\", \");\n\n   const stageStyle: CSSProperties = {\n      perspective: `${perspective}px`,\n      perspectiveOrigin,\n   };\n\n   const wrapperStyle: CSSProperties = {\n      // consumed by CSS var\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      \"--obj-w\": `${width}px`,\n      \"--obj-h\": `${height}px`,\n      width,\n      height,\n      \"animation\": animation || undefined,\n   };\n\n   return (\n      <div\n         className={`anim3d-stage ${className ?? \"\"}`}\n         style={{ ...stageStyle, ...style }}\n      >\n         <div className='anim3d-wrapper' style={wrapperStyle as any}>\n            {showCenterDiv && <div className='anim3d-center' />}\n            {faces.map((f, i) => (\n               <Face\n                  key={`${f.name}-${i}`}\n                  w={width}\n                  h={height}\n                  d={depth}\n                  face={f}\n                  global={global}\n               />\n            ))}\n         </div>\n      </div>\n   );\n};\n\nexport default Obj;\nexport { Obj };\n","import type { AnimationConfig } from \"./types\";\n\nlet counter = 0;\nconst uid = () => (++counter).toString(36);\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"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,205 @@
+// src/components/Obj.tsx
+import { useMemo } from "react";
+
+// 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}`;
+}
+
+// src/components/Obj.tsx
+import "./obj-PY72GEW6.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function faceTransform(name, w, h, d) {
+  const z = d / 2;
+  switch (name) {
+    case "front":
+      return `translate3d(-50%, -50%, ${z}px)`;
+    case "back":
+      return `translate3d(-50%, -50%, ${-z}px) rotateY(180deg)`;
+    case "left":
+      return `translate3d(-50%, -50%, 0) rotateY(-90deg) translateZ(${w / 2}px)`;
+    case "right":
+      return `translate3d(-50%, -50%, 0) rotateY(90deg) translateZ(${w / 2}px)`;
+    case "top":
+      return `translate3d(-50%, -50%, 0) rotateX(90deg) translateZ(${h / 2}px)`;
+    case "bottom":
+      return `translate3d(-50%, -50%, 0) rotateX(-90deg) translateZ(${h / 2}px)`;
+    // legacy/extra – position near top/bottom, front/back edges
+    case "top_front":
+      return `translate3d(-50%, -50%, ${z / 2}px) rotateX(75deg)`;
+    case "top_rear":
+      return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(105deg)`;
+    case "bottom_front":
+      return `translate3d(-50%, -50%, ${z / 2}px) rotateX(-75deg)`;
+    case "bottom_rear":
+      return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(-105deg)`;
+    default:
+      return `translate3d(-50%, -50%, ${z}px)`;
+  }
+}
+function mergeStyles(inlineCSS, style) {
+  const out = { ...style ?? {} };
+  if (inlineCSS) {
+    inlineCSS.split(";").map((s) => s.trim()).filter(Boolean).forEach((rule) => {
+      const [k, v] = rule.split(":");
+      if (!k || !v) return;
+      const key = k.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      out[key] = v.trim();
+    });
+  }
+  return out;
+}
+function Face({
+  w,
+  h,
+  d,
+  face,
+  global
+}) {
+  const base = useMemo(
+    () => mergeStyles(global?.css, global?.style),
+    [global]
+  );
+  const merged = useMemo(
+    () => ({ ...base, ...mergeStyles(face.css, face.style) }),
+    [base, face.css, face.style]
+  );
+  const content = face.body ?? global?.body ?? null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `anim3d-face ${face.className ?? ""}`,
+      style: {
+        transform: faceTransform(face.name, w, h, d),
+        ...merged
+      },
+      "data-face": face.name,
+      children: typeof content === "string" ? /* @__PURE__ */ jsx("span", { children: content }) : content
+    }
+  );
+}
+var Obj = ({
+  width = 160,
+  height = 160,
+  depth = 150,
+  perspective = 500,
+  perspectiveOrigin = "50% 50%",
+  faces = [
+    { name: "front", body: "FRONT" },
+    { name: "back", body: "BACK" },
+    { name: "left", body: "LEFT" },
+    { name: "right", body: "RIGHT" },
+    { name: "top", body: "TOP" },
+    { name: "bottom", body: "BOTTOM" }
+  ],
+  global,
+  anim1,
+  anim2,
+  showCenterDiv = false,
+  className,
+  style
+}) => {
+  const resolvedAnim1 = toAnimationShorthand(anim1);
+  const resolvedAnim2 = toAnimationShorthand(anim2);
+  const animation = [resolvedAnim1, resolvedAnim2].filter(Boolean).join(", ");
+  const stageStyle = {
+    perspective: `${perspective}px`,
+    perspectiveOrigin
+  };
+  const wrapperStyle = {
+    // consumed by CSS var
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    "--obj-w": `${width}px`,
+    "--obj-h": `${height}px`,
+    width,
+    height,
+    "animation": animation || void 0
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `anim3d-stage ${className ?? ""}`,
+      style: { ...stageStyle, ...style },
+      children: /* @__PURE__ */ jsxs("div", { className: "anim3d-wrapper", style: wrapperStyle, children: [
+        showCenterDiv && /* @__PURE__ */ jsx("div", { className: "anim3d-center" }),
+        faces.map((f, i) => /* @__PURE__ */ jsx(
+          Face,
+          {
+            w: width,
+            h: height,
+            d: depth,
+            face: f,
+            global
+          },
+          `${f.name}-${i}`
+        ))
+      ] })
+    }
+  );
+};
+var Obj_default = Obj;
+export {
+  Obj_default as Obj
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Obj.tsx","../src/keyframes.ts"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { FaceDef, GlobalDef, ObjProps, FaceName } from \"../types\";\nimport { toAnimationShorthand } from \"../keyframes\";\nimport \"../styles/obj.css\";\n\n/** Map face name -> transform so it sits on a rectangular prism */\nfunction faceTransform(name: string, w: number, h: number, d: number): string {\n   const z = d / 2;\n   switch (name as FaceName) {\n      case \"front\":\n         return `translate3d(-50%, -50%, ${z}px)`;\n      case \"back\":\n         return `translate3d(-50%, -50%, ${-z}px) rotateY(180deg)`;\n      case \"left\":\n         return `translate3d(-50%, -50%, 0) rotateY(-90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"right\":\n         return `translate3d(-50%, -50%, 0) rotateY(90deg) translateZ(${\n            w / 2\n         }px)`;\n      case \"top\":\n         return `translate3d(-50%, -50%, 0) rotateX(90deg) translateZ(${\n            h / 2\n         }px)`;\n      case \"bottom\":\n         return `translate3d(-50%, -50%, 0) rotateX(-90deg) translateZ(${\n            h / 2\n         }px)`;\n      // legacy/extra – position near top/bottom, front/back edges\n      case \"top_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(75deg)`;\n      case \"top_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(105deg)`;\n      case \"bottom_front\":\n         return `translate3d(-50%, -50%, ${z / 2}px) rotateX(-75deg)`;\n      case \"bottom_rear\":\n         return `translate3d(-50%, -50%, ${-z / 2}px) rotateX(-105deg)`;\n      default:\n         return `translate3d(-50%, -50%, ${z}px)`;\n   }\n}\n\n/** Merge legacy CSS string + style object */\nfunction mergeStyles(inlineCSS?: string, style?: CSSProperties): CSSProperties {\n   const out: CSSProperties = { ...(style ?? {}) };\n   if (inlineCSS) {\n      // naive parser: split by ;, then key:value\n      inlineCSS\n         .split(\";\")\n         .map((s) => s.trim())\n         .filter(Boolean)\n         .forEach((rule) => {\n            const [k, v] = rule.split(\":\");\n            if (!k || !v) return;\n            const key = k\n               .trim()\n               .replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n            (out as any)[key] = v.trim();\n         });\n   }\n   return out;\n}\n\nfunction Face({\n   w,\n   h,\n   d,\n   face,\n   global,\n}: {\n   w: number;\n   h: number;\n   d: number;\n   face: FaceDef;\n   global?: GlobalDef;\n}) {\n   const base = useMemo(\n      () => mergeStyles(global?.css, global?.style),\n      [global]\n   );\n   const merged = useMemo(\n      () => ({ ...base, ...mergeStyles(face.css, face.style) }),\n      [base, face.css, face.style]\n   );\n\n   const content: ReactNode = face.body ?? global?.body ?? null;\n\n   return (\n      <div\n         className={`anim3d-face ${face.className ?? \"\"}`}\n         style={{\n            transform: faceTransform(face.name, w, h, d),\n            ...merged,\n         }}\n         data-face={face.name}\n      >\n         {typeof content === \"string\" ? <span>{content}</span> : content}\n      </div>\n   );\n}\n\nconst Obj: React.FC<ObjProps> = ({\n   width = 160,\n   height = 160,\n   depth = 150,\n   perspective = 500,\n   perspectiveOrigin = \"50% 50%\",\n   faces = [\n      { name: \"front\", body: \"FRONT\" },\n      { name: \"back\", body: \"BACK\" },\n      { name: \"left\", body: \"LEFT\" },\n      { name: \"right\", body: \"RIGHT\" },\n      { name: \"top\", body: \"TOP\" },\n      { name: \"bottom\", body: \"BOTTOM\" },\n   ],\n   global,\n   anim1,\n   anim2,\n   showCenterDiv = false,\n   className,\n   style,\n}) => {\n   const resolvedAnim1 = toAnimationShorthand(anim1);\n   const resolvedAnim2 = toAnimationShorthand(anim2);\n   const animation = [resolvedAnim1, resolvedAnim2].filter(Boolean).join(\", \");\n\n   const stageStyle: CSSProperties = {\n      perspective: `${perspective}px`,\n      perspectiveOrigin,\n   };\n\n   const wrapperStyle: CSSProperties = {\n      // consumed by CSS var\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      \"--obj-w\": `${width}px`,\n      \"--obj-h\": `${height}px`,\n      width,\n      height,\n      \"animation\": animation || undefined,\n   };\n\n   return (\n      <div\n         className={`anim3d-stage ${className ?? \"\"}`}\n         style={{ ...stageStyle, ...style }}\n      >\n         <div className='anim3d-wrapper' style={wrapperStyle as any}>\n            {showCenterDiv && <div className='anim3d-center' />}\n            {faces.map((f, i) => (\n               <Face\n                  key={`${f.name}-${i}`}\n                  w={width}\n                  h={height}\n                  d={depth}\n                  face={f}\n                  global={global}\n               />\n            ))}\n         </div>\n      </div>\n   );\n};\n\nexport default Obj;\nexport { Obj };\n","import type { AnimationConfig } from \"./types\";\n\nlet counter = 0;\nconst uid = () => (++counter).toString(36);\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"],"mappings":"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","names":[]}

package/dist/obj-PY72GEW6.css

@@ -0,0 +1,39 @@
+.anim3d-stage {
+   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);
+}
+
+.anim3d-center {
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   width: 2px;
+   height: 2px;
+   background: #f00;
+   transform: translate(-50%, -50%);
+   z-index: 10;
+}
+
+.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;
+   justify-content: center;
+   backface-visibility: visible;
+   box-sizing: border-box;
+}

package/package.json

@@ -1,49 +1,46 @@
-
 {
    "name": "anim-3d-obj",
-   "repository": {
-      "type": "git",
-      "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
-   },
-   "homepage": "https://mdnelles.github.io/a3o-playground",
-    "version": "1.2.9",
-   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
-   "main": "dist/cjs/index.js",
+   "version": "2.0.0",
+   "description": "Configurable 3D object with animated rotations and face content",
+   "license": "MIT",
+   "author": "mdnelles",
+   "sideEffects": [
+      "dist/**/*.css",
+      "src/styles/obj.css"
+   ],
    "module": "dist/esm/index.js",
+   "main": "dist/cjs/index.cjs",
+   "types": "dist/esm/index.d.ts",
+   "exports": {
+      ".": {
+         "import": "./dist/esm/index.js",
+         "require": "./dist/cjs/index.cjs",
+         "types": "./dist/esm/index.d.ts"
+      },
+      "./components/Obj": {
+         "import": "./dist/esm/components/Obj.js",
+         "require": "./dist/cjs/components/Obj.cjs",
+         "types": "./dist/esm/components/Obj.d.ts"
+      },
+      "./dist/cjs/components/Obj": "./dist/cjs/components/Obj.cjs"
+   },
    "files": [
       "dist"
    ],
    "scripts": {
-      "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
-      "build:esm": "tsc",
-      "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
-   },
-   "author": "mdnelles",
-   "license": "MIT",
-   "devDependencies": {
-      "@types/node": "^18.11.9",
-      "@types/react": "^18.0.25",
-      "@types/react-dom": "^18.0.8",
-      "@types/styled-components": "^5.1.26",
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
-      "typescript": "^4.8.4"
+      "build": "tsup",
+      "clean": "rm -rf dist",
+      "dev": "tsup --watch",
+      "prepublishOnly": "npm run clean && npm run build"
    },
    "peerDependencies": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+      "react": ">=17 || >=18",
+      "react-dom": ">=17 || >=18"
    },
-   "dependencies": {
-      "styled-components": "^5.3.6"
-   },
-   "keywords": [
-      "React",
-      "CSS",
-      "style",
-      "animation",
-      "cube",
-      "cuboid",
-      "3d",
-      "webGL"
-   ]
+   "devDependencies": {
+      "@types/react": "^18.3.3",
+      "@types/react-dom": "^18.3.0",
+      "tsup": "^8.5.0",
+      "typescript": "^5.9.2"
+   }
 }