@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

package/src/components/diff-content-view-layout.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, test } from "bun:test";
+import type { Annotation } from "@cueloop/schema";
+import {
+  commentCountsByFile,
+  diffRowText,
+  fileChangeCounts,
+  marksByRows,
+  type DiffRow,
+} from "../view-diff";
+import { fixtureDiffSession } from "./story-fixtures";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { DARK } from "../theme";
+import { coloredRowSpans } from "./diff-content-view-layout";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+function annotation(id: string, anchor: Annotation["anchor"]): Annotation {
+  return { id, kind: "comment", body: "note", anchor, createdAt: "2026-01-01T00:00:00Z" };
+}
+
+describe("diffRowText", () => {
+  test("strips the trailing newline the patch carries", () => {
+    // Arrange / Act / Assert
+    expect(diffRowText(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+  });
+});
+
+describe("fileChangeCounts", () => {
+  test("tallies added and removed lines per file, ignoring context and headers", () => {
+    // Arrange
+    const rows = [
+      row("file", "a.ts"),
+      row("hunk", "@@"),
+      row("ctx", "unchanged"),
+      row("del", "gone"),
+      row("add", "one"),
+      row("add", "two"),
+      row("file", "b.ts", { file: "b.ts" }),
+      row("add", "only add", { file: "b.ts" }),
+    ];
+
+    // Act
+    const counts = fileChangeCounts(rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toEqual({ additions: 2, deletions: 1 });
+    expect(counts.get("b.ts")).toEqual({ additions: 1, deletions: 0 });
+  });
+});
+
+describe("marksByRows", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("hunk", "@@"),
+    row("ctx", "keep\n"),
+    row("add", "const items = new Map();\n"),
+    row("add", "return items;\n"),
+  ];
+
+  test("a whole-row quote (the legacy row anchor) marks that row end to end", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "return items;", prefix: "", suffix: "" })],
+      rows,
+    );
+
+    // Assert
+    expect([...marks.keys()]).toEqual([4]);
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 13, annotationId: "a1" });
+  });
+
+  test("a word quote marks only its characters and carries the span", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "new Map()", prefix: "const items = ", suffix: ";" })],
+      rows,
+    );
+
+    // Assert
+    const mark = marks.get(3)![0]!;
+
+    expect(mark.start).toBe(14);
+    expect(mark.end).toBe(23);
+    expect(mark.span).toEqual({
+      start: { blockIndex: 3, char: 14 },
+      end: { blockIndex: 3, char: 23 },
+    });
+  });
+
+  test("a quote across two rows paints a mark on each row with one shared span", () => {
+    // Arrange - the anchor a two-row drag produces: rows joined by the block separator
+    const marks = marksByRows(
+      [
+        annotation("a1", {
+          quote: "Map();\n\nreturn",
+          prefix: "const items = new ",
+          suffix: " items;",
+          blockIndex: 3,
+          start: 18,
+          end: 6,
+          endBlockIndex: 4,
+        }),
+      ],
+      rows,
+    );
+
+    // Assert
+    expect([...marks.keys()].toSorted()).toEqual([3, 4]);
+    expect(marks.get(3)![0]!.span).toEqual(marks.get(4)![0]!.span);
+    expect(marks.get(3)![0]).toMatchObject({ start: 18, end: 24 });
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 6 });
+  });
+
+  test("the focused annotation wears the focus role", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "keep", prefix: "", suffix: "" })],
+      rows,
+      "a1",
+    );
+
+    // Assert
+    expect(marks.get(2)![0]!.role).toBe("mark-focus");
+  });
+});
+
+describe("commentCountsByFile", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("add", "const items = new Map();\n"),
+    row("file", "b.ts", { file: "b.ts" }),
+    row("add", "return other;\n", { file: "b.ts" }),
+  ];
+  const annotation = (id: string, quote: string, replyTo?: string): Annotation => {
+    const comment: Annotation = {
+      id,
+      kind: "comment",
+      body: id,
+      anchor: { quote, prefix: "", suffix: "" },
+      createdAt: "2026-01-01T00:00:00Z",
+    };
+
+    if (replyTo !== undefined) comment.replyTo = replyTo;
+
+    return comment;
+  };
+
+  test("counts a discussion's comments (root plus replies) toward its file", () => {
+    // Arrange - one thread on a.ts with a reply, one on b.ts
+    const session = fixtureDiffSession({
+      annotations: [
+        annotation("a1", "const items = new Map();"),
+        annotation("a1r", "const items = new Map();", "a1"),
+        annotation("b1", "return other;"),
+      ],
+    });
+
+    // Act
+    const counts = commentCountsByFile(session, rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toBe(2);
+    expect(counts.get("b.ts")).toBe(1);
+  });
+});
+
+describe("coloredRowSpans", () => {
+  test("a changed word keeps the diff color while unchanged text dims", () => {
+    // Arrange - "old" is the change, " tail" unchanged, on a modified line
+    const runs: IntralineRun[] = [
+      { text: "old", changed: true },
+      { text: " tail", changed: false },
+    ];
+
+    // Act
+    const spans = coloredRowSpans("old tail", runs, undefined, DARK.deletedForeground, DARK);
+
+    // Assert
+    expect(spans).toEqual([
+      { text: "old", foreground: DARK.deletedForeground },
+      { text: " tail", foreground: DARK.textDim },
+    ]);
+  });
+
+  test("syntax color applies to unchanged text when there is no intra-line run", () => {
+    // Arrange - a keyword span over the whole word, no intra-line runs
+    const syntax: SyntaxSpan[] = [{ start: 0, end: 6, group: "keyword" }];
+
+    // Act
+    const spans = coloredRowSpans("return", undefined, syntax, DARK.textMuted, DARK);
+
+    // Assert
+    expect(spans).toEqual([{ text: "return", foreground: DARK.accent }]);
+  });
+});

package/src/components/diff-content-view-layout.ts

@@ -0,0 +1,84 @@
+/**
+ * Pure color logic for the diff review sheet, split out so it can be tested
+ * without rendering: a row's colored spans (syntax under the intra-line change
+ * color). DiffContentView.tsx paints marks and the caret over these per character.
+ */
+
+import type { Theme } from "../theme";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { colorForSyntaxGroup } from "./syntax-highlight";
+
+/** One rendered span of a row: its text and its resolved foreground color. */
+export interface ColoredSpan {
+  text: string;
+  foreground: string;
+}
+
+/**
+ * Colored spans for one row, resolved per character: an intra-line changed word
+ * keeps the diff color, otherwise the syntax color applies, falling back to the
+ * dim token on the unchanged part of a modified line or the row's base color.
+ * Adjacent same-color characters coalesce so a row stays a few spans.
+ */
+export function coloredRowSpans(
+  text: string,
+  intralineRuns: IntralineRun[] | undefined,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  baseColor: string,
+  tokens: Theme,
+): ColoredSpan[] {
+  const changed = changedColumns(text.length, intralineRuns);
+  const syntaxColorByColumn = syntaxColorColumns(text.length, syntaxSpans, tokens);
+  const isModifiedLine = intralineRuns !== undefined;
+
+  const spans: ColoredSpan[] = [];
+
+  for (let column = 0; column < text.length; column++) {
+    const color = changed[column]
+      ? baseColor
+      : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
+    const previous = spans[spans.length - 1];
+
+    if (previous && previous.foreground === color) previous.text += text[column];
+    else spans.push({ text: text[column]!, foreground: color });
+  }
+
+  return spans;
+}
+
+/** Which columns are the intra-line change on a modified line. */
+function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
+  const changed = Array.from({ length }, () => false);
+
+  if (!intralineRuns) return changed;
+  let offset = 0;
+
+  for (const run of intralineRuns) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
+    offset += run.text.length;
+  }
+
+  return changed;
+}
+
+/** The syntax color per column, or undefined where a column has no token. */
+function syntaxColorColumns(
+  length: number,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  tokens: Theme,
+): Array<string | undefined> {
+  const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+
+  for (const span of syntaxSpans ?? []) {
+    const color = colorForSyntaxGroup(span.group, tokens);
+
+    if (!color) continue;
+    for (let column = span.start; column < span.end && column < length; column++) {
+      colors[column] = color;
+    }
+  }
+
+  return colors;
+}

package/src/components/editor-grid.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, test } from "bun:test";
+import {
+  addTab,
+  changesTab,
+  closeTab,
+  containsGroup,
+  fileTab,
+  firstGroupId,
+  makeGroup,
+  splitGroup,
+  type EditorBranch,
+  type EditorGroup,
+  type EditorNode,
+} from "./editor-grid";
+
+function asBranch(node: EditorNode | null): EditorBranch {
+  if (node === null || node.type !== "branch") throw new Error("expected a branch node");
+  return node;
+}
+function asGroup(node: EditorNode | null): EditorGroup {
+  if (node === null || node.type !== "group") throw new Error("expected a group node");
+  return node;
+}
+
+describe("editor grid", () => {
+  test("a fresh group holds its tabs with the first active", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+    expect(group.type).toBe("group");
+    expect(group.activeTabId).toBe(tab.id);
+  });
+
+  test("adding a tab focuses it", () => {
+    const group = makeGroup([changesTab()]);
+    const file = fileTab("App.tsx", "src/App.tsx", "diff");
+    const next = asGroup(addTab(group, group.id, file));
+    expect(next.tabs).toHaveLength(2);
+    expect(next.activeTabId).toBe(file.id);
+  });
+
+  test("splitting right makes a horizontal branch and focuses the new group", () => {
+    const group = makeGroup([fileTab("App.tsx", "src/App.tsx", "diff")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "right");
+    expect(tree.type).toBe("branch");
+    const branch = asBranch(tree);
+    expect(branch.orientation).toBe("horizontal");
+    expect(branch.children).toHaveLength(2);
+    // the new group is the second child (right edge) and takes focus
+    expect(branch.children[1]!.id).toBe(focusGroupId);
+    expect(firstGroupId(tree)).toBe(group.id);
+  });
+
+  test("splitting up makes a vertical branch with the new group first", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "contents")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "up");
+    const branch = asBranch(tree);
+    expect(branch.orientation).toBe("vertical");
+    expect(branch.children[0]!.id).toBe(focusGroupId);
+  });
+
+  test("closing the last tab of a split collapses the branch back to one group", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+    expect(collapsed?.type).toBe("group");
+    expect(asGroup(collapsed).id).toBe(group.id);
+  });
+
+  test("closing the only tab of the whole grid returns null", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+    expect(closeTab(group, group.id, tab.id)).toBeNull();
+  });
+
+  test("containsGroup finds a live group and misses a pruned one", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+    expect(containsGroup(tree, group.id)).toBe(true);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+    expect(containsGroup(asGroup(collapsed), rightGroup.id)).toBe(false);
+  });
+});

package/src/components/editor-grid.ts

@@ -0,0 +1,138 @@
+// The Changes pane's editor layout: a tree of nodes where a leaf is an editor group (a tab strip plus
+// its one active tab) and a branch splits child nodes along an orientation. Splitting an editor group
+// moves its active tab into a new group; a group is pruned when its last tab closes, collapsing the
+// branch that held it.
+
+/** One editor in a group's tab strip: the Changes tab (the whole diff), a per-file tab, or Welcome. */
+export interface EditorTab {
+  id: string;
+  kind: "changes" | "file" | "welcome";
+  label: string;
+  /** Repo-relative path for a file tab; absent for the Changes and Welcome tabs. */
+  path?: string;
+  /** A file tab shows either a single-file diff or the file's plain contents. */
+  fileView?: "diff" | "contents";
+}
+
+/** A leaf of the grid: one editor group holding tabs, with the active tab id. */
+export interface EditorGroup {
+  type: "group";
+  id: string;
+  tabs: EditorTab[];
+  activeTabId: string | null;
+}
+
+/** A branch of the grid: children laid out along one orientation (horizontal = side by side). */
+export interface EditorBranch {
+  type: "branch";
+  id: string;
+  orientation: "horizontal" | "vertical";
+  children: EditorNode[];
+}
+
+export type EditorNode = EditorGroup | EditorBranch;
+
+/** Which edge a split places the new group on; Left/Right split horizontally, Up/Down vertically. */
+export type SplitDirection = "left" | "right" | "up" | "down";
+
+/** A split's outcome: the new grid and the id of the group that should take focus. */
+export interface SplitResult {
+  tree: EditorNode;
+  focusGroupId: string;
+}
+
+const freshId = (): string => crypto.randomUUID();
+
+/** A new editor group holding the given tabs, with the first tab active. */
+export function makeGroup(tabs: EditorTab[]): EditorGroup {
+  return { type: "group", id: freshId(), tabs, activeTabId: tabs[0]?.id ?? null };
+}
+
+/** The Changes tab: the whole diff in one scroll, the disposable default of the Changes pane. */
+export function changesTab(): EditorTab {
+  return { id: freshId(), kind: "changes", label: "Changes" };
+}
+
+/** The Welcome tab: the getting-started surface, a disposable tab shown before any thread is opened. */
+export function welcomeTab(): EditorTab {
+  return { id: freshId(), kind: "welcome", label: "Welcome" };
+}
+
+/** A file tab, opened from a tree; a diff view for a changed file, plain contents otherwise. */
+export function fileTab(label: string, path: string, fileView: "diff" | "contents"): EditorTab {
+  return { id: freshId(), kind: "file", label, path, fileView };
+}
+
+/** The id of the first editor group in reading order; the fallback focus target. */
+export function firstGroupId(node: EditorNode): string {
+  return node.type === "group" ? node.id : firstGroupId(node.children[0]!);
+}
+
+/** Whether a group id still exists in the grid; used to re-home focus after a prune. */
+export function containsGroup(node: EditorNode, groupId: string): boolean {
+  if (node.type === "group") return node.id === groupId;
+  return node.children.some((child) => containsGroup(child, groupId));
+}
+
+function replaceGroup(
+  node: EditorNode,
+  id: string,
+  fn: (group: EditorGroup) => EditorNode,
+): EditorNode {
+  if (node.type === "group") return node.id === id ? fn(node) : node;
+  return { ...node, children: node.children.map((child) => replaceGroup(child, id, fn)) };
+}
+
+/** Make a tab the active one in its group. */
+export function activateTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({ ...group, activeTabId: tabId }));
+}
+
+/** Append a tab to a group and focus it. */
+export function addTab(node: EditorNode, groupId: string, tab: EditorTab): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: [...group.tabs, tab],
+    activeTabId: tab.id,
+  }));
+}
+
+/** Drop empty groups and collapse a branch that ends up with one child; null when nothing remains. */
+export function pruneEmpty(node: EditorNode): EditorNode | null {
+  if (node.type === "group") return node.tabs.length > 0 ? node : null;
+  const kept = node.children.map(pruneEmpty).filter((child): child is EditorNode => child !== null);
+  if (kept.length === 0) return null;
+  if (kept.length === 1) return kept[0]!;
+  return { ...node, children: kept };
+}
+
+/** Close a tab; returns the pruned tree, or null when the last tab of the whole grid is closed. */
+export function closeTab(node: EditorNode, groupId: string, tabId: string): EditorNode | null {
+  const next = replaceGroup(node, groupId, (group) => {
+    const tabs = group.tabs.filter((tab) => tab.id !== tabId);
+    const activeTabId = group.activeTabId === tabId ? (tabs[0]?.id ?? null) : group.activeTabId;
+    return { ...group, tabs, activeTabId };
+  });
+  return pruneEmpty(next);
+}
+
+/** Split a group's active tab into a new group on the given edge; returns the tree and the new focus. */
+export function splitGroup(
+  node: EditorNode,
+  groupId: string,
+  direction: SplitDirection,
+): SplitResult {
+  let focusGroupId = groupId;
+  const tree = replaceGroup(node, groupId, (group) => {
+    const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+    if (active === undefined) return group;
+    const movedTab: EditorTab = { ...active, id: freshId() };
+    const newGroup = makeGroup([movedTab]);
+    focusGroupId = newGroup.id;
+    const orientation = direction === "left" || direction === "right" ? "horizontal" : "vertical";
+    const newFirst = direction === "left" || direction === "up";
+    const children = newFirst ? [newGroup, group] : [group, newGroup];
+    return { type: "branch", id: freshId(), orientation, children };
+  });
+  return { tree, focusGroupId };
+}

package/src/components/file-tree.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from "bun:test";
+import type { DiffFileContents } from "@cueloop/schema";
+import { buildFileTree } from "./file-tree";
+
+function file(path: string, status: DiffFileContents["status"] = "modified"): DiffFileContents {
+  return { path, oldContents: "a", newContents: "b", status };
+}
+
+describe("buildFileTree", () => {
+  test("nests files under their directories and keeps the full path as the leaf id", () => {
+    // Arrange
+    const files = [file("src/app/main.ts"), file("src/app/util.ts"), file("README.md")];
+
+    // Act
+    const tree = buildFileTree(files);
+
+    // Assert - one src folder over one app folder over two leaves, plus a root file
+    expect(tree.map((node) => node.label)).toEqual(["src", "README.md"]);
+    const app = tree[0]!.children![0]!;
+
+    expect(app.label).toBe("app");
+    expect(app.children!.map((leaf) => leaf.id)).toEqual(["src/app/main.ts", "src/app/util.ts"]);
+  });
+
+  test("carries the git status onto each leaf so the tree can tint it", () => {
+    // Act
+    const tree = buildFileTree([file("a.ts", "added"), file("b.ts", "deleted")]);
+
+    // Assert
+    expect(tree.map((leaf) => leaf.status)).toEqual(["added", "deleted"]);
+  });
+
+  test("merges files that share a directory into one folder node", () => {
+    // Act
+    const tree = buildFileTree([file("pkg/one.ts"), file("pkg/two.ts")]);
+
+    // Assert
+    expect(tree).toHaveLength(1);
+    expect(tree[0]!.children).toHaveLength(2);
+  });
+
+  test("returns an empty tree for no changes", () => {
+    expect(buildFileTree([])).toEqual([]);
+  });
+
+  test("badges a leaf with its comment count, and leaves an uncommented file bare", () => {
+    // Act
+    const tree = buildFileTree(
+      [file("a.ts"), file("b.ts")],
+      new Map([
+        ["a.ts", 3],
+        ["b.ts", 0],
+      ]),
+    );
+
+    // Assert - a.ts shows the dot-and-count, b.ts (0) shows nothing
+    expect(tree[0]!.badge).toBe("● 3");
+    expect(tree[1]!.badge).toBeUndefined();
+  });
+});

package/src/components/file-tree.ts

@@ -0,0 +1,112 @@
+/**
+ * Builds a nested file tree from a diff's changed files, so the Changes column
+ * can browse them by directory. Each leaf keeps its repo-relative path as the id
+ * (what the diff rows are keyed by) and carries the git status for its tint.
+ */
+
+import type { DiffFileContents, DiffFileStatus } from "@cueloop/schema";
+import type { GitStatus, TreeNode } from "./primitives/tree-model";
+
+/** The diff file statuses are a subset of the tree's git statuses. */
+function gitStatusOf(status: DiffFileStatus): GitStatus {
+  return status;
+}
+
+interface MutableTreeNode {
+  id: string;
+  label: string;
+  status?: GitStatus;
+  badge?: string;
+  children?: Map<string, MutableTreeNode>;
+}
+
+function freeze(node: MutableTreeNode): TreeNode {
+  if (node.children === undefined) {
+    const leaf: TreeNode = { id: node.id, label: node.label, status: node.status };
+
+    if (node.badge !== undefined) leaf.badge = node.badge;
+
+    return leaf;
+  }
+
+  return {
+    id: node.id,
+    label: node.label,
+    children: [...node.children.values()].map(freeze),
+  };
+}
+
+/** A file's comment count as a leaf badge, or undefined when it carries none. */
+function commentBadge(
+  counts: ReadonlyMap<string, number> | undefined,
+  path: string,
+): string | undefined {
+  const count = counts?.get(path);
+
+  return count ? `● ${count}` : undefined;
+}
+
+/**
+ * Group changed files into a directory tree; leaves are keyed by their full path. A leaf whose
+ * file carries comments shows a dot-and-count badge, so feedback is visible even with its tab closed.
+ */
+export function buildFileTree(
+  files: readonly DiffFileContents[],
+  commentCounts?: ReadonlyMap<string, number>,
+): TreeNode[] {
+  const roots = new Map<string, MutableTreeNode>();
+
+  for (const file of files) {
+    const segments = file.path.split("/").filter((segment) => segment.length > 0);
+    let level = roots;
+    let prefix = "";
+
+    segments.forEach((segment, index) => {
+      prefix = prefix.length > 0 ? `${prefix}/${segment}` : segment;
+      const isLeaf = index === segments.length - 1;
+      let node = level.get(segment);
+
+      if (node === undefined) {
+        node = isLeaf
+          ? {
+              id: file.path,
+              label: segment,
+              status: gitStatusOf(file.status),
+              badge: commentBadge(commentCounts, file.path),
+            }
+          : { id: prefix, label: segment, children: new Map() };
+        level.set(segment, node);
+      }
+      if (!isLeaf) level = node.children!;
+    });
+  }
+
+  return [...roots.values()].map(freeze);
+}
+
+/** Group plain repo-relative paths (git ls-files) into a directory tree; leaves keep their full path. */
+export function buildPathTree(paths: readonly string[]): TreeNode[] {
+  const roots = new Map<string, MutableTreeNode>();
+
+  for (const path of paths) {
+    const segments = path.split("/").filter((segment) => segment.length > 0);
+    let level = roots;
+    let prefix = "";
+
+    segments.forEach((segment, index) => {
+      prefix = prefix.length > 0 ? `${prefix}/${segment}` : segment;
+      const isLeaf = index === segments.length - 1;
+      let node = level.get(segment);
+
+      if (node === undefined) {
+        node = isLeaf
+          ? { id: path, label: segment }
+          : { id: prefix, label: segment, children: new Map() };
+        level.set(segment, node);
+      }
+      if (!isLeaf) level = node.children!;
+    });
+  }
+
+  return [...roots.values()].map(freeze);
+}