complete first iteration

web/src/EditMode.tsx

@@ -5,6 +5,8 @@ import { serializeInterface, parseInterface } from './lib/xml';
 import SignalTree from './SignalTree';
 import EditCanvas, { genWidgetId, DEFAULT_SIZES } from './EditCanvas';
 import PropertiesPane from './PropertiesPane';
+import ContextualHelp from './ContextualHelp';
+import HelpModal from './HelpModal';
 
 interface Props {
   initial: Interface | null;
@@ -79,6 +81,9 @@ export default function EditMode({ initial, onDone }: Props) {
   const [snapGrid, setSnapGrid] = useState(10);
   const [showSnapGrid, setShowSnapGrid] = useState(true);
   const [showInsertMenu, setShowInsertMenu] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [helpSection, setHelpSection] = useState('edit');
+  function openHelp(section = 'edit') { setHelpSection(section); setShowHelp(true); }
 
   // Undo / redo
   const undoStack = useRef<Widget[][]>([]);
@@ -232,6 +237,7 @@ export default function EditMode({ initial, onDone }: Props) {
   function handleKeyDown(e: KeyboardEvent) {
     const target = e.target as Element;
     if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') return;
+    if (e.key === '?') { openHelp('edit'); return; }
 
     if ((e.key === 'Delete' || e.key === 'Backspace') && selectedIds.length > 0) {
       pushUndo();
@@ -338,6 +344,8 @@ export default function EditMode({ initial, onDone }: Props) {
         </div>
 
         <div class="toolbar-right">
+          <ContextualHelp mode="edit" onOpenManual={openHelp} />
+          <button class="icon-btn help-manual-btn" onClick={() => openHelp('edit')} title="Open user manual">📖</button>
           <button class="toolbar-btn" onClick={handleImport}>Import</button>
           <button class="toolbar-btn" onClick={handleExport}>Export</button>
           <button class="toolbar-btn toolbar-btn-primary" onClick={handleSave} disabled={saving}>
@@ -365,6 +373,10 @@ export default function EditMode({ initial, onDone }: Props) {
           onIfaceChange={handleIfaceChange}
         />
       </div>
+
+      {showHelp && (
+        <HelpModal initialSection={helpSection} onClose={() => setShowHelp(false)} />
+      )}
     </div>
   );
 }