@jaisocx/tree 2.2.21 → 2.2.22

package/MediaAndStyles/Tree_main_Webpack_minimal.css

@@ -1,6 +1,3 @@
-
-/* @import url("@Tree_MediaAndStyles/responsive_size_Constants.css"); */
-
 @import url("@Tree_MediaAndStyles/presets/tree-animated-expand-button.css");
 
 

package/MediaAndStyles/Tree_main_resolved_minimal.css

@@ -1,6 +1,3 @@
-
-
-
 .tree{
     background-color: var(--background-color--tree);
 }
@@ -195,403 +192,21 @@
 
 
 
-@media only screen and (min-width: 2px) and (max-width: 239px) and (min-height: 2px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_d05_very_small_xxs_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_d05_very_small_xxs_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 2px) and (max-width: 99999px) and (min-height: 2px) and (max-height: 239px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_d05_very_small_xxs_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_d05_very_small_xxs_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 240px) and (max-width: 320px) and (min-height: 240px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e02_mobile_xs_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_e02_mobile_xs_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 240px) and (max-width: 99999px) and (min-height: 240px) and (max-height: 320px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e02_mobile_xs_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_e02_mobile_xs_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 321px) and (max-width: 375px) and (min-height: 321px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e04_mobile_s_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_e04_mobile_s_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 321px) and (max-width: 99999px) and (min-height: 321px) and (max-height: 375px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e04_mobile_s_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_e04_mobile_s_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 376px) and (max-width: 430px) and (min-height: 376px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e06_mobile_sm_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_e06_mobile_sm_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 376px) and (max-width: 99999px) and (min-height: 376px) and (max-height: 430px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e06_mobile_sm_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_e06_mobile_sm_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 431px) and (max-width: 480px) and (min-height: 431px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e08_mobile_md_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_e08_mobile_md_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 431px) and (max-width: 99999px) and (min-height: 431px) and (max-height: 480px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_e08_mobile_md_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_e08_mobile_md_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h03_tablet_s_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_h03_tablet_s_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 481px) and (max-width: 99999px) and (min-height: 481px) and (max-height: 767px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h03_tablet_s_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_h03_tablet_s_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h05_tablet_sm_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_h05_tablet_sm_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h05_tablet_sm_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_h05_tablet_sm_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1025px) and (max-height: 1194px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h07_tablet_md_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_h07_tablet_md_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1025px) and (max-width: 1194px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h07_tablet_md_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_h07_tablet_md_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1195px) and (max-height: 99999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h09_tablet_lg_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_h09_tablet_lg_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1195px) and (max-width: 99999px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_h09_tablet_lg_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_h09_tablet_lg_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l02_laptop_sm_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_l02_laptop_sm_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l02_laptop_sm_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_l02_laptop_sm_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 1440px) and (min-height: 1366px) and (max-height: 1440px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l03_laptop_md_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_l03_laptop_md_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1366px) and (max-width: 1440px) and (min-height: 1025px) and (max-height: 1440px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l03_laptop_md_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_l03_laptop_md_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 1600px) and (min-height: 1441px) and (max-height: 1600px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l07_laptop_lg_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_l07_laptop_lg_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1441px) and (max-width: 1600px) and (min-height: 1025px) and (max-height: 1600px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_l07_laptop_lg_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_l07_laptop_lg_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 1920px) and (min-height: 1601px) and (max-height: 1920px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s02_display_xl_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_s02_display_xl_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1601px) and (max-width: 1920px) and (min-height: 1025px) and (max-height: 1920px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s02_display_xl_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_s02_display_xl_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 2560px) and (min-height: 1921px) and (max-height: 2560px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s04_display_xxl_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_s04_display_xxl_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 1921px) and (max-width: 2560px) and (min-height: 1025px) and (max-height: 2560px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s04_display_xxl_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_s04_display_xxl_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 3840px) and (min-height: 2561px) and (max-height: 3840px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s08_display_qhd_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_s08_display_qhd_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 2561px) and (max-width: 3840px) and (min-height: 1025px) and (max-height: 3840px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_s08_display_qhd_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_s08_display_qhd_landscape__Tree__theme_base;
-  }
-}
 
 
-@media only screen and (min-width: 1025px) and (max-width: 7680px) and (min-height: 3841px) and (max-height: 7680px) and (orientation: portrait) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t04_tv_4k_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_t04_tv_4k_portrait__Tree__theme_base;
-  }
-}
 
-@media only screen and (min-width: 3841px) and (max-width: 7680px) and (min-height: 1025px) and (max-height: 7680px) and (orientation: landscape) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t04_tv_4k_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_t04_tv_4k_landscape__Tree__theme_base;
-  }
-}
 
 
-@media only screen and (min-width: 1025px) and (max-width: 15360px) and (min-height: 7681px) and (max-height: 15360px) and (orientation: portrait) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t08_tv_8k_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_t08_tv_8k_portrait__Tree__theme_base;
-  }
-}
 
-@media only screen and (min-width: 7681px) and (max-width: 15360px) and (min-height: 1025px) and (max-height: 15360px) and (orientation: landscape) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t08_tv_8k_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_t08_tv_8k_landscape__Tree__theme_base;
-  }
-}
 
 
-@media only screen and (min-width: 1025px) and (max-width: 25360px) and (min-height: 15361px) and (max-height: 25360px) and (orientation: portrait) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t16_tv_16k_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_t16_tv_16k_portrait__Tree__theme_base;
-  }
-}
 
-@media only screen and (min-width: 15361px) and (max-width: 25360px) and (min-height: 1025px) and (max-height: 25360px) and (orientation: landscape) {
 
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t16_tv_16k_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_t16_tv_16k_landscape__Tree__theme_base;
-  }
-}
-
-
-@media only screen and (min-width: 1025px) and (max-width: 999999px) and (min-height: 25361px) and (max-height: 999999px) and (orientation: portrait) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t99_tv_xxxl_portrait;
-    --responsive_size__Tree__theme_base: responsive_size_t99_tv_xxxl_portrait__Tree__theme_base;
-  }
-}
-
-@media only screen and (min-width: 25361px) and (max-width: 999999px) and (min-height: 1025px) and (max-height: 999999px) and (orientation: landscape) {
-
-  .jsx .Tree {
-    --theme_name: Tree__theme_base;
-    --theme_name__Tree: theme_base;
-    --responsive_size: responsive_size_t99_tv_xxxl_landscape;
-    --responsive_size__Tree__theme_base: responsive_size_t99_tv_xxxl_landscape__Tree__theme_base;
-  }
-}
 
 
 
@@ -620,6 +235,10 @@
 }
 
 
+
+
+
+
 .tree {
   --node-margin: 0 0 0.4rem 0;
 
@@ -666,6 +285,13 @@
 }
 
 
+
+
+
+
+
+
+
 .tree {
     background-color: var(--background-color--tree);
 }
@@ -970,3 +596,7 @@ ul.json-context-menu-holder li {
     }
 }
 
+
+
+
+

package/index.preview.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx">
+<html lang="en" id="js_tree_preview" class="jsx">
 <head>
 
   <link
@@ -34,6 +34,17 @@
 
 
 
+  <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      href-fallback="../media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+
+
+
   <link
     rel="stylesheet"
     type="text/css"
@@ -41,13 +52,12 @@
     href="MediaAndStyles/Tree_main_resolved_minimal.css"
   />
 
-  <!--# Theme funny -->
-<!--  <link-->
-<!--    rel="stylesheet"-->
-<!--    type="text/css"-->
-<!--    charset="utf-8"-->
-<!--    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"-->
-<!--  />-->
+  <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"
+  />
 
 
 
@@ -69,11 +79,13 @@
         --theme-button--font-size: 0.795rem;
       }
 
-      .jsx .theme-funny.tree {
-        --node-label--font-family: Niconne;
+      .jsx#js_tree_preview .tree,
+      .jsx#js_tree_preview .tree.theme-funny {
+        --node-label--font-family: LibreFranklin;
       }
 
 
+
       @media screen and ( min-width: 2px) and (max-width: 767px) {
         .jsx {
           --jsx--css-clean-start-2--site--min-width: 100%;
@@ -94,41 +106,37 @@
 
     <style name="theme_buttons">
 
-        .jsx themebuttons {
-          width: fit-content;
-          display: grid;
-          grid-auto-flow: column;
-          column-gap: 3rem;
-          margin: 0.9rem 0px 1.6rem 0px;
-        }
-
-        .jsx themebuttons button {
-          width: var(--theme-button--width);
-          font-size: var(--theme-button--font-size);
-        }
+      .jsx button {
+        background-color: transparent;
+        text-align: left;
+      }
 
-        .current::after {
-          content: "";
-          position: absolute;
-          bottom: -0.3rem;
-          left: 0;
-          width: 100%;
-          height: 0;
-          max-height: 0;
-          overflow-y: hidden;
-          border-bottom-width: 0.14rem;
-          border-bottom-style: solid;
-          border-bottom-color: var(--clean-start__text-color);
-        }
+      .jsx themebuttons {
+        width: fit-content;
+        display: grid;
+        grid-auto-flow: column;
+        column-gap: 3rem;
+        margin: 0.9rem 0px 1.6rem 0px;
+      }
 
-        .jsx button {
-          background-color: transparent;
-          text-align: left;
-        }
+      .jsx themebuttons button {
+        width: var(--theme-button--width);
+        font-size: var(--theme-button--font-size);
+      }
 
-        #tooltip-button {
-          font-family: fantasy;
-        }
+      .current::after {
+        content: "";
+        position: absolute;
+        bottom: -0.3rem;
+        left: 0;
+        width: 100%;
+        height: 0;
+        max-height: 0;
+        overflow-y: hidden;
+        border-bottom-width: 0.14rem;
+        border-bottom-style: solid;
+        border-bottom-color: var(--clean-start__text-color);
+      }
 
     </style>
 
@@ -170,8 +178,6 @@
 
     </style>
 
-
-
 </head>
 <body>
 
@@ -179,9 +185,9 @@
 
     <content>
 
-        <h1>Tree styling JSON Data</h1>
-        <h2>@jaisocx/tree</h2>
-        <h3>tree_preview_prod.html</h3>
+        <h1> Tree styling JSON Data </h1>
+        <h2> @jaisocx/tree </h2>
+        <h3> index.preview.html </h3>
 
         <description>
             Css sites tool styling json data to a tree view. Css for sites tools are packed with @jaisocx/css-importer.
@@ -213,7 +219,6 @@
     <h2>load by url ( works only when published by an http server )</h2>
     <div id="example-tree-holder_load_by_url"></div>
 
-
   </main>
 
 </body>
@@ -260,22 +265,7 @@
         ]
     },
     "font": {
-      "theme_font_LibreFranklin": [
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Medium.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
-      ],
-      "theme_font_Niconne": [
-        "https://sandbox.brightday.email/cdn/www/fonts/Niconne/Niconne-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Niconne_cdn.css"
-      ],
-      "theme_font_Baloo_Paaji_2": [
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Medium.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-SemiBold.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Baloo_Paaji_2_cdn.css"
-      ]
+      "theme_font_LibreFranklin": []
     }
   };
 

package/package.json

@@ -1,8 +1,8 @@
 {
+  "author": "ILLIA POLIANSKYI, Jaisocx Company",
   "name": "@jaisocx/tree",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "description": "Sites tool, styling json",
-  "author": "Jaisocx Company",
   "keywords": [
     "json",
     "tree"
@@ -36,7 +36,8 @@
   "optionalDependencies": {
     "@jaisocx/css_clean_start_lite": "^1.0.3",
     "@jaisocx/preloader": "~2.3.2",
-    "@jaisocx/theme-turn-on": "~1.0.4"
+    "@jaisocx/theme-turn-on": "~1.0.4",
+    "@jaisocx/media_tools_fonts_base": "~1.2.2"
   },
   "type": "module",
   "main": "./transpiled/CommonJS/index.js",

package/tree_preview_prod.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx">
+<html lang="en" id="js_tree_preview" class="jsx">
 <head>
 
   <link
@@ -34,6 +34,17 @@
 
 
 
+  <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      href-fallback="../media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+
+
+
   <link
     rel="stylesheet"
     type="text/css"
@@ -41,13 +52,12 @@
     href="MediaAndStyles/Tree_main_resolved_minimal.css"
   />
 
-  <!--# Theme funny -->
-<!--  <link-->
-<!--    rel="stylesheet"-->
-<!--    type="text/css"-->
-<!--    charset="utf-8"-->
-<!--    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"-->
-<!--  />-->
+  <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="MediaAndStyles/themes/theme-funny/tree_theme-funny.css"
+  />
 
 
 
@@ -69,11 +79,13 @@
         --theme-button--font-size: 0.795rem;
       }
 
-      .jsx .theme-funny.tree {
-        --node-label--font-family: Niconne;
+      .jsx#js_tree_preview .tree,
+      .jsx#js_tree_preview .tree.theme-funny {
+        --node-label--font-family: LibreFranklin;
       }
 
 
+
       @media screen and ( min-width: 2px) and (max-width: 767px) {
         .jsx {
           --jsx--css-clean-start-2--site--min-width: 100%;
@@ -94,41 +106,37 @@
 
     <style name="theme_buttons">
 
-        .jsx themebuttons {
-          width: fit-content;
-          display: grid;
-          grid-auto-flow: column;
-          column-gap: 3rem;
-          margin: 0.9rem 0px 1.6rem 0px;
-        }
-
-        .jsx themebuttons button {
-          width: var(--theme-button--width);
-          font-size: var(--theme-button--font-size);
-        }
+      .jsx button {
+        background-color: transparent;
+        text-align: left;
+      }
 
-        .current::after {
-          content: "";
-          position: absolute;
-          bottom: -0.3rem;
-          left: 0;
-          width: 100%;
-          height: 0;
-          max-height: 0;
-          overflow-y: hidden;
-          border-bottom-width: 0.14rem;
-          border-bottom-style: solid;
-          border-bottom-color: var(--clean-start__text-color);
-        }
+      .jsx themebuttons {
+        width: fit-content;
+        display: grid;
+        grid-auto-flow: column;
+        column-gap: 3rem;
+        margin: 0.9rem 0px 1.6rem 0px;
+      }
 
-        .jsx button {
-          background-color: transparent;
-          text-align: left;
-        }
+      .jsx themebuttons button {
+        width: var(--theme-button--width);
+        font-size: var(--theme-button--font-size);
+      }
 
-        #tooltip-button {
-          font-family: fantasy;
-        }
+      .current::after {
+        content: "";
+        position: absolute;
+        bottom: -0.3rem;
+        left: 0;
+        width: 100%;
+        height: 0;
+        max-height: 0;
+        overflow-y: hidden;
+        border-bottom-width: 0.14rem;
+        border-bottom-style: solid;
+        border-bottom-color: var(--clean-start__text-color);
+      }
 
     </style>
 
@@ -170,8 +178,6 @@
 
     </style>
 
-
-
 </head>
 <body>
 
@@ -213,7 +219,6 @@
     <h2>load by url ( works only when published by an http server )</h2>
     <div id="example-tree-holder_load_by_url"></div>
 
-
   </main>
 
 </body>
@@ -260,22 +265,7 @@
         ]
     },
     "font": {
-      "theme_font_LibreFranklin": [
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Medium.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
-      ],
-      "theme_font_Niconne": [
-        "https://sandbox.brightday.email/cdn/www/fonts/Niconne/Niconne-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Niconne_cdn.css"
-      ],
-      "theme_font_Baloo_Paaji_2": [
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Medium.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-Regular.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts/Baloo_Paaji_2/static/BalooPaaji2-SemiBold.ttf",
-        "https://sandbox.brightday.email/cdn/www/fonts_css/font_Baloo_Paaji_2_cdn.css"
-      ]
+      "theme_font_LibreFranklin": []
     }
   };