From b3403aef9b011e9a5336d335335e7a9a13165910 Mon Sep 17 00:00:00 2001
From: pythonlearner1025 <mjsong2021@gmail.com>
Date: Wed, 16 Sep 2026 17:44:18 -0700
Subject: [PATCH] feat(editor): indent guides, one caret column, and a band for
 the reference rows

The Objects tree drew no indent guides, and a row with no caret started 26 px
left of a row with one. A mesh's reference rows from #42 therefore read as its
children, and the next sibling mesh read as one of them.

- Every row draws one vertical guide per ancestor. The guide comes from the
  depth class the row already indents by, so the two can never disagree.
- The caret column is 26 px on every row, empty when there is nothing to open.
  A row with no icon keeps an icon column the same way.
- A reference row's own levels draw a dotted guide, not a solid one.
- The reference rows of one object carry a tint and a 2 px rule at their left,
  from the first reference to the last.
- The depth classes run to 20, the range Blueprint defines, so a row deeper
  than ten keeps our 10 px step.

Proved headless on /Users/minjunes/games/terminator-next at 1512x982. At one
depth every row now shares its caret x and its icon x: the geometry row's icon
moved from 60 to 86, where the material row's already was. The texture rows'
icons moved from 70 to 96, clear of the depth 5 mesh at 76. Click, double
click, drag and the context menu read byte for byte the same before and after.
npm run typecheck, npm run lint, npm test -w packages/kite3d (8 tests) and
npm run test:scripts (2 tests) all pass.
---
 packages/editor/src/components/TreeNode2.tsx |  7 +-
 packages/editor/src/components/tree2.scss    | 70 ++++++++++++++++++--
 2 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/components/TreeNode2.tsx b/packages/editor/src/components/TreeNode2.tsx
index 044c67eb..7cc05b2f 100644
--- a/packages/editor/src/components/TreeNode2.tsx
+++ b/packages/editor/src/components/TreeNode2.tsx
@@ -15,6 +15,7 @@
  *
  * Changes:
  * - Added support for drag and drop
+ * - A row with no icon still gets an icon column
  */
 
 import classNames from "classnames";
@@ -102,7 +103,11 @@ export class TreeNode2<T = {}> extends React.Component<TreeNodeProps<T>> {
             <li className={classes}>
                 <div className={contentClasses} ref={this.handleContentRef} {...eventHandlers}>
                     {this.maybeRenderCaret()}
-                    <Icon className={Classes.TREE_NODE_ICON} icon={icon} aria-hidden={true} tabIndex={-1} intent={intent} />
+                    {/* A row with no icon keeps the column. Blueprint's Icon draws nothing without
+                        one, and the name would then start where a row with an icon puts its icon. */}
+                    {icon
+                        ? <Icon className={Classes.TREE_NODE_ICON} icon={icon} aria-hidden={true} tabIndex={-1} intent={intent} />
+                        : <span className={"tree-node-icon-none"} />}
                     <span className={Classes.TREE_NODE_LABEL}
                           style={{
                               color: !intent || intent === 'none' ? undefined : `var(--pt-intent-${intent}-text-color`,
diff --git a/packages/editor/src/components/tree2.scss b/packages/editor/src/components/tree2.scss
index bd3c212e..1289bb5f 100644
--- a/packages/editor/src/components/tree2.scss
+++ b/packages/editor/src/components/tree2.scss
@@ -47,13 +47,36 @@
   }
 }
 
+// The grey Blueprint draws tree chrome with, in both themes.
+$tree-chrome: #8f99a8;
+// One indent step.
+$tree-indent: 10px;
+// One glyph column: a 16 px icon with 5 px on each side.
+$tree-slot: 26px;
+
+// Every row draws one vertical guide per ancestor, the way VS Code and Godot do, so where a
+// subtree ends is visible. A reference row's own levels are dotted: a reference is not a child.
+// --tree-depth carries the depth its class already indents by, so the two can never disagree.
 .bp5-tree-node-content{
-  //transition: background-color 0.2s ease-in-out;
+  position: relative;
+
+  &::before{
+    bottom: 0;
+    content: "";
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: calc(#{$tree-indent} * (var(--tree-depth, 0) - var(--tree-reference-depth, 0)));
+    background-image: repeating-linear-gradient(to right, transparent 0 4px, rgba($tree-chrome, 0.2) 4px 5px, transparent 5px $tree-indent);
+  }
 }
 
-@for $i from 1 through 10 {
+// Blueprint numbers its depth classes to 20, and every one of them indents by our step.
+@for $i from 1 through 20 {
   .bp5-tree-node-content-#{$i} {
-    padding-left: calc(10px * $i);
+    --tree-depth: #{$i};
+    padding-left: $tree-indent * $i;
   }
 }
 
@@ -61,11 +84,13 @@
   padding: 7px 5px;
 }
 
-.bp5-tree-node-content:has(.bp5-icon) {
-  .bp5-tree-node-caret, .bp5-tree-node-caret-none {
-    min-width: 0px;
-  }
+// One caret column on every row, empty when there is nothing to open, so a row with no caret
+// never starts further left than a row with one. The icon column works the same way.
+.bp5-tree-node-caret, .bp5-tree-node-caret-none, .tree-node-icon-none{
+  min-width: $tree-slot;
+}
 
+.bp5-tree-node-content:has(.bp5-icon) {
   // because bp5-tree-node-icon is not applied on this icon
   .bp5-icon:has(.bp5-tree-node-icon-svg), .bp5-tree-node-icon{
     margin-right: 0px;
@@ -110,6 +135,37 @@
   opacity: 0.7;
 }
 
+// The reference rows of one object form a block: a tint over them and a rule at the block's left,
+// starting at the first reference and ending at the last. The next sibling object, on its solid
+// guide and outside the tint, is plainly not inside it.
+.tree-node-reference{
+  --tree-reference-depth: 1;
+}
+// References nest one level: the texture slots a material fills.
+.tree-node-reference .tree-node-reference{
+  --tree-reference-depth: 2;
+}
+.tree-node-reference > .bp5-tree-node-content{
+  background-image:
+    linear-gradient(rgba($tree-chrome, 0.35), rgba($tree-chrome, 0.35)),
+    linear-gradient(rgba($tree-chrome, 0.07), rgba($tree-chrome, 0.07));
+  background-repeat: no-repeat;
+  background-size: 2px 100%, 100% 100%;
+
+  &::after{
+    bottom: 0;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: calc(100% - #{$tree-indent} * var(--tree-depth));
+    width: calc(#{$tree-indent} * var(--tree-reference-depth));
+    background-image: repeating-linear-gradient(to right, transparent 0 4px, rgba($tree-chrome, 0.35) 4px 5px, transparent 5px $tree-indent);
+    // 2 on and 3 off divides the 30px row, so the dots hold their phase from row to row.
+    mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 5px);
+  }
+}
+
 // A preview light belongs to the document view, not to the file it shows.
 .tree-node-excluded > .bp5-tree-node-content .bp5-tree-node-label{
   opacity: 0.5;