@mlola-ui/scene 1.0.8 → 1.0.9

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./primitives.tsx";
+export * from "./spatial-toggle.tsx";
+export * from "./stage.tsx";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./primitives.js";
+export * from "./spatial-toggle.js";
+export * from "./stage.js";

package/dist/primitives.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface MeshGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    animated?: boolean;
+    blur?: number;
+}
+export declare const MeshGradient: React.ForwardRefExoticComponent<MeshGradientProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardStack3DItem {
+    title: string;
+    subtitle: string;
+    tag: string;
+}
+export interface CardStack3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    cards: CardStack3DItem[];
+}
+export declare function CardStack3D({ cards, className, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: CardStack3DProps): React.JSX.Element;
+export interface DeviceFrame3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    tilt?: boolean;
+}
+export declare function DeviceFrame3D({ children, className, tilt, style, ...props }: DeviceFrame3DProps): React.JSX.Element;

package/dist/primitives.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "./use-reduced-motion.js";
+export const MeshGradient = React.forwardRef(({ animated = true, blur = 50, style, ...props }, ref) => {
+    const reducedMotion = useReducedMotion();
+    const shouldAnimate = animated && !reducedMotion;
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            overflow: "hidden",
+            backgroundImage: `
+            radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--ml-primary) 22%, transparent), transparent 55%),
+            radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--ml-primary, var(--primary)) 14%, transparent), transparent 60%),
+            radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--ml-accent, var(--accent)) 30%, transparent), transparent 70%)
+          `,
+            filter: `blur(${Math.max(0, Math.min(160, Number.isFinite(blur) ? blur : 50))}px)`,
+            animation: shouldAnimate ? "float-3d 14s ease-in-out infinite" : undefined,
+            ...style,
+        } }));
+});
+MeshGradient.displayName = "MeshGradient";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(" ");
+}
+export function CardStack3D({ cards, className = "", onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }) {
+    const [active, setActive] = React.useState(false);
+    const reducedMotion = useReducedMotion();
+    return (_jsx("div", { ...props, tabIndex: props.tabIndex ?? 0, "aria-label": props["aria-label"] ?? "Card stack", onPointerEnter: (event) => {
+            onPointerEnter?.(event);
+            if (event.pointerType !== "touch")
+                setActive(true);
+        }, onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            setActive(false);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            setActive(true);
+        }, onBlur: (event) => {
+            onBlur?.(event);
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setActive(false);
+        }, className: joinClasses("ml-scene-card-stack", className), children: cards.slice(0, 3).map((card, index) => {
+            const layer = 2 - index;
+            const fanDown = active ? layer * 18 : layer * 6;
+            const fanScale = active ? 1 - layer * 0.03 : 1 - layer * 0.04;
+            const rotateZ = active ? (index - 1) * 2.5 : 0;
+            return (_jsxs("div", { className: "ml-scene-card-stack-item", style: {
+                    transform: `translate3d(0, ${fanDown}px, ${index * 12}px) rotateZ(${rotateZ}deg) scale(${fanScale})`,
+                    transformOrigin: "top center",
+                    zIndex: index + 10,
+                    boxShadow: active
+                        ? "0 18px 38px -10px color-mix(in srgb, var(--foreground) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 90%, transparent)"
+                        : "0 8px 20px -6px color-mix(in srgb, var(--foreground) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent)",
+                    transition: reducedMotion
+                        ? "none"
+                        : "transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
+                }, children: [_jsxs("div", { className: "ml-scene-card-stack-header", children: [_jsx("span", { className: "ml-scene-card-stack-tag", children: card.tag }), _jsxs("span", { className: "ml-scene-card-stack-index", children: ["0", index + 1] })] }), _jsxs("div", { children: [_jsx("p", { className: "ml-scene-card-stack-title", children: card.title }), _jsx("p", { className: "ml-scene-card-stack-subtitle", children: card.subtitle })] })] }, `${card.title}-${index}`));
+        }) }));
+}
+export function DeviceFrame3D({ children, className = "", tilt = true, style, ...props }) {
+    const reducedMotion = useReducedMotion();
+    return (_jsx("div", { ...props, className: joinClasses("ml-scene-device-frame", className), style: {
+            background: "linear-gradient(145deg, oklch(35% 0.02 260), oklch(18% 0.015 260))",
+            boxShadow: "0 30px 70px -15px oklch(0% 0 0 / 0.5), inset 0 1px 2px oklch(100% 0 0 / 0.2)",
+            transform: tilt && !reducedMotion ? "rotateX(1deg) rotateY(-2deg)" : undefined,
+            transformStyle: "preserve-3d",
+            ...style,
+        }, children: _jsxs("div", { className: "ml-scene-device-screen", children: [_jsx("div", { className: "ml-scene-device-notch", children: _jsx("span", { className: "ml-scene-device-notch-dot", "aria-hidden": "true" }) }), _jsx("div", { className: "ml-scene-device-content", children: children })] }) }));
+}

package/dist/spatial-toggle.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface SpatialToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+}
+export declare const SpatialToggle: React.ForwardRefExoticComponent<SpatialToggleProps & React.RefAttributes<HTMLButtonElement>>;
+/** @deprecated Use SpatialToggle. Kept as a source-compatible scene export. */
+export declare const Toggle3D: React.ForwardRefExoticComponent<SpatialToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export type Toggle3DProps = SpatialToggleProps;

package/dist/spatial-toggle.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "./use-reduced-motion.js";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(" ");
+}
+export const SpatialToggle = React.forwardRef(({ checked = false, onChange, label, className = "", disabled = false, id, name, }, ref) => {
+    const reducedMotion = useReducedMotion();
+    return (_jsxs("span", { className: joinClasses("ml-scene-spatial-toggle", className), children: [_jsx("button", { ref: ref, id: id, name: name, type: "button", role: "switch", "aria-checked": checked, "aria-label": typeof label === "string" ? label : undefined, disabled: disabled, onClick: () => onChange?.(!checked), className: "ml-scene-spatial-switch", style: {
+                    background: checked
+                        ? "var(--ml-primary)"
+                        : "var(--ml-background-subtle)",
+                    transition: reducedMotion ? "none" : "background 240ms ease",
+                }, children: _jsx("span", { "aria-hidden": "true", className: "ml-scene-spatial-thumb", style: {
+                        transform: checked ? "translate3d(20px, 0, 0)" : "translate3d(0, 0, 0)",
+                        transition: reducedMotion
+                            ? "none"
+                            : "transform 300ms cubic-bezier(0.16, 1, 0.3, 1)",
+                    } }) }), label ? (_jsx("span", { "aria-hidden": "true", className: "ml-scene-spatial-label", children: label })) : null] }));
+});
+SpatialToggle.displayName = "SpatialToggle";
+/** @deprecated Use SpatialToggle. Kept as a source-compatible scene export. */
+export const Toggle3D = SpatialToggle;

package/dist/stage.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface Stage3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    perspective?: number;
+    interactive?: boolean;
+    maxRotationX?: number;
+    maxRotationY?: number;
+}
+export declare const Stage3D: React.ForwardRefExoticComponent<Stage3DProps & React.RefAttributes<HTMLDivElement>>;
+export interface FloatingLayerProps extends React.HTMLAttributes<HTMLDivElement> {
+    depth?: number;
+}
+export declare const FloatingLayer: React.ForwardRefExoticComponent<FloatingLayerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/stage.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "./use-reduced-motion.js";
+function finite(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+export const Stage3D = React.forwardRef(({ perspective = 1200, interactive = true, maxRotationX = 12, maxRotationY = 14, children, style, onPointerMove, onPointerLeave, onPointerCancel, ...props }, forwardedRef) => {
+    const reducedMotion = useReducedMotion();
+    const stageRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const frameRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        stageRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    const renderRotation = React.useCallback((x, y, active) => {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        frameRef.current = requestAnimationFrame(() => {
+            content.style.transform = `rotateX(${x.toFixed(2)}deg) rotateY(${y.toFixed(2)}deg)`;
+            content.style.transition = active
+                ? "transform 80ms linear"
+                : "transform 360ms cubic-bezier(0.16, 1, 0.3, 1)";
+            frameRef.current = null;
+        });
+    }, []);
+    React.useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+    }, []);
+    React.useEffect(() => {
+        if (reducedMotion || !interactive)
+            renderRotation(0, 0, false);
+    }, [interactive, reducedMotion, renderRotation]);
+    const reset = () => renderRotation(0, 0, false);
+    return (_jsx("div", { ...props, ref: setRef, onPointerMove: (event) => {
+            onPointerMove?.(event);
+            const stage = stageRef.current;
+            if (event.defaultPrevented ||
+                !interactive ||
+                reducedMotion ||
+                event.pointerType === "touch" ||
+                !stage)
+                return;
+            const rect = stage.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0)
+                return;
+            const px = (event.clientX - rect.left) / rect.width - 0.5;
+            const py = (event.clientY - rect.top) / rect.height - 0.5;
+            renderRotation(-py * finite(maxRotationX, 12), px * finite(maxRotationY, 14), true);
+        }, onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            reset();
+        }, onPointerCancel: (event) => {
+            onPointerCancel?.(event);
+            reset();
+        }, style: {
+            perspective: `${Math.max(1, finite(perspective, 1200))}px`,
+            transformStyle: "preserve-3d",
+            ...style,
+        }, children: _jsx("div", { ref: contentRef, style: {
+                width: "100%",
+                height: "100%",
+                transform: "rotateX(0deg) rotateY(0deg)",
+                transformStyle: "preserve-3d",
+                transition: reducedMotion
+                    ? "none"
+                    : "transform 360ms cubic-bezier(0.16, 1, 0.3, 1)",
+                willChange: interactive && !reducedMotion ? "transform" : undefined,
+            }, children: children }) }));
+});
+Stage3D.displayName = "Stage3D";
+export const FloatingLayer = React.forwardRef(({ depth = 30, children, style, ...props }, ref) => {
+    const safeDepth = Math.max(-1000, Math.min(1000, finite(depth, 30)));
+    return (_jsx("div", { ...props, ref: ref, style: {
+            transform: `translateZ(${safeDepth}px)`,
+            transformStyle: "preserve-3d",
+            ...style,
+        }, children: children }));
+});
+FloatingLayer.displayName = "FloatingLayer";

package/dist/use-reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/use-reduced-motion.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+const query = "(prefers-reduced-motion: reduce)";
+export function useReducedMotion() {
+    return React.useSyncExternalStore((listener) => {
+        if (typeof window === "undefined")
+            return () => { };
+        const media = window.matchMedia(query);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, () => typeof window !== "undefined" && window.matchMedia(query).matches, () => false);
+}

package/package.json

@@ -1,21 +1,35 @@
 {
   "name": "@mlola-ui/scene",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Optional lightweight spatial presentation for Mlola UI",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "./src/scene.css"
   ],
   "files": [
-    "src"
+    "dist",
+    "src/scene.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./stage": "./src/stage.tsx",
-    "./primitives": "./src/primitives.tsx",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./stage": {
+      "types": "./dist/stage.d.ts",
+      "default": "./dist/stage.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "default": "./dist/primitives.js"
+    },
     "./scene.css": "./src/scene.css"
   },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./primitives";
-export * from "./spatial-toggle";
-export * from "./stage";

package/src/primitives.tsx

@@ -1,156 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useReducedMotion } from "./use-reduced-motion";
-
-export interface MeshGradientProps extends React.HTMLAttributes<HTMLDivElement> {
-  animated?: boolean;
-  blur?: number;
-}
-
-export const MeshGradient = React.forwardRef<HTMLDivElement, MeshGradientProps>(
-  ({ animated = true, blur = 50, style, ...props }, ref) => {
-    const reducedMotion = useReducedMotion();
-    const shouldAnimate = animated && !reducedMotion;
-    return (
-      <div
-        {...props}
-        ref={ref}
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-          overflow: "hidden",
-          backgroundImage: `
-            radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--ml-primary) 22%, transparent), transparent 55%),
-            radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--ml-primary, var(--primary)) 14%, transparent), transparent 60%),
-            radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--ml-accent, var(--accent)) 30%, transparent), transparent 70%)
-          `,
-          filter: `blur(${Math.max(0, Math.min(160, Number.isFinite(blur) ? blur : 50))}px)`,
-          animation: shouldAnimate ? "float-3d 14s ease-in-out infinite" : undefined,
-          ...style,
-        }}
-      />
-    );
-  }
-);
-MeshGradient.displayName = "MeshGradient";
-
-export interface CardStack3DItem {
-  title: string;
-  subtitle: string;
-  tag: string;
-}
-
-export interface CardStack3DProps extends React.HTMLAttributes<HTMLDivElement> {
-  cards: CardStack3DItem[];
-}
-
-function joinClasses(...values: Array<string | false | null | undefined>) {
-  return values.filter(Boolean).join(" ");
-}
-
-export function CardStack3D({
-  cards,
-  className = "",
-  onPointerEnter,
-  onPointerLeave,
-  onFocus,
-  onBlur,
-  ...props
-}: CardStack3DProps) {
-  const [active, setActive] = React.useState(false);
-  const reducedMotion = useReducedMotion();
-  return (
-    <div
-      {...props}
-      tabIndex={props.tabIndex ?? 0}
-      aria-label={props["aria-label"] ?? "Card stack"}
-      onPointerEnter={(event) => {
-        onPointerEnter?.(event);
-        if (event.pointerType !== "touch") setActive(true);
-      }}
-      onPointerLeave={(event) => {
-        onPointerLeave?.(event);
-        setActive(false);
-      }}
-      onFocus={(event) => {
-        onFocus?.(event);
-        setActive(true);
-      }}
-      onBlur={(event) => {
-        onBlur?.(event);
-        if (!event.currentTarget.contains(event.relatedTarget)) setActive(false);
-      }}
-      className={joinClasses("ml-scene-card-stack", className)}
-    >
-      {cards.slice(0, 3).map((card, index) => {
-        const layer = 2 - index;
-        const fanDown = active ? layer * 18 : layer * 6;
-        const fanScale = active ? 1 - layer * 0.03 : 1 - layer * 0.04;
-        const rotateZ = active ? (index - 1) * 2.5 : 0;
-        return (
-          <div
-            key={`${card.title}-${index}`}
-            className="ml-scene-card-stack-item"
-            style={{
-              transform: `translate3d(0, ${fanDown}px, ${index * 12}px) rotateZ(${rotateZ}deg) scale(${fanScale})`,
-              transformOrigin: "top center",
-              zIndex: index + 10,
-              boxShadow: active
-                ? "0 18px 38px -10px color-mix(in srgb, var(--foreground) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 90%, transparent)"
-                : "0 8px 20px -6px color-mix(in srgb, var(--foreground) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent)",
-              transition: reducedMotion
-                ? "none"
-                : "transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
-            }}
-          >
-            <div className="ml-scene-card-stack-header">
-              <span className="ml-scene-card-stack-tag">{card.tag}</span>
-              <span className="ml-scene-card-stack-index">0{index + 1}</span>
-            </div>
-            <div>
-              <p className="ml-scene-card-stack-title">{card.title}</p>
-              <p className="ml-scene-card-stack-subtitle">{card.subtitle}</p>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export interface DeviceFrame3DProps extends React.HTMLAttributes<HTMLDivElement> {
-  tilt?: boolean;
-}
-
-export function DeviceFrame3D({
-  children,
-  className = "",
-  tilt = true,
-  style,
-  ...props
-}: DeviceFrame3DProps) {
-  const reducedMotion = useReducedMotion();
-  return (
-    <div
-      {...props}
-      className={joinClasses("ml-scene-device-frame", className)}
-      style={{
-        background: "linear-gradient(145deg, oklch(35% 0.02 260), oklch(18% 0.015 260))",
-        boxShadow: "0 30px 70px -15px oklch(0% 0 0 / 0.5), inset 0 1px 2px oklch(100% 0 0 / 0.2)",
-        transform: tilt && !reducedMotion ? "rotateX(1deg) rotateY(-2deg)" : undefined,
-        transformStyle: "preserve-3d",
-        ...style,
-      }}
-    >
-      <div className="ml-scene-device-screen">
-        <div className="ml-scene-device-notch">
-          <span className="ml-scene-device-notch-dot" aria-hidden="true" />
-        </div>
-        <div className="ml-scene-device-content">{children}</div>
-      </div>
-    </div>
-  );
-}

package/src/spatial-toggle.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useReducedMotion } from "./use-reduced-motion";
-
-export interface SpatialToggleProps {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-  id?: string;
-  name?: string;
-}
-
-function joinClasses(...values: Array<string | false | null | undefined>) {
-  return values.filter(Boolean).join(" ");
-}
-
-export const SpatialToggle = React.forwardRef<HTMLButtonElement, SpatialToggleProps>(
-  (
-    {
-      checked = false,
-      onChange,
-      label,
-      className = "",
-      disabled = false,
-      id,
-      name,
-    },
-    ref
-  ) => {
-    const reducedMotion = useReducedMotion();
-    return (
-      <span className={joinClasses("ml-scene-spatial-toggle", className)}>
-        <button
-          ref={ref}
-          id={id}
-          name={name}
-          type="button"
-          role="switch"
-          aria-checked={checked}
-          aria-label={typeof label === "string" ? label : undefined}
-          disabled={disabled}
-          onClick={() => onChange?.(!checked)}
-          className="ml-scene-spatial-switch"
-          style={{
-            background: checked
-              ? "var(--ml-primary)"
-              : "var(--ml-background-subtle)",
-            transition: reducedMotion ? "none" : "background 240ms ease",
-          }}
-        >
-          <span
-            aria-hidden="true"
-            className="ml-scene-spatial-thumb"
-            style={{
-              transform: checked ? "translate3d(20px, 0, 0)" : "translate3d(0, 0, 0)",
-              transition: reducedMotion
-                ? "none"
-                : "transform 300ms cubic-bezier(0.16, 1, 0.3, 1)",
-            }}
-          />
-        </button>
-        {label ? (
-          <span aria-hidden="true" className="ml-scene-spatial-label">
-            {label}
-          </span>
-        ) : null}
-      </span>
-    );
-  }
-);
-SpatialToggle.displayName = "SpatialToggle";
-
-/** @deprecated Use SpatialToggle. Kept as a source-compatible scene export. */
-export const Toggle3D = SpatialToggle;
-export type Toggle3DProps = SpatialToggleProps;

package/src/stage.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useReducedMotion } from "./use-reduced-motion";
-
-function finite(value: number, fallback: number): number {
-  return Number.isFinite(value) ? value : fallback;
-}
-
-export interface Stage3DProps extends React.HTMLAttributes<HTMLDivElement> {
-  perspective?: number;
-  interactive?: boolean;
-  maxRotationX?: number;
-  maxRotationY?: number;
-}
-
-export const Stage3D = React.forwardRef<HTMLDivElement, Stage3DProps>(
-  (
-    {
-      perspective = 1200,
-      interactive = true,
-      maxRotationX = 12,
-      maxRotationY = 14,
-      children,
-      style,
-      onPointerMove,
-      onPointerLeave,
-      onPointerCancel,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const reducedMotion = useReducedMotion();
-    const stageRef = React.useRef<HTMLDivElement>(null);
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const frameRef = React.useRef<number | null>(null);
-    const setRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        stageRef.current = node;
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [forwardedRef]
-    );
-
-    const renderRotation = React.useCallback((x: number, y: number, active: boolean) => {
-      const content = contentRef.current;
-      if (!content) return;
-      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
-      if (typeof requestAnimationFrame === "undefined") return;
-      frameRef.current = requestAnimationFrame(() => {
-        content.style.transform = `rotateX(${x.toFixed(2)}deg) rotateY(${y.toFixed(2)}deg)`;
-        content.style.transition = active
-          ? "transform 80ms linear"
-          : "transform 360ms cubic-bezier(0.16, 1, 0.3, 1)";
-        frameRef.current = null;
-      });
-    }, []);
-
-    React.useEffect(
-      () => () => {
-        if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
-      },
-      []
-    );
-
-    React.useEffect(() => {
-      if (reducedMotion || !interactive) renderRotation(0, 0, false);
-    }, [interactive, reducedMotion, renderRotation]);
-
-    const reset = () => renderRotation(0, 0, false);
-
-    return (
-      <div
-        {...props}
-        ref={setRef}
-        onPointerMove={(event) => {
-          onPointerMove?.(event);
-          const stage = stageRef.current;
-          if (
-            event.defaultPrevented ||
-            !interactive ||
-            reducedMotion ||
-            event.pointerType === "touch" ||
-            !stage
-          ) return;
-          const rect = stage.getBoundingClientRect();
-          if (rect.width <= 0 || rect.height <= 0) return;
-          const px = (event.clientX - rect.left) / rect.width - 0.5;
-          const py = (event.clientY - rect.top) / rect.height - 0.5;
-          renderRotation(
-            -py * finite(maxRotationX, 12),
-            px * finite(maxRotationY, 14),
-            true
-          );
-        }}
-        onPointerLeave={(event) => {
-          onPointerLeave?.(event);
-          reset();
-        }}
-        onPointerCancel={(event) => {
-          onPointerCancel?.(event);
-          reset();
-        }}
-        style={{
-          perspective: `${Math.max(1, finite(perspective, 1200))}px`,
-          transformStyle: "preserve-3d",
-          ...style,
-        }}
-      >
-        <div
-          ref={contentRef}
-          style={{
-            width: "100%",
-            height: "100%",
-            transform: "rotateX(0deg) rotateY(0deg)",
-            transformStyle: "preserve-3d",
-            transition: reducedMotion
-              ? "none"
-              : "transform 360ms cubic-bezier(0.16, 1, 0.3, 1)",
-            willChange: interactive && !reducedMotion ? "transform" : undefined,
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    );
-  }
-);
-Stage3D.displayName = "Stage3D";
-
-export interface FloatingLayerProps extends React.HTMLAttributes<HTMLDivElement> {
-  depth?: number;
-}
-
-export const FloatingLayer = React.forwardRef<HTMLDivElement, FloatingLayerProps>(
-  ({ depth = 30, children, style, ...props }, ref) => {
-    const safeDepth = Math.max(-1000, Math.min(1000, finite(depth, 30)));
-    return (
-      <div
-        {...props}
-        ref={ref}
-        style={{
-          transform: `translateZ(${safeDepth}px)`,
-          transformStyle: "preserve-3d",
-          ...style,
-        }}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-FloatingLayer.displayName = "FloatingLayer";

package/src/use-reduced-motion.ts

@@ -1,18 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-const query = "(prefers-reduced-motion: reduce)";
-
-export function useReducedMotion(): boolean {
-  return React.useSyncExternalStore(
-    (listener) => {
-      if (typeof window === "undefined") return () => {};
-      const media = window.matchMedia(query);
-      media.addEventListener("change", listener);
-      return () => media.removeEventListener("change", listener);
-    },
-    () => typeof window !== "undefined" && window.matchMedia(query).matches,
-    () => false
-  );
-}