app-studio 0.5.21 → 0.5.28

package/dist/animation/css.d.ts

@@ -1,25 +1,20 @@
 import { CssProps } from '../components/Element';
-declare type StyleContext = 'base' | 'pseudo' | 'media';
+declare type StyleContext = 'base' | 'pseudo' | 'media' | 'modifier';
 declare class UtilityClassManager {
-    private styleSheet;
+    private baseStyleSheet;
+    private mediaStyleSheet;
+    private modifierStyleSheet;
     private classCache;
     private maxCacheSize;
     private propertyShorthand;
+    private injectedRulesBase;
+    private injectedRulesMedia;
+    private injectedRulesModifier;
     constructor(propertyShorthand: Record<string, string>, maxCacheSize?: number);
-    private initStyleSheet;
+    private initStyleSheets;
     private escapeClassName;
-    injectRule(cssRule: string): void;
+    injectRule(cssRule: string, context?: StyleContext): void;
     private addToCache;
-    /**
-     * Génère un ou plusieurs noms de classes pour une propriété et une valeur donnée.
-     * @param property La propriété CSS (ex: 'padding', 'color').
-     * @param value La valeur de la propriété (ex: '10px', '#fff').
-     * @param context Le contexte de la classe ('base', 'pseudo', 'media').
-     * @param modifier Le modificateur pour les pseudo-classes ou media queries (ex: 'hover', 'sm').
-     * @param getColor Fonction pour convertir les couleurs si nécessaire.
-     * @param mediaQueries Un tableau de media queries associées (utilisé uniquement pour le contexte 'media').
-     * @returns Un tableau de noms de classes générés.
-     */
     getClassNames(property: string, value: any, context?: StyleContext, modifier?: string, getColor?: (color: string) => string, mediaQueries?: string[]): string[];
 }
 export declare const utilityClassManager: UtilityClassManager;

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

@@ -743,33 +743,79 @@ class UtilityClassManager {
     if (maxCacheSize === void 0) {
       maxCacheSize = 10000;
     }
-    this.styleSheet = null;
+    this.baseStyleSheet = null;
+    this.mediaStyleSheet = null;
+    this.modifierStyleSheet = null;
     this.classCache = new Map();
+    this.injectedRulesBase = new Set();
+    this.injectedRulesMedia = new Set();
+    this.injectedRulesModifier = new Set();
     this.propertyShorthand = propertyShorthand;
     this.maxCacheSize = maxCacheSize;
-    this.initStyleSheet();
+    this.initStyleSheets();
   }
-  initStyleSheet() {
+  initStyleSheets() {
     if (typeof document !== 'undefined') {
-      let styleTag = document.getElementById('utility-classes');
-      if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.id = 'utility-classes';
-        document.head.appendChild(styleTag);
+      // Feuille de style de base
+      let baseStyleTag = document.getElementById('utility-classes-base');
+      if (!baseStyleTag) {
+        baseStyleTag = document.createElement('style');
+        baseStyleTag.id = 'utility-classes-base';
+        document.head.appendChild(baseStyleTag);
       }
-      this.styleSheet = styleTag.sheet;
+      this.baseStyleSheet = baseStyleTag.sheet;
+      // Feuille de style pour les media queries
+      let mediaStyleTag = document.getElementById('utility-classes-media');
+      if (!mediaStyleTag) {
+        mediaStyleTag = document.createElement('style');
+        mediaStyleTag.id = 'utility-classes-media';
+        document.head.appendChild(mediaStyleTag);
+      }
+      this.mediaStyleSheet = mediaStyleTag.sheet;
+      // Feuille de style pour les modificateurs
+      let modifierStyleTag = document.getElementById('utility-classes-modifier');
+      if (!modifierStyleTag) {
+        modifierStyleTag = document.createElement('style');
+        modifierStyleTag.id = 'utility-classes-modifier';
+        document.head.appendChild(modifierStyleTag);
+      }
+      this.modifierStyleSheet = modifierStyleTag.sheet;
     }
   }
   escapeClassName(className) {
     return className.replace(/:/g, '\\:');
   }
-  injectRule(cssRule) {
-    if (this.styleSheet) {
+  injectRule(cssRule, context) {
+    if (context === void 0) {
+      context = 'base';
+    }
+    let styleSheet = null;
+    let injectedRules = new Set();
+    switch (context) {
+      case 'base':
+        styleSheet = this.baseStyleSheet;
+        injectedRules = this.injectedRulesBase;
+        break;
+      case 'pseudo':
+        styleSheet = this.baseStyleSheet; // Si les pseudo-classes sont dans la feuille de base
+        injectedRules = this.injectedRulesBase;
+        break;
+      case 'media':
+        styleSheet = this.mediaStyleSheet;
+        injectedRules = this.injectedRulesMedia;
+        break;
+      case 'modifier':
+        styleSheet = this.modifierStyleSheet;
+        injectedRules = this.injectedRulesModifier;
+        break;
+      default:
+        styleSheet = this.baseStyleSheet;
+        injectedRules = this.injectedRulesBase;
+    }
+    if (styleSheet && !injectedRules.has(cssRule)) {
       try {
-        const existingRules = Array.from(this.styleSheet.cssRules).map(rule => rule.cssText);
-        if (!existingRules.includes(cssRule)) {
-          this.styleSheet.insertRule(cssRule, this.styleSheet.cssRules.length);
-        }
+        styleSheet.insertRule(cssRule, styleSheet.cssRules.length);
+        injectedRules.add(cssRule);
       } catch (e) {
         console.error(`Erreur lors de l'insertion de la règle CSS: "${cssRule}"`, e);
       }
@@ -782,16 +828,6 @@ class UtilityClassManager {
     }
     this.classCache.set(key, className);
   }
-  /**
-   * Génère un ou plusieurs noms de classes pour une propriété et une valeur donnée.
-   * @param property La propriété CSS (ex: 'padding', 'color').
-   * @param value La valeur de la propriété (ex: '10px', '#fff').
-   * @param context Le contexte de la classe ('base', 'pseudo', 'media').
-   * @param modifier Le modificateur pour les pseudo-classes ou media queries (ex: 'hover', 'sm').
-   * @param getColor Fonction pour convertir les couleurs si nécessaire.
-   * @param mediaQueries Un tableau de media queries associées (utilisé uniquement pour le contexte 'media').
-   * @returns Un tableau de noms de classes générés.
-   */
   getClassNames(property, value, context, modifier, getColor, mediaQueries) {
     if (context === void 0) {
       context = 'base';
@@ -806,13 +842,12 @@ class UtilityClassManager {
       mediaQueries = [];
     }
     let processedValue = value;
-    // If the property is a color, convert it to a hexadecimal or RGB value
+    // Si la propriété est une couleur, la convertir
     if (property.toLowerCase().includes('color')) {
       processedValue = getColor(value);
     }
-    // Handle compound values (like padding and margin)
+    // Gérer les valeurs numériques
     if (typeof processedValue === 'number') {
-      // Add 'px' to numeric values for properties that typically use length units
       if (numericCssProperties.has(property)) {
         processedValue = `${processedValue}px`;
       }
@@ -830,42 +865,27 @@ class UtilityClassManager {
     if (!shorthand) {
       shorthand = property.replace(/([A-Z])/g, '-$1').toLowerCase();
     }
-    // console.log({ shorthand, property, processedValue });
-    // Normaliser la valeur pour le nom de classe
-    let normalizedValue = formattedValue.toString().replace(/\./g, 'p') // Replace dots with 'p'
-    .replace(/\s+/g, '-') // Replace spaces with '-'
-    .replace(/[^a-zA-Z0-9\-]/g, '') // Remove other special characters
-    .replace(/%/g, 'pct') // Replace % with 'pct'
-    .replace(/vw/g, 'vw') // Keep 'vw' as is
-    .replace(/vh/g, 'vh') // Keep 'vh' as is
-    .replace(/em/g, 'em') // Keep 'em' as is
-    .replace(/rem/g, 'rem'); // Keep 'rem' as is
+    let normalizedValue = formattedValue.toString().replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9\-]/g, '').replace(/%/g, 'pct').replace(/vw/g, 'vw').replace(/vh/g, 'vh').replace(/em/g, 'em').replace(/rem/g, 'rem');
     let baseClassName = `${shorthand}-${normalizedValue}`;
-    // Préfixer les noms de classe pour les pseudo-classes et media queries
-    let classNames = [baseClassName]; // Utiliser le nom de classe de base
+    let classNames = [baseClassName];
     if (context === 'pseudo' && modifier) {
-      // Pseudo-class : ajouter '-modifier' suffix
-      const pseudoClassName = `${baseClassName}-${modifier}`;
+      const pseudoClassName = `${baseClassName}--${modifier}`;
       classNames.push(pseudoClassName);
     } else if (context === 'media' && modifier) {
-      // Media query : générer une classe pour chaque media query associée
       mediaQueries.forEach(() => {
-        const mediaClassName = `${modifier}:${baseClassName}`;
+        const mediaClassName = `${modifier}--${baseClassName}`;
         classNames.push(mediaClassName);
       });
     } else {
       classNames.push(baseClassName);
     }
-    // Convertir camelCase en kebab-case
     const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
     let valueForCss = processedValue;
-    // Ajouter des unités si nécessaire
     if (typeof valueForCss === 'number') {
       if (numericCssProperties.has(cssProperty)) {
         valueForCss = `${valueForCss}px`;
       }
     }
-    // Construire les règles CSS pour chaque classe générée
     classNames.forEach(className => {
       const escapedClassName = this.escapeClassName(className);
       let cssRules = [];
@@ -874,11 +894,9 @@ class UtilityClassManager {
           cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'pseudo':
-          // Appliquer le pseudo-sélecteur au sélecteur de classe
           cssRules.push(`.${escapedClassName}:${modifier} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'media':
-          // Les media queries sont gérées séparément
           mediaQueries.forEach(mq => {
             cssRules.push(`@media ${mq} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`);
             if (window.isResponsive === true) {
@@ -889,8 +907,12 @@ class UtilityClassManager {
         default:
           cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
       }
-      // Injecter les règles CSS
-      cssRules.forEach(rule => this.injectRule(rule));
+      // Déterminer si la classe est un modificateur
+      const isModifier = className.includes('--');
+      // Définir le contexte approprié
+      const ruleContext = isModifier ? 'modifier' : context;
+      // Injecter les règles CSS avec le contexte approprié
+      cssRules.forEach(rule => this.injectRule(rule, ruleContext));
       // Ajouter au cache
       this.addToCache(key, className);
     });
@@ -1240,6 +1262,52 @@ const Element = /*#__PURE__*/React__default.memo( /*#__PURE__*/React.forwardRef(
 const View = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
   ref: ref
 })));
+const Horizontal = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({
+  display: "flex",
+  flexDirection: "row"
+}, props, {
+  ref: ref
+})));
+const Vertical = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({
+  display: "flex",
+  flexDirection: "column"
+}, props, {
+  ref: ref
+})));
+const HorizontalResponsive = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    media = {},
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    media: {
+      ...media,
+      mobile: {
+        ...media.mobile,
+        flexDirection: 'column'
+      }
+    }
+  }, props, {
+    ref: ref
+  }));
+});
+const VerticalResponsive = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+  let {
+    media = {},
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+    media: {
+      ...media,
+      mobile: {
+        ...media.mobile,
+        flexDirection: 'row'
+      }
+    }
+  }, props, {
+    ref: ref
+  }));
+});
 const Scroll = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
   ref: ref
 })));
@@ -2499,12 +2567,130 @@ function isMobile() {
   return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
 }
 
+function useActive() {
+  const [active, setActive] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleMouseDown = () => setActive(true);
+    const handleMouseUp = () => setActive(false);
+    const handleTouchStart = () => setActive(true);
+    const handleTouchEnd = () => setActive(false);
+    node.addEventListener('mousedown', handleMouseDown);
+    node.addEventListener('mouseup', handleMouseUp);
+    node.addEventListener('mouseleave', handleMouseUp);
+    node.addEventListener('touchstart', handleTouchStart);
+    node.addEventListener('touchend', handleTouchEnd);
+    return () => {
+      node.removeEventListener('mousedown', handleMouseDown);
+      node.removeEventListener('mouseup', handleMouseUp);
+      node.removeEventListener('mouseleave', handleMouseUp);
+      node.removeEventListener('touchstart', handleTouchStart);
+      node.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, []);
+  return [ref, active];
+}
+
+function useClickOutside() {
+  const [clickedOutside, setClickedOutside] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const handleClick = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setClickedOutside(true);
+      } else {
+        setClickedOutside(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, []);
+  return [ref, clickedOutside];
+}
+
+function useFocus() {
+  const [focused, setFocused] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleFocus = () => setFocused(true);
+    const handleBlur = () => setFocused(false);
+    node.addEventListener('focus', handleFocus);
+    node.addEventListener('blur', handleBlur);
+    return () => {
+      node.removeEventListener('focus', handleFocus);
+      node.removeEventListener('blur', handleBlur);
+    };
+  }, []);
+  return [ref, focused];
+}
+
+function useHover() {
+  const [hover, setHover] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleMouseEnter = () => setHover(true);
+    const handleMouseLeave = () => setHover(false);
+    node.addEventListener('mouseenter', handleMouseEnter);
+    node.addEventListener('mouseleave', handleMouseLeave);
+    return () => {
+      node.removeEventListener('mouseenter', handleMouseEnter);
+      node.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, []);
+  return [ref, hover];
+}
+
+function useKeyPress(targetKey) {
+  const [keyPressed, setKeyPressed] = React.useState(false);
+  React.useEffect(() => {
+    const downHandler = e => {
+      if (e.key === targetKey) setKeyPressed(true);
+    };
+    const upHandler = e => {
+      if (e.key === targetKey) setKeyPressed(false);
+    };
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKey]);
+  return keyPressed;
+}
+
 const useMount = callback => {
   React.useEffect(() => {
     callback();
   }, []);
 };
 
+function useOnScreen(options) {
+  const ref = React.useRef(null);
+  const [isOnScreen, setOnScreen] = React.useState(false);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(_ref => {
+      let [entry] = _ref;
+      setOnScreen(entry.isIntersecting);
+    }, options);
+    observer.observe(node);
+    return () => {
+      observer.unobserve(node);
+    };
+  }, [options]);
+  return [ref, isOnScreen];
+}
+
 const createQuery = (keyScreen, query, set) => {
   const mql = window.matchMedia(query);
   const onChange = () => {
@@ -2551,11 +2737,190 @@ const useResponsive = () => {
   };
 };
 
+const getScrollDimensions = element => {
+  if (element instanceof Window) {
+    return {
+      scrollHeight: document.documentElement.scrollHeight,
+      scrollWidth: document.documentElement.scrollWidth,
+      clientHeight: window.innerHeight,
+      clientWidth: window.innerWidth,
+      scrollTop: window.scrollY,
+      scrollLeft: window.scrollX
+    };
+  }
+  return {
+    scrollHeight: element.scrollHeight,
+    scrollWidth: element.scrollWidth,
+    clientHeight: element.clientHeight,
+    clientWidth: element.clientWidth,
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft
+  };
+};
+const useScroll = function (_temp) {
+  let {
+    container,
+    offset = [0, 0]
+  } = _temp === void 0 ? {} : _temp;
+  const [scrollPosition, setScrollPosition] = React.useState({
+    x: 0,
+    y: 0,
+    xProgress: 0,
+    yProgress: 0
+  });
+  const handleScroll = React.useCallback(() => {
+    if (!container || !container.current) return;
+    const element = container.current;
+    const {
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+      scrollTop,
+      scrollLeft
+    } = getScrollDimensions(element);
+    const x = scrollLeft + offset[0];
+    const y = scrollTop + offset[1];
+    const maxScrollX = scrollWidth - clientWidth;
+    const maxScrollY = scrollHeight - clientHeight;
+    const xProgress = maxScrollX > 0 ? x / maxScrollX : 1;
+    const yProgress = maxScrollY > 0 ? y / maxScrollY : 1;
+    setScrollPosition(prev => {
+      if (prev.x !== x || prev.y !== y || prev.xProgress !== xProgress || prev.yProgress !== yProgress) {
+        return {
+          x,
+          y,
+          xProgress,
+          yProgress
+        };
+      }
+      return prev;
+    });
+  }, [container, offset]);
+  React.useEffect(() => {
+    if (!container || container.current) return;
+    const element = container.current || window;
+    element.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    window.addEventListener('resize', handleScroll, {
+      passive: true
+    });
+    handleScroll();
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [handleScroll, container]);
+  return scrollPosition;
+};
+const useScrollAnimation = function (ref, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const [isInView, setIsInView] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        setIsInView(entry.isIntersecting);
+        setProgress(entry.intersectionRatio);
+      });
+    }, {
+      threshold: options.threshold || 0,
+      rootMargin: options.rootMargin || '0px'
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, options.threshold, options.rootMargin]);
+  return {
+    isInView,
+    progress
+  };
+};
+const useSmoothScroll = () => {
+  return React.useCallback(function (element, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    if (!element) return;
+    const targetPosition = element.getBoundingClientRect().top + window.scrollY - offset;
+    window.scrollTo({
+      top: targetPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+};
+const useInfiniteScroll = function (callback, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const [sentinel, setSentinel] = React.useState(null);
+  React.useEffect(() => {
+    if (!sentinel || options.isLoading) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) callback();
+    }, {
+      threshold: options.threshold || 0
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinel, callback, options.threshold, options.isLoading]);
+  return {
+    sentinelRef: setSentinel
+  };
+};
+const useScrollDirection = function (threshold) {
+  if (threshold === void 0) {
+    threshold = 0;
+  }
+  const [scrollDirection, setScrollDirection] = React.useState('up');
+  const [lastScrollY, setLastScrollY] = React.useState(0);
+  const updateScrollDirection = React.useCallback(() => {
+    const scrollY = window.scrollY;
+    const direction = scrollY > lastScrollY ? 'down' : 'up';
+    if (Math.abs(scrollY - lastScrollY) > threshold && direction !== scrollDirection) {
+      setScrollDirection(direction);
+    }
+    setLastScrollY(scrollY > 0 ? scrollY : 0);
+  }, [scrollDirection, lastScrollY, threshold]);
+  React.useEffect(() => {
+    window.addEventListener('scroll', updateScrollDirection, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('scroll', updateScrollDirection);
+    };
+  }, [updateScrollDirection]);
+  return scrollDirection;
+};
+
+function useWindowSize() {
+  const [size, setSize] = React.useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return size;
+}
+
 exports.Animation = Animation;
 exports.Button = Button;
 exports.Div = Div;
 exports.Element = Element;
 exports.Form = Form;
+exports.Horizontal = Horizontal;
+exports.HorizontalResponsive = HorizontalResponsive;
 exports.Image = Image;
 exports.ImageBackground = ImageBackground;
 exports.Input = Input;
@@ -2570,6 +2935,8 @@ exports.Text = Text;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
+exports.Vertical = Vertical;
+exports.VerticalResponsive = VerticalResponsive;
 exports.View = View;
 exports.createQuery = createQuery;
 exports.defaultColors = defaultColors;
@@ -2581,8 +2948,20 @@ exports.isMobile = isMobile;
 exports.isProd = isProd;
 exports.isSSR = isSSR;
 exports.palette = palette;
+exports.useActive = useActive;
+exports.useClickOutside = useClickOutside;
+exports.useFocus = useFocus;
+exports.useHover = useHover;
+exports.useInfiniteScroll = useInfiniteScroll;
+exports.useKeyPress = useKeyPress;
 exports.useMount = useMount;
+exports.useOnScreen = useOnScreen;
 exports.useResponsive = useResponsive;
 exports.useResponsiveContext = useResponsiveContext;
+exports.useScroll = useScroll;
+exports.useScrollAnimation = useScrollAnimation;
+exports.useScrollDirection = useScrollDirection;
+exports.useSmoothScroll = useSmoothScroll;
 exports.useTheme = useTheme;
+exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=app-studio.cjs.development.js.map

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}