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/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>
           </>
         )}