Ribbon Phase 3: Werkzeug-Sidebar aus Default-Layout, Wandtyp-Picker ins Attribute-Panel, Attribute volle Höhe (LAYOUT_VERSION 8)

src/i18n/de.ts

@@ -221,6 +221,7 @@ export const de = {
   // Attribute-Palette (AttributesPanel)
   "attr.title": "Attribute",
   "attr.empty": "Keine Auswahl",
+  "attr.newComponent": "Neues Bauteil",
   "attr.stroke": "Stift",
   "attr.color": "Farbe",
   "attr.weight": "Strichstärke (mm)",

src/i18n/en.ts

@@ -220,6 +220,7 @@ export const en: Record<TranslationKey, string> = {
   // Attribute-Palette (AttributesPanel)
   "attr.title": "Attributes",
   "attr.empty": "No selection",
+  "attr.newComponent": "New component",
   "attr.stroke": "Pen",
   "attr.color": "Color",
   "attr.weight": "Line weight (mm)",

src/panels/AttributesPanel.tsx

@@ -47,11 +47,38 @@ export function AttributesPanel() {
   const sel = host.selection;
   const { project } = host;
 
-  // Leerzustand: kompakter Hinweis, wenn nichts (Sinnvolles) selektiert ist.
+  // Wandtyp-/Deckentyp-Wahl für das NEUE Bauteil (was gezeichnet wird) — früher
+  // in der Werkzeug-Sidebar (ToolsPanel), seit deren Entfernung hier. Erscheint
+  // nur bei aktivem Wand-/Decken-Werkzeug (unabhängig von einer Auswahl); Wand und
+  // Decke teilen sich denselben Aufbau-Typ (WallType) + Host-State.
+  const drawingComponent =
+    host.activeTool === "wall" || host.activeTool === "ceiling";
+  const typeSection = drawingComponent ? (
+    <>
+      <div className="attr-section-label">{t("attr.newComponent")}</div>
+      <div className="attr-grid">
+        <span className="attr-key">
+          {t(host.activeTool === "wall" ? "tool.wallType" : "tool.ceilingType")}
+        </span>
+        <span className="attr-val">
+          <Dropdown
+            value={host.activeWallTypeId}
+            disabled={!host.toolsEnabled}
+            onChange={(v) => host.onActiveWallTypeId(v)}
+            options={project.wallTypes.map((wt) => ({ value: wt.id, label: wt.name }))}
+          />
+        </span>
+      </div>
+    </>
+  ) : null;
+
+  // Leerzustand: der Typ-Picker (falls ein Bauteil-Werkzeug aktiv ist), sonst ein
+  // kompakter Hinweis.
   if (sel === null) {
     return (
       <div className="attr-panel">
-        <div className="attr-empty">{t("attr.empty")}</div>
+        {typeSection}
+        {!typeSection && <div className="attr-empty">{t("attr.empty")}</div>}
       </div>
     );
   }
@@ -158,6 +185,8 @@ export function AttributesPanel() {
 
   return (
     <div className="attr-panel">
+      {/* Typ-Picker für das neue Bauteil (nur bei aktivem Wand-/Decken-Werkzeug). */}
+      {typeSection}
       {/* EIN durchgehendes Grid über alle Sektionen — dieselben zwei Spalten
           (Label | Wert) für Stift/Füllung/Maße, damit die Wertfelder überall
           bündig in EINER Spalte stehen. Sektion-Balken spannen beide Spalten. */}

src/panels/ToolsPanel.tsx

@@ -13,7 +13,6 @@ import { t } from "../i18n";
 import { usePanelHost } from "./host";
 import type { ToolId } from "./host";
 import { TOOL_ORDER, getTool } from "../tools/tools";
-import { Dropdown } from "../ui/Dropdown";
 
 // ── Icons ──────────────────────────────────────────────────────────────────
 // Keine echten Asset-Icons vorhanden: schlichte Inline-SVG-Glyphen je Werkzeug
@@ -162,44 +161,9 @@ export function ToolsPanel() {
         );
       })}
 
-      <div className="tools-sep" />
+      {/* Wandtyp-/Deckentyp-Auswahl ist ins Attribute-Panel gewandert (Ribbon-UI
-
+          Phase 3: Werkzeug-Sidebar nicht mehr im Default-Layout). Der Picker
-      {/* Wandtyp-Auswahl — nur sichtbar, wenn das Wand-Werkzeug aktiv ist. */}
+          erscheint dort bei aktivem Wand-/Decken-Werkzeug. */}
-      {host.activeTool === "wall" && (
-        <label className="tools-field">
-          <span>{t("tool.wallType")}</span>
-          <Dropdown
-            value={host.activeWallTypeId}
-            disabled={!host.toolsEnabled}
-            onChange={(v) => host.onActiveWallTypeId(v)}
-            options={host.project.wallTypes.map((wt) => ({
-              value: wt.id,
-              label: wt.name,
-            }))}
-          />
-        </label>
-      )}
-
-      {host.activeTool === "wall" && <div className="tools-sep" />}
-
-      {/* Deckentyp-Auswahl — nur sichtbar, wenn das Decken-Werkzeug aktiv ist.
-          Nutzt denselben Aufbau-Typ (WallType) wie die Wand. */}
-      {host.activeTool === "ceiling" && (
-        <label className="tools-field">
-          <span>{t("tool.ceilingType")}</span>
-          <Dropdown
-            value={host.activeWallTypeId}
-            disabled={!host.toolsEnabled}
-            onChange={(v) => host.onActiveWallTypeId(v)}
-            options={host.project.wallTypes.map((wt) => ({
-              value: wt.id,
-              label: wt.name,
-            }))}
-          />
-        </label>
-      )}
-
-      {host.activeTool === "ceiling" && <div className="tools-sep" />}
     </div>
   );
 }

src/panels/layout.ts

@@ -31,7 +31,10 @@ import type {
  * der rechten unteren Gruppe. Das Hochzählen verwirft alt gespeicherte Layouts
  * sauber auf den neuen Standard (kein Migrationspfad über die Strukturgrenze).
  */
-export const LAYOUT_VERSION = 7;
+// v8: Werkzeug-Sidebar aus dem Default-Layout entfernt (Ribbon-UI Phase 3) →
+// Version-Bump, damit gespeicherte Layouts auf den neuen Standard zurückfallen
+// (Attribute volle linke Höhe statt Werkzeug-Palette oben).
+export const LAYOUT_VERSION = 8;
 
 /** localStorage-Schlüssel des zuletzt benutzten Layouts. */
 const CURRENT_KEY = "cad.layout";
@@ -55,9 +58,12 @@ const NAMED_PREFIX = "cad.layouts.";
  * OBEN, Zeichnungsebenen + Ebenen als Tab-Stapel UNTEN. (Ressourcen bleibt ein
  * schwebendes Fenster.) Jede Gruppe trägt ein Höhen-Gewicht.
  */
+// Ribbon-UI Phase 3: die Werkzeug-Sidebar ("tools") ist NICHT mehr im Default-
+// Layout — die Werkzeuge liegen im Ribbon, der Wandtyp-/Deckentyp-Picker im
+// Attribute-Panel. `ToolsPanel` bleibt registriert (per Fenster-Menü andockbar),
+// nur nicht mehr per Default sichtbar → Attribute bekommt die volle linke Höhe.
 const DEFAULT_LEFT_GROUPS: DockGroup[] = [
-  { tabs: ["tools"], activeTab: "tools", weight: 1 },
+  { tabs: ["attributes"], activeTab: "attributes", weight: 1 },
-  { tabs: ["attributes"], activeTab: "attributes", weight: 1.1 },
 ];
 const DEFAULT_RIGHT_GROUPS: DockGroup[] = [
   { tabs: ["object-info", "room-balance"], activeTab: "object-info", weight: 1 },
@@ -86,9 +92,10 @@ function cloneGroups(groups: DockGroup[]): DockGroup[] {
 // ── Standard ────────────────────────────────────────────────────────────────
 
 /**
- * Liefert den eingebauten Startzustand: links zwei Gruppen (Werkzeuge oben,
+ * Liefert den eingebauten Startzustand: links das Attribute-Panel (volle Höhe),
- * Zeichnungsebenen/Ebenen unten), rechts LEER. Jeder Aufruf erzeugt frische
+ * rechts Objektinfo/Raumbilanz oben + Zeichnungsebenen/Ebenen/Umgebung unten.
- * Objekte/Arrays, damit Aufrufer das Ergebnis gefahrlos mutieren können.
+ * Die Werkzeuge liegen im Ribbon (keine Sidebar mehr). Jeder Aufruf erzeugt
+ * frische Objekte/Arrays, damit Aufrufer das Ergebnis gefahrlos mutieren können.
  */
 export function defaultLayout(): LayoutState {
   return {