0.10.5: icon-only Sync button that keeps its size and colour

On a diagram page it goes last in Archify's toolbar, after Export, instead
of floating over it. Every rule is !important and flex: none, so the page's
button styles, narrow windows and high contrast themes no longer squeeze it
or strip its colour.

src/webview/page.ts

@@ -888,7 +888,7 @@ function bridgeScript(options: PageOptions): string {
   onReady(describeElements);
   onReady(renderModeSwitch);
 
-  // Archify Sync: one labelled button, top right, on every page of an Archify
+  // Archify Sync: one icon button, top right, on every page of an Archify
   // file (diagram, model, graph, registry, decision). It opens the Sync menu.
   function renderSyncButton() {
     if (!(config.source || config.model || config.registry || config.decision || config.graph)) return;
@@ -901,35 +901,51 @@ function bridgeScript(options: PageOptions): string {
     button.type = 'button';
     button.title = 'Archify Sync: sign in, share this model with others, or join one';
     button.addEventListener('click', function (event) { event.stopPropagation(); post({ type: 'syncMenu' }); });
-    document.body.appendChild(button);
+    // A diagram page has Archify's toolbar at the top right: the button goes
+    // last in it, after Export. Other pages have nothing there; it floats.
+    var toolbar = document.querySelector('body > .toolbar');
+    if (toolbar) {
+      button.classList.add('in-toolbar');
+      toolbar.appendChild(button);
+    } else {
+      document.body.appendChild(button);
+    }
     showSyncState(false);
     post({ type: 'syncReady' });
   }
-  // Not shared: a cloud, "Sync". Shared (the model has an .archify-sync file): broadcast waves, "Shared".
+  // Not shared: a cloud. Shared (the model has an .archify-sync file): broadcast waves on green.
   var SYNC_ICONS = {
-    off: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path fill="currentColor" d="M12.5 13H4.25a3.25 3.25 0 0 1-.6-6.44 4.5 4.5 0 0 1 8.7-.81A3.6 3.6 0 0 1 12.5 13Zm-8.25-1h8.25a2.6 2.6 0 0 0 0-5.2h-.5l-.12-.39a3.5 3.5 0 0 0-6.82.66l-.04.4-.4.05A2.25 2.25 0 0 0 4.25 12Z"/></svg>',
-    on: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><circle cx="8" cy="8" r="1.75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M5.2 5.2a4 4 0 0 0 0 5.6M10.8 5.2a4 4 0 0 1 0 5.6M3.1 3.1a7 7 0 0 0 0 9.8M12.9 3.1a7 7 0 0 1 0 9.8"/></svg>',
+    off: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M12.5 13H4.25a3.25 3.25 0 0 1-.6-6.44 4.5 4.5 0 0 1 8.7-.81A3.6 3.6 0 0 1 12.5 13Zm-8.25-1h8.25a2.6 2.6 0 0 0 0-5.2h-.5l-.12-.39a3.5 3.5 0 0 0-6.82.66l-.04.4-.4.05A2.25 2.25 0 0 0 4.25 12Z"/></svg>',
+    on: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="1.75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M5.2 5.2a4 4 0 0 0 0 5.6M10.8 5.2a4 4 0 0 1 0 5.6M3.1 3.1a7 7 0 0 0 0 9.8M12.9 3.1a7 7 0 0 1 0 9.8"/></svg>',
   };
   function showSyncState(shared) {
     var button = document.getElementById('archify-sync-button');
     if (!button) return;
     button.classList.toggle('is-shared', !!shared);
-    button.innerHTML = (shared ? SYNC_ICONS.on : SYNC_ICONS.off) + '<span>' + (shared ? 'Shared' : 'Sync') + '</span>';
+    button.innerHTML = shared ? SYNC_ICONS.on : SYNC_ICONS.off;
     button.title = shared
-      ? 'This model is shared with Archify Sync: invite people, publish a version, see versions'
+      ? 'Archify Sync: this model is shared. Invite people, publish a version, see versions'
       : 'Archify Sync: sign in, share this model with others, or join one';
+    button.setAttribute('aria-label', shared ? 'Archify Sync (shared)' : 'Archify Sync');
   }
   window.addEventListener('message', function (event) {
     var message = event.data || {};
     if (message.type === 'syncState') showSyncState(message.shared);
   });
-  var SYNC_BUTTON_STYLE = '#archify-sync-button { position: fixed; top: 12px; right: 18px; z-index: 1001; display: inline-flex; align-items: center; gap: 6px;'
-    + ' padding: 6px 12px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--vscode-font-family, system-ui, sans-serif);'
-    + ' color: var(--vscode-button-foreground, #fff); background: var(--vscode-button-background, #0e639c); border: 1px solid var(--vscode-button-border, transparent); }'
-    + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb); }'
-    + ' #archify-sync-button.is-shared { color: #fff; background: #1f8f5f; }'
-    + ' #archify-sync-button.is-shared:hover { background: #23a36c; }'
-    + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4); outline-offset: 2px; }';
+  // Every rule is !important: the page's own button styles (Archify's toolbar,
+  // VS Code's high contrast themes) must not resize or recolour it.
+  var SYNC_BUTTON_STYLE = '#archify-sync-button { all: unset; position: fixed !important; top: 12px !important; right: 28px !important; z-index: 1001 !important;'
+    + ' box-sizing: border-box !important; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;'
+    + ' display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; cursor: pointer !important;'
+    + ' color: #fff !important; background: var(--vscode-button-background, #0e639c) !important; border: 1px solid var(--vscode-contrastBorder, transparent) !important;'
+    + ' box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }'
+    + ' #archify-sync-button.in-toolbar { position: relative !important; top: auto !important; right: auto !important; align-self: center !important; flex: none !important; width: 36px !important; height: 36px !important; }'
+    + ' body.vscode-high-contrast #archify-sync-button { background: #0e639c !important; }'
+    + ' #archify-sync-button svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; }'
+    + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb) !important; }'
+    + ' #archify-sync-button.is-shared { background: #1f8f5f !important; }'
+    + ' #archify-sync-button.is-shared:hover { background: #23a36c !important; }'
+    + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4) !important; outline-offset: 2px !important; }';
   onReady(renderSyncButton);
   if (config.source) {
     // The host answers with the problem count for the Source badge.