Make the floating TOC toggle visible in preview mode

.github/workflows/test.yml

@@ -27,6 +27,9 @@ jobs:
       - name: install frontend dependencies
         run: npm ci
 
+      - name: audit complete dependency lockfile
+        run: npm audit
+
       - name: check frontend
         run: npm run check
 

docs/superpowers/plans/2026-07-31-toc-toggle-surface.md

@@ -0,0 +1,107 @@
+# Floating Table-of-Contents Toggle Surface Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the floating table-of-contents toggle a compact translucent square that is distinguishable from adjacent toolbar icons in all modes.
+
+**Architecture:** Keep behavior in `MarkdownViewer.svelte` unchanged. Consolidate the existing edit-mode-only card declarations into the base `.toc-toggle-floating` selector, then assert the visual contract with the established source-level Node test suite.
+
+**Tech Stack:** Svelte 5, scoped component CSS, TypeScript Node test runner.
+
+## Global Constraints
+
+- Keep the 28 by 28 pixel target, placement, expanded offsets, icon transforms, tooltip, click handler, and print exclusion unchanged.
+- Use existing color tokens; add no dependency, component, preference, or text label.
+- The base selector must provide the translucent surface, border, subtle shadow, standard/WebKit backdrop filtering, hover contrast, active feedback, and visible keyboard focus.
+- The edit-mode-only card rule must be removed after the base selector subsumes it.
+- Verify with `npm run check`, `npm test`, and an isolated macOS bundle visual smoke test.
+
+---
+
+### Task 1: Unify the floating TOC toggle surface
+
+**Files:**
+- Modify: `src/lib/MarkdownViewer.svelte:4033-4146`
+- Modify: `scripts/issue261EditorPdf.test.ts:1-32`
+
+**Interfaces:**
+- Consumes: the existing `.toc-toggle-floating`, `.expanded`, `.on-right`, and `.in-edit-mode` class names rendered by `MarkdownViewer.svelte`.
+- Produces: a mode-independent visual contract owned by `.toc-toggle-floating`; no TypeScript API or event contract changes.
+
+- [ ] **Step 1: Write the failing test**
+
+Add a `viewer` source string beside the existing stylesheet fixture, then append this test:
+
+```ts
+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\)/);
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run:
+
+```bash
+npm test -- --test-name-pattern='floating toc toggle keeps a visible translucent surface'
+```
+
+Expected: FAIL because the existing base selector has `background-color: transparent`, no border/shadow/blur, no focus-visible rule, and retains the edit-only selector.
+
+- [ ] **Step 3: Write the minimal implementation**
+
+In `.toc-toggle-floating`, replace the transparent/no-border declarations and extend the transition list:
+
+```css
+background-color: color-mix(in srgb, var(--color-canvas-default) 82%, transparent);
+border: 1px solid var(--color-border-default);
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+backdrop-filter: blur(8px);
+-webkit-backdrop-filter: blur(8px);
+```
+
+Keep `opacity: 0.6` and add `border-color` and `box-shadow` to the transition list. Update hover to set `color: var(--color-fg-default)` and a slightly more opaque `color-mix` background. Add:
+
+```css
+.toc-toggle-floating:focus-visible {
+	outline: 2px solid var(--color-accent-fg);
+	outline-offset: 2px;
+	opacity: 1;
+}
+```
+
+Delete `.toc-toggle-floating.in-edit-mode:not(.expanded)` because the base selector now owns all of its surface declarations.
+
+- [ ] **Step 4: Run source checks**
+
+Run:
+
+```bash
+npm run check
+npm test
+```
+
+Expected: Svelte check reports zero errors and warnings; all Node tests pass.
+
+- [ ] **Step 5: Build and visually smoke-test the isolated bundle**
+
+Create a temporary Tauri config with product name `Markpad PR Test` and identifier `com.alecdotdev.markpad.prtest`, build the release bundle, then inspect it without launching `/Applications/Markpad.app`.
+
+Test the collapsed TOC toggle in preview-only mode and edit mode. Confirm that it is a 28-pixel translucent square with visible border/shadow, opens and closes the TOC, preserves its side-specific icon direction, and shows a focus ring via keyboard navigation. Remove the temporary config, fixture, output files, and test app data after verification.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/MarkdownViewer.svelte scripts/issue261EditorPdf.test.ts
+git commit -m 'fix(ui): surface floating toc toggle'
+```

docs/superpowers/specs/2026-07-31-toc-toggle-surface-design.md

@@ -0,0 +1,35 @@
+# Floating table-of-contents toggle surface
+
+## Goal
+
+Make the floating table-of-contents toggle visually distinct from nearby toolbar icons without changing its behavior, dimensions, placement, animation, or translated accessible label.
+
+## Scope
+
+The change is limited to `.toc-toggle-floating` in `src/lib/MarkdownViewer.svelte`.
+
+- Keep the existing 28 by 28 pixel hit target, left/right placement, expanded offsets, icon rotation, tooltip, click handler, and print exclusion.
+- Give the button a translucent canvas background, one-pixel border, subtle shadow, and backdrop blur in every viewing mode.
+- Increase surface and foreground contrast on hover and keyboard focus.
+- Keep active feedback; it must use the existing muted-border token rather than a new color token.
+- Remove the edit-mode-only card rule after its declarations are absorbed by the base selector.
+
+## Non-goals
+
+- No text label, persistent preference, layout movement, icon replacement, or table-of-contents behavior change.
+- No changes to the table-of-contents panel, resize handle, title-bar menu, or print layout.
+- No new dependency or component.
+
+## Styling contract
+
+The base selector owns the complete surface. It uses an alpha-adjusted canvas color, existing border and foreground tokens, a small shadow, and both standard and WebKit backdrop filtering. It has a visible `:focus-visible` outline using the existing accent token. Hover increases opacity and foreground contrast without changing geometry. The existing `.expanded`, `.on-right`, and icon transforms remain separate.
+
+## Verification
+
+1. Add a source-level regression test asserting that the base selector contains the translucent surface, border, shadow, backdrop filtering, and focus-visible state.
+2. Run `npm run check` and `npm test`.
+3. Build an isolated macOS bundle and confirm visually that the collapsed control is a compact translucent square in preview-only and edit modes, remains reachable and understandable on both sides, and keeps its expanded/close animation.
+
+## Compatibility
+
+`backdrop-filter` is progressive enhancement. The explicit translucent background, border, and shadow preserve contrast where it is unavailable. The rule remains inside the component style block and does not affect the app toolbar or the print CSS.