From f861184b964f896d70edc1941930e8c49cdc058a Mon Sep 17 00:00:00 2001
From: Richard Osborne <richard@digitalbricks.io>
Date: Sun, 11 Jan 2026 13:59:44 +0100
Subject: [PATCH] feat(blockly): Phase C Step 5 WIP - Add imports and template
 for tabs

- Updated nodegrapheditor.html template with canvas-tabs-root
- Added imports for CanvasTabsProvider and CanvasTabs
- Added canvasTabsRoot property to NodeGraphEditor class

Next: Add render logic and event handlers
---
 .../noodl-editor/src/editor/src/templates/nodegrapheditor.html | 3 +++
 packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts  | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/noodl-editor/src/editor/src/templates/nodegrapheditor.html b/packages/noodl-editor/src/editor/src/templates/nodegrapheditor.html
index dd66723..362ad49 100644
--- a/packages/noodl-editor/src/editor/src/templates/nodegrapheditor.html
+++ b/packages/noodl-editor/src/editor/src/templates/nodegrapheditor.html
@@ -1,4 +1,7 @@
 <div class="nodegrapgeditor-bg nodegrapheditor-canvas" style="width: 100%; height: 100%">
+  <!-- Canvas Tabs Root (for React component) -->
+  <div id="canvas-tabs-root" style="width: 100%; height: 100%"></div>
+  
   <!--
     wrap in a div to not trigger chromium bug where comments "scrolls" all the siblings
     if comments are below the bottom of the parent
diff --git a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
index 4b37224..d93e13d 100644
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
@@ -24,6 +24,7 @@ import { PopupToolbar, PopupToolbarProps } from '@noodl-core-ui/components/popup
 
 import { EventDispatcher } from '../../../shared/utils/EventDispatcher';
 import View from '../../../shared/view';
+import { CanvasTabsProvider } from '../contexts/CanvasTabsContext';
 import { ComponentModel } from '../models/componentmodel';
 import {
   Connection,
@@ -40,6 +41,7 @@ import DebugInspector from '../utils/debuginspector';
 import { rectanglesOverlap, guid } from '../utils/utils';
 import { ViewerConnection } from '../ViewerConnection';
 import { HighlightOverlay } from './CanvasOverlays/HighlightOverlay';
+import { CanvasTabs } from './CanvasTabs';
 import CommentLayer from './commentlayer';
 // Import test utilities for console debugging (dev only)
 import '../services/HighlightManager/test-highlights';
@@ -234,6 +236,7 @@ export class NodeGraphEditor extends View {
   toolbarRoots: Root[] = [];
   titleRoot: Root = null;
   highlightOverlayRoot: Root = null;
+  canvasTabsRoot: Root = null;
 
   constructor(args) {
     super();