UI-Konsistenz: shared BarControls + Tabellen-Look fuer Panels

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>

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>