amotify 0.0.59 → 0.0.62

package/src/global/LaunchReactApplication.tsx

@@ -1,7 +1,7 @@
-import { launchID } from '@global';
-import React from 'react';
-import ReactDOMCLient from 'react-dom/client';
-import * as ReactRouterDom from 'react-router-dom';
+import { launchID } from '@global'
+import React from 'react'
+import ReactDOMCLient from 'react-dom/client'
+import * as ReactRouterDom from 'react-router-dom'
 
 export const LaunchSubApplication = ( props: amotify.global.LaunchReactApplicationInput & {
   baseElement?: HTMLElement | string
@@ -12,32 +12,32 @@ export const LaunchSubApplication = ( props: amotify.global.LaunchReactApplicati
     nonRouter = false,
     isRoot = true,
     appearances
-  } = props;
-  let base = $( baseElement );
+  } = props
+  let base = $( baseElement )
 
-  if ( !base[ 0 ] || !reactElement ) return;
+  if ( !base[ 0 ] || !reactElement ) return
   if ( appearances ) {
     let {
       roundness,
       tone,
       themeColor,
       darkMode
-    } = appearances;
+    } = appearances
 
-    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! );
-    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! );
-    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! );
-    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! );
+    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! )
+    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! )
+    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! )
+    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! )
   }
 
-  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
+  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />
 
   if ( isRoot ) {
-    $( 'body' ).addClass( 'AMOTIFY_be_body' );
-    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' );
+    $( 'body' ).addClass( 'AMOTIFY_be_body' )
+    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' )
   }
 
-  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );
+  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> )
 }
 export const LaunchReactApplication = ( props: amotify.global.LaunchReactApplicationInput ) => {
   let {
@@ -45,29 +45,29 @@ export const LaunchReactApplication = ( props: amotify.global.LaunchReactApplica
     nonRouter = false,
     isRoot = true,
     appearances
-  } = props;
-  let base = $( '#' + launchID + ' .AMOTIFY_be_root' );
-  if ( !base[ 0 ] || !reactElement ) return;
+  } = props
+  let base = $( '#' + launchID + ' .AMOTIFY_be_root' )
+  if ( !base[ 0 ] || !reactElement ) return
   if ( appearances ) {
     let {
       roundness,
       tone,
       themeColor,
       darkMode
-    } = appearances;
+    } = appearances
 
-    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! );
-    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! );
-    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! );
-    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! );
+    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! )
+    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! )
+    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! )
+    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! )
   }
 
-  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
+  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />
 
   if ( isRoot ) {
-    $( 'body' ).addClass( 'AMOTIFY_be_body' );
-    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' );
+    $( 'body' ).addClass( 'AMOTIFY_be_body' )
+    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' )
   }
 
-  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );
+  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> )
 }

package/src/global/styleConverter.tsx

@@ -1,21 +1,21 @@
-type StyleType = 'amotf_' | 'amotf_h' | 'amotf_f' | 'amotf_a' | 'amotf_bk';
+type StyleType = 'amotf_' | 'amotf_h' | 'amotf_f' | 'amotf_a' | 'amotf_bk'
 
 const FNs = {
   toConcreteBorderRadius: ( br?: amotify.UniStyles.Borders.RadiusParams ) => {
-    let roundness = amotify.config.roundness | 0;
+    let roundness = amotify.config.roundness | 0
 
     if ( br == '1.tone.primary' ) {
-      br = [ 0,2,3,4,5,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
+      br = [ 0,2,3,4,5,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
     } else if ( br == '2.tone.secondary' ) {
-      br = [ 0,1,2,3,4,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
+      br = [ 0,1,2,3,4,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
     } else if ( br == '3.tone.tertiary' ) {
-      br = [ 0,'1/3','2/3',1,2,3 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
+      br = [ 0,'1/3','2/3',1,2,3 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
     }
-    return br;
+    return br
   },
   ev: ( v: any ) => $.is.nullish( v ),
   ClassNames: ( type: StyleType,params: amotifyUniStyleParams ) => {
-    let CLS: string[] = [];
+    let CLS: string[] = []
 
     let {
       gap,
@@ -96,139 +96,139 @@ const FNs = {
       opacity,
 
       ...others
-    } = params;
+    } = params
 
     {
-      FNs.ev( disp ) || CLS.push( 'dsp' + disp );
+      FNs.ev( disp ) || CLS.push( 'dsp' + disp )
 
       if ( overflow ) {
-        let arr = $.flatArray( overflow );
-        CLS.push( 'ovfl-x-' + arr[ 0 ] );
-        CLS.push( 'ovfl-y-' + ( arr[ 1 ] || arr[ 0 ] ) );
+        let arr = $.flatArray( overflow )
+        CLS.push( 'ovfl-x-' + arr[ 0 ] )
+        CLS.push( 'ovfl-y-' + ( arr[ 1 ] || arr[ 0 ] ) )
       }
 
-      FNs.ev( position ) || ( CLS.push( 'ps' + position ) );
-      FNs.ev( textAlign ) || ( CLS.push( 'txalg' + textAlign ) );
+      FNs.ev( position ) || ( CLS.push( 'ps' + position ) )
+      FNs.ev( textAlign ) || ( CLS.push( 'txalg' + textAlign ) )
 
-      FNs.ev( fontColor ) || ( CLS.push( 'ftcl' + String( fontColor )?.replace( /\..*/,'' ) ) );
+      FNs.ev( fontColor ) || ( CLS.push( 'ftcl' + String( fontColor )?.replace( /\..*/,'' ) ) )
 
-      FNs.ev( fontSize ) || ( CLS.push( 'ftsz' + String( fontSize )?.replace( /\..*/,'' ) ) );
-      FNs.ev( fontWeight ) || ( CLS.push( 'ftwt' + fontWeight?.replace( /\..*/,'' ) ) );
+      FNs.ev( fontSize ) || ( CLS.push( 'ftsz' + String( fontSize )?.replace( /\..*/,'' ) ) )
+      FNs.ev( fontWeight ) || ( CLS.push( 'ftwt' + fontWeight?.replace( /\..*/,'' ) ) )
 
-      FNs.ev( bgc ) || CLS.push( 'bgc' + String( bgc )?.replace( /\..*/,'' ) );
+      FNs.ev( bgc ) || CLS.push( 'bgc' + String( bgc )?.replace( /\..*/,'' ) )
 
-      FNs.ev( boxShadow ) || ( CLS.push( 'bs' + boxShadow ) );
+      FNs.ev( boxShadow ) || ( CLS.push( 'bs' + boxShadow ) )
 
-      let _mrgT,_mrgR,_mrgB,_mrgL;
+      let _mrgT,_mrgR,_mrgB,_mrgL
       if ( $.is.exist( mrg ) ) {
         if ( $.is.array( mrg ) ) {
-          if ( mrg.length == 2 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = [ ...mrg,...mrg ];
-          else if ( mrg.length == 4 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = mrg;
-        } else _mrgT = _mrgR = _mrgB = _mrgL = mrg;
-        mrgT = mrgT ?? _mrgT;
-        mrgR = mrgR ?? _mrgR;
-        mrgB = mrgB ?? _mrgB;
-        mrgL = mrgL ?? _mrgL;
+          if ( mrg.length == 2 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = [ ...mrg,...mrg ]
+          else if ( mrg.length == 4 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = mrg
+        } else _mrgT = _mrgR = _mrgB = _mrgL = mrg
+        mrgT = mrgT ?? _mrgT
+        mrgR = mrgR ?? _mrgR
+        mrgB = mrgB ?? _mrgB
+        mrgL = mrgL ?? _mrgL
       }
-      FNs.ev( mrgT ) || ( CLS.push( 'mrgt' + mrgT ) );
-      FNs.ev( mrgR ) || ( CLS.push( 'mrgr' + mrgR ) );
-      FNs.ev( mrgB ) || ( CLS.push( 'mrgb' + mrgB ) );
-      FNs.ev( mrgL ) || ( CLS.push( 'mrgl' + mrgL ) );
+      FNs.ev( mrgT ) || ( CLS.push( 'mrgt' + mrgT ) )
+      FNs.ev( mrgR ) || ( CLS.push( 'mrgr' + mrgR ) )
+      FNs.ev( mrgB ) || ( CLS.push( 'mrgb' + mrgB ) )
+      FNs.ev( mrgL ) || ( CLS.push( 'mrgl' + mrgL ) )
 
-      let _pdT,_pdR,_pdB,_pdL;
+      let _pdT,_pdR,_pdB,_pdL
       if ( $.is.exist( pd ) ) {
         if ( $.is.array( pd ) ) {
-          if ( pd.length == 2 ) [ _pdT,_pdR,_pdB,_pdL ] = [ ...pd,...pd ];
-          else if ( pd.length == 4 ) [ _pdT,_pdR,_pdB,_pdL ] = pd;
-        } else _pdT = _pdR = _pdB = _pdL = pd;
-        pdT = pdT ?? _pdT;
-        pdR = pdR ?? _pdR;
-        pdB = pdB ?? _pdB;
-        pdL = pdL ?? _pdL;
+          if ( pd.length == 2 ) [ _pdT,_pdR,_pdB,_pdL ] = [ ...pd,...pd ]
+          else if ( pd.length == 4 ) [ _pdT,_pdR,_pdB,_pdL ] = pd
+        } else _pdT = _pdR = _pdB = _pdL = pd
+        pdT = pdT ?? _pdT
+        pdR = pdR ?? _pdR
+        pdB = pdB ?? _pdB
+        pdL = pdL ?? _pdL
       }
-      FNs.ev( pdT ) || ( CLS.push( 'pdt' + pdT ) );
-      FNs.ev( pdR ) || ( CLS.push( 'pdr' + pdR ) );
-      FNs.ev( pdB ) || ( CLS.push( 'pdb' + pdB ) );
-      FNs.ev( pdL ) || ( CLS.push( 'pdl' + pdL ) );
+      FNs.ev( pdT ) || ( CLS.push( 'pdt' + pdT ) )
+      FNs.ev( pdR ) || ( CLS.push( 'pdr' + pdR ) )
+      FNs.ev( pdB ) || ( CLS.push( 'pdb' + pdB ) )
+      FNs.ev( pdL ) || ( CLS.push( 'pdl' + pdL ) )
 
-      FNs.ev( T ) || ( CLS.push( 'pstt' + T ) );
-      FNs.ev( R ) || ( CLS.push( 'pstr' + R ) );
-      FNs.ev( B ) || ( CLS.push( 'pstb' + B ) );
-      FNs.ev( L ) || ( CLS.push( 'pstl' + L ) );
+      FNs.ev( T ) || ( CLS.push( 'pstt' + T ) )
+      FNs.ev( R ) || ( CLS.push( 'pstr' + R ) )
+      FNs.ev( B ) || ( CLS.push( 'pstb' + B ) )
+      FNs.ev( L ) || ( CLS.push( 'pstl' + L ) )
 
       {
         {
           if ( $.is.exist( b ) ) {
-            bT = bT ?? b;
-            bR = bR ?? b;
-            bB = bB ?? b;
-            bL = bL ?? b;
+            bT = bT ?? b
+            bR = bR ?? b
+            bB = bB ?? b
+            bL = bL ?? b
           }
-          if ( $.is.boolean( bT ) ) bT = [ 'unset','2.normal' ][ Number( bT ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bR ) ) bR = [ 'unset','2.normal' ][ Number( bR ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bB ) ) bB = [ 'unset','2.normal' ][ Number( bB ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bL ) ) bL = [ 'unset','2.normal' ][ Number( bL ) ] as amotify.UniStyles.Borders.BorderParams;
-          FNs.ev( bT ) || ( CLS.push( 'b_t_ss' + String( bT )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bR ) || ( CLS.push( 'b_r_ss' + String( bR )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bB ) || ( CLS.push( 'b_b_ss' + String( bB )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bL ) || ( CLS.push( 'b_l_ss' + String( bL )?.replace( /\..*/,'' ) ) );
+          if ( $.is.boolean( bT ) ) bT = [ 'unset','2.normal' ][ Number( bT ) ] as amotify.UniStyles.Borders.BorderParams
+          if ( $.is.boolean( bR ) ) bR = [ 'unset','2.normal' ][ Number( bR ) ] as amotify.UniStyles.Borders.BorderParams
+          if ( $.is.boolean( bB ) ) bB = [ 'unset','2.normal' ][ Number( bB ) ] as amotify.UniStyles.Borders.BorderParams
+          if ( $.is.boolean( bL ) ) bL = [ 'unset','2.normal' ][ Number( bL ) ] as amotify.UniStyles.Borders.BorderParams
+          FNs.ev( bT ) || ( CLS.push( 'b_t_ss' + String( bT )?.replace( /\..*/,'' ) ) )
+          FNs.ev( bR ) || ( CLS.push( 'b_r_ss' + String( bR )?.replace( /\..*/,'' ) ) )
+          FNs.ev( bB ) || ( CLS.push( 'b_b_ss' + String( bB )?.replace( /\..*/,'' ) ) )
+          FNs.ev( bL ) || ( CLS.push( 'b_l_ss' + String( bL )?.replace( /\..*/,'' ) ) )
         }
-        if ( $.is.exist( bWidth ) ) CLS.push( 'b_wth' + String( bWidth ) );
-        if ( $.is.exist( bColor ) ) CLS.push( 'b_cl' + String( bColor ) );
-        if ( $.is.exist( bStyle ) ) CLS.push( 'b_st' + String( bStyle ) );
+        if ( $.is.exist( bWidth ) ) CLS.push( 'b_wth' + String( bWidth ) )
+        if ( $.is.exist( bColor ) ) CLS.push( 'b_cl' + String( bColor ) )
+        if ( $.is.exist( bStyle ) ) CLS.push( 'b_st' + String( bStyle ) )
 
         {
-          let _brTL,_brTR,_brBL,_brBR;
+          let _brTL,_brTR,_brBL,_brBR
           if ( $.is.exist( br ) ) {
             if ( $.is.array( br ) ) {
-              if ( br.length == 4 ) [ _brTL,_brTR,_brBR,_brBL ] = br;
+              if ( br.length == 4 ) [ _brTL,_brTR,_brBR,_brBL ] = br
             } else {
-              _brTL = _brTR = _brBL = _brBR = br;
+              _brTL = _brTR = _brBL = _brBR = br
             }
-            brTL = brTL ?? _brTL;
-            brTR = brTR ?? _brTR;
-            brBL = brBL ?? _brBL;
-            brBR = brBR ?? _brBR;
+            brTL = brTL ?? _brTL
+            brTR = brTR ?? _brTR
+            brBL = brBL ?? _brBL
+            brBR = brBR ?? _brBR
           }
         }
-        FNs.ev( brTL ) || ( CLS.push( 'br_tl' + FNs.toConcreteBorderRadius( brTL ) ) );
-        FNs.ev( brTR ) || ( CLS.push( 'br_tr' + FNs.toConcreteBorderRadius( brTR ) ) );
-        FNs.ev( brBL ) || ( CLS.push( 'br_bl' + FNs.toConcreteBorderRadius( brBL ) ) );
-        FNs.ev( brBR ) || ( CLS.push( 'br_br' + FNs.toConcreteBorderRadius( brBR ) ) );
+        FNs.ev( brTL ) || ( CLS.push( 'br_tl' + FNs.toConcreteBorderRadius( brTL ) ) )
+        FNs.ev( brTR ) || ( CLS.push( 'br_tr' + FNs.toConcreteBorderRadius( brTR ) ) )
+        FNs.ev( brBL ) || ( CLS.push( 'br_bl' + FNs.toConcreteBorderRadius( brBL ) ) )
+        FNs.ev( brBR ) || ( CLS.push( 'br_br' + FNs.toConcreteBorderRadius( brBR ) ) )
       }
 
-      FNs.ev( opacity ) || ( CLS.push( 'op' + opacity ) );
+      FNs.ev( opacity ) || ( CLS.push( 'op' + opacity ) )
 
       if ( $.is.exist( gap ) ) {
-        let gapRow,gapCol;
-        if ( $.is.array( gap ) ) gapRow = gap[ 0 ],gapCol = gap[ 1 ];
-        else gapRow = gapCol = gap;
-        CLS.push( ...[ 'gapRow' + gapRow,'gapCol' + gapCol ] );
+        let gapRow,gapCol
+        if ( $.is.array( gap ) ) gapRow = gap[ 0 ],gapCol = gap[ 1 ]
+        else gapRow = gapCol = gap
+        CLS.push( ...[ 'gapRow' + gapRow,'gapCol' + gapCol ] )
       }
 
-      FNs.ev( flexSizing ) || ( CLS.push( 'flsz' + flexSizing ) );
-      FNs.ev( flexWrap ) || ( CLS.push( 'flwrp' + flexWrap ) );
-      FNs.ev( flexType ) || ( CLS.push( 'fltyp' + flexType ) );
-      FNs.ev( flexChilds ) || ( CLS.push( 'flchld' + flexChilds ) );
-      FNs.ev( flexGrid ) || ( CLS.push( 'flgrid' + flexGrid ) );
-      FNs.ev( verticalAlign ) || ( CLS.push( 'flvrt' + verticalAlign ) );
-      FNs.ev( horizontalAlign ) || ( CLS.push( 'flhrz' + horizontalAlign ) );
+      FNs.ev( flexSizing ) || ( CLS.push( 'flsz' + flexSizing ) )
+      FNs.ev( flexWrap ) || ( CLS.push( 'flwrp' + flexWrap ) )
+      FNs.ev( flexType ) || ( CLS.push( 'fltyp' + flexType ) )
+      FNs.ev( flexChilds ) || ( CLS.push( 'flchld' + flexChilds ) )
+      FNs.ev( flexGrid ) || ( CLS.push( 'flgrid' + flexGrid ) )
+      FNs.ev( verticalAlign ) || ( CLS.push( 'flvrt' + verticalAlign ) )
+      FNs.ev( horizontalAlign ) || ( CLS.push( 'flhrz' + horizontalAlign ) )
 
-      FNs.ev( gridCenter ) || ( CLS.push( 'grcnt' + gridCenter ) );
-      FNs.ev( gridCols ) || ( CLS.push( 'grcol' + gridCols ) );
+      FNs.ev( gridCenter ) || ( CLS.push( 'grcnt' + gridCenter ) )
+      FNs.ev( gridCols ) || ( CLS.push( 'grcol' + gridCols ) )
 
-      FNs.ev( height ) || ( CLS.push( 'hgt' + height ) );
-      FNs.ev( width ) || ( CLS.push( 'wdt' + width ) );
+      FNs.ev( height ) || ( CLS.push( 'hgt' + height ) )
+      FNs.ev( width ) || ( CLS.push( 'wdt' + width ) )
 
-      FNs.ev( unitHeight ) || ( CLS.push( 'unthgt' + unitHeight ) );
-      FNs.ev( unitWidth ) || ( CLS.push( 'untwdt' + unitWidth ) );
+      FNs.ev( unitHeight ) || ( CLS.push( 'unthgt' + unitHeight ) )
+      FNs.ev( unitWidth ) || ( CLS.push( 'untwdt' + unitWidth ) )
 
-      FNs.ev( transition ) || ( CLS.push( 'trnst' + transition ) );
+      FNs.ev( transition ) || ( CLS.push( 'trnst' + transition ) )
 
-      FNs.ev( maxHeight ) || ( CLS.push( 'maxh' + maxHeight ) );
-      FNs.ev( minHeight ) || ( CLS.push( 'minh' + minHeight ) );
-      FNs.ev( maxWidth ) || ( CLS.push( 'maxw' + maxWidth ) );
-      FNs.ev( minWidth ) || ( CLS.push( 'minw' + minWidth ) );
+      FNs.ev( maxHeight ) || ( CLS.push( 'maxh' + maxHeight ) )
+      FNs.ev( minHeight ) || ( CLS.push( 'minh' + minHeight ) )
+      FNs.ev( maxWidth ) || ( CLS.push( 'maxw' + maxWidth ) )
+      FNs.ev( minWidth ) || ( CLS.push( 'minw' + minWidth ) )
     }
 
     return {
@@ -239,7 +239,7 @@ const FNs = {
 }
 
 export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawParams ) => {
-  let params: amotifyBasicElement = { ...rawParams } as any;
+  let params: amotifyBasicElement = { ...rawParams } as any
   let {
     gradients,
     ssCardBox,
@@ -256,13 +256,13 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     isSemiBoldFont,
     isRounded,
     ...ReturnParams
-  } = params;
+  } = params
 
   if ( gradients ) {
     let {
       deg,
       colors
-    } = gradients;
+    } = gradients
 
     ReturnParams = {
       ...ReturnParams,
@@ -274,8 +274,8 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
   }
   if ( ssCardBox ) {
     if ( ssCardBox === true ) {
-      ssCardBox = 'border';
-      if ( amotify.config.tone == 'flat' ) ssCardBox = 'cloud';
+      ssCardBox = 'border'
+      if ( amotify.config.tone == 'flat' ) ssCardBox = 'cloud'
     }
 
     let exStyles: amotifyUniStyleParams = {
@@ -288,16 +288,16 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     }
 
     if ( ssCardBox == 'border' ) {
-      exStyles.border = true;
+      exStyles.border = true
     } else if ( ssCardBox == 'layer' ) {
-      exStyles.backgroundColor = '1.layer.base';
+      exStyles.backgroundColor = '1.layer.base'
     } else if ( ssCardBox == 'cloud' ) {
-      exStyles.backgroundColor = 'cloud';
+      exStyles.backgroundColor = 'cloud'
     } else if ( ssCardBox == 'shadow' ) {
-      exStyles.boxShadow = '0.normal';
+      exStyles.boxShadow = '0.normal'
     }
 
-    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = '1.remark';
+    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = '1.remark'
     ReturnParams = {
       ...exStyles,
       ...ReturnParams,
@@ -324,7 +324,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     }
   }
   if ( ssSphere ) {
-    flexCenter = flexCenter ?? true;
+    flexCenter = flexCenter ?? true
     ReturnParams = {
       padding: 0,
       unitWidth: ssSphere,
@@ -335,7 +335,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     }
   }
   if ( ssSquare ) {
-    flexCenter = flexCenter ?? true;
+    flexCenter = flexCenter ?? true
     ReturnParams = {
       padding: 0,
       unitWidth: ssSquare,
@@ -352,7 +352,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
       ReturnParams.className,
       'ssPushable'
     ].join( ' ' )
-  } );
+  } )
 
   !ssAbsoluteCovered || ( ReturnParams = {
     position: 'absolute',
@@ -361,7 +361,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     right: 0,
     bottom: 0,
     ...ReturnParams
-  } );
+  } )
   !ssTextEllipsis || ( ReturnParams = {
     overflow: 'hidden',
     ...ReturnParams,
@@ -370,7 +370,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
       textOverflow: 'ellipsis',
       ...ReturnParams.freeCSS
     }
-  } );
+  } )
   !flexNewLine || ( ReturnParams = {
     width: 1,
     flexSizing: 'none',
@@ -381,28 +381,28 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     horizontalAlign: 'center',
     verticalAlign: 'center',
     ...ReturnParams
-  } );
+  } )
   !isLightFont || ( ReturnParams = {
     ...ReturnParams,
     fontWeight: '1.light',
-  } );
+  } )
   !isSemiBoldFont || ( ReturnParams = {
     ...ReturnParams,
     fontWeight: '3.semiBold',
-  } );
+  } )
   !isBoldFont || ( ReturnParams = {
     ...ReturnParams,
     fontWeight: '4.bold',
-  } );
+  } )
   !isRounded || ( ReturnParams = {
     ...ReturnParams,
     borderRadius: 'sphere'
-  } );
+  } )
 
-  return ReturnParams as any;
+  return ReturnParams as any
 }
 export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParams ) => {
-  let params = ReadStyleSet( rawParams ) as amotifyBasicElement;
+  let params = ReadStyleSet( rawParams ) as amotifyBasicElement
 
   let {
     componentID,
@@ -418,29 +418,29 @@ export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParam
     ssEffectsOnActive,
     ssLastChildLossBorder,
     ...others
-  } = params;
+  } = params
 
-  let ClassNames = [ className ];
+  let ClassNames = [ className ]
 
   if ( ssLastChildLossBorder ) {
-    ClassNames.push( 'ssLastChildLossBorder_' + ssLastChildLossBorder );
+    ClassNames.push( 'ssLastChildLossBorder_' + ssLastChildLossBorder )
   }
 
   if ( ssEffectsOnActive ) {
-    ssEffectsOnActive = $.flatArray( ssEffectsOnActive );
-    for ( let effect of ssEffectsOnActive as any[] ) ClassNames.push( ...[ 'eff_' + effect,'eff_' + effect.split( '.' )[ 0 ] ] );
+    ssEffectsOnActive = $.flatArray( ssEffectsOnActive )
+    for ( let effect of ssEffectsOnActive as any[] ) ClassNames.push( ...[ 'eff_' + effect,'eff_' + effect.split( '.' )[ 0 ] ] )
   }
 
   {
-    let result = FNs.ClassNames( 'amotf_',others );
+    let result = FNs.ClassNames( 'amotf_',others )
 
-    ClassNames.push( result.className );
-    others = result.otherParams;
+    ClassNames.push( result.className )
+    others = result.otherParams
   }
-  if ( UnderBreakPointStyles ) ClassNames.push( FNs.ClassNames( 'amotf_bk',UnderBreakPointStyles ).className );
-  if ( hoverStyles ) ClassNames.push( FNs.ClassNames( 'amotf_h',hoverStyles ).className );
-  if ( focusStyles ) ClassNames.push( FNs.ClassNames( 'amotf_f',focusStyles ).className );
-  if ( activeStyles ) ClassNames.push( FNs.ClassNames( 'amotf_a',activeStyles ).className );
+  if ( UnderBreakPointStyles ) ClassNames.push( FNs.ClassNames( 'amotf_bk',UnderBreakPointStyles ).className )
+  if ( hoverStyles ) ClassNames.push( FNs.ClassNames( 'amotf_h',hoverStyles ).className )
+  if ( focusStyles ) ClassNames.push( FNs.ClassNames( 'amotf_f',focusStyles ).className )
+  if ( activeStyles ) ClassNames.push( FNs.ClassNames( 'amotf_a',activeStyles ).className )
 
   let states = { ...others } as any
   if ( freeCSS ) states.style = {
@@ -449,7 +449,7 @@ export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParam
   }
 
   if ( componentID || states[ 'data-component-id' ] ) {
-    states[ 'data-component-id' ] = states[ 'data-component-id' ] || componentID;
+    states[ 'data-component-id' ] = states[ 'data-component-id' ] || componentID
   }
 
   if ( ClassNames.length ) {
@@ -459,7 +459,7 @@ export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParam
       .replace( /\d+px/ig,'PIX' )
       .replace( /\s+/ig,' ' )
       .replace( /\//ig,'_' )
-      .replace( /\./ig,'-' );
+      .replace( /\./ig,'-' )
   }
-  return states;
+  return states
 }

package/src/launch.tsx

@@ -1,21 +1,21 @@
-import 'jsmin-front/@types';
-import '../@types/_';
+import 'jsmin-front/@types'
+import '../@types/_'
 
-if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange' )
 
-import { launchID } from './@variables';
+import { launchID } from './@variables'
 
-let publicURI = 'https://public.comun.jp/';
+let publicURI = 'https://public.comun.jp/'
 export { publicURI }
-import './preload';
+import './preload'
 
 import {
   deviceIdentifier,
   defaultConfig,
   SetThemeColorTag
-} from './config';
+} from './config'
 
-import './@jsminAmotifyExtension/_';
+import './@jsminAmotifyExtension/_'
 import {
   React,
   ReactDOM,
@@ -25,7 +25,7 @@ import {
   useRecycle,
   StyleConverter,
   LaunchReactApplication
-} from './@global';
+} from './@global'
 import {
   Flex,
   FlexBr,
@@ -37,7 +37,7 @@ import {
   Span,
   Paragraph,
   Img
-} from '@atoms';
+} from '@atoms'
 import {
   List,
   Accordion,
@@ -45,12 +45,12 @@ import {
   Text,
   Column,
   Row
-} from '@mols';
+} from '@mols'
 import {
-} from '@orgs';
+} from '@orgs'
 import {
   PlayGround
-} from './@templates';
+} from './@templates'
 import {
   Buttons,
   Input,
@@ -63,7 +63,7 @@ import {
   Tooltips,
   Effects,
   Cropper,
-} from '@fn';
+} from '@fn'
 
 const amotify: amotify = {
   config: defaultConfig,
@@ -83,31 +83,31 @@ const amotify: amotify = {
 export { amotify,launchID }
 
 if ( window.amotify ) {
-  global[ ( 'amotify_' + launchID ) as 'amotify' ] = amotify;
+  global[ ( 'amotify_' + launchID ) as 'amotify' ] = amotify
 } else {
-  global.amotify = amotify;
+  global.amotify = amotify
 }
 
-import './@styles/@app.scss';
+import './@styles/@app.scss'
 
-// document.oncontextmenu = () => {return false;}
+// document.oncontextmenu = () => {return false}
 $( window ).addEvent( {
   eventType: 'resize',
   eventID: 'getDeviceInfo',
   callback: () => {
-    global.amotify.config.device = deviceIdentifier();
+    global.amotify.config.device = deviceIdentifier()
 
-    let Body = $( document.body );
-    let viewHeight = window.innerHeight;
+    let Body = $( document.body )
+    let viewHeight = window.innerHeight
 
-    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() );
-    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() );
-    let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() )
+    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() )
+    let contentHeight = viewHeight - topNavHeight - footerNavHeight
 
     Body.setStyleProperty( '--viewHeight',viewHeight + 'px' )
       .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
-      .setStyleProperty( '--contentHeight',contentHeight + 'px' );
+      .setStyleProperty( '--contentHeight',contentHeight + 'px' )
   }
-} );
+} )
 
-SetThemeColorTag();
+SetThemeColorTag()