Adjust and simplify color themes, and tweak layout, focusing on bytecode

docs/lab/index.md

@@ -0,0 +1,2 @@
+# RADLR LAB 
+

site/assets/js/lab/cst.ts

@@ -82,7 +82,7 @@ function run_ast_render(input_field: NBEditorField, input: string, db: JSBytecod
   let id = 0;
 
   parser.on_reduce = reduce_data => {
-    if (reduce_data.symbols == 1) return;
+    //if (reduce_data.symbols == 1) return;
 
     let offset = symbols.length - reduce_data.symbols;
     let r_syms = symbols.splice(offset, reduce_data.symbols);

site/assets/js/lab/dragndrop_operations.ts

@@ -313,6 +313,7 @@ export class MoveFieldDragOperation extends DragOperation {
           this.drag_field.add_class("mini-candidate");
           this.placeholder = new NBBlankField(40, 40);
           this.nb.mini_col.add(this.placeholder, this.drag_target_row);
+          this.nb.mini_col.distribute_height();
           this.drag_target_col = -1
         }
       }
@@ -534,4 +535,4 @@ export class ResizeFieldOperation extends DragOperation {
       set.bottom.ele.style.transition = ""
     }
   }
-}
+};

site/assets/js/lab/index.ts

@@ -23,7 +23,7 @@ export async function init(compiler_worker_path: string) {
   grammar_input_field.set_text("");
   grammar_input_field.set_icon(`<i class="fa-solid fa-chart-gantt"></i>`);
 
-  let parser_info_field = nb.add_field(new NBContentField("Parser Info"), 1);
+  let parser_info_field = nb.add_field(new NBContentField("Parser Info"), -1);
   parser_info_field.set_content_visible(false);
   parser_info_field.set_icon(`<i class="fa-solid fa-circle-info"></i>`);
 
@@ -36,7 +36,7 @@ export async function init(compiler_worker_path: string) {
   let ast_field = nb.add_field(new NBContentField("AST Nodes"), -1);
   ast_field.set_icon(`<i class="fa-solid fa-share-nodes"></i>`);
 
-  let cst_field = nb.add_field(new NBContentField("CST Nodes"), -1);
+  let cst_field = nb.add_field(new NBContentField("CST Nodes"), 1);
   cst_field.set_icon(`<i class="fa-solid fa-sitemap"></i>`);
 
   let syntax_highlighting_field = nb.add_field(new NBContentField("Syntax Highlighting"), -1);

site/assets/js/lab/notebook.ts

@@ -329,20 +329,22 @@ export class NBColumn {
 
     let remainder_percentage = 1 / (cell_height_sum.l / (real_height - cell_height_sum.f));
     let inv_real_height = 1 / real_height;
-
-
     let normalized_heights = [];
-    for (let i = 0; i < this.cells.length; i++) {
+    let cells_length = this.cells.length;
+
+    for (let i = 0; i < cells_length; i++) {
       let height = cell_heights[i];
       if (height.f) {
         normalized_heights.push(height.h * inv_real_height);
       } else {
         normalized_heights.push(height.h * remainder_percentage * inv_real_height);
       }
     }
-    let normalized_value = 1 / normalized_heights.reduce((v, a) => v + a, 0);
-    for (let i = 0; i < this.cells.length; i++) {
-      this.cells[i].set_relative_height(normalized_heights[i] * normalized_value);
+
+    let normalized_ratio = 1 / normalized_heights.reduce((v, a) => v + a, 0);
+
+    for (let i = 0; i < cells_length; i++) {
+      this.cells[i].set_relative_height(normalized_heights[i] * normalized_ratio);
     }
   }
 
@@ -428,16 +430,15 @@ export class NBBlankField extends NBField {
     this.ele.classList.add("nb-blank-field");
     this.latched_height = height;
     this.ele.appendChild(document.createElement("div"))
-
-    if (!force_height) {
-      setTimeout(() => {
-        this.ele.style.opacity = "1"
-        this.ele.style.height = `${height}px`
-      }, 10)
-    } else {
+    setTimeout(() => {
       this.ele.style.opacity = "1"
-      this.ele.style.height = `${height}px`
-    }
+    }, 10)
+  }
+
+  set_relative_height(height: number): void {
+    setTimeout(() => {
+      this.ele.style.height = `${height * 100}%`
+    }, 10)
   }
 
   delete() {
@@ -534,7 +535,7 @@ export class NBContentField<EventObj = null, event_names = ""> extends NBField {
   }
 
   set_content_visible(is_content_visible: boolean) {
-    if (is_content_visible) { 
+    if (is_content_visible) {
       this.ele.classList.add("content-visible");
     } else {
       this.ele.classList.remove("content-visible");
@@ -705,7 +706,7 @@ export class NBEditorField extends NBContentField<NBEditorField, "text_changed">
     if (start_char == end_char) return;
     this.cm.dispatch({
       effects: [highlight_effect.of([
-        view.Decoration.mark({ attributes: { style: `color: ${color} !important` }, id: "highlight" }).range(start_char, end_char)
+        view.Decoration.mark({ attributes: { style: `color: ${color}` }, id: "highlight" }).range(start_char, end_char)
       ])]
     });
   }
@@ -718,7 +719,7 @@ export class NBEditorField extends NBContentField<NBEditorField, "text_changed">
         return (to - from) > 0
       }).map(([from, to, color]) => {
         to = Math.min(len, to);
-        return view.Decoration.mark({ attributes: { style: `color: ${color} !important` }, id: "highlight" }).range(from, to)
+        return view.Decoration.mark({ attributes: { style: `color: ${color}` }, id: "highlight" }).range(from, to)
       }))
     });
   }
@@ -791,3 +792,4 @@ export class NBEditorField extends NBContentField<NBEditorField, "text_changed">
   };
 }
 
+;

site/assets/sass/codemirror.sass

@@ -12,7 +12,7 @@
   bottom: 0
   outline: none
   position: absolute !important
-  font-size: 12px
+  font-size: 13px
 
   *
     color: none !important
@@ -79,29 +79,34 @@
 
 @mixin cm-themable($theme-map)
   .cm-editor
-    color: white
+    color: map-get($theme-map, base-fg)
+    background-color: map-get($theme-map, section-bg)
 
     .cm-line
       background-color: none
-      color: map-get($theme-map, fg-basic) !important
+      color: map-get($theme-map,  base-fg) !important
 
       &.cm-activeLine
         background-color: none
-        color: map-get($theme-map, fg-dec-2) !important
+        color: map-get($theme-map, base-fg) !important
 
     .cm-cursor
       border-color: #ac3e3e
 
     .cm-selectionBackground
-      background-color: map-get($theme-map, bg-dec-1) !important
+      background-color: map-get($theme-map, base-bg) !important
+      color: map-get($theme-map, focus-fg) !important
 
     .cm-gutters
-      color: map-get($theme-map, fg-inc-1) !important
-      background-color: map-get($theme-map, bg-basic) !important
+      * 
+        transition: none
+
+      color: map-get($theme-map, backdrop-fg) !important
+      background-color: map-get($theme-map, backdrop-bg) !important
 
       .cm-activeLineGutter
-        color: map-get($theme-map, fg-dec-1) !important
-        background-color: map-get($theme-map, bg-basic)
+        color: map-get($theme-map, header-fg) !important
+        background-color:  map-get($theme-map, header-bg) !important
 
       .syn-prod
         color: #9f9f9f

site/assets/sass/color.scss

@@ -1,3 +1,54 @@
+$theme-the-radlr-special: (
+  /*
+  colors 
+  - header fg bg
+
+  - base-line fg bg
+  - focus fg bg
+  - background fg bg
+
+  - controls fg bg :hover fg bg
+  - links fg bg :hover fg bg
+  */
+
+  class-name: "the-RADLR-special",
+
+  header-fg:   rgb(31, 31, 31),
+  header-bg:  rgb(241, 241, 241),
+
+  header-hover-fg:rgb(241, 241, 241),
+  header-hover-bg:rgb(31, 31, 31),
+
+  base-fg: rgb(31, 31, 31),
+  base-bg: rgb(241, 241, 241),
+
+  focus-fg: rgb(227, 227, 227),
+  focus-bg: rgb(61, 61, 61),
+
+  backdrop-fg: rgb(92, 92, 92),
+  backdrop-bg: rgb(227, 227, 227),
+
+  button-fg: rgb(165, 165, 165),
+  button-bg: transparent,
+
+  button-hover-fg: rgb(241, 241, 241),
+  button-hover-bg: rgb(31, 31, 31),
+
+  bc-address-fg: rgb(241, 241, 241),
+  bc-address-bg: rgb(86, 78, 153),
+
+  section-bg: rgba(0, 0, 0, 0.019),
+
+  link-fg: purple,
+  link-bg: transparent,
+
+  link-hover-fg: purple,
+  link-hover-bg: transparent,
+
+  // ------------------------------------------
+);
+
+
 $theme-please-dont-debug: (
   // 
   class-name: "please-dont-debug",
@@ -134,8 +185,9 @@ $theme-pencil: (
 
 
 $themes : ( //
-  $theme-pencil,
-  $theme-industrial-solace,
-  $theme-please-dont-debug,
-  $theme-desperados-unite,
+  $theme-the-radlr-special,
+  //$theme-pencil,
+  //$theme-industrial-solace,
+  //$theme-please-dont-debug,
+  //$theme-desperados-unite,
 );

site/assets/sass/header.sass

@@ -27,7 +27,7 @@ header
     justify-content: space-between
 
   .header-right
-    width: 100px
+    min-width: 200px
 
   #header-logo
     display: inline-block
@@ -58,15 +58,15 @@ footer
 
     #header-logo
       #radlr-logo
-        fill: map-get($theme-map, fg-basic) !important
+        fill: map-get($theme-map, button-fg) !important
 
       &:hover #radlr-logo
-        fill: map-get($theme-map, fg-inc-1) !important
+        fill: map-get($theme-map, button-hover-bg) !important
 
     #page-category-name
-      color: map-get($theme-map, fg-basic) !important
+      color: map-get($theme-map, button-fg) !important
 
     #page-category
-      border-color: map-get($theme-map, fg-inc-1)
+      border-color: map-get($theme-map, button-fg)
 
   footer