feat: comprehensive SVG viewer enhancements with zoom and template preview

- Add interactive zoom functionality (25%-300% with Ctrl+scroll wheel)
- Fix SVG width constraints by injecting calculated dimensions into templates
- Implement template preview with theme-aware sample data
- Enhance UI layout with file reordering (Project → Template → CSS → Data)
- Add blue theme support for my-project alongside existing green theme
- Fix my-project field mapping from empty 'Übergeordnet' to 'Status'
- Improve SVG viewport handling with proper scrolling and container management
- Add visual zoom controls with percentage display and smart visibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

my-project/project.json

@@ -10,7 +10,7 @@
   "fieldMapping": {
     "id": "Schlüssel",
     "title": "Zusammenfassung",
-    "lane": "Übergeordnet",
+    "lane": "Status",
     "due": [
       "Abgeleitetes Fälligkeitsdatum",
       "Fälligkeitsdatum"

my-project/style.css

@@ -1 +1,64 @@
-body { background:#f5f7fa; }
+/* My Project Blue Theme */
+/* This CSS demonstrates successful external stylesheet loading */
+
+body {
+  background: #1a2332 !important;
+}
+
+#projectName {
+  color: #3b82f6 !important;
+  border-bottom: 2px solid #3b82f6;
+  padding-bottom: 8px;
+}
+
+#projectSubtitle {
+  color: #60a5fa !important;
+}
+
+/* File Manager Override */
+#fileManager {
+  background: #1e293b !important;
+  border-color: #3b82f6 !important;
+}
+
+#fileManager h3 {
+  color: #60a5fa !important;
+}
+
+.file-item {
+  background: #334155 !important;
+  border-color: #3b82f6 !important;
+}
+
+.file-item:hover {
+  border-color: #60a5fa !important;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
+}
+
+.file-label {
+  color: #60a5fa !important;
+}
+
+.upload-btn {
+  background: #3b82f6 !important;
+}
+
+.upload-btn:hover {
+  background: #2563eb !important;
+}
+
+/* Buttons */
+button {
+  background: #3b82f6 !important;
+}
+
+button:hover:not(:disabled) {
+  background: #60a5fa !important;
+}
+
+/* Viewer */
+#viewer {
+  background: #334155 !important;
+  border-color: #3b82f6 !important;
+  color: #f1f5f9 !important;
+}

my-project/template.svg

@@ -1,5 +1,50 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="#FFFFFF"/>
-  {{MONTHS}}
-  {{LANES}}
+<svg xmlns="http://www.w3.org/2000/svg" style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);">
+  <defs>
+    <!-- Enhanced month indicator styling -->
+    <linearGradient id="monthHeaderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.08"/>
+    </linearGradient>
+
+    <!-- Drop shadow for month labels -->
+    <filter id="textShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#3b82f6" flood-opacity="0.4"/>
+    </filter>
+
+    <!-- Subtle background grid pattern -->
+    <pattern id="bgGrid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <rect width="40" height="40" fill="transparent"/>
+      <circle cx="20" cy="20" r="1" fill="#60a5fa" opacity="0.1"/>
+    </pattern>
+  </defs>
+
+  <!-- Background with subtle pattern -->
+  <rect width="100%" height="100%" fill="url(#bgGrid)"/>
+
+  <!-- Enhanced month header background -->
+  <rect x="0" y="0" width="100%" height="130" fill="url(#monthHeaderGrad)" stroke="#3b82f6" stroke-width="1" opacity="0.6"/>
+
+  <!-- Title area with visual indicator -->
+  <rect x="10" y="10" width="300" height="60" fill="#ffffff" stroke="#3b82f6" stroke-width="2" rx="8" opacity="0.9"/>
+  <text x="20" y="35" fill="#3b82f6" font-size="16" font-weight="bold" filter="url(#textShadow)">
+    📅 My Project Timeline
+  </text>
+  <text x="20" y="55" fill="#60a5fa" font-size="11" font-weight="500">
+    Enhanced blue styling with prominent months ✨
+  </text>
+
+  <!-- Month indicators with enhanced styling -->
+  <g class="enhanced-months" transform="translate(0,0)">
+    <rect x="0" y="75" width="100%" height="55" fill="rgba(59, 130, 246, 0.05)" stroke="#60a5fa" stroke-width="1"/>
+    {{MONTHS}}
+  </g>
+
+  <!-- Lane content -->
+  <g class="enhanced-lanes">
+    {{LANES}}
+  </g>
+
+  <!-- Decorative border -->
+  <rect x="1" y="1" width="calc(100% - 2)" height="calc(100% - 2)"
+        fill="none" stroke="#3b82f6" stroke-width="2" rx="4" opacity="0.7"/>
 </svg>