View-Toggle 2x4: TOP/ISO/PERSP/Cam + N/O/S/W mit Norden-Rotation

User-Vorschlag: Architektur-konformes View-Layout — 3D-Views oben, 4
Gebaeudeansichten unten. Plus Norden-Rotation als Doc-Setting damit bei
rotierten Projekten (swissBUILDINGS, Sonnenberechnungen) die richtigen
Wandansichten gepickt werden.

Backend (rhino/kamera.py):
- get_north_angle/set_north_angle — doc.Strings["dossier_north_angle"]
  (Grad im Uhrzeigersinn von +Y, default 0°)
- _scene_target_and_diag(doc) — gemeinsamer Helper fuer Szenen-Center +
  Diagonal-Distanz
- set_cardinal_view(vp, 'N'|'O'|'S'|'W'): rotiert Kamera-Position via
  Norden-Vektor. Parallel-Projektion, Camera-Z = Target-Z (echte
  Elevation), Up-Vektor +Z.
- set_top_view(vp): Plan-Ansicht mit Norden = Up-Vektor (Plan rotiert
  visuell wenn Norden != +Y)
- _set_iso(vp, octant): Octant-Richtung jetzt aus north+east-Vektoren
  konstruiert → ISO rotiert mit Norden mit
- Bridge-Handler SET_NORTH_ANGLE + state.northAngle, notify Oberleiste

Backend (oberleiste.py):
- SET_VIEW erweitert: Top → kamera.set_top_view, N/O/S/W →
  kamera.set_cardinal_view, Iso → kamera._set_iso. Front/Right/etc bleibt
  als Legacy direkt-Rhino-Call.
- State liefert northAngle

Frontend (OberleisteApp):
- VIEWS_ROW1: TOP/ISO/PERSP + Kamera-Settings-Button (Icons only)
- VIEWS_ROW2: N/O/S/W als DM-Mono-Buchstaben
- 2x4-Grid, VIEW_W=140 (konsistent mit Massstab-Pills), CELL_W=35
- matchView nur fuer Top/Iso/Perspective; Cardinals haben keinen
  Active-State (Viewport-Name ist nicht zuverlaessig erkennbar)

Frontend (KameraApp):
- Plan-Norden Section mit Number-Input (Grad, 0.5°-Step) + Reset-Button
- Hinweis-Text dass Wirkung auf TOP/ISO/N/O/S/W geht

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

src/OberleisteApp.jsx

@@ -22,12 +22,19 @@ const PRESETS = [
   { value: 500, label: '1:500' }, { value: 1000, label: '1:1000' },
 ]
 
-const VIEWS = [
-  { value: 'Top',         icon: 'view_quilt',     label: 'Top' },
-  { value: 'Front',       icon: 'north',          label: 'Front' },
-  { value: 'Right',       icon: 'east',           label: 'Right' },
-  { value: 'Iso',         icon: 'view_in_ar',     label: 'Iso' },
-  { value: 'Perspective', icon: '3d_rotation',    label: 'Persp' },
+// Reihe 1: 3D-Ansichten (Top, Iso, Persp) + Kamera-Button
+// Reihe 2: 4 Gebaeudeansichten (Norden/Osten/Sueden/Westen) — Buchstaben
+//          als Symbol, rotieren mit dossier_north_angle.
+const VIEWS_ROW1 = [
+  { value: 'Top',         icon: 'crop_landscape', kind: 'icon' },
+  { value: 'Iso',         icon: 'view_in_ar',     kind: 'icon' },
+  { value: 'Perspective', icon: '3d_rotation',    kind: 'icon' },
+]
+const VIEWS_ROW2 = [
+  { value: 'N', label: 'N', kind: 'letter' },
+  { value: 'O', label: 'O', kind: 'letter' },
+  { value: 'S', label: 'S', kind: 'letter' },
+  { value: 'W', label: 'W', kind: 'letter' },
 ]
 
 function fmtScale(s) {
@@ -307,6 +314,7 @@ export default function OberleisteApp() {
     massePresets: [], masseActiveId: null,
     textSettings: { font: 'Helvetica', size: 0.20, bold: false, italic: false },
     textFonts: [],
+    northAngle: 0,
   })
   const [appliedScale, setAppliedScale] = useState(null)
   const appliedScaleRef = useRef(null)
@@ -365,20 +373,19 @@ export default function OberleisteApp() {
     if (appliedScale && appliedScale > 0) setMassstab(appliedScale)
   }
 
-  // Aktuelles View-Match. Orthogonale Standard-Views matchen via viewName.
-  // 'Iso' und 'Perspective' werden via parallel-Flag unterschieden — die
-  // Rhino-Viewport-Namen sind beide oft "Perspective".
+  // Aktuelles View-Match. Top/Persp/Iso werden via parallel-Flag und
+  // viewName unterschieden. N/O/S/W: kein zuverlaessiges View-Match
+  // ueber den Viewport-Namen (wir setzen die Camera direkt) — daher
+  // kein Active-State fuer Cardinals.
   const matchView = (v) => {
     const name = (state.viewName || '').toLowerCase()
-    const ortho = ['top', 'front', 'right', 'bottom', 'left', 'back']
+    if (v === 'Top') return name === 'top'
+    if (v === 'Perspective') return state.parallel === false
     if (v === 'Iso') {
-      // Parallel-Projektion + kein orthogonaler Standardname → Iso
+      const ortho = ['top', 'front', 'right', 'bottom', 'left', 'back']
       return state.parallel === true && !ortho.includes(name)
     }
-    if (v === 'Perspective') {
-      return state.parallel === false
-    }
-    return name === v.toLowerCase()
+    return false
   }
 
   // (Command-Bar wurde entfernt — Rhinos eigene Command-Line wird benutzt.)
@@ -435,52 +442,88 @@ export default function OberleisteApp() {
         <Icon name="settings" size={14} />
       </button>
       <div style={sep} />
-      {/* ====== VIEW (Top/Front/Right/Iso/Persp + Kamera) ======
-          Segmented-Pill-Gruppe analog Vectorworks. Active = accent fill. */}
-      <div style={{ display: 'inline-flex', flexShrink: 0 }}>
-        {VIEWS.map((v, idx) => {
-          const isFirst = idx === 0
-          const isLast = idx === VIEWS.length - 1
-          const isActive = matchView(v.value)
-          return (
-            <button
-              key={v.value}
-              onClick={() => setView(v.value)}
-              title={`Ansicht ${v.label}`}
-              onMouseEnter={(e) => {
-                if (isActive) return
-                e.currentTarget.style.background = 'var(--bg-item-hover)'
-                e.currentTarget.style.color = 'var(--accent-light)'
-              }}
-              onMouseLeave={(e) => {
-                if (isActive) return
-                e.currentTarget.style.background = 'var(--bg-input)'
-                e.currentTarget.style.color = 'var(--text-primary)'
-              }}
-              style={{
-                height: BAR_H, padding: '0 10px',
-                background: isActive ? 'var(--accent)' : 'var(--bg-input)',
-                color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
-                border: '1px solid var(--border)',
-                borderLeft: isFirst ? '1px solid var(--border)' : 'none',
-                borderTopLeftRadius: isFirst ? 999 : 0,
-                borderBottomLeftRadius: isFirst ? 999 : 0,
-                borderTopRightRadius: isLast ? 999 : 0,
-                borderBottomRightRadius: isLast ? 999 : 0,
-                display: 'inline-flex', alignItems: 'center', gap: 4,
-                fontSize: 10, fontWeight: isActive ? 600 : 500,
-                cursor: 'pointer', flexShrink: 0,
-                transition: 'background 0.15s, color 0.15s',
-              }}
-            >
-              <Icon name={v.icon} size={13} />
-              <span>{v.label}</span>
-            </button>
-          )
-        })}
-      </div>
-      <BarButton icon="videocam" onClick={() => openKameraPanel()}
-                  title="Kamera-Einstellungen (Position, Target, Linse, Presets)" />
+      {/* ====== VIEW 2x4 Grid ======
+          Reihe 1: TOP / ISO / PERSP / 📷 (Kamera-Settings)
+          Reihe 2: N / O / S / W (rotieren mit dossier_north_angle)
+      */}
+      {(() => {
+        const VIEW_W = 140  // konsistent mit Massstab-Pills
+        const CELL_W = Math.floor(VIEW_W / 4)
+        const cellStyle = (isActive, isFirst) => ({
+          height: BAR_H, width: CELL_W,
+          background: isActive ? 'var(--accent)' : 'var(--bg-input)',
+          color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
+          border: 'none',
+          borderLeft: isFirst ? 'none' : '1px solid var(--border)',
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          gap: 4, fontWeight: isActive ? 600 : 500,
+          cursor: 'pointer', flexShrink: 0, padding: 0,
+          transition: 'background 0.15s, color 0.15s',
+        })
+        const hoverIn = (isActive) => (e) => {
+          if (isActive) return
+          e.currentTarget.style.background = 'var(--bg-item-hover)'
+          e.currentTarget.style.color = 'var(--accent-light)'
+        }
+        const hoverOut = (isActive) => (e) => {
+          if (isActive) return
+          e.currentTarget.style.background = 'var(--bg-input)'
+          e.currentTarget.style.color = 'var(--text-primary)'
+        }
+        // Reihe 1: 3 View-Icons + Kamera-Settings
+        const row1 = [
+          ...VIEWS_ROW1,
+          { value: '__camera__', icon: 'videocam', kind: 'icon' },
+        ]
+        return (
+          <div style={{
+            display: 'flex', flexDirection: 'column', gap: 4, flexShrink: 0,
+          }}>
+            {/* Reihe 1 */}
+            <div style={{
+              display: 'inline-flex', width: VIEW_W,
+              border: '1px solid var(--border)', borderRadius: 999,
+              overflow: 'hidden', flexShrink: 0,
+            }}>
+              {row1.map((v, idx) => {
+                const isActive = v.value !== '__camera__' && matchView(v.value)
+                const label = v.value === '__camera__' ? 'Kamera-Einstellungen'
+                  : `Ansicht ${v.value}`
+                return (
+                  <button key={v.value}
+                    onClick={() => v.value === '__camera__'
+                      ? openKameraPanel() : setView(v.value)}
+                    title={label}
+                    onMouseEnter={hoverIn(isActive)}
+                    onMouseLeave={hoverOut(isActive)}
+                    style={cellStyle(isActive, idx === 0)}>
+                    <Icon name={v.icon} size={13} />
+                  </button>
+                )
+              })}
+            </div>
+            {/* Reihe 2: N/O/S/W als Buchstaben */}
+            <div style={{
+              display: 'inline-flex', width: VIEW_W,
+              border: '1px solid var(--border)', borderRadius: 999,
+              overflow: 'hidden', flexShrink: 0,
+            }}>
+              {VIEWS_ROW2.map((v, idx) => (
+                <button key={v.value}
+                  onClick={() => setView(v.value)}
+                  title={`Ansicht aus ${v.value} (Norden = ${(state.northAngle || 0).toFixed(0)}°)`}
+                  onMouseEnter={hoverIn(false)}
+                  onMouseLeave={hoverOut(false)}
+                  style={cellStyle(false, idx === 0)}>
+                  <span style={{
+                    fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
+                  }}>{v.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )
+      })()}
 
       <div style={sep} />