Merge pull request '0.10.7: Model | Graph | Source styled like 2D | 3D' (#38) from fix/mode-switch-style into main

Archify gives every toolbar button a 2.75rem minimum height and a painted
::before; the switch's segments are buttons, so they grew to full height.
Segments now keep 1.75rem inside a 2.75rem switch, like 2D | 3D. The high
contrast rule no longer turns a shared model's Sync button blue.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.10.7 — 2026-11-08
+
+- **Model | Graph | Source looks like 2D | 3D.** The selected view is the same inset pill, the same height as the other toolbar controls.
+- The Sync button of a shared model is green in high contrast themes too.
+
 ## 0.10.6 — 2026-11-08
 
 - **Sync sign-in comes back by itself.** The browser now returns the sign-in to a one-off port on this machine (`127.0.0.1`) instead of a `vscode://` link. Browsers open such links only after a click, so when you were already signed in to the identity provider the editor kept waiting. Remote and web editors still use the link.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "archify-vscode-ext",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "archify-vscode-ext",
-      "version": "0.10.6",
+      "version": "0.10.7",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.20.4",

package.json

@@ -2,7 +2,7 @@
   "name": "archify-vscode-ext",
   "displayName": "Archify Diagram Viewer",
   "description": "Archify diagrams in VS Code. Write diagrams as .archify files in YAML: they open as the interactive diagram, with live updates, validation, templates and completion. Also previews Archify's own JSON files (*.architecture.json, …) and opens rendered Archify HTML.",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "publisher": "root-at-skic",
   "license": "MIT",
   "sponsor": {

src/webview/page.ts

@@ -940,7 +940,7 @@ function bridgeScript(options: PageOptions): string {
     + ' 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; }'
+    + ' body.vscode-high-contrast #archify-sync-button:not(.is-shared) { 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; }'
@@ -1073,10 +1073,13 @@ const MODEL_STYLE = `
 /* The Model | Graph switch: in Archify's toolbar it is the 2D | 3D switch's twin; on the model page it sits top right. */
 const SWITCH_STYLE = `
 .archify-mode-switch { display: inline-flex; align-items: center; padding: 0 0.25rem; gap: 0; color: var(--text-muted, var(--vscode-descriptionForeground)); position: relative; }
+.toolbar .archify-mode-switch { height: 2.75rem; box-sizing: border-box; }
 .toolbar .archify-mode-switch::before { content: ""; position: absolute; inset: 0.25rem 0; border-radius: 0.6875rem; background: color-mix(in srgb, var(--panel) 78%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 85%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); backdrop-filter: blur(12px); }
 .toolbar .archify-mode-switch:hover::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); }
 /* Anchored on the id: Archify's .toolbar button rules (one of them with :not(#btn-theme)) would win otherwise. */
-#archify-mode-switch .archify-mode-seg { position: relative; display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.7rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; font: inherit; font-weight: 550; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
+#archify-mode-switch .archify-mode-seg { position: relative; display: inline-flex; align-items: center; height: 1.75rem; min-height: 0; margin: 0; padding: 0 0.7rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; font: inherit; font-weight: 550; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
+/* Archify's toolbar buttons are 2.75rem tall with a painted ::before; the segments are not, like 2D | 3D. */
+#archify-mode-switch .archify-mode-seg::before, #archify-mode-switch .archify-mode-seg::after { content: none; }
 #archify-mode-switch .archify-mode-seg.on[aria-pressed="true"] { color: var(--bg, var(--vscode-editor-background)); background: var(--text, var(--vscode-foreground)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4); }
 #archify-mode-switch .archify-mode-seg:hover:not(.on) { color: var(--text, var(--vscode-foreground)); }
 #archify-mode-switch .archify-mode-seg:focus-visible { outline: 2px solid var(--frontend-stroke, var(--vscode-focusBorder)); outline-offset: 1px; }