perspective-layered-ui 1.0.9 → 1.0.10

package/dist/LayeredScene.d.ts

@@ -1,5 +1,5 @@
 import './LayeredScene.css';
-import { type CSSProperties, type ReactNode } from 'react';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 export type LayeredSceneProps = {
     children: ReactNode;
     className?: string;
@@ -22,8 +22,8 @@ export type LayeredSceneRef = {
     goToFirst: () => void;
 };
 export declare const LayeredScene: import("react").ForwardRefExoticComponent<LayeredSceneProps & import("react").RefAttributes<LayeredSceneRef>>;
-export interface LayerProps {
+export interface LayerProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-export declare function Layer({ children }: LayerProps): import("react/jsx-runtime").JSX.Element;
+export declare const Layer: import("react").ForwardRefExoticComponent<LayerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=LayeredScene.d.ts.map

package/dist/LayeredScene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayeredScene.d.ts","sourceRoot":"","sources":["../src/LayeredScene.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,YAAY,+GAgPvB,CAAA;AAEF,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,2CAE7C"}
+{"version":3,"file":"LayeredScene.d.ts","sourceRoot":"","sources":["../src/LayeredScene.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,cAAc,EACnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,YAAY,+GAgPvB,CAAA;AAEF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,uGAMhB,CAAA"}

package/dist/index.es.js

@@ -1,11 +1,11 @@
-import fe, { forwardRef as me, useMemo as de, Children as ge, useState as P, useRef as Q, useCallback as Ee, useEffect as H, useImperativeHandle as pe, isValidElement as ee } from "react";
-var Z = { exports: {} }, Y = {};
+import me, { forwardRef as oe, useMemo as de, Children as ge, useState as P, useRef as Q, useCallback as Ee, useEffect as H, useImperativeHandle as pe, isValidElement as ee } from "react";
+var Z = { exports: {} }, D = {};
 var re;
 function ve() {
-  if (re) return Y;
+  if (re) return D;
   re = 1;
-  var i = /* @__PURE__ */ Symbol.for("react.transitional.element"), T = /* @__PURE__ */ Symbol.for("react.fragment");
-  function h(g, l, s) {
+  var f = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.fragment");
+  function E(m, l, s) {
     var k = null;
     if (s !== void 0 && (k = "" + s), l.key !== void 0 && (k = "" + l.key), "key" in l) {
       s = {};
@@ -13,20 +13,20 @@ function ve() {
         w !== "key" && (s[w] = l[w]);
     } else s = l;
     return l = s.ref, {
-      $$typeof: i,
-      type: g,
+      $$typeof: f,
+      type: m,
       key: k,
       ref: l !== void 0 ? l : null,
       props: s
     };
   }
-  return Y.Fragment = T, Y.jsx = h, Y.jsxs = h, Y;
+  return D.Fragment = g, D.jsx = E, D.jsxs = E, D;
 }
-var D = {};
+var F = {};
 var te;
 function _e() {
   return te || (te = 1, process.env.NODE_ENV !== "production" && (function() {
-    function i(e) {
+    function f(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === V ? null : e.displayName || e.name || null;
@@ -49,7 +49,7 @@ function _e() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case p:
+          case v:
             return "Portal";
           case I:
             return e.displayName || "Context";
@@ -59,22 +59,22 @@ function _e() {
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case S:
-            return r = e.displayName || null, r !== null ? r : i(e.type) || "Memo";
+            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
           case O:
             r = e._payload, e = e._init;
             try {
-              return i(e(r));
+              return f(e(r));
             } catch {
             }
         }
       return null;
     }
-    function T(e) {
+    function g(e) {
       return "" + e;
     }
-    function h(e) {
+    function E(e) {
       try {
-        T(e);
+        g(e);
         var r = !1;
       } catch {
         r = !0;
@@ -86,29 +86,29 @@ function _e() {
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           n
-        ), T(e);
+        ), g(e);
       }
     }
-    function g(e) {
+    function m(e) {
       if (e === x) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === O)
         return "<...>";
       try {
-        var r = i(e);
+        var r = f(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function l() {
-      var e = y.A;
+      var e = T.A;
       return e === null ? null : e.getOwner();
     }
     function s() {
       return Error("react-stack-top-frame");
     }
     function k(e) {
-      if (u.call(e, "key")) {
+      if (i.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
@@ -127,12 +127,12 @@ function _e() {
       });
     }
     function L() {
-      var e = i(this.type);
-      return v[e] || (v[e] = !0, console.error(
+      var e = f(this.type);
+      return _[e] || (_[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function X(e, r, t, n, c, R) {
+    function X(e, r, t, n, c, h) {
       var o = t.ref;
       return e = {
         $$typeof: U,
@@ -162,14 +162,14 @@ function _e() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: R
+        value: h
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function W(e, r, t, n, c, R) {
+    function W(e, r, t, n, c, h) {
       var o = r.children;
       if (o !== void 0)
         if (n)
-          if (F(o)) {
+          if (Y(o)) {
             for (n = 0; n < o.length; n++)
               j(o[n]);
             Object.freeze && Object.freeze(o);
@@ -178,8 +178,8 @@ function _e() {
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else j(o);
-      if (u.call(r, "key")) {
-        o = i(e);
+      if (i.call(r, "key")) {
+        o = f(e);
         var b = Object.keys(r).filter(function(K) {
           return K !== "key";
         });
@@ -196,7 +196,7 @@ React keys must be passed directly to JSX without using spread:
           o
         ), G[o + n] = !0);
       }
-      if (o = null, t !== void 0 && (h(t), o = "" + t), k(r) && (h(r.key), o = "" + r.key), "key" in r) {
+      if (o = null, t !== void 0 && (E(t), o = "" + t), k(r) && (E(r.key), o = "" + r.key), "key" in r) {
         t = {};
         for (var C in r)
           C !== "key" && (t[C] = r[C]);
@@ -210,7 +210,7 @@ React keys must be passed directly to JSX without using spread:
         t,
         l(),
         c,
-        R
+        h
       );
     }
     function j(e) {
@@ -219,51 +219,51 @@ React keys must be passed directly to JSX without using spread:
     function $(e) {
       return typeof e == "object" && e !== null && e.$$typeof === U;
     }
-    var E = fe, U = /* @__PURE__ */ Symbol.for("react.transitional.element"), p = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), q = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), a = /* @__PURE__ */ Symbol.for("react.consumer"), I = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), M = /* @__PURE__ */ Symbol.for("react.suspense"), J = /* @__PURE__ */ Symbol.for("react.suspense_list"), S = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), A = /* @__PURE__ */ Symbol.for("react.activity"), V = /* @__PURE__ */ Symbol.for("react.client.reference"), y = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, u = Object.prototype.hasOwnProperty, F = Array.isArray, m = console.createTask ? console.createTask : function() {
+    var p = me, U = /* @__PURE__ */ Symbol.for("react.transitional.element"), v = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), q = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), a = /* @__PURE__ */ Symbol.for("react.consumer"), I = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), M = /* @__PURE__ */ Symbol.for("react.suspense"), J = /* @__PURE__ */ Symbol.for("react.suspense_list"), S = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), A = /* @__PURE__ */ Symbol.for("react.activity"), V = /* @__PURE__ */ Symbol.for("react.client.reference"), T = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, i = Object.prototype.hasOwnProperty, Y = Array.isArray, d = console.createTask ? console.createTask : function() {
       return null;
     };
-    E = {
+    p = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var N, v = {}, _ = E.react_stack_bottom_frame.bind(
-      E,
+    var N, _ = {}, y = p.react_stack_bottom_frame.bind(
+      p,
       s
-    )(), f = m(g(s)), G = {};
-    D.Fragment = x, D.jsx = function(e, r, t) {
-      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
+    )(), u = d(m(s)), G = {};
+    F.Fragment = x, F.jsx = function(e, r, t) {
+      var n = 1e4 > T.recentlyCreatedOwnerStacks++;
       return W(
         e,
         r,
         t,
         !1,
-        n ? Error("react-stack-top-frame") : _,
-        n ? m(g(e)) : f
+        n ? Error("react-stack-top-frame") : y,
+        n ? d(m(e)) : u
       );
-    }, D.jsxs = function(e, r, t) {
-      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
+    }, F.jsxs = function(e, r, t) {
+      var n = 1e4 > T.recentlyCreatedOwnerStacks++;
       return W(
         e,
         r,
         t,
         !0,
-        n ? Error("react-stack-top-frame") : _,
-        n ? m(g(e)) : f
+        n ? Error("react-stack-top-frame") : y,
+        n ? d(m(e)) : u
       );
     };
-  })()), D;
+  })()), F;
 }
 var ne;
-function be() {
+function ye() {
   return ne || (ne = 1, process.env.NODE_ENV === "production" ? Z.exports = ve() : Z.exports = _e()), Z.exports;
 }
-var d = be();
-const Pe = me(({
-  children: i,
-  className: T,
-  style: h,
-  transitionMs: g = 250,
+var R = ye();
+const Pe = oe(({
+  children: f,
+  className: g,
+  style: E,
+  transitionMs: m = 250,
   easing: l = "linear",
   depthSpacingPx: s = 200,
   perspectivePx: k = 3e3,
@@ -273,53 +273,53 @@ const Pe = me(({
   opacityAt2: W = 0.45,
   minVisibleOpacity: j = 0.2,
   initialIndex: $ = 0,
-  disableNavigationButtons: E = !1
+  disableNavigationButtons: p = !1
 }, U) => {
-  const p = de(() => ge.toArray(i), [i]), x = (r) => Math.max(0, Math.min(1, r)), q = (r, t, n) => r + (t - r) * n, z = (r, t, n, c) => r <= 0 ? t : r >= 2 ? c : r <= 1 ? q(t, n, x(r)) : q(n, c, x(r - 1)), [a, I] = P(() => Number.isNaN($) ? 0 : Math.max(0, Math.min(p.length - 1, $))), [B, M] = P(null), [J, S] = P(null), [O, A] = P(1), [V, y] = P(1), [u, F] = P(!1), [m, N] = P(1), v = Q(null), _ = Q(null), f = Ee((r) => {
-    if (u || r < 0 || r >= p.length || r === a) return;
+  const v = de(() => ge.toArray(f), [f]), x = (r) => Math.max(0, Math.min(1, r)), q = (r, t, n) => r + (t - r) * n, z = (r, t, n, c) => r <= 0 ? t : r >= 2 ? c : r <= 1 ? q(t, n, x(r)) : q(n, c, x(r - 1)), [a, I] = P(() => Number.isNaN($) ? 0 : Math.max(0, Math.min(v.length - 1, $))), [B, M] = P(null), [J, S] = P(null), [O, A] = P(1), [V, T] = P(1), [i, Y] = P(!1), [d, N] = P(1), _ = Q(null), y = Q(null), u = Ee((r) => {
+    if (i || r < 0 || r >= v.length || r === a) return;
     const t = r > a ? 1 : -1;
-    F(!0), M(a), y(0), N(t), t === -1 ? (S(r), A(0)) : (S(null), A(1)), I(r), _.current !== null && window.cancelAnimationFrame(_.current), _.current = window.requestAnimationFrame(() => {
-      y(1), t === -1 && A(1), _.current = null;
-    }), v.current !== null && window.clearTimeout(v.current), v.current = window.setTimeout(() => {
-      F(!1), M(null), S(null), A(1), y(1), N(1), v.current = null;
-    }, g + 60);
-  }, [u, a, p.length, g, F, M, y, N, S, A, I]);
+    Y(!0), M(a), T(0), N(t), t === -1 ? (S(r), A(0)) : (S(null), A(1)), I(r), y.current !== null && window.cancelAnimationFrame(y.current), y.current = window.requestAnimationFrame(() => {
+      T(1), t === -1 && A(1), y.current = null;
+    }), _.current !== null && window.clearTimeout(_.current), _.current = window.setTimeout(() => {
+      Y(!1), M(null), S(null), A(1), T(1), N(1), _.current = null;
+    }, m + 60);
+  }, [i, a, v.length, m, Y, M, T, N, S, A, I]);
   H(() => () => {
-    v.current !== null && window.clearTimeout(v.current), _.current !== null && window.cancelAnimationFrame(_.current);
+    _.current !== null && window.clearTimeout(_.current), y.current !== null && window.cancelAnimationFrame(y.current);
   }, []), H(() => {
-    I((r) => Math.max(0, Math.min(p.length - 1, r)));
-  }, [p.length]), H(() => {
-    if (E) return;
+    I((r) => Math.max(0, Math.min(v.length - 1, r)));
+  }, [v.length]), H(() => {
+    if (p) return;
     const r = (t) => {
-      t.key === "PageUp" ? f(a - 1) : t.key === "PageDown" && f(a + 1);
+      t.key === "PageUp" ? u(a - 1) : t.key === "PageDown" && u(a + 1);
     };
     return window.addEventListener("keydown", r), () => {
       window.removeEventListener("keydown", r);
     };
-  }, [E, a, f]), pe(U, () => ({
-    goToPrev: () => f(a - 1),
-    goToNext: () => f(a + 1),
-    goToFirst: () => f(0)
-  }), [a, f]);
-  const G = u, e = s * a;
-  return /* @__PURE__ */ d.jsx(
+  }, [p, a, u]), pe(U, () => ({
+    goToPrev: () => u(a - 1),
+    goToNext: () => u(a + 1),
+    goToFirst: () => u(0)
+  }), [a, u]);
+  const G = i, e = s * a;
+  return /* @__PURE__ */ R.jsx(
     "div",
     {
-      className: `layeredScene ${G ? "is-transitioning" : ""}${T ? ` ${T}` : ""}`,
+      className: `layeredScene ${G ? "is-transitioning" : ""}${g ? ` ${g}` : ""}`,
       "aria-label": "3D layered scene",
       style: {
         "--camera-z": `${e}px`,
-        "--transition-ms": `${g}ms`,
+        "--transition-ms": `${m}ms`,
         "--transition-easing": l,
         "--perspective": `${k}px`,
-        ...h
+        ...E
       },
-      children: p.map((r, t) => {
-        const n = Math.abs(t - a), c = B !== null && t === B, R = J !== null && t === J, o = -s * t, b = c && m === 1 ? s * 2 : 0, C = R && m === -1 && O === 0 ? s * 2 : 0;
-        if (o + b + e + C > 0 && !c && !(R && u && m === -1))
+      children: v.map((r, t) => {
+        const n = Math.abs(t - a), c = B !== null && t === B, h = J !== null && t === J, o = -s * t, b = c && d === 1 ? s * 2 : 0, C = h && d === -1 && O === 0 ? s * 2 : 0;
+        if (o + b + e + C > 0 && !c && !(h && i && d === -1))
           return null;
-        const oe = z(n, 1, X, W), ae = c && u ? m === -1 ? V === 0 ? 1 : j : V === 0 ? 1 : j : R && u && m === -1 ? O === 0 ? 0 : 1 : t === a ? 1 : oe, se = z(n, 0, w, L), le = R && u && m === -1 ? O === 0 ? L : 0 : se, ce = 1e4 - Math.round(n * 10) + (c ? 1e3 : 0), ie = ee(r) ? r : /* @__PURE__ */ d.jsx(d.Fragment, { children: r }), ue = (ee(r) ? r.key : null) ?? t;
-        return /* @__PURE__ */ d.jsx(
+        const ae = z(n, 1, X, W), se = c && i ? d === -1 ? V === 0 ? 1 : j : V === 0 ? 1 : j : h && i && d === -1 ? O === 0 ? 0 : 1 : t === a ? 1 : ae, le = z(n, 0, w, L), ce = h && i && d === -1 ? O === 0 ? L : 0 : le, ie = 1e4 - Math.round(n * 10) + (c ? 1e3 : 0), ue = ee(r) ? r : /* @__PURE__ */ R.jsx(R.Fragment, { children: r }), fe = (ee(r) ? r.key : null) ?? t;
+        return /* @__PURE__ */ R.jsx(
           "div",
           {
             className: `layeredLayer ${n === 0 ? "is-focused" : ""} ${t === a ? "is-active" : ""} ${c ? "is-outgoing" : ""}`,
@@ -327,45 +327,44 @@ const Pe = me(({
               "--z": `${o}px`,
               "--outgoing-offset": `${b}px`,
               "--incoming-offset": `${C}px`,
-              "--stack": ce,
-              "--layer-blur": `${le}px`,
-              opacity: Math.max(j, ae)
+              "--stack": ie,
+              "--layer-blur": `${ce}px`,
+              opacity: Math.max(j, se)
             },
-            children: /* @__PURE__ */ d.jsxs("div", { className: "layeredLayerInner", children: [
-              ie,
-              /* @__PURE__ */ d.jsxs("div", { className: "layeredControls", children: [
-                !E && t !== 0 ? /* @__PURE__ */ d.jsx(
+            children: /* @__PURE__ */ R.jsxs("div", { className: "layeredLayerInner", children: [
+              ue,
+              /* @__PURE__ */ R.jsxs("div", { className: "layeredControls", children: [
+                !p && t !== 0 ? /* @__PURE__ */ R.jsx(
                   "button",
                   {
                     type: "button",
                     className: "layeredBtn",
-                    onClick: () => f(a - 1),
-                    disabled: u || t !== a,
+                    onClick: () => u(a - 1),
+                    disabled: i || t !== a,
                     children: "Previous"
                   }
                 ) : null,
-                !E && t !== p.length - 1 ? /* @__PURE__ */ d.jsx(
+                !p && t !== v.length - 1 ? /* @__PURE__ */ R.jsx(
                   "button",
                   {
                     type: "button",
                     className: "layeredBtn",
-                    onClick: () => f(a + 1),
-                    disabled: u || t !== a,
+                    onClick: () => u(a + 1),
+                    disabled: i || t !== a,
                     children: "Next"
                   }
                 ) : null
               ] })
             ] })
           },
-          ue
+          fe
         );
       })
     }
   );
+}), je = oe(function({ children: g, ...E }, m) {
+  return /* @__PURE__ */ R.jsx("div", { ref: m, ...E, children: g });
 });
-function je({ children: i }) {
-  return /* @__PURE__ */ d.jsx(d.Fragment, { children: i });
-}
 export {
   je as Layer,
   Pe as LayeredScene

package/dist/index.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");var Z={exports:{}},Y={};var K;function ce(){if(K)return Y;K=1;var i=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function k(E,c,l){var w=null;if(l!==void 0&&(w=""+l),c.key!==void 0&&(w=""+c.key),"key"in c){l={};for(var O in c)O!=="key"&&(l[O]=c[O])}else l=c;return c=l.ref,{$$typeof:i,type:E,key:w,ref:c!==void 0?c:null,props:l}}return Y.Fragment=h,Y.jsx=k,Y.jsxs=k,Y}var D={};var Q;function ue(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===V?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case z:return"Profiler";case q:return"StrictMode";case M:return"Suspense";case J:return"SuspenseList";case P:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case I:return e.displayName||"Context";case a:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case x:return r=e.displayName||null,r!==null?r:i(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return i(e(r))}catch{}}return null}function h(e){return""+e}function k(e){try{h(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),h(e)}}function E(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=i(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=R.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function w(e){if(f.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function O(e,r){function t(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function L(){var e=i(this.type);return _[e]||(_[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function X(e,r,t,n,u,T){var o=t.ref;return e={$$typeof:U,type:e,key:r,props:t,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:L}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:u}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function W(e,r,t,n,u,T){var o=r.children;if(o!==void 0)if(n)if(F(o)){for(n=0;n<o.length;n++)A(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(o);if(f.call(r,"key")){o=i(e);var b=Object.keys(r).filter(function(H){return H!=="key"});n=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",G[o+n]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");var Z={exports:{}},Y={};var K;function le(){if(K)return Y;K=1;var m=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function v(d,l,c){var k=null;if(c!==void 0&&(k=""+c),l.key!==void 0&&(k=""+l.key),"key"in l){c={};for(var O in l)O!=="key"&&(c[O]=l[O])}else c=l;return l=c.ref,{$$typeof:m,type:d,key:k,ref:l!==void 0?l:null,props:c}}return Y.Fragment=E,Y.jsx=v,Y.jsxs=v,Y}var D={};var Q;function ue(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===V?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case z:return"Profiler";case q:return"StrictMode";case M:return"Suspense";case J:return"SuspenseList";case P:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case y:return"Portal";case I:return e.displayName||"Context";case s:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case x:return r=e.displayName||null,r!==null?r:m(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return m(e(r))}catch{}}return null}function E(e){return""+e}function v(e){try{E(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),E(e)}}function d(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=m(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=h.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function k(e){if(i.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function O(e,r){function t(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function F(){var e=m(this.type);return _[e]||(_[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function X(e,r,t,n,u,w){var o=t.ref;return e={$$typeof:U,type:e,key:r,props:t,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:F}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:u}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function W(e,r,t,n,u,w){var o=r.children;if(o!==void 0)if(n)if(L(o)){for(n=0;n<o.length;n++)A(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(o);if(i.call(r,"key")){o=m(e);var R=Object.keys(r).filter(function(H){return H!=="key"});n=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",G[o+n]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,n,o,b,o),G[o+n]=!0)}if(o=null,t!==void 0&&(k(t),o=""+t),w(r)&&(k(r.key),o=""+r.key),"key"in r){t={};for(var C in r)C!=="key"&&(t[C]=r[C])}else t=r;return o&&O(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,o,t,c(),u,T)}function A(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?$(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var v=s,U=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),a=Symbol.for("react.consumer"),I=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),P=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),R=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,f=Object.prototype.hasOwnProperty,F=Array.isArray,d=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var N,_={},y=v.react_stack_bottom_frame.bind(v,l)(),m=d(E(l)),G={};D.Fragment=j,D.jsx=function(e,r,t){var n=1e4>R.recentlyCreatedOwnerStacks++;return W(e,r,t,!1,n?Error("react-stack-top-frame"):y,n?d(E(e)):m)},D.jsxs=function(e,r,t){var n=1e4>R.recentlyCreatedOwnerStacks++;return W(e,r,t,!0,n?Error("react-stack-top-frame"):y,n?d(E(e)):m)}})()),D}var ee;function ie(){return ee||(ee=1,process.env.NODE_ENV==="production"?Z.exports=ce():Z.exports=ue()),Z.exports}var g=ie();const fe=s.forwardRef(({children:i,className:h,style:k,transitionMs:E=250,easing:c="linear",depthSpacingPx:l=200,perspectivePx:w=3e3,blurAt1Px:O=6,blurAt2Px:L=10,opacityAt1:X=.7,opacityAt2:W=.45,minVisibleOpacity:A=.2,initialIndex:$=0,disableNavigationButtons:v=!1},U)=>{const p=s.useMemo(()=>s.Children.toArray(i),[i]),j=r=>Math.max(0,Math.min(1,r)),q=(r,t,n)=>r+(t-r)*n,z=(r,t,n,u)=>r<=0?t:r>=2?u:r<=1?q(t,n,j(r)):q(n,u,j(r-1)),[a,I]=s.useState(()=>Number.isNaN($)?0:Math.max(0,Math.min(p.length-1,$))),[B,M]=s.useState(null),[J,x]=s.useState(null),[S,P]=s.useState(1),[V,R]=s.useState(1),[f,F]=s.useState(!1),[d,N]=s.useState(1),_=s.useRef(null),y=s.useRef(null),m=s.useCallback(r=>{if(f||r<0||r>=p.length||r===a)return;const t=r>a?1:-1;F(!0),M(a),R(0),N(t),t===-1?(x(r),P(0)):(x(null),P(1)),I(r),y.current!==null&&window.cancelAnimationFrame(y.current),y.current=window.requestAnimationFrame(()=>{R(1),t===-1&&P(1),y.current=null}),_.current!==null&&window.clearTimeout(_.current),_.current=window.setTimeout(()=>{F(!1),M(null),x(null),P(1),R(1),N(1),_.current=null},E+60)},[f,a,p.length,E,F,M,R,N,x,P,I]);s.useEffect(()=>()=>{_.current!==null&&window.clearTimeout(_.current),y.current!==null&&window.cancelAnimationFrame(y.current)},[]),s.useEffect(()=>{I(r=>Math.max(0,Math.min(p.length-1,r)))},[p.length]),s.useEffect(()=>{if(v)return;const r=t=>{t.key==="PageUp"?m(a-1):t.key==="PageDown"&&m(a+1)};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[v,a,m]),s.useImperativeHandle(U,()=>({goToPrev:()=>m(a-1),goToNext:()=>m(a+1),goToFirst:()=>m(0)}),[a,m]);const G=f,e=l*a;return g.jsx("div",{className:`layeredScene ${G?"is-transitioning":""}${h?` ${h}`:""}`,"aria-label":"3D layered scene",style:{"--camera-z":`${e}px`,"--transition-ms":`${E}ms`,"--transition-easing":c,"--perspective":`${w}px`,...k},children:p.map((r,t)=>{const n=Math.abs(t-a),u=B!==null&&t===B,T=J!==null&&t===J,o=-l*t,b=u&&d===1?l*2:0,C=T&&d===-1&&S===0?l*2:0;if(o+b+e+C>0&&!u&&!(T&&f&&d===-1))return null;const re=z(n,1,X,W),te=u&&f?d===-1?V===0?1:A:V===0?1:A:T&&f&&d===-1?S===0?0:1:t===a?1:re,ne=z(n,0,O,L),oe=T&&f&&d===-1?S===0?L:0:ne,ae=1e4-Math.round(n*10)+(u?1e3:0),se=s.isValidElement(r)?r:g.jsx(g.Fragment,{children:r}),le=(s.isValidElement(r)?r.key:null)??t;return g.jsx("div",{className:`layeredLayer ${n===0?"is-focused":""} ${t===a?"is-active":""} ${u?"is-outgoing":""}`,style:{"--z":`${o}px`,"--outgoing-offset":`${b}px`,"--incoming-offset":`${C}px`,"--stack":ae,"--layer-blur":`${oe}px`,opacity:Math.max(A,te)},children:g.jsxs("div",{className:"layeredLayerInner",children:[se,g.jsxs("div",{className:"layeredControls",children:[!v&&t!==0?g.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>m(a-1),disabled:f||t!==a,children:"Previous"}):null,!v&&t!==p.length-1?g.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>m(a+1),disabled:f||t!==a,children:"Next"}):null]})]})},le)})})});function me({children:i}){return g.jsx(g.Fragment,{children:i})}exports.Layer=me;exports.LayeredScene=fe;
+  <%s key={someKey} {...props} />`,n,o,R,o),G[o+n]=!0)}if(o=null,t!==void 0&&(v(t),o=""+t),k(r)&&(v(r.key),o=""+r.key),"key"in r){t={};for(var C in r)C!=="key"&&(t[C]=r[C])}else t=r;return o&&O(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,o,t,l(),u,w)}function A(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?$(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var p=a,U=Symbol.for("react.transitional.element"),y=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),s=Symbol.for("react.consumer"),I=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),P=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),h=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,i=Object.prototype.hasOwnProperty,L=Array.isArray,g=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var N,_={},b=p.react_stack_bottom_frame.bind(p,c)(),f=g(d(c)),G={};D.Fragment=j,D.jsx=function(e,r,t){var n=1e4>h.recentlyCreatedOwnerStacks++;return W(e,r,t,!1,n?Error("react-stack-top-frame"):b,n?g(d(e)):f)},D.jsxs=function(e,r,t){var n=1e4>h.recentlyCreatedOwnerStacks++;return W(e,r,t,!0,n?Error("react-stack-top-frame"):b,n?g(d(e)):f)}})()),D}var ee;function ie(){return ee||(ee=1,process.env.NODE_ENV==="production"?Z.exports=le():Z.exports=ue()),Z.exports}var T=ie();const fe=a.forwardRef(({children:m,className:E,style:v,transitionMs:d=250,easing:l="linear",depthSpacingPx:c=200,perspectivePx:k=3e3,blurAt1Px:O=6,blurAt2Px:F=10,opacityAt1:X=.7,opacityAt2:W=.45,minVisibleOpacity:A=.2,initialIndex:$=0,disableNavigationButtons:p=!1},U)=>{const y=a.useMemo(()=>a.Children.toArray(m),[m]),j=r=>Math.max(0,Math.min(1,r)),q=(r,t,n)=>r+(t-r)*n,z=(r,t,n,u)=>r<=0?t:r>=2?u:r<=1?q(t,n,j(r)):q(n,u,j(r-1)),[s,I]=a.useState(()=>Number.isNaN($)?0:Math.max(0,Math.min(y.length-1,$))),[B,M]=a.useState(null),[J,x]=a.useState(null),[S,P]=a.useState(1),[V,h]=a.useState(1),[i,L]=a.useState(!1),[g,N]=a.useState(1),_=a.useRef(null),b=a.useRef(null),f=a.useCallback(r=>{if(i||r<0||r>=y.length||r===s)return;const t=r>s?1:-1;L(!0),M(s),h(0),N(t),t===-1?(x(r),P(0)):(x(null),P(1)),I(r),b.current!==null&&window.cancelAnimationFrame(b.current),b.current=window.requestAnimationFrame(()=>{h(1),t===-1&&P(1),b.current=null}),_.current!==null&&window.clearTimeout(_.current),_.current=window.setTimeout(()=>{L(!1),M(null),x(null),P(1),h(1),N(1),_.current=null},d+60)},[i,s,y.length,d,L,M,h,N,x,P,I]);a.useEffect(()=>()=>{_.current!==null&&window.clearTimeout(_.current),b.current!==null&&window.cancelAnimationFrame(b.current)},[]),a.useEffect(()=>{I(r=>Math.max(0,Math.min(y.length-1,r)))},[y.length]),a.useEffect(()=>{if(p)return;const r=t=>{t.key==="PageUp"?f(s-1):t.key==="PageDown"&&f(s+1)};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[p,s,f]),a.useImperativeHandle(U,()=>({goToPrev:()=>f(s-1),goToNext:()=>f(s+1),goToFirst:()=>f(0)}),[s,f]);const G=i,e=c*s;return T.jsx("div",{className:`layeredScene ${G?"is-transitioning":""}${E?` ${E}`:""}`,"aria-label":"3D layered scene",style:{"--camera-z":`${e}px`,"--transition-ms":`${d}ms`,"--transition-easing":l,"--perspective":`${k}px`,...v},children:y.map((r,t)=>{const n=Math.abs(t-s),u=B!==null&&t===B,w=J!==null&&t===J,o=-c*t,R=u&&g===1?c*2:0,C=w&&g===-1&&S===0?c*2:0;if(o+R+e+C>0&&!u&&!(w&&i&&g===-1))return null;const re=z(n,1,X,W),te=u&&i?g===-1?V===0?1:A:V===0?1:A:w&&i&&g===-1?S===0?0:1:t===s?1:re,ne=z(n,0,O,F),oe=w&&i&&g===-1?S===0?F:0:ne,ae=1e4-Math.round(n*10)+(u?1e3:0),se=a.isValidElement(r)?r:T.jsx(T.Fragment,{children:r}),ce=(a.isValidElement(r)?r.key:null)??t;return T.jsx("div",{className:`layeredLayer ${n===0?"is-focused":""} ${t===s?"is-active":""} ${u?"is-outgoing":""}`,style:{"--z":`${o}px`,"--outgoing-offset":`${R}px`,"--incoming-offset":`${C}px`,"--stack":ae,"--layer-blur":`${oe}px`,opacity:Math.max(A,te)},children:T.jsxs("div",{className:"layeredLayerInner",children:[se,T.jsxs("div",{className:"layeredControls",children:[!p&&t!==0?T.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>f(s-1),disabled:i||t!==s,children:"Previous"}):null,!p&&t!==y.length-1?T.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>f(s+1),disabled:i||t!==s,children:"Next"}):null]})]})},ce)})})}),me=a.forwardRef(function({children:E,...v},d){return T.jsx("div",{ref:d,...v,children:E})});exports.Layer=me;exports.LayeredScene=fe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perspective-layered-ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "description": "A React component for creating layered UI scenes with perspective effects",
   "main": "./dist/index.js",