task(F3-frontend): save selection as block - svg thumbnail from elementToPrimitives, save button in library tree

frontend/src/components/BlockLibraryTree.tsx

@@ -13,6 +13,9 @@ import {
   exportLibrary,
   importLibrary,
 } from '../services/api';
+import { getActiveDocument } from '../kernel/document/documentService';
+import { generateBlockSvg } from '../utils/blockThumbnail';
+import type { CADElement } from '../types/cad.types';
 
 interface BlockLibraryTreeProps {
   token: string;
@@ -76,6 +79,38 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
     loadData();
   }, [loadData]);
 
+  // ─── Task F3: Auswahl als Block speichern ─────────────────
+  const handleSaveSelectionAsBlock = useCallback(async () => {
+    const bridge = (window as unknown as { __v2GetSelection?: () => { ids: string[] } }).__v2GetSelection;
+    const ids = bridge?.().ids ?? [];
+    if (ids.length === 0) {
+      window.alert('Keine Auswahl im Canvas — erst Elemente wählen (V2-Tools).');
+      return;
+    }
+    const doc = getActiveDocument();
+    const elements: CADElement[] = [];
+    for (const id of ids) {
+      const el = doc?.getElement(id);
+      if (el) elements.push(el);
+    }
+    if (elements.length === 0) {
+      window.alert('Auswahl enthält keine Elemente.');
+      return;
+    }
+    const name = window.prompt('Blockname:', `Block-${new Date().toISOString().slice(0, 10)}`);
+    if (!name?.trim()) return;
+    try {
+      await createGlobalBlock(token, {
+        name: name.trim(),
+        block_data: JSON.stringify(elements),
+        svg_data: generateBlockSvg(elements),
+      });
+      await loadData();
+    } catch (err) {
+      window.alert(`Speichern fehlgeschlagen: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }, [token, loadData]);
+
   // ─── Task F1: Library-Paket Export/Import ────────────────
 
   const handleLibraryExport = useCallback(async () => {
@@ -459,6 +494,13 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
     <div className="global-lib-tree" onContextMenu={(e) => handleContextMenu(e, 'root', null, null)}>
       <div className="global-lib-header">
         <span className="global-lib-title">🌐 Globale Bibliothek</span>
+        <button
+          className="global-lib-add-btn"
+          title="Canvas-Auswahl als Block speichern (F3)"
+          onClick={() => void handleSaveSelectionAsBlock()}
+        >
+          💾
+        </button>
         <button
           className="global-lib-add-btn"
           title="Bibliothek als .wcadlib exportieren"