@hunterchen/canvas 0.1.0

package/dist/lib/canvas.js

@@ -0,0 +1,82 @@
+import { animate } from "framer-motion";
+import { useMemo } from "react";
+import { CANVAS_WIDTH, CANVAS_HEIGHT, MAX_DIM_RATIO, INTRO_ASPECT_RATIO, PAN_SPRING, ScreenSizeEnum, } from "./constants";
+export const canvasWidth = CANVAS_WIDTH;
+export const canvasHeight = CANVAS_HEIGHT;
+// Re-export ScreenSizeEnum for backward compatibility
+export { ScreenSizeEnum } from "./constants";
+export const useMemoPoint = (x, y) => {
+    return useMemo(() => ({ x, y }), [x, y]);
+};
+export const getDistance = (p1, p2) => {
+    const dx = p1.clientX - p2.clientX;
+    const dy = p1.clientY - p2.clientY;
+    return Math.sqrt(dx ** 2 + dy ** 2);
+};
+export const getMidpoint = (p1, p2) => {
+    return {
+        x: (p1.clientX + p2.clientX) / 2,
+        y: (p1.clientY + p2.clientY) / 2,
+    };
+};
+export const getScreenSizeEnum = (width) => {
+    // iphone 12 pro is 390px, iphone 14 pro max is 430px, SE 3rd gen is 375px
+    if (width < 400)
+        return ScreenSizeEnum.SMALL_MOBILE;
+    if (width < 768)
+        return ScreenSizeEnum.MOBILE;
+    if (width < 1440)
+        return ScreenSizeEnum.TABLET;
+    if (width < 1920)
+        return ScreenSizeEnum.SMALL_DESKTOP;
+    if (width < 2560)
+        return ScreenSizeEnum.MEDIUM_DESKTOP;
+    if (width <= 3440)
+        return ScreenSizeEnum.LARGE_DESKTOP;
+    return ScreenSizeEnum.HUGE_DESKTOP;
+};
+export function getSectionPanCoordinates({ windowDimensions, coords, targetZoom, negative, }) {
+    const { width, height } = windowDimensions;
+    // Calculate the center of the section
+    const sectionCenterX = coords.x + coords.width / 2;
+    const sectionCenterY = coords.y + coords.height / 2;
+    // Calculate the required pan offset to center the section in the viewport
+    const targetX = width / 2 - sectionCenterX * targetZoom;
+    const targetY = height / 2 - sectionCenterY * targetZoom;
+    if (negative) {
+        return {
+            x: -targetX,
+            y: -targetY,
+        };
+    }
+    return {
+        x: targetX,
+        y: targetY,
+    };
+}
+export async function panToOffsetScene(offset, x, y, scale, newZoom) {
+    const animX = animate(x, offset.x, PAN_SPRING);
+    const animY = animate(y, offset.y, PAN_SPRING);
+    const animScale = animate(scale, newZoom ?? 1, PAN_SPRING);
+    await Promise.all([animScale, animX, animY]);
+}
+export const calcInitialBoxWidth = (windowWidth, windowHeight) => {
+    // math CanvasWrapper's bounding box size and compute scale s.t. canvas fits entirely within
+    const maxWidth = windowWidth * MAX_DIM_RATIO.width;
+    const maxHeight = windowHeight * MAX_DIM_RATIO.height;
+    let boxWidth, boxHeight;
+    if (maxWidth / INTRO_ASPECT_RATIO <= maxHeight) {
+        boxWidth = maxWidth;
+        boxHeight = boxWidth / INTRO_ASPECT_RATIO;
+    }
+    else {
+        boxHeight = maxHeight;
+        boxWidth = boxHeight * INTRO_ASPECT_RATIO;
+    }
+    // scale so the canvas fits inside the computed 3:2 box
+    return Math.min(boxWidth / canvasWidth, boxHeight / canvasHeight);
+};
+// Re-export commonly used constants for backward compatibility
+export { MAX_DIM_RATIO } from "./constants";
+export { INTERACTIVE_SELECTOR, ZOOM_BOUND, MAX_ZOOM, MIN_ZOOMS, } from "./constants";
+//# sourceMappingURL=canvas.js.map

package/dist/lib/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../src/lib/canvas.ts"],"names":[],"mappings":"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"}

package/dist/lib/constants.d.ts

@@ -0,0 +1,78 @@
+import { type Easing } from "framer-motion";
+/**
+ * Canvas Library Constants
+ * All configurable constants consolidated in one place
+ */
+export declare enum ScreenSizeEnum {
+    SMALL_MOBILE = "small-mobile",
+    MOBILE = "mobile",
+    TABLET = "tablet",
+    SMALL_DESKTOP = "small-desktop",
+    MEDIUM_DESKTOP = "medium-desktop",
+    LARGE_DESKTOP = "large-desktop",
+    HUGE_DESKTOP = "huge-desktop"
+}
+/** Default canvas width in pixels */
+export declare const CANVAS_WIDTH = 6000;
+/** Default canvas height in pixels */
+export declare const CANVAS_HEIGHT = 4000;
+/** Maximum dimensions ratio for the intro box relative to viewport */
+export declare const MAX_DIM_RATIO: {
+    readonly width: 0.8;
+    readonly height: 0.5;
+};
+/** Intro box aspect ratio (width:height) */
+export declare const INTRO_ASPECT_RATIO: number;
+/** Grow animation transition config */
+export declare const GROW_TRANSITION: {
+    readonly duration: 0.96;
+    readonly delay: 3.14;
+    readonly ease: Easing;
+};
+/** Blur mask animation transition config */
+export declare const BLUR_TRANSITION: {
+    readonly duration: 0.85;
+    readonly delay: 1.25;
+    readonly ease: Easing;
+};
+/** Stage 2 pan-to-home transition config */
+export declare const STAGE2_TRANSITION: {
+    readonly duration: 0.96;
+    readonly ease: readonly [0.37, 0.1, 0.6, 1];
+};
+/** Maximum zoom level */
+export declare const MAX_ZOOM = 3;
+/** Minimum zoom bound multiplier to prevent zooming out past canvas edges */
+export declare const ZOOM_BOUND = 1.05;
+/** Minimum zoom levels per screen size */
+export declare const MIN_ZOOMS: Record<ScreenSizeEnum, number>;
+/** Pan animation spring config */
+export declare const PAN_SPRING: {
+    readonly visualDuration: 0.34;
+    readonly type: "spring";
+    readonly stiffness: 200;
+    readonly damping: 25;
+};
+/** Wheel zoom sensitivity for mouse wheel */
+export declare const MOUSE_WHEEL_ZOOM_SENSITIVITY = 0.0015;
+/** Wheel zoom sensitivity for trackpad */
+export declare const TRACKPAD_ZOOM_SENSITIVITY = 0.015;
+/** CSS selector for interactive elements that should not trigger pan */
+export declare const INTERACTIVE_SELECTOR: string;
+/** Buffer zone in pixels for hysteresis visibility detection */
+export declare const VIEWPORT_HYSTERESIS_BUFFER = 120;
+/** Threshold for showing image fallback on smaller screens */
+export declare const IMAGE_FALLBACK_WIDTH_THRESHOLD = 2000;
+/** Responsive zoom levels for navbar navigation per screen size */
+export declare const RESPONSIVE_ZOOM_MAP: Record<ScreenSizeEnum, number>;
+/** Debounce duration in ms for navbar clicks based on performance mode */
+export declare const NAVBAR_DEBOUNCE_MS: {
+    readonly high: 0;
+    readonly medium: 100;
+    readonly low: 400;
+};
+/** Epsilon for position comparison to hide toolbar when at home */
+export declare const TOOLBAR_OPACITY_POS_EPS = 1;
+/** Epsilon for scale comparison to hide toolbar when at 1x */
+export declare const TOOLBAR_OPACITY_SCALE_EPS = 0.01;
+//# sourceMappingURL=constants.d.ts.map

package/dist/lib/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;GAGG;AAMH,oBAAY,cAAc;IACtB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;CAChC;AAMD,qCAAqC;AACrC,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,sCAAsC;AACtC,eAAO,MAAM,aAAa,OAAO,CAAC;AAMlC,sEAAsE;AACtE,eAAO,MAAM,aAAa;;;CAGhB,CAAC;AAEX,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAExC,uCAAuC;AACvC,eAAO,MAAM,eAAe;;;mBAGK,MAAM;CAC7B,CAAC;AAEX,4CAA4C;AAC5C,eAAO,MAAM,eAAe;;;mBAGN,MAAM;CAClB,CAAC;AAEX,4CAA4C;AAC5C,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC;AAMX,yBAAyB;AACzB,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,6EAA6E;AAC7E,eAAO,MAAM,UAAU,OAAO,CAAC;AAE/B,0CAA0C;AAC1C,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAQ3C,CAAC;AAEX,kCAAkC;AAClC,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,6CAA6C;AAC7C,eAAO,MAAM,4BAA4B,SAAS,CAAC;AAEnD,0CAA0C;AAC1C,eAAO,MAAM,yBAAyB,QAAQ,CAAC;AAM/C,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAEe,CAAC;AAMjD,gEAAgE;AAChE,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,8DAA8D;AAC9D,eAAO,MAAM,8BAA8B,OAAO,CAAC;AAMnD,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAQrD,CAAC;AAMX,0EAA0E;AAC1E,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAMX,mEAAmE;AACnE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,8DAA8D;AAC9D,eAAO,MAAM,yBAAyB,OAAO,CAAC"}

package/dist/lib/constants.js

@@ -0,0 +1,122 @@
+/**
+ * Canvas Library Constants
+ * All configurable constants consolidated in one place
+ */
+// ============================================================================
+// SCREEN SIZE BREAKPOINTS
+// ============================================================================
+export var ScreenSizeEnum;
+(function (ScreenSizeEnum) {
+    ScreenSizeEnum["SMALL_MOBILE"] = "small-mobile";
+    ScreenSizeEnum["MOBILE"] = "mobile";
+    ScreenSizeEnum["TABLET"] = "tablet";
+    ScreenSizeEnum["SMALL_DESKTOP"] = "small-desktop";
+    ScreenSizeEnum["MEDIUM_DESKTOP"] = "medium-desktop";
+    ScreenSizeEnum["LARGE_DESKTOP"] = "large-desktop";
+    ScreenSizeEnum["HUGE_DESKTOP"] = "huge-desktop";
+})(ScreenSizeEnum || (ScreenSizeEnum = {}));
+// ============================================================================
+// CANVAS DIMENSIONS
+// ============================================================================
+/** Default canvas width in pixels */
+export const CANVAS_WIDTH = 6000;
+/** Default canvas height in pixels */
+export const CANVAS_HEIGHT = 4000;
+// ============================================================================
+// INTRO ANIMATION
+// ============================================================================
+/** Maximum dimensions ratio for the intro box relative to viewport */
+export const MAX_DIM_RATIO = {
+    width: 0.8,
+    height: 0.5,
+};
+/** Intro box aspect ratio (width:height) */
+export const INTRO_ASPECT_RATIO = 3 / 2;
+/** Grow animation transition config */
+export const GROW_TRANSITION = {
+    duration: 0.96,
+    delay: 3.14,
+    ease: [0.35, 0.1, 0.8, 1],
+};
+/** Blur mask animation transition config */
+export const BLUR_TRANSITION = {
+    duration: 0.85,
+    delay: 1.25,
+    ease: "easeIn",
+};
+/** Stage 2 pan-to-home transition config */
+export const STAGE2_TRANSITION = {
+    duration: 0.96,
+    ease: [0.37, 0.1, 0.6, 1],
+};
+// ============================================================================
+// ZOOM & PAN
+// ============================================================================
+/** Maximum zoom level */
+export const MAX_ZOOM = 3;
+/** Minimum zoom bound multiplier to prevent zooming out past canvas edges */
+export const ZOOM_BOUND = 1.05;
+/** Minimum zoom levels per screen size */
+export const MIN_ZOOMS = {
+    [ScreenSizeEnum.SMALL_MOBILE]: 0.3,
+    [ScreenSizeEnum.MOBILE]: 0.35,
+    [ScreenSizeEnum.TABLET]: 0.25,
+    [ScreenSizeEnum.SMALL_DESKTOP]: 0.15,
+    [ScreenSizeEnum.MEDIUM_DESKTOP]: 0.1,
+    [ScreenSizeEnum.LARGE_DESKTOP]: 0.1,
+    [ScreenSizeEnum.HUGE_DESKTOP]: 0.1,
+};
+/** Pan animation spring config */
+export const PAN_SPRING = {
+    visualDuration: 0.34,
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+};
+/** Wheel zoom sensitivity for mouse wheel */
+export const MOUSE_WHEEL_ZOOM_SENSITIVITY = 0.0015;
+/** Wheel zoom sensitivity for trackpad */
+export const TRACKPAD_ZOOM_SENSITIVITY = 0.015;
+// ============================================================================
+// INTERACTIONS
+// ============================================================================
+/** CSS selector for interactive elements that should not trigger pan */
+export const INTERACTIVE_SELECTOR = "button,[role='button'],input,textarea,[contenteditable='true']," +
+    "[data-toolbar-button],[data-navbar-button]";
+// ============================================================================
+// VIEWPORT CULLING
+// ============================================================================
+/** Buffer zone in pixels for hysteresis visibility detection */
+export const VIEWPORT_HYSTERESIS_BUFFER = 120;
+/** Threshold for showing image fallback on smaller screens */
+export const IMAGE_FALLBACK_WIDTH_THRESHOLD = 2000;
+// ============================================================================
+// NAVBAR
+// ============================================================================
+/** Responsive zoom levels for navbar navigation per screen size */
+export const RESPONSIVE_ZOOM_MAP = {
+    [ScreenSizeEnum.SMALL_MOBILE]: 0.5,
+    [ScreenSizeEnum.MOBILE]: 0.6,
+    [ScreenSizeEnum.TABLET]: 0.8,
+    [ScreenSizeEnum.SMALL_DESKTOP]: 0.9,
+    [ScreenSizeEnum.MEDIUM_DESKTOP]: 1,
+    [ScreenSizeEnum.LARGE_DESKTOP]: 1.25,
+    [ScreenSizeEnum.HUGE_DESKTOP]: 1.5,
+};
+// ============================================================================
+// PERFORMANCE
+// ============================================================================
+/** Debounce duration in ms for navbar clicks based on performance mode */
+export const NAVBAR_DEBOUNCE_MS = {
+    high: 0,
+    medium: 100,
+    low: 400,
+};
+// ============================================================================
+// TOOLBAR
+// ============================================================================
+/** Epsilon for position comparison to hide toolbar when at home */
+export const TOOLBAR_OPACITY_POS_EPS = 1; // px
+/** Epsilon for scale comparison to hide toolbar when at 1x */
+export const TOOLBAR_OPACITY_SCALE_EPS = 0.01; // scale delta
+//# sourceMappingURL=constants.js.map

package/dist/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"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"}

package/dist/lib/copy.d.ts

@@ -0,0 +1,2 @@
+export declare const copyText: (text: string) => Promise<boolean>;
+//# sourceMappingURL=copy.d.ts.map

package/dist/lib/copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../../src/lib/copy.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,GAAU,MAAM,MAAM,KAAG,OAAO,CAAC,OAAO,CAiB5D,CAAC"}

package/dist/lib/copy.js

@@ -0,0 +1,20 @@
+export const copyText = async (text) => {
+    try {
+        if (navigator.clipboard?.writeText && window.isSecureContext) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        // fallback: execCommand
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(ta);
+        return ok;
+    }
+    catch {
+        return false;
+    }
+};
+//# sourceMappingURL=copy.js.map

package/dist/lib/copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/lib/copy.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,EAAE,IAAY,EAAoB,EAAE;IAC/D,IAAI,CAAC;QACH,IAAI,SAAS,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YAC7D,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC1C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,wBAAwB;QACxB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC9C,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC;QAChB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,OAAO,EAAE,CAAC;IACZ,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function debounce<T extends (...args: unknown[]) => void>(cb: T, wait?: number): T;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAC7D,EAAE,EAAE,CAAC,EACL,IAAI,SAAK,GAOU,CAAC,CACrB"}

package/dist/lib/utils.js

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function debounce(cb, wait = 20) {
+    let h = 0;
+    const callable = (...args) => {
+        clearTimeout(h);
+        h = setTimeout(() => cb(...args), wait);
+    };
+    return callable;
+}
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,QAAQ,CACtB,EAAK,EACL,IAAI,GAAG,EAAE;IAET,IAAI,CAAC,GAA4B,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAe,EAAE,EAAE;QACtC,YAAY,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IACF,OAAO,QAAa,CAAC;AACvB,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Generic types for the canvas library
+ * Apps should extend these types with their specific enums and constants
+ */
+export interface SectionCoordinates {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare enum CanvasSection {
+    Home = "home",
+    About = "about",
+    Projects = "projects",
+    Sponsors = "sponsors",
+    FAQ = "faq",
+    Team = "team"
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd"}

package/dist/types/index.js

@@ -0,0 +1,14 @@
+/**
+ * Generic types for the canvas library
+ * Apps should extend these types with their specific enums and constants
+ */
+export var CanvasSection;
+(function (CanvasSection) {
+    CanvasSection["Home"] = "home";
+    CanvasSection["About"] = "about";
+    CanvasSection["Projects"] = "projects";
+    CanvasSection["Sponsors"] = "sponsors";
+    CanvasSection["FAQ"] = "faq";
+    CanvasSection["Team"] = "team";
+})(CanvasSection || (CanvasSection = {}));
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,MAAM,CAAN,IAAY,aAOX;AAPD,WAAY,aAAa;IACvB,8BAAa,CAAA;IACb,gCAAe,CAAA;IACf,sCAAqB,CAAA;IACrB,sCAAqB,CAAA;IACrB,4BAAW,CAAA;IACX,8BAAa,CAAA;AACf,CAAC,EAPW,aAAa,KAAb,aAAa,QAOxB"}

package/dist/utils/performance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Performance optimization utilities for cross-platform compatibility
+ * Particularly focused on iOS Safari performance issues
+ */
+export declare const isIOS: () => boolean;
+export declare const isMobile: () => boolean;
+export declare const prefersReducedMotion: () => boolean;
+export declare const getWillChange: (isAnimating: boolean, properties?: string[]) => string;
+//# sourceMappingURL=performance.d.ts.map

package/dist/utils/performance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance.d.ts","sourceRoot":"","sources":["../../src/utils/performance.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,KAAK,QAAO,OAIxB,CAAC;AAGF,eAAO,MAAM,QAAQ,QAAO,OAM3B,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAAO,OAIvC,CAAC;AAGF,eAAO,MAAM,aAAa,GACxB,aAAa,OAAO,EACpB,aAAY,MAAM,EAAkB,KACnC,MAIF,CAAC"}

package/dist/utils/performance.js

@@ -0,0 +1,29 @@
+/**
+ * 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);
+};
+// 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);
+};
+// Check if user prefers reduced motion
+export 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";
+};
+//# sourceMappingURL=performance.js.map

package/dist/utils/performance.js.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@hunterchen/canvas",
+    "version": "0.1.0",
+    "description": "A React-based canvas library for creating pannable, zoomable, and interactive canvas experiences.",
+    "license": "MIT",
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./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"
+        }
+    },
+    "scripts": {
+        "build": "tsc",
+        "type-check": "tsc --noEmit",
+        "clean": "rm -rf dist"
+    },
+    "peerDependencies": {
+        "framer-motion": "^11.0.0 || ^12.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "dependencies": {
+        "lucide-react": "^0.483.0",
+        "tailwindcss": "^3.4.19"
+    },
+    "devDependencies": {
+        "@types/node": "^25.0.6",
+        "@types/react": "19.0.12",
+        "@types/react-dom": "19.0.4",
+        "typescript": "^5.8.2"
+    }
+}