app-studio 0.5.57 → 0.5.62

package/README.md

@@ -1,13 +1,39 @@
-# App-Studio 
+# App-Studio
 
 App-Studio is a powerful React-based library designed to simplify the process of building responsive, interactive, and visually consistent web applications. It provides CSS design props for layout, spacing, sizing, shadows, event management, and theming.
 
 ### Features
 
-- 🌈 Add styled props to your application
-- 📦 A set of simple and powerful React components
-- 🌍 Internationalization support for dozens of languages
-- 🎨 Powerful theme customization in every detail
+-   🌈 Add styled props to your application
+-   📦 A set of simple and powerful React components
+-   🌍 Internationalization support for dozens of languages
+-   🎨 Powerful theme customization in every detail
+
+## Table of Contents
+
+- [Installation](#2-installation)
+- [Core Components](#3-core-components)
+  - [Element](#element)
+  - [View](#view)
+  - [Text](#text)
+  - [Form](#form)
+  - [Image](#image)
+- [Responsive Design](#4-responsive-design)
+  - [Media Prop](#media-prop)
+  - [useResponsive Hook](#useresponsive-hook)
+- [Event Management](#5-event-management)
+- [Theming](#6-theming)
+- [Custom Hooks](#7-custom-hooks)
+  - [useMount](#usemount)
+- [Design Props](#8-design-props)
+  - [Shadow Prop](#shadow-prop)
+- [Animation](#9-animation)
+  - [Basic Usage](#basic-usage)
+  - [Available Animations](#available-animations)
+  - [Animation Properties](#animation-properties)
+- [Advanced Usage](#10-advanced-usage)
+- [Contributing](#11-contributing)
+- [License](#12-license)
 
 ## 2. Installation
 
@@ -21,7 +47,14 @@ npm install app-studio  --save
 
 ### Element
 
-The `Element` component is the foundation of App-Studio. It handles a large part of the styling for other components, including responsiveness, shadow, margins, and padding.
+The `Element` component is the base for all other components. It handles responsiveness, shadows, margins, padding, and more.
+
+#### Key Features
+
+-   Sets both `width` and `height` with the `size` prop.
+-   Defines styles for different CSS events with the `on` prop.
+-   Defines responsive styles for different media queries with the `media` prop.
+-   Applies shadow effects with the `shadow` prop.
 
 #### Usage
 
@@ -31,16 +64,14 @@ The `Element` component is the foundation of App-Studio. It handles a large part
 </Element>
 ```
 
-#### Key Properties
+### View
 
-- `size`: Sets equal width and height
-- `on`: Defines styles for different CSS events
-- `media`: Defines styles for different media queries
-- `shadow`: Adds shadow to an element (boolean, number, or `Shadow` object)
+The `View` component extends the basic `div` HTML element. It's a generic container used to create various layouts.
 
-### View
+#### Key Features
 
-The `View` component is a versatile layout component that extends the basic HTML `div` tag with additional styling properties.
+-   Provides a flexible way to structure content.
+-   Supports all `Element` props.
 
 #### Usage
 
@@ -52,7 +83,12 @@ The `View` component is a versatile layout component that extends the basic HTML
 
 ### Text
 
-The `Text` component extends the HTML `div` tag with additional text styling properties.
+The `Text` component extends the basic `div` HTML element for rendering text content.
+
+#### Key Features
+
+-   Provides text-specific styling options.
+-   Supports all `Element` props.
 
 #### Usage
 
@@ -62,20 +98,31 @@ The `Text` component extends the HTML `div` tag with additional text styling pro
 
 ### Form
 
-The `Form` component extends the HTML `form` tag and provides `Button` and `Input` subcomponents.
+The `Form` component extends the basic `form` HTML element and provides nested `Form.Button` and `Form.Input` components.
+
+#### Key Features
+
+-   Simplifies form creation and management.
+-   Supports all `Element` props.
 
 #### Usage
 
 ```jsx
 <Form>
-  <Input placeholder="Enter your name" />
-  <Button>Submit</Button>
+  <Form.Input placeholder="Enter your name" />
+  <Form.Button>Submit</Form.Button>
 </Form>
 ```
 
 ### Image
 
-The `Image` component extends the HTML `img` tag with additional properties like `shadow`, `media`, and `on`.
+The `Image` component extends the basic `img` HTML element for displaying images.
+
+#### Key Features
+
+-   Supports responsive image loading with `media`.
+-   Applies shadow effects with `shadow`.
+-   Handles events with `on`.
 
 #### Usage
 
@@ -305,7 +352,6 @@ All animations are available through the `Animation` object:
 - `Animation.pulse()`
 - And many more...
 
-
 ### Basic Usage
 
 To apply an animation to a component, use the `animate` prop with an animation object:
@@ -316,7 +362,7 @@ import { View, Animation } from 'app-studio';
 function Example() {
   return (
     <View
-      animate={Animation.fadeIn()}
+      animate={Animation.fadeIn()} // Fades in the view
       backgroundColor="theme.primary"
       padding={20}
     >
@@ -330,32 +376,43 @@ function Example() {
 
 App-Studio comes with a set of pre-defined animations that you can use out of the box:
 
-- `fadeIn` / `fadeOut`
-- `slideInLeft` / `slideInRight` / `slideInUp` / `slideInDown`
-- `zoomIn` / `zoomOut`
-- `bounce`
-- `rotate`
-- `pulse`
-- `flash`
-- `shake`
-- `swing`
-- `rubberBand`
-- `wobble`
-- `flip`
-- `heartBeat`
-- `rollIn` / `rollOut`
-- `lightSpeedIn` / `lightSpeedOut`
-- `hinge`
-- `jackInTheBox`
+#### Transition Animations
+
+-   `fadeIn` / `fadeOut`
+-   `slideInLeft` / `slideInRight` / `slideInUp` / `slideInDown`
+-   `zoomIn` / `zoomOut`
+
+#### Transform Animations
+
+-   `rotate`
+-   `scale`
+-   `translate`
+
+#### Effect Animations
+
+-   `bounce`
+-   `pulse`
+-   `flash`
+-   `shake`
+-   `swing`
+-   `rubberBand`
+-   `wobble`
+-   `flip`
+-   `heartBeat`
+-   `rollIn` / `rollOut`
+-   `lightSpeedIn` / `lightSpeedOut`
+-   `hinge`
+-   `jackInTheBox`
 
 Each animation function accepts parameters to customize the duration, timing function, and other properties.
 
 #### Animation Properties
 
 Each animation function accepts an object with the following properties:
-- `duration`: Length of the animation (e.g., '1s', '500ms')
-- `timingFunction`: CSS timing function (e.g., 'ease', 'linear', 'ease-in-out')
-- `iterationCount`: Number of times to play the animation (number or 'infinite')
+
+-   `duration`: Length of the animation (e.g., '1s', '500ms')
+-   `timingFunction`: CSS timing function (e.g., 'ease', 'linear', 'ease-in-out')
+-   `iterationCount`: Number of times to play the animation (number or 'infinite') // e.g., '1', 'infinite'
 
 ## 10. Advanced Usage
 

package/dist/app-studio.cjs.development.js

@@ -3302,12 +3302,13 @@ const useResponsive = () => {
   };
 };
 
-// Utility Functions
+// Memoized function to get scroll dimensions
 const getScrollDimensions = element => {
   if (element instanceof Window) {
+    const doc = document.documentElement;
     return {
-      scrollHeight: document.documentElement.scrollHeight,
-      scrollWidth: document.documentElement.scrollWidth,
+      scrollHeight: Math.max(doc.scrollHeight, doc.offsetHeight),
+      scrollWidth: Math.max(doc.scrollWidth, doc.offsetWidth),
       clientHeight: window.innerHeight,
       clientWidth: window.innerWidth,
       scrollTop: window.scrollY,
@@ -3323,14 +3324,13 @@ const getScrollDimensions = element => {
     scrollLeft: element.scrollLeft
   };
 };
-/**
- * Hook to track scroll position and progress of a container element or window
- */
+// Enhanced useScroll hook with better performance
 const useScroll = function (_temp) {
   let {
     container,
     offset = [0, 0],
-    throttleMs = 0
+    throttleMs = 0,
+    disabled = false
   } = _temp === void 0 ? {} : _temp;
   const [scrollPosition, setScrollPosition] = React.useState({
     x: 0,
@@ -3339,24 +3339,20 @@ const useScroll = function (_temp) {
     yProgress: 0
   });
   const lastUpdateRef = React.useRef(0);
+  const frameRef = React.useRef();
   const handleScroll = React.useCallback(() => {
+    if (disabled) return;
     const now = Date.now();
     if (throttleMs > 0 && now - lastUpdateRef.current < throttleMs) {
+      frameRef.current = requestAnimationFrame(handleScroll);
       return;
     }
-    const targetElement = container && container.current ? container.current : window;
-    const {
-      scrollHeight,
-      scrollWidth,
-      clientHeight,
-      clientWidth,
-      scrollTop,
-      scrollLeft
-    } = getScrollDimensions(targetElement);
-    const x = scrollLeft + offset[0];
-    const y = scrollTop + offset[1];
-    const maxScrollX = scrollWidth - clientWidth;
-    const maxScrollY = scrollHeight - clientHeight;
+    const target = container && container.current ? container.current : window;
+    const dimensions = getScrollDimensions(target);
+    const x = dimensions.scrollLeft + offset[0];
+    const y = dimensions.scrollTop + offset[1];
+    const maxScrollX = dimensions.scrollWidth - dimensions.clientWidth;
+    const maxScrollY = dimensions.scrollHeight - dimensions.clientHeight;
     const xProgress = maxScrollX <= 0 ? 1 : Math.min(Math.max(x / maxScrollX, 0), 1);
     const yProgress = maxScrollY <= 0 ? 1 : Math.min(Math.max(y / maxScrollY, 0), 1);
     setScrollPosition(prev => {
@@ -3371,26 +3367,27 @@ const useScroll = function (_temp) {
       }
       return prev;
     });
-  }, [container, offset, throttleMs]);
+  }, [container, offset, throttleMs, disabled]);
   React.useEffect(() => {
-    const targetElement = container && container.current ? container.current : window;
+    if (disabled) return;
+    const target = container && container.current ? container.current : window;
     handleScroll();
-    targetElement.addEventListener('scroll', handleScroll, {
-      passive: true
-    });
-    window.addEventListener('resize', handleScroll, {
+    const options = {
       passive: true
-    });
+    };
+    target.addEventListener('scroll', handleScroll, options);
+    window.addEventListener('resize', handleScroll, options);
     return () => {
-      targetElement.removeEventListener('scroll', handleScroll);
+      target.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleScroll);
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
     };
-  }, [handleScroll, container]);
+  }, [handleScroll, container, disabled]);
   return scrollPosition;
 };
-/**
- * Hook to track element visibility and intersection progress
- */
+// Enhanced useScrollAnimation with callback support
 const useScrollAnimation = function (ref, options) {
   if (options === void 0) {
     options = {};
@@ -3404,94 +3401,131 @@ const useScrollAnimation = function (ref, options) {
       const entry = entries[0];
       setIsInView(entry.isIntersecting);
       setProgress(entry.intersectionRatio);
+      if (options.onIntersectionChange) options.onIntersectionChange(entry.isIntersecting, entry.intersectionRatio);
     }, {
-      threshold: options.threshold || 0,
-      rootMargin: options.rootMargin || '0px',
-      root: options.root || null
+      threshold: options.threshold ?? 0,
+      rootMargin: options.rootMargin ?? '0px',
+      root: options.root ?? null
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [ref, options.threshold, options.rootMargin, options.root]);
+  }, [ref, options.threshold, options.rootMargin, options.root, options.onIntersectionChange]);
   return {
     isInView,
     progress
   };
 };
-/**
- * Hook to handle smooth scrolling to elements
- */
+// Enhanced useSmoothScroll with error handling
 const useSmoothScroll = () => {
   return React.useCallback(function (element, offset) {
     if (offset === void 0) {
       offset = 0;
     }
     if (!element) return;
-    const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) - offset;
-    window.scrollTo({
-      top: targetPosition,
-      behavior: 'smooth'
-    });
+    try {
+      const top = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) - offset;
+      if ('scrollBehavior' in document.documentElement.style) {
+        window.scrollTo({
+          top,
+          behavior: 'smooth'
+        });
+      } else {
+        // Fallback for browsers that don't support smooth scrolling
+        window.scrollTo(0, top);
+      }
+    } catch (error) {
+      console.error('Error during smooth scroll:', error);
+    }
   }, []);
 };
-/**
- * Hook to implement infinite scrolling functionality
- */
+// Enhanced useInfiniteScroll with debouncing
 const useInfiniteScroll = function (callback, options) {
   if (options === void 0) {
     options = {};
   }
   const [sentinel, setSentinel] = React.useState(null);
   const callbackRef = React.useRef(callback);
+  const timeoutRef = React.useRef();
   React.useEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
   React.useEffect(() => {
-    const element = sentinel;
-    if (!element || options.isLoading) return;
-    const observer = new IntersectionObserver(entries => {
+    if (!sentinel || options.isLoading) return;
+    const handleIntersection = entries => {
       if (entries[0].isIntersecting) {
-        callbackRef.current();
+        if (options.debounceMs) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(callbackRef.current, options.debounceMs);
+        } else {
+          callbackRef.current();
+        }
       }
-    }, {
-      threshold: options.threshold || 0,
-      root: options.root || null,
-      rootMargin: options.rootMargin || '0px'
+    };
+    const observer = new IntersectionObserver(handleIntersection, {
+      threshold: options.threshold ?? 0,
+      root: options.root ?? null,
+      rootMargin: options.rootMargin ?? '0px'
     });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [sentinel, options.threshold, options.isLoading, options.root, options.rootMargin]);
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [sentinel, options.threshold, options.isLoading, options.root, options.rootMargin, options.debounceMs]);
   return {
     sentinelRef: setSentinel
   };
 };
-/**
- * Hook to detect scroll direction with configurable threshold
- */
 const useScrollDirection = function (threshold) {
   if (threshold === void 0) {
-    threshold = 0;
+    threshold = 5;
   }
   const [scrollDirection, setScrollDirection] = React.useState('up');
-  const lastScrollYRef = React.useRef(0);
-  const previousDirectionRef = React.useRef('up');
-  const updateScrollDirection = React.useCallback(() => {
-    const scrollY = window.scrollY || window.pageYOffset;
-    const direction = scrollY > lastScrollYRef.current ? 'down' : 'up';
-    if (Math.abs(scrollY - lastScrollYRef.current) > threshold && direction !== previousDirectionRef.current) {
-      setScrollDirection(direction);
-      previousDirectionRef.current = direction;
+  const lastScrollY = React.useRef(0);
+  const lastDirection = React.useRef('up');
+  const animationFrame = React.useRef();
+  const ticking = React.useRef(false);
+  const updateDirection = () => {
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+    const direction = scrollY > lastScrollY.current ? 'down' : 'up';
+    const scrollDelta = Math.abs(scrollY - lastScrollY.current);
+    // Vérifier si on est au bas de la page
+    const isAtBottom = window.innerHeight + scrollY >= document.documentElement.scrollHeight - 1;
+    // Logique principale
+    if (scrollDelta > threshold || direction === 'down' && isAtBottom) {
+      if (direction !== lastDirection.current) {
+        lastDirection.current = direction;
+        setScrollDirection(direction);
+      }
     }
-    lastScrollYRef.current = scrollY > 0 ? scrollY : 0;
-  }, [threshold]);
+    // Mise à jour de la position avec un minimum de 0
+    lastScrollY.current = Math.max(scrollY, 0);
+    ticking.current = false;
+  };
   React.useEffect(() => {
     const handleScroll = () => {
-      window.requestAnimationFrame(updateScrollDirection);
+      if (!ticking.current) {
+        animationFrame.current = requestAnimationFrame(() => {
+          updateDirection();
+          ticking.current = false;
+        });
+        ticking.current = true;
+      }
     };
     window.addEventListener('scroll', handleScroll, {
       passive: true
     });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [updateScrollDirection]);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+    };
+  }, [threshold]);
   return scrollDirection;
 };
 

package/dist/app-studio.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}