@hunterchen/canvas 0.7.0 → 0.9.0

package/dist/contexts/PerformanceContext.js

@@ -1,56 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
-import useWindowDimensions from "../hooks/useWindowDimensions";
-import { isIOS, isMobile, prefersReducedMotion } from "../utils/performance";
+import useWindowDimensions_default from "../hooks/useWindowDimensions.js";
+import { isIOS, isMobile, prefersReducedMotion } from "../utils/performance.js";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/contexts/PerformanceContext.tsx
 const defaultConfig = {
-    mode: "high",
-    isIOS: false,
-    isMobile: false,
-    prefersReducedMotion: false,
-    enableComplexShadows: true,
+	mode: "high",
+	isIOS: false,
+	isMobile: false,
+	prefersReducedMotion: false,
+	enableComplexShadows: true
 };
 const PerformanceContext = createContext(defaultConfig);
-export const usePerformance = () => useContext(PerformanceContext);
-// Backward compatibility alias
-export const usePerformanceMode = usePerformance;
+const usePerformance = () => useContext(PerformanceContext);
+const usePerformanceMode = usePerformance;
 /**
- * Performance Provider - Centralized performance mode detection
- *
- * Detects device capabilities and user preferences once at the top level,
- * avoiding redundant device detection across multiple components.
- *
- * Usage:
- *   <PerformanceProvider>
- *     <App />
- *   </PerformanceProvider>
- *
- * Then in components:
- *   const { mode, isIOS, enableComplexShadows } = usePerformance();
- */
-export const PerformanceProvider = ({ children }) => {
-    const [config, setConfig] = useState(defaultConfig);
-    const { width } = useWindowDimensions();
-    useEffect(() => {
-        const isIOSDevice = isIOS();
-        const isMobileDevice = isMobile();
-        const reducedMotion = prefersReducedMotion();
-        let mode = "high";
-        // Determine performance mode based on device and screen size
-        if (isIOSDevice || reducedMotion || width < 768) {
-            mode = "low";
-        }
-        else if (isMobileDevice || width < 1024) {
-            mode = "medium";
-        }
-        setConfig({
-            mode,
-            isIOS: isIOSDevice,
-            isMobile: isMobileDevice,
-            prefersReducedMotion: reducedMotion,
-            // Use simpler shadows on iOS and low-end devices for better performance
-            enableComplexShadows: mode !== "low",
-        });
-    }, [width]);
-    return (_jsx(PerformanceContext.Provider, { value: config, children: children }));
+* Performance Provider - Centralized performance mode detection
+* 
+* Detects device capabilities and user preferences once at the top level,
+* avoiding redundant device detection across multiple components.
+* 
+* Usage:
+*   <PerformanceProvider>
+*     <App />
+*   </PerformanceProvider>
+* 
+* Then in components:
+*   const { mode, isIOS, enableComplexShadows } = usePerformance();
+*/
+const PerformanceProvider = ({ children }) => {
+	const [config, setConfig] = useState(defaultConfig);
+	const { width } = useWindowDimensions_default();
+	useEffect(() => {
+		const isIOSDevice = isIOS();
+		const isMobileDevice = isMobile();
+		const reducedMotion = prefersReducedMotion();
+		let mode = "high";
+		if (isIOSDevice || reducedMotion || width < 768) mode = "low";
+		else if (isMobileDevice || width < 1024) mode = "medium";
+		setConfig({
+			mode,
+			isIOS: isIOSDevice,
+			isMobile: isMobileDevice,
+			prefersReducedMotion: reducedMotion,
+			enableComplexShadows: mode !== "low"
+		});
+	}, [width]);
+	return /* @__PURE__ */ jsx(PerformanceContext.Provider, {
+		value: config,
+		children
+	});
 };
+
+//#endregion
+export { PerformanceProvider, usePerformance, usePerformanceMode };
 //# sourceMappingURL=PerformanceContext.js.map

package/dist/contexts/PerformanceContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceContext.js","sourceRoot":"","sources":["../../src/contexts/PerformanceContext.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC9F,OAAO,mBAAmB,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAY7E,MAAM,aAAa,GAAsB;IACrC,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,oBAAoB,EAAE,KAAK;IAC3B,oBAAoB,EAAE,IAAI;CAC7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,aAAa,CAAoB,aAAa,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAEnE,+BAA+B;AAC/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAMjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAoB,aAAa,CAAC,CAAC;IACvE,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;QAC5B,MAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;QAE7C,IAAI,IAAI,GAAoB,MAAM,CAAC;QAEnC,6DAA6D;QAC7D,IAAI,WAAW,IAAI,aAAa,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAC9C,IAAI,GAAG,KAAK,CAAC;QACjB,CAAC;aAAM,IAAI,cAAc,IAAI,KAAK,GAAG,IAAI,EAAE,CAAC;YACxC,IAAI,GAAG,QAAQ,CAAC;QACpB,CAAC;QAED,SAAS,CAAC;YACN,IAAI;YACJ,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,cAAc;YACxB,oBAAoB,EAAE,aAAa;YACnC,wEAAwE;YACxE,oBAAoB,EAAE,IAAI,KAAK,KAAK;SACvC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YACrC,QAAQ,GACiB,CACjC,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"PerformanceContext.js","names":["useWindowDimensions"],"sources":["../../src/contexts/PerformanceContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, type ReactNode } from \"react\";\nimport useWindowDimensions from \"../hooks/useWindowDimensions\";\nimport { isIOS, isMobile, prefersReducedMotion } from \"../utils/performance\";\n\nexport type PerformanceMode = \"high\" | \"medium\" | \"low\";\n\nexport interface PerformanceConfig {\n    mode: PerformanceMode;\n    isIOS: boolean;\n    isMobile: boolean;\n    prefersReducedMotion: boolean;\n    enableComplexShadows: boolean;\n}\n\nconst defaultConfig: PerformanceConfig = {\n    mode: \"high\",\n    isIOS: false,\n    isMobile: false,\n    prefersReducedMotion: false,\n    enableComplexShadows: true,\n};\n\nconst PerformanceContext = createContext<PerformanceConfig>(defaultConfig);\n\nexport const usePerformance = () => useContext(PerformanceContext);\n\n// Backward compatibility alias\nexport const usePerformanceMode = usePerformance;\n\ninterface PerformanceProviderProps {\n    children: ReactNode;\n}\n\n/**\n * Performance Provider - Centralized performance mode detection\n * \n * Detects device capabilities and user preferences once at the top level,\n * avoiding redundant device detection across multiple components.\n * \n * Usage:\n *   <PerformanceProvider>\n *     <App />\n *   </PerformanceProvider>\n * \n * Then in components:\n *   const { mode, isIOS, enableComplexShadows } = usePerformance();\n */\nexport const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ children }) => {\n    const [config, setConfig] = useState<PerformanceConfig>(defaultConfig);\n    const { width } = useWindowDimensions();\n\n    useEffect(() => {\n        const isIOSDevice = isIOS();\n        const isMobileDevice = isMobile();\n        const reducedMotion = prefersReducedMotion();\n\n        let mode: PerformanceMode = \"high\";\n\n        // Determine performance mode based on device and screen size\n        if (isIOSDevice || reducedMotion || width < 768) {\n            mode = \"low\";\n        } else if (isMobileDevice || width < 1024) {\n            mode = \"medium\";\n        }\n\n        setConfig({\n            mode,\n            isIOS: isIOSDevice,\n            isMobile: isMobileDevice,\n            prefersReducedMotion: reducedMotion,\n            // Use simpler shadows on iOS and low-end devices for better performance\n            enableComplexShadows: mode !== \"low\",\n        });\n    }, [width]);\n\n    return (\n        <PerformanceContext.Provider value={config}>\n            {children}\n        </PerformanceContext.Provider>\n    );\n};\n"],"mappings":";;;;;;AAcA,MAAM,gBAAmC;CACrC,MAAM;CACN,OAAO;CACP,UAAU;CACV,sBAAsB;CACtB,sBAAsB;CACzB;AAED,MAAM,qBAAqB,cAAiC,cAAc;AAE1E,MAAa,uBAAuB,WAAW,mBAAmB;AAGlE,MAAa,qBAAqB;;;;;;;;;;;;;;;AAoBlC,MAAa,uBAA2D,EAAE,eAAe;CACrF,MAAM,CAAC,QAAQ,aAAa,SAA4B,cAAc;CACtE,MAAM,EAAE,UAAUA,6BAAqB;AAEvC,iBAAgB;EACZ,MAAM,cAAc,OAAO;EAC3B,MAAM,iBAAiB,UAAU;EACjC,MAAM,gBAAgB,sBAAsB;EAE5C,IAAI,OAAwB;AAG5B,MAAI,eAAe,iBAAiB,QAAQ,IACxC,QAAO;WACA,kBAAkB,QAAQ,KACjC,QAAO;AAGX,YAAU;GACN;GACA,OAAO;GACP,UAAU;GACV,sBAAsB;GAEtB,sBAAsB,SAAS;GAClC,CAAC;IACH,CAAC,MAAM,CAAC;AAEX,QACI,oBAAC,mBAAmB;EAAS,OAAO;EAC/B;GACyB"}

package/dist/hooks/usePerformanceMode.js

@@ -1,40 +1,39 @@
-import { useState, useEffect } from "react";
-import { isIOS, isMobile, prefersReducedMotion } from "../utils/performance";
-import useWindowDimensions from "./useWindowDimensions";
+import useWindowDimensions_default from "./useWindowDimensions.js";
+import { isIOS, isMobile, prefersReducedMotion } from "../utils/performance.js";
+import { useEffect, useState } from "react";
+
+//#region src/hooks/usePerformanceMode.ts
 /**
- * Hook to determine optimal performance settings based on device capabilities
- * Does not disable any animations - only provides info for optimization
- */
-export const usePerformanceMode = () => {
-    const [config, setConfig] = useState({
-        mode: "high",
-        isIOS: false,
-        isMobile: false,
-        prefersReducedMotion: false,
-        enableComplexShadows: true,
-    });
-    const { width } = useWindowDimensions();
-    useEffect(() => {
-        const isIOSDevice = isIOS();
-        const isMobileDevice = isMobile();
-        const reducedMotion = prefersReducedMotion();
-        let mode = "high";
-        // Determine performance mode
-        if (isIOSDevice || reducedMotion || width < 768) {
-            mode = "low";
-        }
-        else if (isMobileDevice || width < 1024) {
-            mode = "medium";
-        }
-        setConfig({
-            mode,
-            isIOS: isIOSDevice,
-            isMobile: isMobileDevice,
-            prefersReducedMotion: reducedMotion,
-            // Use simpler shadows on iOS for better performance
-            enableComplexShadows: mode !== "low",
-        });
-    }, []);
-    return config;
+* Hook to determine optimal performance settings based on device capabilities
+* Does not disable any animations - only provides info for optimization
+*/
+const usePerformanceMode = () => {
+	const [config, setConfig] = useState({
+		mode: "high",
+		isIOS: false,
+		isMobile: false,
+		prefersReducedMotion: false,
+		enableComplexShadows: true
+	});
+	const { width } = useWindowDimensions_default();
+	useEffect(() => {
+		const isIOSDevice = isIOS();
+		const isMobileDevice = isMobile();
+		const reducedMotion = prefersReducedMotion();
+		let mode = "high";
+		if (isIOSDevice || reducedMotion || width < 768) mode = "low";
+		else if (isMobileDevice || width < 1024) mode = "medium";
+		setConfig({
+			mode,
+			isIOS: isIOSDevice,
+			isMobile: isMobileDevice,
+			prefersReducedMotion: reducedMotion,
+			enableComplexShadows: mode !== "low"
+		});
+	}, []);
+	return config;
 };
+
+//#endregion
+export { usePerformanceMode };
 //# sourceMappingURL=usePerformanceMode.js.map

package/dist/hooks/usePerformanceMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePerformanceMode.js","sourceRoot":"","sources":["../../src/hooks/usePerformanceMode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAYxD;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAsB,EAAE;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAoB;QACtD,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,oBAAoB,EAAE,KAAK;QAC3B,oBAAoB,EAAE,IAAI;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;QAC5B,MAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;QAE7C,IAAI,IAAI,GAAoB,MAAM,CAAC;QAEnC,6BAA6B;QAC7B,IAAI,WAAW,IAAI,aAAa,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChD,IAAI,GAAG,KAAK,CAAC;QACf,CAAC;aAAM,IAAI,cAAc,IAAI,KAAK,GAAG,IAAI,EAAE,CAAC;YAC1C,IAAI,GAAG,QAAQ,CAAC;QAClB,CAAC;QAED,SAAS,CAAC;YACR,IAAI;YACJ,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,cAAc;YACxB,oBAAoB,EAAE,aAAa;YACnC,oDAAoD;YACpD,oBAAoB,EAAE,IAAI,KAAK,KAAK;SACrC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"usePerformanceMode.js","names":["useWindowDimensions"],"sources":["../../src/hooks/usePerformanceMode.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { isIOS, isMobile, prefersReducedMotion } from \"../utils/performance\";\nimport useWindowDimensions from \"./useWindowDimensions\";\n\nexport type PerformanceMode = \"high\" | \"medium\" | \"low\";\n\nexport interface PerformanceConfig {\n  mode: PerformanceMode;\n  isIOS: boolean;\n  isMobile: boolean;\n  prefersReducedMotion: boolean;\n  enableComplexShadows: boolean;\n}\n\n/**\n * Hook to determine optimal performance settings based on device capabilities\n * Does not disable any animations - only provides info for optimization\n */\nexport const usePerformanceMode = (): PerformanceConfig => {\n  const [config, setConfig] = useState<PerformanceConfig>({\n    mode: \"high\",\n    isIOS: false,\n    isMobile: false,\n    prefersReducedMotion: false,\n    enableComplexShadows: true,\n  });\n\n  const { width } = useWindowDimensions();\n\n  useEffect(() => {\n    const isIOSDevice = isIOS();\n    const isMobileDevice = isMobile();\n    const reducedMotion = prefersReducedMotion();\n\n    let mode: PerformanceMode = \"high\";\n\n    // Determine performance mode\n    if (isIOSDevice || reducedMotion || width < 768) {\n      mode = \"low\";\n    } else if (isMobileDevice || width < 1024) {\n      mode = \"medium\";\n    }\n\n    setConfig({\n      mode,\n      isIOS: isIOSDevice,\n      isMobile: isMobileDevice,\n      prefersReducedMotion: reducedMotion,\n      // Use simpler shadows on iOS for better performance\n      enableComplexShadows: mode !== \"low\",\n    });\n  }, []);\n\n  return config;\n};\n"],"mappings":";;;;;;;;;AAkBA,MAAa,2BAA8C;CACzD,MAAM,CAAC,QAAQ,aAAa,SAA4B;EACtD,MAAM;EACN,OAAO;EACP,UAAU;EACV,sBAAsB;EACtB,sBAAsB;EACvB,CAAC;CAEF,MAAM,EAAE,UAAUA,6BAAqB;AAEvC,iBAAgB;EACd,MAAM,cAAc,OAAO;EAC3B,MAAM,iBAAiB,UAAU;EACjC,MAAM,gBAAgB,sBAAsB;EAE5C,IAAI,OAAwB;AAG5B,MAAI,eAAe,iBAAiB,QAAQ,IAC1C,QAAO;WACE,kBAAkB,QAAQ,KACnC,QAAO;AAGT,YAAU;GACR;GACA,OAAO;GACP,UAAU;GACV,sBAAsB;GAEtB,sBAAsB,SAAS;GAChC,CAAC;IACD,EAAE,CAAC;AAEN,QAAO"}

package/dist/hooks/useWindowDimensions.js

@@ -1,22 +1,26 @@
 import { useEffect, useState } from "react";
+
+//#region src/hooks/useWindowDimensions.ts
 const useWindowDimensions = () => {
-    const [windowDimensions, setWindowDimensions] = useState({
-        width: typeof window !== "undefined" ? window.innerWidth : 1200,
-        height: typeof window !== "undefined" ? window.innerHeight : 800,
-    });
-    useEffect(() => {
-        function handleResize() {
-            setWindowDimensions({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        // Set initial dimensions on mount
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []); // Empty array ensures that effect is only run on mount
-    return windowDimensions;
+	const [windowDimensions, setWindowDimensions] = useState({
+		width: typeof window !== "undefined" ? window.innerWidth : 1200,
+		height: typeof window !== "undefined" ? window.innerHeight : 800
+	});
+	useEffect(() => {
+		function handleResize() {
+			setWindowDimensions({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	return windowDimensions;
 };
-export default useWindowDimensions;
+var useWindowDimensions_default = useWindowDimensions;
+
+//#endregion
+export { useWindowDimensions_default as default };
 //# sourceMappingURL=useWindowDimensions.js.map

package/dist/hooks/useWindowDimensions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowDimensions.js","sourceRoot":"","sources":["../../src/hooks/useWindowDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO5C,MAAM,mBAAmB,GAAG,GAAqB,EAAE;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAmB;QACzE,KAAK,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;QAC/D,MAAM,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG;KACjE,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY;YACnB,mBAAmB,CAAC;gBAClB,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;aAC3B,CAAC,CAAC;QACL,CAAC;QAED,kCAAkC;QAClC,YAAY,EAAE,CAAC;QAEf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAS,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACxE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,uDAAuD;IAE/D,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useWindowDimensions.js","names":[],"sources":["../../src/hooks/useWindowDimensions.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\ntype WindowDimentions = {\n  width: number;\n  height: number;\n};\n\nconst useWindowDimensions = (): WindowDimentions => {\n  const [windowDimensions, setWindowDimensions] = useState<WindowDimentions>({\n    width: typeof window !== \"undefined\" ? window.innerWidth : 1200,\n    height: typeof window !== \"undefined\" ? window.innerHeight : 800,\n  });\n\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowDimensions({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    }\n\n    // Set initial dimensions on mount\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n    return (): void => window.removeEventListener(\"resize\", handleResize);\n  }, []); // Empty array ensures that effect is only run on mount\n\n  return windowDimensions;\n};\n\nexport default useWindowDimensions;\n"],"mappings":";;;AAOA,MAAM,4BAA8C;CAClD,MAAM,CAAC,kBAAkB,uBAAuB,SAA2B;EACzE,OAAO,OAAO,WAAW,cAAc,OAAO,aAAa;EAC3D,QAAQ,OAAO,WAAW,cAAc,OAAO,cAAc;EAC9D,CAAC;AAEF,iBAAgB;EACd,SAAS,eAAqB;AAC5B,uBAAoB;IAClB,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB,CAAC;;AAIJ,gBAAc;AAEd,SAAO,iBAAiB,UAAU,aAAa;AAC/C,eAAmB,OAAO,oBAAoB,UAAU,aAAa;IACpE,EAAE,CAAC;AAEN,QAAO;;AAGT,kCAAe"}

package/dist/index.d.ts

@@ -16,5 +16,5 @@ export * from "./lib/canvas";
 export * from "./lib/constants";
 export * from "./lib/utils";
 export * from "./utils/performance";
-export type { SectionCoordinates, NavItem, CanvasSection, ToolbarConfig, ToolbarPosition, ToolbarDisplayMode, } from "./types";
+export type { SectionCoordinates, NavItem, CanvasSection, ToolbarConfig, ToolbarPosition, ToolbarDisplayMode, NavbarConfig, NavbarPosition, NavbarDisplayMode, NavbarButtonConfig, NavbarTooltipConfig, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,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;AAGrE,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,4BAA4B,EAC5B,6BAA6B,EAC7B,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,eAAe,EACf,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAG5F,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AAGpC,YAAY,EACV,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,eAAe,EACf,kBAAkB,GACnB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,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;AAGrE,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,4BAA4B,EAC5B,6BAA6B,EAC7B,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,eAAe,EACf,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAG5F,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AAGpC,YAAY,EACV,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,21 +1,17 @@
-// Components
-export { default as Canvas } from "./components/canvas/canvas";
-export { CanvasComponent } from "./components/canvas/component";
-export { Draggable, DraggableImage } from "./components/canvas/draggable";
-export { CanvasWrapper, growTransition } from "./components/canvas/wrapper";
-export { default as CanvasToolbar } from "./components/canvas/toolbar";
-export { default as CanvasNavbar } from "./components/canvas/navbar";
-// Background Components
-export { DefaultCanvasBackground, DefaultWrapperBackground, DefaultIntroContent, DEFAULT_CANVAS_GRADIENT, DEFAULT_INTRO_GRADIENT, DEFAULT_CANVAS_BOX_GRADIENT, } from "./components/canvas/backgrounds";
-// Contexts
-export { CanvasContext, CanvasProvider, useCanvasContext, } from "./contexts/CanvasContext";
-export { PerformanceProvider, usePerformanceMode, usePerformance, } from "./contexts/PerformanceContext";
-// Hooks
-export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
-export { usePerformanceMode as usePerformanceModeLegacy } from "./hooks/usePerformanceMode";
-// Utilities
-export * from "./lib/canvas";
-export * from "./lib/constants";
-export * from "./lib/utils";
-export * from "./utils/performance";
-//# sourceMappingURL=index.js.map
+import { CanvasContext, CanvasProvider, useCanvasContext } from "./contexts/CanvasContext.js";
+import { BLUR_TRANSITION, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, GROW_TRANSITION, IMAGE_FALLBACK_WIDTH_THRESHOLD, INTERACTIVE_SELECTOR, INTRO_ASPECT_RATIO, MAX_DIM_RATIO, MAX_ZOOM, MIN_ZOOMS, MOUSE_WHEEL_ZOOM_SENSITIVITY, NAVBAR_DEBOUNCE_MS, PAN_SPRING, RESPONSIVE_ZOOM_MAP, STAGE2_TRANSITION, ScreenSizeEnum, TOOLBAR_OPACITY_POS_EPS, TOOLBAR_OPACITY_SCALE_EPS, TRACKPAD_ZOOM_SENSITIVITY, VIEWPORT_HYSTERESIS_BUFFER, ZOOM_BOUND } from "./lib/constants.js";
+import { calcInitialBoxWidth, canvasHeight, canvasWidth, getDistance, getMidpoint, getScreenSizeEnum, getSectionPanCoordinates, panToOffsetScene, useMemoPoint } from "./lib/canvas.js";
+import useWindowDimensions_default from "./hooks/useWindowDimensions.js";
+import { cn } from "./lib/utils.js";
+import { getWillChange, isIOS, isMobile, prefersReducedMotion } from "./utils/performance.js";
+import { usePerformanceMode as usePerformanceMode$1 } from "./hooks/usePerformanceMode.js";
+import Navbar from "./components/canvas/navbar/index.js";
+import toolbar_default from "./components/canvas/toolbar.js";
+import { CanvasWrapper } from "./components/canvas/wrapper.js";
+import { DEFAULT_CANVAS_BOX_GRADIENT, DEFAULT_CANVAS_GRADIENT, DEFAULT_INTRO_GRADIENT, DefaultCanvasBackground, DefaultIntroContent, DefaultWrapperBackground } from "./components/canvas/backgrounds.js";
+import canvas_default from "./components/canvas/canvas.js";
+import { CanvasComponent } from "./components/canvas/component.js";
+import { Draggable, DraggableImage } from "./components/canvas/draggable.js";
+import { PerformanceProvider, usePerformance, usePerformanceMode } from "./contexts/PerformanceContext.js";
+
+export { BLUR_TRANSITION, canvas_default as Canvas, CanvasComponent, CanvasContext, Navbar as CanvasNavbar, CanvasProvider, toolbar_default as CanvasToolbar, CanvasWrapper, DEFAULT_CANVAS_BOX_GRADIENT, DEFAULT_CANVAS_GRADIENT, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_INTRO_GRADIENT, DefaultCanvasBackground, DefaultIntroContent, DefaultWrapperBackground, Draggable, DraggableImage, GROW_TRANSITION, IMAGE_FALLBACK_WIDTH_THRESHOLD, INTERACTIVE_SELECTOR, INTRO_ASPECT_RATIO, MAX_DIM_RATIO, MAX_ZOOM, MIN_ZOOMS, MOUSE_WHEEL_ZOOM_SENSITIVITY, NAVBAR_DEBOUNCE_MS, PAN_SPRING, PerformanceProvider, RESPONSIVE_ZOOM_MAP, STAGE2_TRANSITION, ScreenSizeEnum, TOOLBAR_OPACITY_POS_EPS, TOOLBAR_OPACITY_SCALE_EPS, TRACKPAD_ZOOM_SENSITIVITY, VIEWPORT_HYSTERESIS_BUFFER, ZOOM_BOUND, calcInitialBoxWidth, canvasHeight, canvasWidth, cn, getDistance, getMidpoint, getScreenSizeEnum, getSectionPanCoordinates, getWillChange, GROW_TRANSITION as growTransition, isIOS, isMobile, panToOffsetScene, prefersReducedMotion, useCanvasContext, useMemoPoint, usePerformance, usePerformanceMode, usePerformanceMode$1 as usePerformanceModeLegacy, useWindowDimensions_default as useWindowDimensions };

package/dist/lib/canvas.js

@@ -1,82 +1,75 @@
+import { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, INTERACTIVE_SELECTOR, INTRO_ASPECT_RATIO, MAX_DIM_RATIO, MAX_ZOOM, MIN_ZOOMS, PAN_SPRING, ScreenSizeEnum, ZOOM_BOUND } from "./constants.js";
 import { animate } from "framer-motion";
 import { useMemo } from "react";
-import { DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, MAX_DIM_RATIO, INTRO_ASPECT_RATIO, PAN_SPRING, ScreenSizeEnum, } from "./constants";
-export const canvasWidth = DEFAULT_CANVAS_WIDTH;
-export const canvasHeight = DEFAULT_CANVAS_HEIGHT;
-// Re-export ScreenSizeEnum for backward compatibility
-export { ScreenSizeEnum } from "./constants";
-export const useMemoPoint = (x, y) => {
-    return useMemo(() => ({ x, y }), [x, y]);
+
+//#region src/lib/canvas.ts
+const canvasWidth = DEFAULT_CANVAS_WIDTH;
+const canvasHeight = DEFAULT_CANVAS_HEIGHT;
+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);
+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,
-    };
+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;
+const getScreenSizeEnum = (width) => {
+	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,
-    };
+function getSectionPanCoordinates({ windowDimensions, coords, targetZoom, negative }) {
+	const { width, height } = windowDimensions;
+	const sectionCenterX = coords.x + coords.width / 2;
+	const sectionCenterY = coords.y + coords.height / 2;
+	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]);
+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);
+const calcInitialBoxWidth = (windowWidth, windowHeight) => {
+	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;
+	}
+	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";
+
+//#endregion
+export { calcInitialBoxWidth, canvasHeight, canvasWidth, getDistance, getMidpoint, getScreenSizeEnum, getSectionPanCoordinates, panToOffsetScene, useMemoPoint };
 //# sourceMappingURL=canvas.js.map

package/dist/lib/canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../src/lib/canvas.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"canvas.js","names":[],"sources":["../../src/lib/canvas.ts"],"sourcesContent":["import { animate, type MotionValue, type Point } from \"framer-motion\";\nimport { useMemo } from \"react\";\nimport {\n  DEFAULT_CANVAS_WIDTH,\n  DEFAULT_CANVAS_HEIGHT,\n  MAX_DIM_RATIO,\n  INTRO_ASPECT_RATIO,\n  PAN_SPRING,\n  ScreenSizeEnum,\n} from \"./constants\";\n\nexport const canvasWidth = DEFAULT_CANVAS_WIDTH;\nexport const canvasHeight = DEFAULT_CANVAS_HEIGHT;\n\n// Re-export ScreenSizeEnum for backward compatibility\nexport { ScreenSizeEnum } from \"./constants\";\n\nexport const useMemoPoint = (x: number, y: number): Point => {\n  return useMemo(() => ({ x, y }), [x, y]);\n};\n\nexport interface MinimalPointerInput {\n  clientX: number;\n  clientY: number;\n}\n\nexport const getDistance = (\n  p1: MinimalPointerInput,\n  p2: MinimalPointerInput,\n) => {\n  const dx = p1.clientX - p2.clientX;\n  const dy = p1.clientY - p2.clientY;\n  return Math.sqrt(dx ** 2 + dy ** 2);\n};\n\nexport const getMidpoint = (\n  p1: MinimalPointerInput,\n  p2: MinimalPointerInput,\n): Point => {\n  return {\n    x: (p1.clientX + p2.clientX) / 2,\n    y: (p1.clientY + p2.clientY) / 2,\n  };\n};\n\nexport const getScreenSizeEnum = (width: number): ScreenSizeEnum => {\n  // iphone 12 pro is 390px, iphone 14 pro max is 430px, SE 3rd gen is 375px\n  if (width < 400) return ScreenSizeEnum.SMALL_MOBILE;\n  if (width < 768) return ScreenSizeEnum.MOBILE;\n  if (width < 1440) return ScreenSizeEnum.TABLET;\n  if (width < 1920) return ScreenSizeEnum.SMALL_DESKTOP;\n  if (width < 2560) return ScreenSizeEnum.MEDIUM_DESKTOP;\n  if (width <= 3440) return ScreenSizeEnum.LARGE_DESKTOP;\n  return ScreenSizeEnum.HUGE_DESKTOP;\n};\n\nexport function getSectionPanCoordinates({\n  windowDimensions,\n  coords,\n  targetZoom,\n  negative,\n}: {\n  windowDimensions: { width: number; height: number };\n  coords: { x: number; y: number; width: number; height: number };\n  targetZoom: number;\n  negative?: boolean;\n}) {\n  const { width, height } = windowDimensions;\n  // Calculate the center of the section\n  const sectionCenterX = coords.x + coords.width / 2;\n  const sectionCenterY = coords.y + coords.height / 2;\n\n  // Calculate the required pan offset to center the section in the viewport\n  const targetX = width / 2 - sectionCenterX * targetZoom;\n  const targetY = height / 2 - sectionCenterY * targetZoom;\n\n  if (negative) {\n    return {\n      x: -targetX,\n      y: -targetY,\n    };\n  }\n\n  return {\n    x: targetX,\n    y: targetY,\n  };\n}\n\nexport async function panToOffsetScene(\n  offset: Point,\n  x: MotionValue<number>,\n  y: MotionValue<number>,\n  scale: MotionValue<number>,\n  newZoom?: number,\n): Promise<void> {\n  const animX = animate(x, offset.x, PAN_SPRING);\n  const animY = animate(y, offset.y, PAN_SPRING);\n  const animScale = animate(scale, newZoom ?? 1, PAN_SPRING);\n  await Promise.all([animScale, animX, animY]);\n}\n\nexport const calcInitialBoxWidth = (\n  windowWidth: number,\n  windowHeight: number,\n) => {\n  // math CanvasWrapper's bounding box size and compute scale s.t. canvas fits entirely within\n  const maxWidth = windowWidth * MAX_DIM_RATIO.width;\n  const maxHeight = windowHeight * MAX_DIM_RATIO.height;\n\n  let boxWidth, boxHeight;\n\n  if (maxWidth / INTRO_ASPECT_RATIO <= maxHeight) {\n    boxWidth = maxWidth;\n    boxHeight = boxWidth / INTRO_ASPECT_RATIO;\n  } else {\n    boxHeight = maxHeight;\n    boxWidth = boxHeight * INTRO_ASPECT_RATIO;\n  }\n\n  // scale so the canvas fits inside the computed 3:2 box\n  return Math.min(boxWidth / canvasWidth, boxHeight / canvasHeight);\n};\n\n// Re-export commonly used constants for backward compatibility\nexport { MAX_DIM_RATIO } from \"./constants\";\nexport {\n  INTERACTIVE_SELECTOR,\n  ZOOM_BOUND,\n  MAX_ZOOM,\n  MIN_ZOOMS,\n} from \"./constants\";\n"],"mappings":";;;;;AAWA,MAAa,cAAc;AAC3B,MAAa,eAAe;AAK5B,MAAa,gBAAgB,GAAW,MAAqB;AAC3D,QAAO,eAAe;EAAE;EAAG;EAAG,GAAG,CAAC,GAAG,EAAE,CAAC;;AAQ1C,MAAa,eACX,IACA,OACG;CACH,MAAM,KAAK,GAAG,UAAU,GAAG;CAC3B,MAAM,KAAK,GAAG,UAAU,GAAG;AAC3B,QAAO,KAAK,KAAK,MAAM,IAAI,MAAM,EAAE;;AAGrC,MAAa,eACX,IACA,OACU;AACV,QAAO;EACL,IAAI,GAAG,UAAU,GAAG,WAAW;EAC/B,IAAI,GAAG,UAAU,GAAG,WAAW;EAChC;;AAGH,MAAa,qBAAqB,UAAkC;AAElE,KAAI,QAAQ,IAAK,QAAO,eAAe;AACvC,KAAI,QAAQ,IAAK,QAAO,eAAe;AACvC,KAAI,QAAQ,KAAM,QAAO,eAAe;AACxC,KAAI,QAAQ,KAAM,QAAO,eAAe;AACxC,KAAI,QAAQ,KAAM,QAAO,eAAe;AACxC,KAAI,SAAS,KAAM,QAAO,eAAe;AACzC,QAAO,eAAe;;AAGxB,SAAgB,yBAAyB,EACvC,kBACA,QACA,YACA,YAMC;CACD,MAAM,EAAE,OAAO,WAAW;CAE1B,MAAM,iBAAiB,OAAO,IAAI,OAAO,QAAQ;CACjD,MAAM,iBAAiB,OAAO,IAAI,OAAO,SAAS;CAGlD,MAAM,UAAU,QAAQ,IAAI,iBAAiB;CAC7C,MAAM,UAAU,SAAS,IAAI,iBAAiB;AAE9C,KAAI,SACF,QAAO;EACL,GAAG,CAAC;EACJ,GAAG,CAAC;EACL;AAGH,QAAO;EACL,GAAG;EACH,GAAG;EACJ;;AAGH,eAAsB,iBACpB,QACA,GACA,GACA,OACA,SACe;CACf,MAAM,QAAQ,QAAQ,GAAG,OAAO,GAAG,WAAW;CAC9C,MAAM,QAAQ,QAAQ,GAAG,OAAO,GAAG,WAAW;CAC9C,MAAM,YAAY,QAAQ,OAAO,WAAW,GAAG,WAAW;AAC1D,OAAM,QAAQ,IAAI;EAAC;EAAW;EAAO;EAAM,CAAC;;AAG9C,MAAa,uBACX,aACA,iBACG;CAEH,MAAM,WAAW,cAAc,cAAc;CAC7C,MAAM,YAAY,eAAe,cAAc;CAE/C,IAAI,UAAU;AAEd,KAAI,WAAW,sBAAsB,WAAW;AAC9C,aAAW;AACX,cAAY,WAAW;QAClB;AACL,cAAY;AACZ,aAAW,YAAY;;AAIzB,QAAO,KAAK,IAAI,WAAW,aAAa,YAAY,aAAa"}