From 2341e050d05adbfb01f91e35c0feb47d530f129d Mon Sep 17 00:00:00 2001
From: PathGao <gaoyanbo@gaoyanbodeMacBook-Air.local>
Date: Fri, 31 Jul 2026 20:32:16 +0800
Subject: [PATCH] fix(ui): surface floating toc toggle

---
 scripts/issue261EditorPdf.test.ts | 14 ++++++++++++++
 src/lib/MarkdownViewer.svelte     | 26 +++++++++++++++-----------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/scripts/issue261EditorPdf.test.ts b/scripts/issue261EditorPdf.test.ts
index 5d523e1..45f5cd5 100644
--- a/scripts/issue261EditorPdf.test.ts
+++ b/scripts/issue261EditorPdf.test.ts
@@ -32,3 +32,17 @@ test('print layout lets the viewer pane escape the interactive split flex ratio'
 		/@media print\s*\{[\s\S]*?\.pane\.viewer-pane\s*\{[\s\S]*?flex:\s*none\s*!important;/,
 	);
 });
+
+test('floating toc toggle keeps a visible translucent surface outside edit mode', () => {
+	const selector = viewer.slice(
+		viewer.indexOf('\t.toc-toggle-floating {'),
+		viewer.indexOf('\n\t.toc-toggle-floating.expanded {'),
+	);
+
+	assert.match(selector, /background-color:\s*color-mix\(in srgb, var\(--color-canvas-default\) 82%, transparent\);/);
+	assert.match(selector, /border:\s*1px solid var\(--color-border-default\);/);
+	assert.match(selector, /box-shadow:\s*0 2px 8px rgba\(0, 0, 0, 0\.12\);/);
+	assert.match(selector, /backdrop-filter:\s*blur\(8px\);/);
+	assert.match(viewer, /\.toc-toggle-floating:focus-visible\s*\{[\s\S]*?outline:\s*2px solid var\(--color-accent-fg\);/);
+	assert.doesNotMatch(viewer, /\.toc-toggle-floating\.in-edit-mode:not\(\.expanded\)/);
+});
diff --git a/src/lib/MarkdownViewer.svelte b/src/lib/MarkdownViewer.svelte
index 04c72b6..2963587 100644
--- a/src/lib/MarkdownViewer.svelte
+++ b/src/lib/MarkdownViewer.svelte
@@ -3999,15 +3999,20 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: transparent;
-		border: none;
+		background-color: color-mix(in srgb, var(--color-canvas-default) 82%, transparent);
+		border: 1px solid var(--color-border-default);
 		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
 		color: var(--color-fg-muted);
 		cursor: pointer;
 		z-index: 1001;
 		transition: 
 			left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
 			background-color 0.2s ease,
+			border-color 0.2s ease,
+			box-shadow 0.2s ease,
 			color 0.2s ease,
 			opacity 0.2s ease,
 			transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -4030,6 +4035,14 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 
 	.layout-container:hover .toc-toggle-floating,
 	.toc-toggle-floating:hover {
+		background-color: color-mix(in srgb, var(--color-canvas-default) 90%, transparent);
+		color: var(--color-fg-default);
+		opacity: 1;
+	}
+
+	.toc-toggle-floating:focus-visible {
+		outline: 2px solid var(--color-accent-fg);
+		outline-offset: 2px;
 		opacity: 1;
 	}
 
@@ -4096,15 +4109,6 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 		border-left-color: var(--color-border-default);
 	}
 
-	.toc-toggle-floating.in-edit-mode:not(.expanded) {
-		background-color: var(--color-canvas-default);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		border: 1px solid var(--color-border-default);
-		opacity: 0.9;
-		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
-	}
-
 	.toc-resize-handle {
 		position: absolute;
 		top: 0;