@hunterchen/canvas 0.8.0 → 0.10.0

package/dist/utils/performance.js

@@ -1,29 +1,24 @@
+//#region src/utils/performance.ts
 /**
- * Performance optimization utilities for cross-platform compatibility
- * Particularly focused on iOS Safari performance issues
- */
-// Detect if the device is iOS
-export const isIOS = () => {
-    if (typeof window === "undefined")
-        return false;
-    return /iPad|iPhone|iPod/.test(navigator.userAgent);
+* Performance optimization utilities for cross-platform compatibility
+* Particularly focused on iOS Safari performance issues
+*/
+const isIOS = () => {
+	if (typeof window === "undefined") return false;
+	return /iPad|iPhone|iPod/.test(navigator.userAgent);
 };
-// Detect if the device is a mobile device
-export const isMobile = () => {
-    if (typeof window === "undefined")
-        return false;
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+const isMobile = () => {
+	if (typeof window === "undefined") return false;
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 };
-// Check if user prefers reduced motion
-export const prefersReducedMotion = () => {
-    if (typeof window === "undefined")
-        return false;
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const prefersReducedMotion = () => {
+	if (typeof window === "undefined") return false;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 };
-// Get optimized will-change value based on state
-export const getWillChange = (isAnimating, properties = ["transform"]) => {
-    // Only apply will-change when actually animating
-    // Leaving it on causes memory issues on iOS
-    return isAnimating ? properties.join(", ") : "auto";
+const getWillChange = (isAnimating, properties = ["transform"]) => {
+	return isAnimating ? properties.join(", ") : "auto";
 };
+
+//#endregion
+export { getWillChange, isIOS, isMobile, prefersReducedMotion };
 //# sourceMappingURL=performance.js.map

package/dist/utils/performance.js.map

@@ -1 +1 @@
-{"version":3,"file":"performance.js","sourceRoot":"","sources":["../../src/utils/performance.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,8BAA8B;AAC9B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAY,EAAE;IACjC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAEhD,OAAO,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AACtD,CAAC,CAAC;AAEF,0CAA0C;AAC1C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAY,EAAE;IACpC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAEhD,OAAO,gEAAgE,CAAC,IAAI,CAC1E,SAAS,CAAC,SAAS,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,uCAAuC;AACvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAY,EAAE;IAChD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAEhD,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,WAAoB,EACpB,aAAuB,CAAC,WAAW,CAAC,EAC5B,EAAE;IACV,iDAAiD;IACjD,4CAA4C;IAC5C,OAAO,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AACtD,CAAC,CAAC"}
+{"version":3,"file":"performance.js","names":[],"sources":["../../src/utils/performance.ts"],"sourcesContent":["/**\n * Performance optimization utilities for cross-platform compatibility\n * Particularly focused on iOS Safari performance issues\n */\n\n// Detect if the device is iOS\nexport const isIOS = (): boolean => {\n  if (typeof window === \"undefined\") return false;\n\n  return /iPad|iPhone|iPod/.test(navigator.userAgent);\n};\n\n// Detect if the device is a mobile device\nexport const isMobile = (): boolean => {\n  if (typeof window === \"undefined\") return false;\n\n  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n    navigator.userAgent,\n  );\n};\n\n// Check if user prefers reduced motion\nexport const prefersReducedMotion = (): boolean => {\n  if (typeof window === \"undefined\") return false;\n\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n};\n\n// Get optimized will-change value based on state\nexport const getWillChange = (\n  isAnimating: boolean,\n  properties: string[] = [\"transform\"],\n): string => {\n  // Only apply will-change when actually animating\n  // Leaving it on causes memory issues on iOS\n  return isAnimating ? properties.join(\", \") : \"auto\";\n};\n"],"mappings":";;;;;AAMA,MAAa,cAAuB;AAClC,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,QAAO,mBAAmB,KAAK,UAAU,UAAU;;AAIrD,MAAa,iBAA0B;AACrC,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,QAAO,iEAAiE,KACtE,UAAU,UACX;;AAIH,MAAa,6BAAsC;AACjD,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,QAAO,OAAO,WAAW,mCAAmC,CAAC;;AAI/D,MAAa,iBACX,aACA,aAAuB,CAAC,YAAY,KACzB;AAGX,QAAO,cAAc,WAAW,KAAK,KAAK,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hunterchen/canvas",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "A React-based canvas library for creating pannable, zoomable, and interactive canvas experiences.",
   "license": "MIT",
   "type": "module",
@@ -17,30 +17,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "default": "./dist/components/index.js"
-    },
-    "./contexts": {
-      "types": "./dist/contexts/index.d.ts",
-      "default": "./dist/contexts/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "default": "./dist/hooks/index.js"
-    },
-    "./lib": {
-      "types": "./dist/lib/index.d.ts",
-      "default": "./dist/lib/index.js"
-    }
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
-    "build": "npm run clean && npm run build:css && npm run build:ts",
+    "build": "npm run clean && npm run build:css && npm run build:js && npm run build:types",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
-    "build:ts": "tsc",
+    "build:js": "rolldown -c",
+    "build:types": "tsc --emitDeclarationOnly",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist"
   },
@@ -61,6 +46,7 @@
     "framer-motion": "^12.26.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "rolldown": "^1.0.0-rc.2",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.2"

package/src/components/canvas/canvas.tsx

@@ -80,6 +80,8 @@ interface Props {
   growTransition?: Transition;
   /** Custom blur transition */
   blurTransition?: Transition;
+  /** Custom pan-to-home transition (stage 2) */
+  panTransition?: Transition;
 
   // ============== Background Customization ==============
   /** Custom canvas background. If not provided, uses DefaultCanvasBackground. */
@@ -117,6 +119,7 @@ const Canvas: FC<Props> = ({
   canvasBoxGradient,
   growTransition,
   blurTransition,
+  panTransition,
   canvasBackground,
   wrapperBackground,
   toolbarConfig,
@@ -225,14 +228,23 @@ const Canvas: FC<Props> = ({
     };
   }, [derivedScale, derivedX, derivedY, animationStage, scale, x, y]);
 
+  // Merge custom panTransition with defaults
+  const effectivePanTransition: Transition = useMemo(() => {
+    if (!panTransition) return STAGE2_TRANSITION;
+    return {
+      ...STAGE2_TRANSITION,
+      ...panTransition,
+    };
+  }, [panTransition]);
+
   // Kick off stage2 (pan to home) when grow completes (introProgress hits 1)
   const startStage2 = useCallback(() => {
     setAnimationStage(1);
 
     Promise.all([
-      animate(x, offsetHomeCoordinates.x, STAGE2_TRANSITION),
-      animate(y, offsetHomeCoordinates.y, STAGE2_TRANSITION),
-      animate(scale, 1, STAGE2_TRANSITION),
+      animate(x, offsetHomeCoordinates.x, effectivePanTransition),
+      animate(y, offsetHomeCoordinates.y, effectivePanTransition),
+      animate(scale, 1, effectivePanTransition),
     ])
       .then(() => {
         setAnimationStage(2);
@@ -241,7 +253,7 @@ const Canvas: FC<Props> = ({
       .catch(() => {
         isIntroAnimatingRef.current = false;
       });
-  }, [offsetHomeCoordinates, x, y, scale]);
+  }, [offsetHomeCoordinates, x, y, scale, effectivePanTransition]);
 
   const viewportRef = useRef<HTMLDivElement>(null);
   const sceneRef = useRef<HTMLDivElement>(null);

package/src/index.ts

@@ -61,4 +61,5 @@ export type {
   NavbarDisplayMode,
   NavbarButtonConfig,
   NavbarTooltipConfig,
+  AnimationTimingConfig,
 } from "./types";

package/src/types/index.ts

@@ -3,6 +3,8 @@
  * Apps should extend these types with their specific enums and constants
  */
 
+import type { Transition } from "framer-motion";
+
 export interface SectionCoordinates {
   x: number;
   y: number;
@@ -152,6 +154,28 @@ export interface NavbarButtonConfig {
   labelStyle?: React.CSSProperties;
 }
 
+/**
+ * Animation timing configuration for intro animations.
+ * Re-exports Framer Motion's Transition type for full flexibility.
+ *
+ * @example
+ * // Simple duration-based transition
+ * const timing: AnimationTimingConfig = {
+ *   duration: 1.5,
+ *   delay: 0.5,
+ *   ease: "easeInOut"
+ * };
+ *
+ * @example
+ * // Custom bezier curve
+ * const timing: AnimationTimingConfig = {
+ *   duration: 0.96,
+ *   delay: 3.14,
+ *   ease: [0.35, 0.1, 0.8, 1]
+ * };
+ */
+export type AnimationTimingConfig = Transition;
+
 /**
  * Configuration options for the canvas navbar
  */

package/dist/components/canvas/offest.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-export const OffsetComponent = ({ offset, children, }) => {
-    return (_jsx(motion.div, { style: {
-            position: "absolute",
-            top: offset.y,
-            left: offset.x,
-            width: "100%",
-            height: "100%",
-        }, children: children }));
-};
-//# sourceMappingURL=offest.js.map

package/dist/components/canvas/offest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"offest.js","sourceRoot":"","sources":["../../../src/components/canvas/offest.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,eAAe,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,MAAM,CAAC,GAAG,IACT,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM,CAAC,CAAC;YACb,IAAI,EAAE,MAAM,CAAC,CAAC;YACd,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,YAEA,QAAQ,GACE,CACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAErE,wBAAwB;AACxB,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,iCAAiC,CAAC;AAOzC,WAAW;AACX,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,+BAA+B,CAAC;AAMvC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE5F,YAAY;AACZ,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/dist/types/index.js

@@ -1,6 +0,0 @@
-/**
- * Generic types for the canvas library
- * Apps should extend these types with their specific enums and constants
- */
-export {};
-//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG"}