sunrize 1.11.3 → 1.11.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -91,7 +91,7 @@
     "@vscode/codicons": "^0.0.41",
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^38.4.0",
+    "electron": "^39.0.0",
     "electron-prompt": "^1.7.0",
     "electron-squirrel-startup": "^1.0.1",
     "electron-tabs": "^1.0.4",
@@ -100,7 +100,7 @@
     "jquery-ui-dist": "^1.13.3",
     "jstree": "^3.3.17",
     "material-icons": "^1.13.14",
-    "material-symbols": "^0.38.0",
+    "material-symbols": "^0.39.1",
     "md5": "^2.3.0",
     "mime-types": "^3.0.1",
     "monaco-editor": "^0.54.0",
@@ -110,7 +110,7 @@
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.1.1",
-    "x_ite": "^12.1.3",
+    "x_ite": "^12.1.5",
     "x3d-traverse": "^1.0.22"
   }
 }

package/src/Application/Document.js

@@ -55,8 +55,9 @@ module .exports = class Document extends Interface
     */
    async initialize ()
    {
-      $("html") .attr ("platform", process .platform);
-      $("body") .addClass ("modal");
+      $("html")
+         .attr ("platform", process .platform)
+         .addClass ("read-only");
 
       // Actions
 
@@ -192,7 +193,7 @@ module .exports = class Document extends Interface
       await this .restoreFile ();
 
       if (!this .isInitialScene)
-         $("body") .removeClass ("modal");
+         $("html") .removeClass ("read-only");
    }
 
    configure ()

package/src/Editors/Console.js

@@ -11,23 +11,12 @@ const
 module .exports = class Console extends Interface
 {
    HISTORY_MAX = 100;
-   CONSOLE_MAX = 1000;
-
-   logLevels = [
-      "debug",
-      "log",
-      "warn",
-      "error",
-   ];
-
-   logClasses = ["", "", "filled", "filled"];
 
    constructor (element)
    {
       super (`Sunrize.Console.${element .attr ("id")}.`);
 
       this .suspendConsole     = false;
-      this .messageTime        = 0;
       this .historyIndex       = 0;
       this .history            = [ ];
       this .addMessageCallback = this .addMessage .bind (this);
@@ -124,7 +113,7 @@ module .exports = class Console extends Interface
       // Input
 
       this .textarea = $("<textarea></textarea>")
-         .attr ("placeholder", _("Evaluate X3D Script code here, e.g. type `Browser.name`."))
+         .attr ("placeholder", _("Evaluate Script node code here, e.g. type `Browser.name`."))
          .attr ("tabindex", 0)
          .on ("keydown", event => this .onkeydown (event))
          .on ("keyup", event => this .onkeyup (event))
@@ -175,6 +164,8 @@ module .exports = class Console extends Interface
       this .scriptNode .setup ();
    }
 
+   CONSOLE_MAX = 1000;
+
    // Add strings to exclude here:
    excludes = [
       "The vm module of Node.js is unsupported",
@@ -184,41 +175,31 @@ module .exports = class Console extends Interface
       // "Invalid asm.js: Invalid member of stdlib",
    ];
 
+   messageTime = 0;
+
+   logLevels = [
+      "debug",
+      "log",
+      "warn",
+      "error",
+   ];
+
    addMessage (event, level, sourceId, line, message)
    {
       if (this .excludes .some (exclude => message .includes (exclude)))
          return;
 
-      const
-         classes = [this .logLevels [level] ?? "log", this .logClasses [level]],
-         title   = sourceId ? `${sourceId}:${line}`: "";
-
-      const text = $(message .split ("\n")
-         .map (line => $("<p></p>")
-            .addClass (classes)
-            .attr ("title", title)
-            .text (line)
-            .get (0)));
+      const text = $("<p></p>")
+         .addClass (this .logLevels [level] ?? "log")
+         .attr ("title", sourceId ? `${sourceId}:${line}`: "")
+         .text (message);
 
-      if (this .messageTime && performance .now () - this .messageTime > 1000)
+      if (performance .now () - this .messageTime > 1000)
          this .output .append ($("<p></p>") .addClass ("splitter"));
 
       this .messageTime = performance .now ();
 
-      const
-         children = this .output .children (),
-         last     = children .last ();
-
-      if (last .hasClass (this .logLevels [level]))
-      {
-         last .css ("margin-bottom", "0");
-         text .css ("margin-top",    "0");
-         last .css ("border-bottom", "none");
-         text .css ("border-top",    "none");
-      }
-
-      children .slice (0, Math .max (children .length - this .CONSOLE_MAX, 0)) .remove ();
-
+      this .output .children (`:not(:nth-last-child(-n+${this .CONSOLE_MAX}))`) .remove ();
       this .output .append (text);
       this .output .scrollTop (this .output .prop ("scrollHeight"));
 

package/src/Editors/OutlineView.js

@@ -368,6 +368,7 @@ module .exports = class OutlineView extends Interface
    expandSceneSubtreeComplete (specialElements, elements)
    {
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
 
       // Reopen externprotos, protos, imported, exported nodes.
 
@@ -846,7 +847,8 @@ module .exports = class OutlineView extends Interface
 
    expandNodeComplete (protos, scenes, elements)
    {
-      this .requestUpdateRouteGraph ()
+      this .requestUpdateRouteGraph ();
+      this .updateQtips ();
 
       // Auto expand SFNodes
 
@@ -854,12 +856,12 @@ module .exports = class OutlineView extends Interface
       {
          const
             element = $(e),
-            field   = this .getField (element)
+            field   = this .getField (element);
 
          if (field .getValue ())
          {
-            element .data ("auto-expand", true)
-            element .jstree ("open_node", element)
+            element .data ("auto-expand", true);
+            element .jstree ("open_node", element);
          }
       }
 
@@ -869,12 +871,12 @@ module .exports = class OutlineView extends Interface
       {
          const
             element = $(e),
-            field   = this .getField (element)
+            field   = this .getField (element);
 
          if (field .length && field .length <= this .autoExpandMaxChildren)
          {
-            element .data ("auto-expand", true)
-            element .jstree ("open_node", element)
+            element .data ("auto-expand", true);
+            element .jstree ("open_node", element);
          }
       }
 
@@ -884,11 +886,11 @@ module .exports = class OutlineView extends Interface
       {
          const
             element = $(e),
-            node    = this .getNode (element)
+            node    = this .getNode (element);
 
          if (node .getUserData (_expanded) && element .jstree ("is_closed", element))
          {
-            element .jstree ("open_node", element)
+            element .jstree ("open_node", element);
          }
       }
 
@@ -898,12 +900,12 @@ module .exports = class OutlineView extends Interface
       {
          const
             element = $(e),
-            scene   = this .getNode (element)
+            scene   = this .getNode (element);
 
          if (scene .getUserData (_expanded) && element .jstree ("is_closed", element))
          {
-            element .data ("auto-expand", true)
-            element .jstree ("open_node", element)
+            element .data ("auto-expand", true);
+            element .jstree ("open_node", element);
          }
       }
 
@@ -913,12 +915,12 @@ module .exports = class OutlineView extends Interface
       {
          const
             element = $(e),
-            field   = this .getField (element)
+            field   = this .getField (element);
 
          if (field .getUserData (_expanded) && element .jstree ("is_closed", element))
          {
-            element .data ("auto-expand", true)
-            element .jstree ("open_node", element)
+            element .data ("auto-expand", true);
+            element .jstree ("open_node", element);
          }
       }
    }
@@ -1862,7 +1864,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          name    = $(event .currentTarget),
-         element = $(event .currentTarget) .closest (".externproto, .proto, .node, .special", this .sceneGraph),
+         element = name .closest (".externproto, .proto, .node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .objects .get (parseInt (element .attr ("node-id")));
 
       // Handle NULL node element.
@@ -1878,7 +1880,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          name         = $(event .currentTarget),
-         element      = $(event .currentTarget) .closest (".field, .special", this .sceneGraph),
+         element      = name .closest (".field, .special", this .sceneGraph),
          node         = this .objects .get (parseInt (element .attr ("node-id"))),
          field        = this .objects .get (parseInt (element .attr ("field-id"))),
          fieldElement = X3DUOM .find (`ConcreteNode[name="${node .getTypeName ()}"] field[name="${field .getName ()}"]`);
@@ -2218,6 +2220,7 @@ module .exports = class OutlineView extends Interface
       }
 
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    expandSFNode (parent, node, field, type, full)
@@ -2299,6 +2302,7 @@ module .exports = class OutlineView extends Interface
       }
 
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    nodeIcons = new Map ([
@@ -2390,7 +2394,9 @@ module .exports = class OutlineView extends Interface
       // Expand children.
 
       child .show ();
+
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    onkeydownField (input, event)
@@ -2495,8 +2501,10 @@ module .exports = class OutlineView extends Interface
 
       // Expand children.
 
-      child .show ()
-      this .requestUpdateRouteGraph ()
+      child .show ();
+
+      this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    onkeydownArrayField (textarea, event)
@@ -2905,6 +2913,7 @@ module .exports = class OutlineView extends Interface
          element .jstree ("open_node", element);
 
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    removeSubtree (element)
@@ -3716,6 +3725,7 @@ module .exports = class OutlineView extends Interface
    onresize ()
    {
       this .requestUpdateRouteGraph ();
+      this .updateQtips ();
    }
 
    addFieldButtons (parent, child, node)
@@ -3819,6 +3829,11 @@ module .exports = class OutlineView extends Interface
       // Update route graph.
    }
 
+   updateQtips ()
+   {
+      this .sceneGraph .find ("[data-hasqtip]") .qtip ?.("reposition");
+   }
+
    onDragStartExternProto () { }
 
    onDragStartProto () { }

package/src/Editors/SceneProperties.js

@@ -2,6 +2,7 @@
 
 const
    $           = require ("jquery"),
+   electron    = require ("electron"),
    capitalize  = require ("capitalize"),
    Dialog      = require ("../Controls/Dialog"),
    Tabs        = require ("../Controls/Tabs"),
@@ -10,7 +11,6 @@ const
    Editor      = require ("../Undo/Editor"),
    UndoManager = require ("../Undo/UndoManager"),
    _           = require ("../Application/GetText");
-const { height } = require("../Bits/X3DUOM");
 
 require ("../Fields");
 
@@ -472,6 +472,7 @@ module .exports = new class SceneProperties extends Dialog
                   .attr ("placeholder", _("Insert meta key here."))
                   .val (key) .on ("change", (event) => this .changeMetaData (event, key))))
             .append ($("<td></td>")
+               .addClass ("meta-value")
                .append ($("<input></input>")
                   .attr ("index", 1)
                   .attr ("placeholder", _("Insert meta value here."))
@@ -485,6 +486,27 @@ module .exports = new class SceneProperties extends Dialog
                   .text ("delete_forever")
                   .on ("click", (event) => this .removeMetaData (event, key))));
 
+         // Add Open Link in Browser button if it matches a link somewhere in value.
+         {
+            const
+               http  = /(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))/,
+               match = value .match (http);
+
+            if (match)
+            {
+               const column = row .find ("input[index=1]") .parent ();
+
+               $("<span></span>")
+                  .addClass ("open-link")
+                  .attr ("title", _("Open link in web browser."))
+                  .css ("font-size", "120%")
+                  .addClass (["material-icons", "button"])
+                  .text ("open_in_new")
+                  .appendTo (column)
+                  .on ("click", () => electron .shell .openExternal (match [1]));
+            }
+         }
+
          rows .push (row);
       }
 

package/src/Editors/ScriptEditor.js

@@ -139,6 +139,7 @@ module .exports = class ScriptEditor extends Interface
 
       // Setup.
 
+      this .addLanguages ();
       this .setup ();
    }
 
@@ -157,6 +158,178 @@ module .exports = class ScriptEditor extends Interface
       monaco .editor .setTheme (shouldUseDarkColors ? "vs-dark" : "vs-light");
    }
 
+   async addLanguages ()
+   {
+      const monaco = await this .getMonaco ();
+
+      const conf = {
+         comments: {
+            lineComment: '//',
+            blockComment: ['/*', '*/']
+         },
+         brackets: [
+            ['{', '}'],
+            ['[', ']'],
+            ['(', ')']
+         ],
+         autoClosingPairs: [
+            { open: '[', close: ']' },
+            { open: '{', close: '}' },
+            { open: '(', close: ')' },
+            { open: "'", close: "'", notIn: ['string', 'comment'] },
+            { open: '"', close: '"', notIn: ['string'] }
+         ],
+         surroundingPairs: [
+            { open: '{', close: '}' },
+            { open: '[', close: ']' },
+            { open: '(', close: ')' },
+            { open: '"', close: '"' },
+            { open: "'", close: "'" }
+         ]
+      };
+
+      const keywords = [
+         'const', 'uniform', 'break', 'continue',
+         'do', 'for', 'while', 'if', 'else', 'switch', 'case', 'in', 'out', 'inout', 'true', 'false',
+         'invariant', 'discard', 'return', 'sampler2D', 'samplerCube', 'sampler3D', 'struct',
+         'radians', 'degrees', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'pow', 'sinh', 'cosh', 'tanh', 'asinh', 'acosh', 'atanh',
+         'exp', 'log', 'exp2', 'log2', 'sqrt', 'inversesqrt', 'abs', 'sign', 'floor', 'ceil', 'round', 'roundEven', 'trunc', 'fract', 'mod', 'modf',
+         'min', 'max', 'clamp', 'mix', 'step', 'smoothstep', 'length', 'distance', 'dot', 'cross ',
+         'determinant', 'inverse', 'normalize', 'faceforward', 'reflect', 'refract', 'matrixCompMult', 'outerProduct', 'transpose', 'lessThan ',
+         'lessThanEqual', 'greaterThan', 'greaterThanEqual', 'equal', 'notEqual', 'any', 'all', 'not', 'packUnorm2x16', 'unpackUnorm2x16', 'packSnorm2x16', 'unpackSnorm2x16', 'packHalf2x16', 'unpackHalf2x16',
+         'dFdx', 'dFdy', 'fwidth', 'textureSize', 'texture', 'textureProj', 'textureLod', 'textureGrad', 'texelFetch', 'texelFetchOffset',
+         'textureProjLod', 'textureLodOffset', 'textureGradOffset', 'textureProjLodOffset', 'textureProjGrad', 'intBitsToFloat', 'uintBitsToFloat', 'floatBitsToInt', 'floatBitsToUint', 'isnan', 'isinf',
+         'vec2', 'vec3', 'vec4', 'ivec2', 'ivec3', 'ivec4', 'uvec2', 'uvec3', 'uvec4', 'bvec2', 'bvec3', 'bvec4',
+         'mat2', 'mat3', 'mat2x2', 'mat2x3', 'mat2x4', 'mat3x2', 'mat3x3', 'mat3x4', 'mat4x2', 'mat4x3', 'mat4x4', 'mat4',
+         'float', 'int', 'uint', 'void', 'bool',
+      ];
+
+      const language = {
+         tokenPostfix: '.glsl',
+         // Set defaultToken to invalid to see what you do not tokenize yet
+         defaultToken: 'invalid',
+         keywords,
+         operators: [
+            '=',
+            '>',
+            '<',
+            '!',
+            '~',
+            '?',
+            ':',
+            '==',
+            '<=',
+            '>=',
+            '!=',
+            '&&',
+            '||',
+            '++',
+            '--',
+            '+',
+            '-',
+            '*',
+            '/',
+            '&',
+            '|',
+            '^',
+            '%',
+            '<<',
+            '>>',
+            '>>>',
+            '+=',
+            '-=',
+            '*=',
+            '/=',
+            '&=',
+            '|=',
+            '^=',
+            '%=',
+            '<<=',
+            '>>=',
+            '>>>='
+         ],
+         symbols: /[=><!~?:&|+\-*\/\^%]+/,
+         escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+         integersuffix: /([uU](ll|LL|l|L)|(ll|LL|l|L)?[uU]?)/,
+         floatsuffix: /[fFlL]?/,
+         encoding: /u|u8|U|L/,
+
+         tokenizer: {
+            root: [
+               // identifiers and keywords
+               [
+               /[a-zA-Z_]\w*/,
+               {
+                  cases: {
+                     '@keywords': { token: 'keyword.$0' },
+                     '@default': 'identifier'
+                  }
+               }
+               ],
+
+               // Preprocessor directive (#define)
+               [/^\s*#\s*\w+/, 'keyword.directive'],
+
+               // Version
+               [/#version\s+\d+\s+es/, 'keyword.directive'],
+
+               // whitespace
+               { include: '@whitespace' },
+
+               // delimiters and operators
+               [/[{}()\[\]]/, '@brackets'],
+               [/@symbols/, {
+               cases: {
+                  '@operators': 'operator',
+                  '@default': ''
+               }
+               }],
+
+               // numbers
+               [/\d*\d+[eE]([\-+]?\d+)?(@floatsuffix)/, 'number.float'],
+               [/\d*\.\d+([eE][\-+]?\d+)?(@floatsuffix)/, 'number.float'],
+               [/0[xX][0-9a-fA-F']*[0-9a-fA-F](@integersuffix)/, 'number.hex'],
+               [/0[0-7']*[0-7](@integersuffix)/, 'number.octal'],
+               [/0[bB][0-1']*[0-1](@integersuffix)/, 'number.binary'],
+               [/\d[\d']*\d(@integersuffix)/, 'number'],
+               [/\d(@integersuffix)/, 'number'],
+
+               // delimiter: after number because of .\d floats
+               [/[;,.]/, 'delimiter']
+            ],
+
+            comment: [
+               [/[^\/*]+/, 'comment'],
+               [/\/\*/, 'comment', '@push'],
+               ['\\*/', 'comment', '@pop'],
+               [/[\/*]/, 'comment']
+            ],
+
+            // Does it have strings?
+            string: [
+               [/[^\\"]+/, 'string'],
+               [/@escapes/, 'string.escape'],
+               [/\\./, 'string.escape.invalid'],
+               [/"/, {
+               token: 'string.quote',
+               bracket: '@close',
+               next: '@pop'
+               }]
+            ],
+
+            whitespace: [
+               [/[ \t\r\n]+/, 'white'],
+               [/\/\*/, 'comment', '@comment'],
+               [/\/\/.*$/, 'comment']
+            ]
+         }
+      };
+
+      monaco .languages .register ({ id: "glsl" });
+      monaco .languages .setMonarchTokensProvider ("glsl", language);
+      monaco .languages .setLanguageConfiguration ("glsl", conf);
+   }
+
    async setNode (node)
    {
       this .directOutputButton .hide ();
@@ -169,7 +342,7 @@ module .exports = class ScriptEditor extends Interface
          this .node ._loadState .removeFieldCallback (this);
 
          for (const field of this .node .getUserDefinedFields ())
-            field .removeInterest ("setDeclarations", this);
+            field .removeInterest ("updateDeclarations", this);
 
          switch (this .node .getTypeName ())
          {
@@ -258,7 +431,7 @@ module .exports = class ScriptEditor extends Interface
 
    #declarations;
 
-   setDeclarations (monaco)
+   updateDeclarations (monaco)
    {
       if (!this .node .getType () .includes (X3D .X3DConstants .Script))
          return;
@@ -362,6 +535,7 @@ module .exports = class ScriptEditor extends Interface
             declare const X3DField: typeof X3D. X3DField;
             declare const X3DArrayField: typeof X3D. X3DArrayField;
             ${Array .from (this .browser .fieldTypes)
+               .filter (type => !this .#internalTypes .has (type .type))
                .map (type => `declare const ${type .typeName}: typeof X3D .${type .typeName};`)
                .join ("\n")}
             declare const TRUE: true;
@@ -369,15 +543,15 @@ module .exports = class ScriptEditor extends Interface
             declare const NULL: null;
             declare function print (... args: any []): void;
             ${fields .join ("\n")};
-         `},
-      ]);
+         `,
+      }]);
    }
 
    editors = new Map ();
 
    languages = {
       "Script": "javascript",
-      "ShaderPart": "c",
+      "ShaderPart": "glsl",
    };
 
    async getEditor (node)
@@ -407,11 +581,11 @@ module .exports = class ScriptEditor extends Interface
 
       editor .viewState = editor .saveViewState ();
 
-      editor .onDidFocusEditorWidget (() => this .setDeclarations (monaco));
+      editor .onDidFocusEditorWidget (() => this .updateDeclarations (monaco));
       editor .onDidBlurEditorWidget (() => this .apply ());
       editor .onKeyDown (event => this .onKeyDown (event));
 
-      element .on ("mouseenter", () => this .setDeclarations (monaco));
+      element .on ("mouseenter", () => this .updateDeclarations (monaco));
       element .on ("contextmenu", () => this .showContextMenu ());
 
       // this .debugFindActions (editor)
@@ -795,13 +969,13 @@ main ()
             case X3D .X3DConstants .SFNode:
             case X3D .X3DConstants .MFNode:
             {
-               field .addInterest ("setDeclarations", this, monaco);
+               field .addInterest ("updateDeclarations", this, monaco);
                break;
             }
          }
       }
 
-      this .setDeclarations (monaco);
+      this .updateDeclarations (monaco);
    }
 
    toggleDirectOutput ()

package/src/assets/themes/default.css

@@ -93,7 +93,7 @@ input[type=checkbox] {
   color: var(--system-yellow);
 }
 
-.modal {
+ .read-only :is(x3d-canvas, .toolbar, .dialog, .outline-editor) {
   pointer-events: none;
 }
 
@@ -150,6 +150,7 @@ tbody th th {
 thead tr,
 tfoot tr {
   background: var(--tint-color2);
+  backdrop-filter: var(--tool-backdrop-filter);
 }
 
 tbody tr:nth-child(odd) {
@@ -786,6 +787,14 @@ body.dark .dialog ::placeholder {
   color: var(--system-gray2);
 }
 
+.scene-properties td.meta-value {
+  display: flex;
+}
+
+.scene-properties .open-link {
+  padding-left: 4px;
+}
+
 /* Library */
 
 .ui-widget .library-input {
@@ -1023,7 +1032,7 @@ body.dark .ui-widget .library-list .component {
   overflow: hidden;
   position: absolute;
   box-sizing: border-box;
-  left: 0;
+  left: 0px;
   right: var(--toolbar-width);
   height: 100%;
 }
@@ -1032,7 +1041,7 @@ body.dark .ui-widget .library-list .component {
   position: absolute;
   box-sizing: border-box;
   overflow-y: scroll;
-  top: 0;
+  top: 0px;
   border-right: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   padding: 5px;
@@ -1046,13 +1055,27 @@ body.dark .ui-widget .library-list .component {
 }
 
 .console-output p {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
   margin: 0;
+  padding: 1px 2px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: monospace;
+  font-size: 8pt;
 }
 
-.console-output p.splitter {
-  margin-top: 5px;
-  border-top: 1px solid var(--system-gray3);
-  margin-bottom: 5px;
+.console-output p:where(.warn, .error):before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  display: block;
+  z-index: -1;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
 }
 
 .console-output p.debug {
@@ -1075,40 +1098,49 @@ body.dark .ui-widget .library-list .component {
   color: var(--system-red);
 }
 
-.console-output p.filled {
-  position: relative;
-  z-index: 0;
-  margin-top: 5px;
-  margin-bottom: 5px;
+.console-output p.warn {
+  border-top: 1px solid var(--system-yellow);
+  border-bottom: 1px solid var(--system-yellow);
   color: black;
 }
 
-.console-output p.filled:before {
-  content: "";
-  position: absolute;
-  display: block;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  filter: brightness(2) opacity(60%);
+.console-output p.warn:before {
+  background-color: color-mix(in srgb, color-mix(in srgb, var(--system-yellow), white 50%), transparent 30%);
 }
 
-.console-output p.warn.filled {
-  border-top: 1px solid var(--system-yellow);
-  border-bottom: 1px solid var(--system-yellow);
+.console-output p.error {
+  border-top: 1px solid var(--system-red);
+  border-bottom: 1px solid var(--system-red);
+  color: black;
 }
 
-.console-output p.warn.filled:before {
-  background-color: var(--system-yellow);
+.console-output p.error:before {
+  background-color: color-mix(in srgb, color-mix(in srgb, var(--system-red), white 50%), transparent 30%);
 }
 
-.console-output p.error.filled {
-  border-top: 1px solid var(--system-red);
-  border-bottom: 1px solid var(--system-red);
+.console-output p.warn:has(+ p.warn),
+.console-output p.error:has(+ p.error) {
+  border-bottom: none;
+}
+
+.console-output p.warn + p.warn,
+.console-output p.error + p.error {
+  border-top: none;
+}
+
+.console-output p.warn:not(:has(+ p.warn)),
+.console-output p.error:not(:has(+ p.error)) {
+  margin-bottom: 2px;
 }
 
-.console-output p.error.filled:before {
-  background-color: var(--system-red);
+.console-output p.splitter {
+  margin: 5px 0px;
+  border-top: 1px solid var(--system-gray3);
+  padding: 0px;
+}
+
+.console-output p.splitter:first-child {
+  display: none;
 }
 
 .console-input {