Fusion - the Fusion 360 Bridge

@@ -12,6 +12,14 @@   --accent:#00b8b1;--accent-hover:#00d4cb;--green:#3fb950;--red:#f85149;--yellow:#d29922;--blue:#64abff; } *{box-sizing:border-box;margin:0;padding:0}+/* The house scrollbar (adom-ui-design > scrollbars): thin, transparent track, translucent+   pill that only asserts itself on hover. Never the OS default. */+*{scrollbar-width:thin;scrollbar-color:rgba(139,148,158,.38) transparent}+::-webkit-scrollbar{width:10px;height:10px}+::-webkit-scrollbar-track{background:transparent}+::-webkit-scrollbar-thumb{background:rgba(139,148,158,.32);border-radius:999px;border:2px solid transparent;background-clip:padding-box}+::-webkit-scrollbar-thumb:hover{background:rgba(0,184,177,.55);background-clip:padding-box}+::-webkit-scrollbar-corner{background:transparent} @font-face{font-family:'Familjen Grotesk';src:url('https://adom.inc/fonts/FamiljenGrotesk-SemiBold.woff2') format('woff2');font-weight:600} @font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400} @font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500}@@ -91,7 +99,15 @@ dialog::backdrop{background:rgba(0,0,0,.55)} .sstate.ok{color:var(--green)}.sstate.err{color:var(--red)} .sshot{margin-top:8px;width:100%;border-radius:8px;border:1px solid var(--border);display:none;cursor:zoom-in} .sshot.show{display:block}-dialog.settings{max-width:560px;max-height:70vh;overflow:auto;padding:18px}+dialog.settings{max-width:560px;overflow:hidden;padding:0}+.dlghead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 10px}+.dlghead h2{margin:0;font-size:17px}+.dlgbody{max-height:70vh;overflow:auto;padding:0 18px 18px}+.dlgbody::-webkit-scrollbar-track{margin:8px 0}+.xbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:8px;color:var(--text-2);cursor:pointer;font-size:18px;line-height:1;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .06s ease}+.xbtn:hover{background:var(--elevated);border-color:var(--border);color:var(--text)}+.xbtn:active{transform:scale(.9);background:var(--surface)}+.xbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .settings-card{background:var(--elevated);border:1px solid var(--border);border-left:3px solid color-mix(in srgb, var(--accent) 45%, transparent);border-radius:10px;padding:.9rem 1.1rem 1rem;margin-bottom:1rem} .card-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px;font-family:'Familjen Grotesk',sans-serif} .card-status{font-size:11px;color:var(--text-2);font-weight:400}@@ -158,8 +174,12 @@ dialog.settings{max-width:560px;max-height:70vh;overflow:auto;padding:18px}   <div id="prompts"></div> </main> -<dialog id="dlgSettings" class="settings" tabindex="-1">-  <h2 style="margin:0 0 14px">Fusion Dashboard Settings</h2>+<dialog id="dlgSettings" class="settings" tabindex="-1" aria-label="Fusion Dashboard Settings">+  <div class="dlghead">+    <h2>Fusion Dashboard Settings</h2>+    <button class="xbtn" id="btnXSettings" aria-label="Close settings" data-tip="Close settings (Escape, or click outside)">&#10005;</button>+  </div>+  <div class="dlgbody" id="settingsBody">    <div class="settings-card">     <div class="card-title">Opening the Dashboard <span class="card-status" id="stAutoGreen">reading...</span></div>@@ -196,8 +216,9 @@ dialog.settings{max-width:560px;max-height:70vh;overflow:auto;padding:18px}       <input id="inpPart" style="flex:0 1 260px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 10px;font:12.5px 'JetBrains Mono',monospace"></div>   </div> -  <div class="setfoot">Settings are stored on this machine: the Dashboard's own choices in <code>~/.adom/fusion-dashboard/settings.json</code>, the Fusion upkeep and badge choices as sticky bridge preferences on the target box.</div>-  <div class="btnrow" style="justify-content:flex-end"><button class="btn" id="btnCloseSettings">Close</button></div>+  </div><!-- /dlgbody -->+  <div class="setfoot" style="padding:0 18px 14px">Settings are stored on this machine: the Dashboard's own choices in <code>~/.adom/fusion-dashboard/settings.json</code>, the Fusion upkeep and badge choices as sticky bridge settings on the target box.</div>+  <div class="btnrow" style="justify-content:flex-end;padding:0 18px 16px;margin-top:0"><button class="btn" id="btnCloseSettings">Close</button></div> </dialog>  <dialog id="dlgSetup">@@ -305,10 +326,21 @@ $('#btnSettings').onclick=async()=>{   // showModal() autofocuses the first focusable child; ours is the wiki-part INPUT in the last   // card, so the modal opened scrolled to the bottom. Focus the dialog itself and pin to top.   dlg.focus();-  dlg.scrollTop=0;-  requestAnimationFrame(()=>{dlg.scrollTop=0;});+  const body=$('#settingsBody');body.scrollTop=0;+  requestAnimationFrame(()=>{body.scrollTop=0;}); }; $('#btnCloseSettings').onclick=()=>$('#dlgSettings').close();+$('#btnXSettings').onclick=()=>$('#dlgSettings').close();+// Click-OUTSIDE closes. A <dialog>'s backdrop is part of the dialog element, so a click that+// lands on the dialog itself (not on its children) is a backdrop click - but only trust it when+// the pointer is actually outside the dialog's box, or a click on the dialog's own padding+// would close it too (John, 2026-08-18: "click outside the settings dialog and it expires").+$('#dlgSettings').addEventListener('click',e=>{+  const d=$('#dlgSettings');if(e.target!==d)return;+  const r=d.getBoundingClientRect();+  const inside=e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom;+  if(!inside)d.close();+}); function wireToggle(sel,actionName,label){$(sel).onclick=async(e)=>{   const t=e.currentTarget;const now=!t.classList.contains('is-on');   t.classList.toggle('is-on',now);t.setAttribute('aria-checked',String(now));