app-studio 0.5.63 → 0.5.65

package/dist/animation/css.d.ts

@@ -7,13 +7,9 @@ declare class UtilityClassManager {
     private classCache;
     private maxCacheSize;
     private propertyShorthand;
-    private injectedRulesBase;
-    private injectedRulesMedia;
-    private injectedRulesModifier;
     constructor(propertyShorthand: Record<string, string>, maxCacheSize?: number);
     private initStyleSheets;
     addDocument(targetDocument: Document): void;
-    private injectRuleToDocument;
     private escapeClassName;
     injectRule(cssRule: string, context?: StyleContext): void;
     private getAllRegisteredDocuments;
@@ -21,6 +17,11 @@ declare class UtilityClassManager {
     getClassNames(property: string, value: any, context: "base" | "pseudo" | "media" | "modifier" | undefined, modifier: string | undefined, getColor: (color: string) => string, mediaQueries?: string[]): string[];
     removeDocument(targetDocument: Document): void;
     clearCache(): void;
+    private clearStyleSheet;
+    regenerateStyles(targetDocument: Document): void;
+    regenerateAllStyles(): void;
+    private injectRuleToDocument;
+    printStyles(targetDocument: Document): void;
 }
 export declare const utilityClassManager: UtilityClassManager;
 export declare const extractUtilityClasses: (props: ElementProps, getColor: (color: string) => string, mediaQueries: Record<string, string>, devices: Record<string, string[]>) => string[];

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

@@ -1260,9 +1260,6 @@ class UtilityClassManager {
     this.mediaStyleSheet = new Map();
     this.modifierStyleSheet = new Map();
     this.classCache = new Map();
-    this.injectedRulesBase = new Set();
-    this.injectedRulesMedia = new Set();
-    this.injectedRulesModifier = new Set();
     this.propertyShorthand = propertyShorthand;
     this.maxCacheSize = maxCacheSize;
     if (typeof document !== 'undefined') {
@@ -1301,30 +1298,17 @@ class UtilityClassManager {
   addDocument(targetDocument) {
     this.initStyleSheets(targetDocument);
     // Reinject all cached rules into the new document
-    this.injectedRulesBase.forEach(rule => this.injectRuleToDocument(rule, 'base', targetDocument));
-    this.injectedRulesMedia.forEach(rule => this.injectRuleToDocument(rule, 'media', targetDocument));
-    this.injectedRulesModifier.forEach(rule => this.injectRuleToDocument(rule, 'modifier', targetDocument));
-  }
-  injectRuleToDocument(cssRule, context, targetDocument) {
-    let styleSheet = null;
-    switch (context) {
-      case 'base':
-      case 'pseudo':
-        styleSheet = this.baseStyleSheet.get(targetDocument) || null;
-        break;
-      case 'media':
-        styleSheet = this.mediaStyleSheet.get(targetDocument) || null;
-        break;
-      case 'modifier':
-        styleSheet = this.modifierStyleSheet.get(targetDocument) || null;
-        break;
-    }
-    if (styleSheet) {
-      try {
-        styleSheet.insertRule(cssRule, styleSheet.cssRules.length);
-      } catch (e) {
-        console.error(`Error inserting CSS rule to document: "${cssRule}"`, e);
-      }
+    const values = Array.from(this.classCache.values());
+    for (const {
+      rules
+    } of values) {
+      rules.forEach(_ref => {
+        let {
+          rule,
+          context
+        } = _ref;
+        this.injectRuleToDocument(rule, context, targetDocument);
+      });
     }
   }
   escapeClassName(className) {
@@ -1334,38 +1318,23 @@ class UtilityClassManager {
     if (context === void 0) {
       context = 'base';
     }
-    let injectedRules;
-    switch (context) {
-      case 'base':
-      case 'pseudo':
-        injectedRules = this.injectedRulesBase;
-        break;
-      case 'media':
-        injectedRules = this.injectedRulesMedia;
-        break;
-      case 'modifier':
-        injectedRules = this.injectedRulesModifier;
-        break;
-      default:
-        injectedRules = this.injectedRulesBase;
-    }
-    if (!injectedRules.has(cssRule)) {
-      // Inject to all registered documents
-      for (const targetDocument of this.getAllRegisteredDocuments()) {
-        this.injectRuleToDocument(cssRule, context, targetDocument);
-      }
-      injectedRules.add(cssRule);
+    // Inject to all registered documents
+    for (const targetDocument of this.getAllRegisteredDocuments()) {
+      this.injectRuleToDocument(cssRule, context, targetDocument);
     }
   }
   getAllRegisteredDocuments() {
     return Array.from(this.baseStyleSheet.keys());
   }
-  addToCache(key, className) {
+  addToCache(key, className, rules) {
     if (this.classCache.size >= this.maxCacheSize) {
       const firstKey = this.classCache.keys().next().value;
       if (firstKey) this.classCache.delete(firstKey);
     }
-    this.classCache.set(key, className);
+    this.classCache.set(key, {
+      className,
+      rules
+    });
   }
   getClassNames(property, value, context, modifier, getColor, mediaQueries) {
     if (context === void 0) {
@@ -1393,10 +1362,10 @@ class UtilityClassManager {
     if (modifier && context !== 'base') {
       key = `${property}:${formattedValue}|${context}:${modifier}`;
     }
-    if (this.classCache.has(key)) {
-      return [this.classCache.get(key)];
+    const cached = this.classCache.get(key);
+    if (cached) {
+      return [cached.className];
     }
-    // Generate a unique class name with modifier
     let shorthand = this.propertyShorthand[property];
     if (!shorthand) {
       shorthand = property.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -1404,53 +1373,64 @@ class UtilityClassManager {
     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}`;
     let classNames = [baseClassName];
-    if (context === 'pseudo' && modifier) {
-      const pseudoClassName = `${baseClassName}--${modifier}`;
-      classNames.push(pseudoClassName);
-    } else if (context === 'media' && modifier) {
-      mediaQueries.forEach(() => {
-        const mediaClassName = `${modifier}--${baseClassName}`;
-        classNames.push(mediaClassName);
-      });
-    } else {
-      classNames.push(baseClassName);
-    }
+    let rules = [];
     const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
     let valueForCss = processedValue;
-    if (typeof valueForCss === 'number') {
-      if (numericCssProperties.has(cssProperty)) {
-        valueForCss = `${valueForCss}px`;
-      }
+    if (typeof valueForCss === 'number' && numericCssProperties.has(cssProperty)) {
+      valueForCss = `${valueForCss}px`;
     }
-    classNames.forEach(className => {
+    const generateRules = className => {
       const escapedClassName = this.escapeClassName(className);
-      let cssRules = [];
       switch (context) {
         case 'base':
-          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+          rules.push({
+            rule: `.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`,
+            context: 'base'
+          });
           break;
         case 'pseudo':
-          cssRules.push(`.${escapedClassName}:${modifier} { ${cssProperty}: ${valueForCss}; }`);
+          rules.push({
+            rule: `.${escapedClassName}:${modifier} { ${cssProperty}: ${valueForCss}; }`,
+            context: 'pseudo'
+          });
           break;
         case 'media':
           mediaQueries.forEach(mq => {
-            cssRules.push(`@media ${mq} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`);
-            // if ((window as any).isResponsive === true) {
-            //   cssRules.push(
-            //     `.${modifier} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`
-            //   );
-            // }
+            rules.push({
+              rule: `@media ${mq} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`,
+              context: 'media'
+            });
+            if (window.isResponsive === true) {
+              rules.push({
+                rule: `.${modifier} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`,
+                context: 'media'
+              });
+            }
           });
-
           break;
-        default:
-          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
       }
-      const isModifier = className.includes('--');
-      const ruleContext = isModifier ? 'modifier' : context;
-      cssRules.forEach(rule => this.injectRule(rule, ruleContext));
-      this.addToCache(key, className);
+    };
+    if (context === 'pseudo' && modifier) {
+      const pseudoClassName = `${baseClassName}--${modifier}`;
+      classNames = [pseudoClassName];
+      generateRules(pseudoClassName);
+    } else if (context === 'media' && modifier) {
+      const mediaClassName = `${modifier}--${baseClassName}`;
+      classNames = [mediaClassName];
+      generateRules(mediaClassName);
+    } else {
+      generateRules(baseClassName);
+    }
+    // Inject all rules
+    rules.forEach(_ref2 => {
+      let {
+        rule,
+        context
+      } = _ref2;
+      this.injectRule(rule, context);
     });
+    // Cache the generated rules
+    this.addToCache(key, classNames[0], rules);
     return classNames;
   }
   removeDocument(targetDocument) {
@@ -1460,15 +1440,95 @@ class UtilityClassManager {
   }
   clearCache() {
     this.classCache.clear();
-    this.injectedRulesBase.clear();
-    this.injectedRulesMedia.clear();
-    this.injectedRulesModifier.clear();
+  }
+  clearStyleSheet(styleSheet) {
+    while (styleSheet.cssRules.length > 0) {
+      styleSheet.deleteRule(0);
+    }
+  }
+  regenerateStyles(targetDocument) {
+    // Get all stylesheets for this document
+    const baseSheet = this.baseStyleSheet.get(targetDocument);
+    const mediaSheet = this.mediaStyleSheet.get(targetDocument);
+    const modifierSheet = this.modifierStyleSheet.get(targetDocument);
+    // Clear existing rules
+    if (baseSheet) this.clearStyleSheet(baseSheet);
+    if (mediaSheet) this.clearStyleSheet(mediaSheet);
+    if (modifierSheet) this.clearStyleSheet(modifierSheet);
+    // Reinject all cached rules
+    const values = Array.from(this.classCache.values());
+    for (const {
+      rules
+    } of values) {
+      rules.forEach(_ref3 => {
+        let {
+          rule,
+          context
+        } = _ref3;
+        this.injectRuleToDocument(rule, context, targetDocument);
+      });
+    }
+  }
+  regenerateAllStyles() {
+    // Regenerate styles for all registered documents
+    for (const document of this.getAllRegisteredDocuments()) {
+      this.regenerateStyles(document);
+    }
+  }
+  injectRuleToDocument(cssRule, context, targetDocument) {
+    let styleSheet = null;
+    switch (context) {
+      case 'base':
+      case 'pseudo':
+        styleSheet = this.baseStyleSheet.get(targetDocument) || null;
+        break;
+      case 'media':
+        styleSheet = this.mediaStyleSheet.get(targetDocument) || null;
+        break;
+      case 'modifier':
+        styleSheet = this.modifierStyleSheet.get(targetDocument) || null;
+        break;
+    }
+    if (styleSheet) {
+      try {
+        styleSheet.insertRule(cssRule, styleSheet.cssRules.length);
+      } catch (e) {
+        console.error(`Error inserting CSS rule to document: "${cssRule}"`, e);
+      }
+    }
+  }
+  // Optional: Add helpers for debugging
+  printStyles(targetDocument) {
+    console.group('Current styles for document:');
+    console.group('Base styles:');
+    const baseSheet = this.baseStyleSheet.get(targetDocument);
+    if (baseSheet) {
+      Array.from(baseSheet.cssRules).forEach((rule, i) => {
+        console.log(`${i}: ${rule.cssText}`);
+      });
+    }
+    console.groupEnd();
+    console.group('Media styles:');
+    const mediaSheet = this.mediaStyleSheet.get(targetDocument);
+    if (mediaSheet) {
+      Array.from(mediaSheet.cssRules).forEach((rule, i) => {
+        console.log(`${i}: ${rule.cssText}`);
+      });
+    }
+    console.groupEnd();
+    console.group('Modifier styles:');
+    const modifierSheet = this.modifierStyleSheet.get(targetDocument);
+    if (modifierSheet) {
+      Array.from(modifierSheet.cssRules).forEach((rule, i) => {
+        console.log(`${i}: ${rule.cssText}`);
+      });
+    }
+    console.groupEnd();
+    console.groupEnd();
   }
 }
 /**
  * Maps a React event to a CSS pseudo-class.
- * @param event The React event (e.g., 'hover', 'active')
- * @returns The corresponding CSS pseudo-class or null if unsupported.
  */
 const mapEventToPseudo = event => {
   const eventMap = {
@@ -1481,17 +1541,10 @@ const mapEventToPseudo = event => {
 };
 /**
  * Generates shorthand abbreviations for CSS properties.
- * @param styledProps Array of CSS properties to abbreviate.
- * @returns An object mapping each CSS property to its abbreviation.
  */
 function generatePropertyShorthand(styledProps) {
   const propertyShorthand = {};
   const usedAbbreviations = new Set();
-  /**
-   * Generates a unique abbreviation for a given CSS property.
-   * @param prop The CSS property to abbreviate.
-   * @returns The unique abbreviation generated.
-   */
   function generateAbbreviation(prop) {
     const first = prop[0].toLowerCase();
     const last = prop[prop.length - 1].toLowerCase();
@@ -1504,7 +1557,7 @@ function generatePropertyShorthand(styledProps) {
     let uniqueAbbr = abbr;
     while (usedAbbreviations.has(uniqueAbbr)) {
       i++;
-      uniqueAbbr = abbr + prop.slice(-i, prop.length).toLowerCase();
+      uniqueAbbr = abbr + prop.slice(-i).toLowerCase();
     }
     usedAbbreviations.add(uniqueAbbr);
     return uniqueAbbr;
@@ -1523,7 +1576,6 @@ function parseDuration(duration) {
   const unit = match[2];
   return unit === 's' ? value * 1000 : value;
 }
-// Function to format a duration in milliseconds to a string with units
 function formatDuration(ms) {
   if (ms >= 1000 && ms % 1000 === 0) {
     return `${ms / 1000}s`;
@@ -1532,10 +1584,9 @@ function formatDuration(ms) {
 }
 const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
   const classes = [];
-  // Computed styles based on props
   const computedStyles = {};
-  // Handle element size
-  const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
+  // Handle size
+  const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size || null;
   if (size) {
     const sizeValue = typeof size === 'number' ? `${size}px` : size;
     computedStyles.width = sizeValue;
@@ -1562,7 +1613,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     computedStyles.marginTop = marginV;
     computedStyles.marginBottom = marginV;
   }
-  // Apply shadows if specified
+  // Handle shadows
   if (props.shadow) {
     let shadowValue;
     if (typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined) {
@@ -1573,11 +1624,12 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
       shadowValue = 2;
     }
     if (Shadows[shadowValue]) {
-      const shadowColor = Shadows[shadowValue].shadowColor;
-      const shadowOpacity = Shadows[shadowValue].shadowOpacity;
-      const shadowOffset = Shadows[shadowValue].shadowOffset;
-      const shadowRadius = Shadows[shadowValue].shadowRadius;
-      // Convert color to rgba
+      const {
+        shadowColor,
+        shadowOpacity,
+        shadowOffset,
+        shadowRadius
+      } = Shadows[shadowValue];
       const rgb = Color.hex.rgb(shadowColor);
       const rgbaColor = `rgba(${rgb.join(',')}, ${shadowOpacity})`;
       computedStyles.boxShadow = `${shadowOffset.height}px ${shadowOffset.width}px ${shadowRadius}px ${rgbaColor}`;
@@ -1594,7 +1646,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     const animationDirections = [];
     const animationFillModes = [];
     const animationPlayStates = [];
-    let cumulativeTime = 0; // Cumulative time in milliseconds
+    let cumulativeTime = 0;
     animations.forEach(animation => {
       const {
         keyframesName,
@@ -1604,16 +1656,10 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
         utilityClassManager.injectRule(keyframes);
       }
       animationNames.push(keyframesName);
-      // Parse duration and delay
-      const durationStr = animation.duration || '0s';
-      const durationMs = parseDuration(durationStr);
-      const delayStr = animation.delay || '0s';
-      const delayMs = parseDuration(delayStr);
-      // Calculate total delay for this animation
+      const durationMs = parseDuration(animation.duration || '0s');
+      const delayMs = parseDuration(animation.delay || '0s');
       const totalDelayMs = cumulativeTime + delayMs;
-      // Update cumulative time
       cumulativeTime = totalDelayMs + durationMs;
-      // Add formatted values to arrays
       animationDurations.push(formatDuration(durationMs));
       animationTimingFunctions.push(animation.timingFunction || 'ease');
       animationDelays.push(formatDuration(totalDelayMs));
@@ -1631,12 +1677,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     computedStyles.animationFillMode = animationFillModes.join(', ');
     computedStyles.animationPlayState = animationPlayStates.join(', ');
   }
-  /**
-   * Generates utility classes for a set of styles.
-   * @param styles The styles to transform into utility classes.
-   * @param context The context of the styles ('base', 'pseudo', 'media').
-   * @param modifier The modifier for pseudo-classes or media queries.
-   */
+  // Generate utility classes for computed styles
   const generateUtilityClasses = function (styles, context, modifier) {
     if (context === void 0) {
       context = 'base';
@@ -1648,46 +1689,31 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
       const value = styles[property];
       let mediaQueriesForClass = [];
       if (context === 'media') {
-        // 'modifier' can be a breakpoint or a device
         if (mediaQueries[modifier]) {
           mediaQueriesForClass = [mediaQueries[modifier]];
         } else if (devices[modifier]) {
-          mediaQueriesForClass = devices[modifier].map(mq => mediaQueries[mq]).filter(mq => mq); // Filter valid media queries
+          mediaQueriesForClass = devices[modifier].map(mq => mediaQueries[mq]).filter(mq => mq);
         }
       }
-
       if (value !== undefined && value !== '') {
-        const classNames = utilityClassManager.getClassNames(property, value, context, modifier, getColor,
-        // Pass getColor with single parameter
-        mediaQueriesForClass);
+        const classNames = utilityClassManager.getClassNames(property, value, context, modifier, getColor, mediaQueriesForClass);
         classes.push(...classNames);
-      } else {
-        if (window.isDebug === true) console.error({
-          styles,
-          value,
-          property
-        });
       }
     });
   };
-  // Generate utility classes for computed styles
   generateUtilityClasses(computedStyles, 'base');
-  // Iterate over all style properties and generate utility classes
+  // Iterate over remaining style props
   Object.keys(props).forEach(property => {
     if (property !== 'style' && (isStyleProp(property) || ['on', 'media'].includes(property))) {
       const value = props[property];
       if (typeof value === 'object' && value !== null) {
         if (property === 'on') {
-          // Styles related to events (pseudo-classes)
           Object.keys(value).forEach(event => {
             const eventStyles = value[event];
-            // Separate transition properties and other properties
-            // Extract 'animate' from event styles
             const {
               animate,
               ...otherEventStyles
             } = eventStyles;
-            // Handle animations in events
             if (animate) {
               const animations = Array.isArray(animate) ? animate : [animate];
               const animationNames = [];
@@ -1715,7 +1741,6 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
                 animationFillModes.push(animation.fillMode || 'none');
                 animationPlayStates.push(animation.playState || 'running');
               });
-              // Create an object with animation properties
               const animationStyles = {
                 animationName: animationNames.join(', '),
                 animationDuration: animationDurations.join(', '),
@@ -1726,10 +1751,8 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
                 animationFillMode: animationFillModes.join(', '),
                 animationPlayState: animationPlayStates.join(', ')
               };
-              // Merge animation styles with other event styles
               Object.assign(otherEventStyles, animationStyles);
             }
-            // Generate classes for pseudo-classes
             if (Object.keys(otherEventStyles).length > 0) {
               const pseudo = mapEventToPseudo(event);
               if (pseudo) {
@@ -1738,22 +1761,15 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
             }
           });
         } else if (property === 'media') {
-          // Conditional styles based on media queries or devices
           Object.keys(value).forEach(screenOrDevice => {
             const mediaStyles = value[screenOrDevice];
             generateUtilityClasses(mediaStyles, 'media', screenOrDevice);
           });
         }
       } else {
-        // Generate a utility class for this property and value
         if (value !== undefined && value !== '') {
           const classNames = utilityClassManager.getClassNames(property, value, 'base', '', getColor, []);
           classes.push(...classNames);
-        } else {
-          if (window.isDebug === true) console.error({
-            value,
-            property
-          });
         }
       }
     }

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