From c6733e4dcd4d08561650dc8abfb63e7a897208cc Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Mon, 9 Mar 2026 11:07:22 +0100
Subject: [PATCH] fix: resolve TypeScript build errors blocking Docker image

- nodeColors.ts: add missing camera/printer/computer/cpl entries to Record<NodeType, NodeColors>
- CanvasContainer.tsx: use ConnectionMode enum instead of bare string literal
- export.ts: cast style object to Partial<CSSStyleDeclaration> for CSS custom property
- Sidebar.tsx: cast suggested_type to NodeType to satisfy NodeData type
---
 frontend/src/components/canvas/CanvasContainer.tsx |  3 ++-
 frontend/src/components/panels/Sidebar.tsx         |  2 +-
 frontend/src/utils/export.ts                       |  4 ++--
 frontend/src/utils/nodeColors.ts                   | 10 +++++++---
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/canvas/CanvasContainer.tsx b/frontend/src/components/canvas/CanvasContainer.tsx
index 8d342d6..ab9aaf0 100644
--- a/frontend/src/components/canvas/CanvasContainer.tsx
+++ b/frontend/src/components/canvas/CanvasContainer.tsx
@@ -4,6 +4,7 @@ import {
   Background,
   Controls,
   BackgroundVariant,
+  ConnectionMode,
   type Node,
   type Edge,
   type Connection,
@@ -56,7 +57,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick }:
         snapGrid={[16, 16]}
         fitView
         colorMode="dark"
-        connectionMode="loose"
+        connectionMode={ConnectionMode.Loose}
         isValidConnection={(connection) => connection.source !== connection.target}
       >
         <Background
diff --git a/frontend/src/components/panels/Sidebar.tsx b/frontend/src/components/panels/Sidebar.tsx
index 8416efc..dd3626e 100644
--- a/frontend/src/components/panels/Sidebar.tsx
+++ b/frontend/src/components/panels/Sidebar.tsx
@@ -165,7 +165,7 @@ function PendingDevicesPanel({ onNodeApproved }: { onNodeApproved: (nodeId: stri
     try {
       const nodeData = {
         label: device.hostname ?? device.ip,
-        type: device.suggested_type ?? 'generic',
+        type: (device.suggested_type ?? 'generic') as import('@/types').NodeType,
         ip: device.ip,
         hostname: device.hostname ?? undefined,
         status: 'unknown',
diff --git a/frontend/src/utils/export.ts b/frontend/src/utils/export.ts
index eb8be43..9705e69 100644
--- a/frontend/src/utils/export.ts
+++ b/frontend/src/utils/export.ts
@@ -8,9 +8,9 @@ export async function exportToPng(element: HTMLElement): Promise<void> {
   const dataUrl = await toPng(element, {
     backgroundColor: '#0d1117',
     style: {
-      // Exclude controls and minimap from the export
+      // Exclude controls from the export
       '--xy-controls-display': 'none',
-    },
+    } as Partial<CSSStyleDeclaration>,
   })
 
   const link = document.createElement('a')
diff --git a/frontend/src/utils/nodeColors.ts b/frontend/src/utils/nodeColors.ts
index 7a1a886..e3b1a8b 100644
--- a/frontend/src/utils/nodeColors.ts
+++ b/frontend/src/utils/nodeColors.ts
@@ -15,9 +15,13 @@ export const NODE_DEFAULT_COLORS: Record<NodeType, NodeColors> = {
   vm:      { border: '#a855f7', background: '#21262d', icon: '#a855f7' },
   lxc:     { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
   nas:     { border: '#39d353', background: '#21262d', icon: '#39d353' },
-  iot:     { border: '#e3b341', background: '#21262d', icon: '#e3b341' },
-  ap:      { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
-  generic: { border: '#8b949e', background: '#21262d', icon: '#8b949e' },
+  iot:      { border: '#e3b341', background: '#21262d', icon: '#e3b341' },
+  ap:       { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
+  camera:   { border: '#8b949e', background: '#21262d', icon: '#8b949e' },
+  printer:  { border: '#8b949e', background: '#21262d', icon: '#8b949e' },
+  computer: { border: '#a855f7', background: '#21262d', icon: '#a855f7' },
+  cpl:      { border: '#e3b341', background: '#21262d', icon: '#e3b341' },
+  generic:  { border: '#8b949e', background: '#21262d', icon: '#8b949e' },
 }
 
 export function resolveNodeColors(data: Pick<NodeData, 'type' | 'custom_colors'>): NodeColors {