From d5bcee2157851eb539a76d0febc24e3d06d59a90 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Thu, 21 May 2026 23:56:33 +0200
Subject: [PATCH] UI-Konsistenz: shared BarControls + Tabellen-Look fuer Panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pill-basierte Toolbar-Primitiven aus OberleisteApp extrahiert nach
src/components/BarControls.jsx — BarCombo (Dropdown), BarButton
(Icon-Button), BarToggle (Label/Icon mit Active-State), BAR_H=22.

OberleisteApp nutzt jetzt die geteilten Komponenten (Verhalten
unveraendert).

EbenenManager + GeschossManager:
- Sichtbarkeits-Toolbar: native <select> + btn-icon-sm → BarCombo
  (mit visibility-Icon links) + BarButton add/settings.
- GeschossManager Stift-Icon (edit) → Settings-Icon.
- Zeilen-Layout: eckig statt Pill (margin 0, borderRadius 0,
  3px Accent-Strip links fuer aktive Zeile), minHeight 24, gap 4,
  kompaktere Padding/Icon-Sizes — Vectorworks-naeher.

DimensionenApp:
- Welt/CPlane: 2x BarToggle statt btn-contained/outlined
- Z-Selektor: 3x BarToggle (icon-only)
- Drehen-Apply + 90°-CCW/CW: BarButton mit rotate_*-Icons (4
  Preset-Buttons -90/-45/45/90 ersetzt durch 2 schnelle 90°-Buttons
  — passt besser in die schmale Sidebar)

README aktualisiert: Runtime jetzt CPython 3.9, TextEntity-RTF-Limit
dokumentiert, BarControls + text_editor/text_create erwaehnt.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 README.md                          |  12 +-
 src/DimensionenApp.jsx             |  64 +++++------
 src/OberleisteApp.jsx              | 136 +----------------------
 src/components/BarControls.jsx     | 169 +++++++++++++++++++++++++++++
 src/components/EbenenManager.jsx   |  68 ++++++------
 src/components/GeschossManager.jsx |  64 +++++------
 6 files changed, 280 insertions(+), 233 deletions(-)
 create mode 100644 src/components/BarControls.jsx

diff --git a/README.md b/README.md
index 4887cd7..c9adbb8 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Rhino-8 Plugin für architektonisches Entwerfen mit smarten Bauteilen — Geschosse, Wände, Decken, Dächer, Öffnungen (Fenster/Türen), Treppen (gerade · L · Wendel). Teil der **OpenStudio-Suite** (mit Rapport als Schwestertool).
 
-Die React-UI wird in Rhinos Eto.Forms-WebView über `LoadHtml` (inline) eingebettet — die Plugin-Logik läuft in IronPython3 in Rhino 8 (Mac).
+Die React-UI wird in Rhinos Eto.Forms-WebView über `LoadHtml` (inline) eingebettet — die Plugin-Logik läuft in **CPython 3.9** (Rhino 8 Script-Editor-Engine, Mac).
 
 ## Voraussetzungen
 
@@ -11,7 +11,7 @@ Die React-UI wird in Rhinos Eto.Forms-WebView über `LoadHtml` (inline) eingebet
 | Rhino | 8 (Mac · Windows untestet) |
 | Node.js | ≥ 20 (für Vite 8) |
 | npm | ≥ 10 |
-| Python | IronPython 3 (in Rhino integriert) |
+| Python | CPython 3.9 (Rhino 8 Script-Editor-Engine) |
 
 Optional — für den Standalone-Launcher:
 
@@ -105,7 +105,8 @@ for m in list(sys.modules):
 │   ├── MassstabApp.jsx        Massstab/Display-Modes
 │   ├── DimensionenApp.jsx     Objekt-Info (Position/Abmessungen)
 │   ├── OverridePanel.jsx      Override-Regeln + Kombinationen
-│   ├── components/            EbenenManager, GeschossManager, ...
+│   ├── TextEditorApp.jsx      DOSSIER-Text WYSIWYG-Editor (Rich-Text via RTF)
+│   ├── components/            EbenenManager, GeschossManager, BarControls (shared Pill-UI), ...
 │   └── lib/rhinoBridge.js     React↔Python Bridge
 ├── rhino/                     Backend (IronPython 3)
 │   ├── rhinopanel.py          Haupt-Entry, Bridge-Pattern
@@ -118,6 +119,8 @@ for m in list(sys.modules):
 │   ├── dimensionen.py         Objekt-Info Panel
 │   ├── gestaltung.py          Gestaltung (Override-Editor)
 │   ├── werkzeuge.py           Werkzeug-Sammlung
+│   ├── text_editor.py         DOSSIER-Text Backend (Frame-Pick + Rich-Text-RTF)
+│   ├── text_create.py         Text-Styles, Font-Apply, Selection-Settings
 │   └── oberleiste.py          Top-Menue (verbindet alle Panels)
 ├── launcher/                  Tauri-2 Standalone-Launcher (optional)
 ├── dist/                      Gebaute React-App (npm run build)
@@ -128,9 +131,10 @@ for m in list(sys.modules):
 
 ## Bekannte Limitierungen
 
-- IronPython3-spezifisch: keine Umlaute in Source-Strings (`ue/oe/ae` statt `ü/ö/ä`); UTF-8-Header-Kommentar in allen `.py`-Files.
+- **Python-Identifier ohne Umlaute** (`ue/oe/ae` statt `ü/ö/ä`) — UI-Strings dürfen Umlaute, Code-Bezeichner / Layer-Codes / UserString-Keys nicht. Konvention seit der Py3-Migration.
 - **Kein Docking** der Panels (Rhinos `RegisterPanel` schlägt fehl: `"constructor must accept uint, RhinoDoc or no params"`). Panels laufen daher als schwebende `forms.Form`-Fenster.
 - **`LoadHtml`-inline** statt `file://`-URL — Rhinos WKWebView blockiert sonst `<script type="module">` durch CORS-Restrictions.
+- **TextEntity-RTF**: Rhinos eingebauter Parser unterstützt nur `\b \i \ul \strike \fN \tab {}` plus Newline-via-`\par`-zwischen-Groups. **Kein `\fs`** (= eine TextEntity hat global eine Schriftgröße, keine per-Segment-Sizes). Newlines/Replace-Quirks siehe `_runs_to_rtf` in `rhino/text_editor.py`.
 
 ## Lizenz
 
diff --git a/src/DimensionenApp.jsx b/src/DimensionenApp.jsx
index f4e9290..e3a3a0a 100644
--- a/src/DimensionenApp.jsx
+++ b/src/DimensionenApp.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import Icon from './components/Icon'
+import { BarToggle, BarButton } from './components/BarControls'
 import {
   onMessage, notifyReady,
   setRefPoint, setCoordSystem,
@@ -101,24 +102,19 @@ function RefPointGrid({ ref, onChange }) {
 // Z-Referenz-Selektor (Bottom / Mid / Top) — kompakt, nur Icons.
 function RefZSelector({ z, onChange }) {
   return (
-    <div style={{ display: 'flex', gap: 2 }}>
+    <div style={{ display: 'flex', gap: 3 }}>
       {[
         { code: 'max', icon: 'vertical_align_top',    title: 'Z = Top' },
         { code: 'mid', icon: 'vertical_align_center', title: 'Z = Mid' },
         { code: 'min', icon: 'vertical_align_bottom', title: 'Z = Bottom' },
       ].map(opt => (
-        <button
+        <BarToggle
           key={opt.code}
+          icon={opt.icon}
+          active={z === opt.code}
           onClick={() => onChange(opt.code)}
-          className={z === opt.code ? 'btn-contained' : 'btn-outlined'}
-          style={{
-            padding: '2px 5px', fontSize: 10,
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
           title={opt.title}
-        >
-          <Icon name={opt.icon} size={12} />
-        </button>
+        />
       ))}
     </div>
   )
@@ -203,19 +199,19 @@ export default function DimensionenApp() {
         }}>
           <Icon name="select_all" size={14} style={{ color: 'var(--text-muted)' }} />
           <span style={{ flex: 1, fontWeight: 500 }}>{selLabel()}</span>
-          <div style={{ display: 'flex', gap: 2 }}>
-            <button
+          <div style={{ display: 'flex', gap: 3 }}>
+            <BarToggle
+              label="Welt"
+              active={state.coordSystem === 'world'}
               onClick={() => onCoordChange('world')}
-              className={state.coordSystem === 'world' ? 'btn-contained' : 'btn-outlined'}
-              style={{ fontSize: 10, padding: '3px 8px' }}
               title="Weltkoordinaten"
-            >Welt</button>
-            <button
+            />
+            <BarToggle
+              label="CPlane"
+              active={state.coordSystem === 'cplane'}
               onClick={() => onCoordChange('cplane')}
-              className={state.coordSystem === 'cplane' ? 'btn-contained' : 'btn-outlined'}
-              style={{ fontSize: 10, padding: '3px 8px' }}
               title="Aktive Konstruktionsebene"
-            >CPlane</button>
+            />
           </div>
         </div>
 
@@ -321,27 +317,23 @@ export default function DimensionenApp() {
               <div style={{ width: 56 }}>
                 <NumInput value={rotationDelta} onCommit={setRotationDelta} suffix="°" />
               </div>
-              <button
-                className="btn-outlined"
+              <BarButton
+                icon="rotate_right"
                 onClick={() => { if (rotationDelta) setDimRotationZ(rotationDelta) }}
                 disabled={!rotationDelta}
                 title="Selektion um Z-Achse der aktiven Plane drehen"
-                style={{ padding: '3px 8px', fontSize: 11 }}
-              >
-                <Icon name="rotate_right" size={13} />
-              </button>
+              />
               <div style={{ flex: 1 }} />
-              {[-90, -45, 45, 90].map(a => (
-                <button
-                  key={a}
-                  className="btn-outlined"
-                  onClick={() => setDimRotationZ(a)}
-                  style={{ padding: '3px 6px', fontSize: 9, minWidth: 28 }}
-                  title={`${a}°`}
-                >
-                  {a > 0 ? '+' : ''}{a}°
-                </button>
-              ))}
+              <BarButton
+                icon="rotate_90_degrees_ccw"
+                onClick={() => setDimRotationZ(-90)}
+                title="90° gegen den Uhrzeigersinn"
+              />
+              <BarButton
+                icon="rotate_90_degrees_cw"
+                onClick={() => setDimRotationZ(90)}
+                title="90° im Uhrzeigersinn"
+              />
             </div>
           </>
         )}
diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 133c415..3a8393c 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import Icon from './components/Icon'
+import { BarCombo, BarButton, BAR_H } from './components/BarControls'
 import {
   onMessage, notifyReady,
   requestMassstab, setMassstab,
@@ -73,7 +74,6 @@ function parseScale(input) {
 // zwischen Icon-Kompartiment und Inhalt.
 
 const PILL_H = 20  // alte Pill-Hoehe (Buttons/Chips die nicht migriert sind)
-const BAR_H  = 22  // neue Widget-Hoehe (BarSelect, BarButton, BarGroup)
 
 const sep = {
   width: 1, height: 20,
@@ -92,135 +92,9 @@ const pillSelect = {
   fontSize: 10,
 }
 
-// BarCombo: dunklerer (bg-input) Pill-Container der select + optional gear
-// als EINE nahtlose Box rendert. Icon roh links daneben (kein Container).
-// iconClickable=true macht das Icon zum Toggle-Button (Overrides etc.).
-// valueAccent=true faerbt den Select-Text accent (fuer Massstab "gesetzt").
-function BarCombo({
-  icon, iconActive, iconClickable, onIconClick, iconTitle,
-  value, onChange, width, title, children, disabled,
-  onGear, gearTitle, valueAccent,
-}) {
-  return (
-    <div style={{
-      display: 'inline-flex', alignItems: 'center', gap: 5,
-      opacity: disabled ? 0.5 : 1, flexShrink: 0,
-    }}>
-      {/* Icon links — fixe Breite fuer X-Axis-Alignment zwischen Reihen.
-          Wenn icon=null/undefined wird kein Icon-Slot reserviert. */}
-      {icon && (iconClickable ? (
-        <button onClick={onIconClick} title={iconTitle}
-          style={{
-            width: 18, height: BAR_H,
-            background: 'transparent', border: 'none',
-            cursor: 'pointer', flexShrink: 0, padding: 0,
-            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-          }}>
-          <Icon name={icon} size={13}
-                style={{ color: iconActive ? 'var(--accent)' : 'var(--text-muted)' }} />
-        </button>
-      ) : (
-        <span style={{
-          width: 18, height: BAR_H, flexShrink: 0,
-          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-        }}>
-          <Icon name={icon} size={13} style={{ color: 'var(--text-muted)' }} />
-        </span>
-      ))}
-      {/* Combined pill: select + optional gear, gemeinsamer bg + border */}
-      <div title={title}
-        onMouseEnter={(e) => {
-          if (disabled) return
-          e.currentTarget.style.borderColor = 'var(--accent)'
-          e.currentTarget.style.background = 'var(--bg-item-hover)'
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.borderColor = 'var(--border)'
-          e.currentTarget.style.background = 'var(--bg-input)'
-        }}
-        style={{
-          display: 'inline-flex', alignItems: 'stretch',
-          height: BAR_H + 2, width, boxSizing: 'border-box',
-          background: 'var(--bg-input)',
-          border: '1px solid var(--border)',
-          borderRadius: 999,
-          overflow: 'hidden',
-          transition: 'border-color 0.15s, background 0.15s',
-        }}>
-        <select
-          value={value || ''}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value)}
-          style={{
-            flex: 1, minWidth: 0,
-            background: 'transparent',
-            color: valueAccent ? 'var(--accent-light)' : 'var(--text-primary)',
-            border: 'none', outline: 'none',
-            padding: '0 22px 0 12px',
-            fontSize: 11, fontFamily: 'var(--font)',
-            fontWeight: valueAccent ? 600 : 500,
-            appearance: 'none', WebkitAppearance: 'none',
-            backgroundImage: 'var(--select-arrow)',
-            backgroundRepeat: 'no-repeat',
-            // Caret-Position differenziert: ohne Gear normaler Abstand
-            // (10px vom Pill-Rand), mit Gear minimaler Abstand damit
-            // er an den Gear ranruckt.
-            backgroundPosition: onGear ? 'right 1px center' : 'right 10px center',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            letterSpacing: 0,
-          }}
-        >{children}</select>
-        {onGear && (
-          <button onClick={onGear} title={gearTitle}
-            style={{
-              background: 'transparent', border: 'none',
-              padding: '0 8px', cursor: 'pointer',
-              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-              flexShrink: 0,
-            }}>
-            <Icon name="settings" size={12}
-                  style={{ color: 'var(--text-muted)' }} />
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}
+// BarCombo + BarButton + BAR_H jetzt zentral in ./components/BarControls.jsx —
+// werden auch in Ebenen/anderen Panels verwendet.
 
-// BarButton: pill-foermiger Icon-Button im selben Stil wie BarSelect.
-// joinedLeft = linke Kante flach (dockt rechts an einen BarSelect-joinedRight).
-function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
-  return (
-    <button onClick={onClick} disabled={disabled} title={title}
-      onMouseEnter={(e) => {
-        if (disabled || active) return
-        e.currentTarget.style.borderColor = 'var(--accent)'
-        e.currentTarget.style.background = 'var(--bg-item-hover)'
-      }}
-      onMouseLeave={(e) => {
-        if (active) return
-        e.currentTarget.style.borderColor = 'var(--border)'
-        e.currentTarget.style.background = 'var(--bg-input)'
-      }}
-      style={{
-        height: BAR_H, width: BAR_H,
-        background: active ? 'var(--accent)' : 'var(--bg-input)',
-        border: '1px solid var(--border)',
-        borderTopLeftRadius: joinedLeft ? 0 : 999,
-        borderBottomLeftRadius: joinedLeft ? 0 : 999,
-        borderTopRightRadius: 999, borderBottomRightRadius: 999,
-        borderLeft: joinedLeft ? 'none' : '1px solid var(--border)',
-        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1, flexShrink: 0,
-        padding: 0,
-        transition: 'border-color 0.15s, background 0.15s',
-      }}>
-      <Icon name={icon} size={13}
-            style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
-    </button>
-  )
-}
 const pillInput = {
   height: PILL_H, lineHeight: PILL_H + 'px',
   padding: '0 8px', boxSizing: 'border-box',
@@ -796,7 +670,9 @@ export default function OberleisteApp() {
         const ts = sel || state.textSettings || {}
         const fonts = state.textFonts || []
         const styles = state.textStyles || []
-        const activeStyleId = state.textStyleActiveId
+        // Bei Selektion: Style-ID vom Text selber (falls per apply_style gesetzt),
+        // sonst auf globalen Active-Style fallen
+        const activeStyleId = (sel && sel.styleId) || state.textStyleActiveId
         const updateTs = (patch) => setTextSettings({ ...ts, ...patch })
         const STYLE_W = 110
         const FONT_W  = 130
diff --git a/src/components/BarControls.jsx b/src/components/BarControls.jsx
new file mode 100644
index 0000000..683012a
--- /dev/null
+++ b/src/components/BarControls.jsx
@@ -0,0 +1,169 @@
+import Icon from './Icon'
+
+// Gemeinsame Toolbar-Primitiven für Panels im Oberleiste-Stil:
+// Pill-Container mit konsistenter Höhe, Accent-Border bei Hover/Active.
+// Quelle: ursprünglich in OberleisteApp.jsx — zur Wiederverwendung in
+// weiteren Panels extrahiert.
+
+export const BAR_H = 22
+
+// BarCombo: dunklerer (bg-input) Pill-Container der select + optional gear
+// als EINE nahtlose Box rendert. Icon roh links daneben (kein Container).
+// iconClickable=true macht das Icon zum Toggle-Button.
+// valueAccent=true faerbt den Select-Text accent.
+export function BarCombo({
+  icon, iconActive, iconClickable, onIconClick, iconTitle,
+  value, onChange, width, title, children, disabled,
+  onGear, gearTitle, valueAccent,
+}) {
+  return (
+    <div style={{
+      display: 'inline-flex', alignItems: 'center', gap: 5,
+      opacity: disabled ? 0.5 : 1, flexShrink: 0,
+    }}>
+      {icon && (iconClickable ? (
+        <button onClick={onIconClick} title={iconTitle}
+          style={{
+            width: 18, height: BAR_H,
+            background: 'transparent', border: 'none',
+            cursor: 'pointer', flexShrink: 0, padding: 0,
+            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+          <Icon name={icon} size={13}
+                style={{ color: iconActive ? 'var(--accent)' : 'var(--text-muted)' }} />
+        </button>
+      ) : (
+        <span style={{
+          width: 18, height: BAR_H, flexShrink: 0,
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          <Icon name={icon} size={13} style={{ color: 'var(--text-muted)' }} />
+        </span>
+      ))}
+      <div title={title}
+        onMouseEnter={(e) => {
+          if (disabled) return
+          e.currentTarget.style.borderColor = 'var(--accent)'
+          e.currentTarget.style.background = 'var(--bg-item-hover)'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = 'var(--border)'
+          e.currentTarget.style.background = 'var(--bg-input)'
+        }}
+        style={{
+          display: 'inline-flex', alignItems: 'stretch',
+          height: BAR_H + 2, width, boxSizing: 'border-box',
+          background: 'var(--bg-input)',
+          border: '1px solid var(--border)',
+          borderRadius: 999,
+          overflow: 'hidden',
+          transition: 'border-color 0.15s, background 0.15s',
+        }}>
+        <select
+          value={value || ''}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+          style={{
+            flex: 1, minWidth: 0,
+            background: 'transparent',
+            color: valueAccent ? 'var(--accent-light)' : 'var(--text-primary)',
+            border: 'none', outline: 'none',
+            padding: '0 22px 0 12px',
+            fontSize: 11, fontFamily: 'var(--font)',
+            fontWeight: valueAccent ? 600 : 500,
+            appearance: 'none', WebkitAppearance: 'none',
+            backgroundImage: 'var(--select-arrow)',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: onGear ? 'right 1px center' : 'right 10px center',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            letterSpacing: 0,
+          }}
+        >{children}</select>
+        {onGear && (
+          <button onClick={onGear} title={gearTitle}
+            style={{
+              background: 'transparent', border: 'none',
+              padding: '0 8px', cursor: 'pointer',
+              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+              flexShrink: 0,
+            }}>
+            <Icon name="settings" size={12}
+                  style={{ color: 'var(--text-muted)' }} />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// BarToggle: Pill-Button mit Label (+ optionalem Icon) und Active-State.
+// Eignet sich fuer Toggles wie Welt/CPlane, Z-Selektor, Preset-Buttons.
+export function BarToggle({ icon, label, active, onClick, title, disabled, minWidth }) {
+  return (
+    <button onClick={onClick} disabled={disabled} title={title}
+      onMouseEnter={(e) => {
+        if (disabled || active) return
+        e.currentTarget.style.borderColor = 'var(--accent)'
+        e.currentTarget.style.background = 'var(--bg-item-hover)'
+      }}
+      onMouseLeave={(e) => {
+        if (active) return
+        e.currentTarget.style.borderColor = 'var(--border)'
+        e.currentTarget.style.background = 'var(--bg-input)'
+      }}
+      style={{
+        height: BAR_H, minWidth: minWidth || BAR_H,
+        padding: label ? '0 10px' : 0,
+        background: active ? 'var(--accent)' : 'var(--bg-input)',
+        color: active ? 'var(--bg-panel)' : 'var(--text-primary)',
+        border: '1px solid ' + (active ? 'var(--accent)' : 'var(--border)'),
+        borderRadius: 999,
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        gap: 4, fontSize: 11,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        appearance: 'none', WebkitAppearance: 'none',
+        lineHeight: 1, boxSizing: 'border-box', flexShrink: 0,
+        transition: 'background 0.15s, border-color 0.15s, color 0.15s',
+      }}>
+      {icon && <Icon name={icon} size={12}
+        style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />}
+      {label && <span>{label}</span>}
+    </button>
+  )
+}
+
+// BarButton: pill-foermiger Icon-Button im selben Stil wie BarCombo.
+// joinedLeft = linke Kante flach (dockt rechts an einen BarCombo).
+export function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
+  return (
+    <button onClick={onClick} disabled={disabled} title={title}
+      onMouseEnter={(e) => {
+        if (disabled || active) return
+        e.currentTarget.style.borderColor = 'var(--accent)'
+        e.currentTarget.style.background = 'var(--bg-item-hover)'
+      }}
+      onMouseLeave={(e) => {
+        if (active) return
+        e.currentTarget.style.borderColor = 'var(--border)'
+        e.currentTarget.style.background = 'var(--bg-input)'
+      }}
+      style={{
+        height: BAR_H, width: BAR_H,
+        background: active ? 'var(--accent)' : 'var(--bg-input)',
+        border: '1px solid var(--border)',
+        borderTopLeftRadius: joinedLeft ? 0 : 999,
+        borderBottomLeftRadius: joinedLeft ? 0 : 999,
+        borderTopRightRadius: 999, borderBottomRightRadius: 999,
+        borderLeft: joinedLeft ? 'none' : '1px solid var(--border)',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1, flexShrink: 0,
+        padding: 0,
+        transition: 'border-color 0.15s, background 0.15s',
+      }}>
+      <Icon name={icon} size={13}
+            style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
+    </button>
+  )
+}
diff --git a/src/components/EbenenManager.jsx b/src/components/EbenenManager.jsx
index 37cc0e7..2e5e0f1 100644
--- a/src/components/EbenenManager.jsx
+++ b/src/components/EbenenManager.jsx
@@ -2,6 +2,7 @@ import { useState, useRef, useMemo, useEffect } from 'react'
 import Icon from './Icon'
 import ConfirmDeleteEbene from './ConfirmDeleteEbene'
 import ContextMenu from './ContextMenu'
+import { BarCombo, BarButton } from './BarControls'
 import { setLayerStyle, deleteEbene, moveSelectionToEbene, openEbenenSettings } from '../lib/rhinoBridge'
 
 const MODES = [
@@ -79,11 +80,11 @@ function LwCell({ lw, onChange }) {
         >{lw.toFixed(2)}</span>
       )}
       <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
-        <button className="btn-step" onClick={(ev) => { ev.stopPropagation(); step(+1) }} style={{ width: 10, height: 7 }}>
-          <Icon name="arrow_drop_up" size={10} />
+        <button className="btn-step" onClick={(ev) => { ev.stopPropagation(); step(+1) }} style={{ width: 10, height: 6 }}>
+          <Icon name="arrow_drop_up" size={9} />
         </button>
-        <button className="btn-step" onClick={(ev) => { ev.stopPropagation(); step(-1) }} style={{ width: 10, height: 7 }}>
-          <Icon name="arrow_drop_down" size={10} />
+        <button className="btn-step" onClick={(ev) => { ev.stopPropagation(); step(-1) }} style={{ width: 10, height: 6 }}>
+          <Icon name="arrow_drop_down" size={9} />
         </button>
       </div>
     </div>
@@ -243,21 +244,21 @@ function EbeneRow({ e, depth, hasChildren, expanded, onToggleExpand, active, mod
       onClick={onClick}
       onContextMenu={onContextMenu}
       style={{
-        display: 'flex', alignItems: 'center', gap: 5,
-        padding: '3px 12px',
-        paddingLeft: 12 + (depth || 0) * 14,
-        margin: active ? '1px 6px' : '0',
+        display: 'flex', alignItems: 'center', gap: 4,
+        padding: '1px 12px',
+        paddingLeft: 12 + (depth || 0) * 12,
+        margin: 0,
         background: active ? 'var(--active-dim)'
                   : (e.visible !== false) ? 'var(--bg-item)'
                   : 'var(--bg-panel)',
-        // Pill-Form fuer die aktive Ebene, sonst Standard-Zeile mit Bottom-Border
-        borderRadius: active ? 999 : 0,
-        borderLeft: active ? 'none' : '3px solid transparent',
-        borderBottom: active ? 'none' : '1px solid var(--border-light)',
-        boxShadow: active ? 'inset 0 0 0 1px var(--active-light)' : 'none',
+        // Eckige Tabellen-Zeile mit Accent-Strip links fuer aktive Ebene
+        borderRadius: 0,
+        borderLeft: '3px solid ' + (active ? 'var(--accent)' : 'transparent'),
+        borderBottom: '1px solid var(--border-light)',
         opacity: (!active && e.visible === false && mode !== 'all') ? 0.45 : 1,
         cursor: 'pointer',
         userSelect: 'none',
+        minHeight: 24,
       }}
     >
       {hasChildren ? (
@@ -265,24 +266,24 @@ function EbeneRow({ e, depth, hasChildren, expanded, onToggleExpand, active, mod
           className="btn-icon-xs"
           onClick={(ev) => { ev.stopPropagation(); onToggleExpand() }}
           title={expanded ? 'Einklappen' : 'Aufklappen'}
-          style={{ width: 14, height: 14 }}
-        ><Icon name={expanded ? 'expand_more' : 'chevron_right'} size={12} /></button>
+          style={{ width: 12, height: 12 }}
+        ><Icon name={expanded ? 'expand_more' : 'chevron_right'} size={11} /></button>
       ) : (
-        <span style={{ width: 14, flexShrink: 0 }} />
+        <span style={{ width: 12, flexShrink: 0 }} />
       )}
       <button
         className={`btn-icon-sm ${eyeOn ? 'is-on' : ''}`}
         onClick={(ev) => { ev.stopPropagation(); onToggleVisible() }}
         title={eyeTitle}
-        style={{ opacity: eyeOpacity }}
-      ><Icon name={eyeIcon} size={14} /></button>
+        style={{ opacity: eyeOpacity, width: 16, height: 16 }}
+      ><Icon name={eyeIcon} size={12} /></button>
 
       <EditableText
         value={e.code}
         onCommit={onCodeChange}
         autoEditTrigger={autoEditCode}
         fontSize={9}
-        style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', width: 24, textAlign: 'left', flexShrink: 0 }}
+        style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', width: 22, textAlign: 'left', flexShrink: 0 }}
       />
 
       <ColorPicker color={e.color} onChange={onColorChange} />
@@ -300,6 +301,7 @@ function EbeneRow({ e, depth, hasChildren, expanded, onToggleExpand, active, mod
                   : 'var(--text-muted)',
             display: 'inline-block', width: '100%',
             overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+            lineHeight: 1.2,
           }}
         />
       </div>
@@ -310,14 +312,15 @@ function EbeneRow({ e, depth, hasChildren, expanded, onToggleExpand, active, mod
         className="btn-icon-xs"
         onClick={(ev) => { ev.stopPropagation(); onToggleLock() }}
         title={e.locked ? 'Entsperren' : 'Sperren'}
-        style={{ color: e.locked ? 'var(--warn)' : undefined }}
-      ><Icon name={e.locked ? 'lock' : 'lock_open'} size={12} /></button>
+        style={{ color: e.locked ? 'var(--warn)' : undefined, width: 14, height: 14 }}
+      ><Icon name={e.locked ? 'lock' : 'lock_open'} size={11} /></button>
 
       <button
         className="btn-icon-xs"
         onClick={(ev) => { ev.stopPropagation(); onDelete() }}
         title="Löschen"
-      ><Icon name="close" size={12} /></button>
+        style={{ width: 14, height: 14 }}
+      ><Icon name="close" size={11} /></button>
     </div>
   )
 }
@@ -547,16 +550,17 @@ export default function EbenenManager({
       }}>
         <span className="label-xs">Sichtbarkeit</span>
         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <select
-            value={mode}
-            onChange={ev => onModeChange(ev.target.value)}
-            style={{ flex: 1, minWidth: 0 }}
-          >
-            {MODES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
-          </select>
-          <button className="btn-icon-sm" onClick={addNew} title="Ebene hinzufügen">
-            <Icon name="add" size={14} />
-          </button>
+          <div style={{ flex: 1, minWidth: 0, display: 'flex' }}>
+            <BarCombo
+              icon="visibility"
+              value={mode}
+              onChange={onModeChange}
+              title="Sichtbarkeits-Modus"
+            >
+              {MODES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
+            </BarCombo>
+          </div>
+          <BarButton icon="add" onClick={addNew} title="Ebene hinzufügen" />
         </div>
       </div>
 
diff --git a/src/components/GeschossManager.jsx b/src/components/GeschossManager.jsx
index 3a02548..68b9114 100644
--- a/src/components/GeschossManager.jsx
+++ b/src/components/GeschossManager.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import Icon from './Icon'
 import ContextMenu from './ContextMenu'
+import { BarCombo, BarButton } from './BarControls'
 import { openGeschossSettings, openGeschossDialog } from '../lib/rhinoBridge'
 
 function GeschossBadge({ name }) {
@@ -46,31 +47,32 @@ function ZeichnungsebeneRow({
       onClick={onClick}
       onContextMenu={onContextMenu}
       style={{
-        display: 'flex', alignItems: 'center', gap: 6,
-        padding: '4px 12px',
-        margin: active ? '1px 6px' : '0',
+        display: 'flex', alignItems: 'center', gap: 4,
+        padding: '1px 12px',
+        margin: 0,
         background: active ? 'var(--active-dim)' : 'var(--bg-item)',
-        borderRadius: active ? 999 : 0,
-        borderLeft: active ? 'none' : '3px solid transparent',
-        borderBottom: active ? 'none' : '1px solid var(--border-light)',
-        boxShadow: active ? 'inset 0 0 0 1px var(--active-light)' : 'none',
+        borderRadius: 0,
+        borderLeft: '3px solid ' + (active ? 'var(--accent)' : 'transparent'),
+        borderBottom: '1px solid var(--border-light)',
         cursor: 'pointer',
         userSelect: 'none',
+        minHeight: 24,
       }}
     >
       <button
         className={`btn-icon-sm ${eyeOn ? 'is-on' : ''}`}
         onClick={(ev) => { ev.stopPropagation(); onToggleVisible() }}
         title={eyeTitle}
-        style={{ opacity: eyeOpacity }}
-      ><Icon name={eyeIcon} size={14} /></button>
+        style={{ opacity: eyeOpacity, width: 16, height: 16 }}
+      ><Icon name={eyeIcon} size={12} /></button>
 
       <span style={{
         fontWeight: active ? 700 : 500,
-        fontSize: 12,
+        fontSize: 11,
         color: active ? 'var(--active-light)' : 'var(--text-label)',
         flex: 1, minWidth: 0,
         overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        lineHeight: 1.2,
       }}>{z.name}</span>
 
       {isGeschoss && (
@@ -88,24 +90,25 @@ function ZeichnungsebeneRow({
           title={z.hasClipping
             ? 'Clipping Plane ausschalten'
             : 'Clipping Plane einschalten (Schnitt auf Schnitthöhe)'}
-          style={{ color: z.hasClipping ? 'var(--accent)' : undefined }}
-        ><Icon name="content_cut" size={12} /></button>
+          style={{ color: z.hasClipping ? 'var(--accent)' : undefined, width: 14, height: 14 }}
+        ><Icon name="content_cut" size={11} /></button>
       ) : (
-        <span style={{ width: 18, flexShrink: 0 }} />
+        <span style={{ width: 14, flexShrink: 0 }} />
       )}
 
       <button
         className="btn-icon-xs"
         onClick={(ev) => { ev.stopPropagation(); onToggleLock() }}
         title={z.locked ? 'Entsperren' : 'Sperren'}
-        style={{ color: z.locked ? 'var(--warn)' : undefined }}
-      ><Icon name={z.locked ? 'lock' : 'lock_open'} size={12} /></button>
+        style={{ color: z.locked ? 'var(--warn)' : undefined, width: 14, height: 14 }}
+      ><Icon name={z.locked ? 'lock' : 'lock_open'} size={11} /></button>
 
       <button
         className="btn-icon-xs"
         onClick={(ev) => { ev.stopPropagation(); onDelete() }}
         title="Löschen"
-      ><Icon name="close" size={12} /></button>
+        style={{ width: 14, height: 14 }}
+      ><Icon name="close" size={11} /></button>
     </div>
   )
 }
@@ -215,21 +218,20 @@ export default function GeschossManager({
       }}>
         <span className="label-xs">Sichtbarkeit</span>
         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <select
-            value={mode}
-            onChange={ev => onModeChange(ev.target.value)}
-            style={{ flex: 1, minWidth: 0 }}
-          >
-            {MODES.map(m => (
-              <option key={m.value} value={m.value}>{m.label}</option>
-            ))}
-          </select>
-          <button className="btn-icon-sm" onClick={addQuick} title="Zeichnungsebene hinzufügen">
-            <Icon name="add" size={14} />
-          </button>
-          <button className="btn-icon-sm" onClick={() => openGeschossDialog(zeichnungsebenen)} title="Bearbeiten">
-            <Icon name="edit" size={13} />
-          </button>
+          <div style={{ flex: 1, minWidth: 0, display: 'flex' }}>
+            <BarCombo
+              icon="visibility"
+              value={mode}
+              onChange={onModeChange}
+              title="Sichtbarkeits-Modus"
+            >
+              {MODES.map(m => (
+                <option key={m.value} value={m.value}>{m.label}</option>
+              ))}
+            </BarCombo>
+          </div>
+          <BarButton icon="add" onClick={addQuick} title="Zeichnungsebene hinzufügen" />
+          <BarButton icon="settings" onClick={() => openGeschossDialog(zeichnungsebenen)} title="Einstellungen" />
         </div>
       </div>