@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/menubar/toolbar-sections/ManualBrowser.js

@@ -1,26 +1,73 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo, useRef, } from "react";
-import { Book, BookOpen, Loader2, Edit, ArrowLeft, ArrowRight, ChevronDown, ChevronRight, LocateFixed, Rocket, FileEdit, X, } from "lucide-react";
-import { loadManualToc, loadManualSection, invalidateManualSectionCache, } from "../../services/aiService";
+import { Book, BookOpen, Loader2, Edit, ArrowLeft, ArrowRight, ChevronDown, ChevronRight, LocateFixed, Rocket, FileEdit, } from "lucide-react";
+import { CloseButton } from "../../../components/ui/close-button";
+import { loadManualToc, loadManualSection, invalidateManualSectionCache, } from "../../services/manualService";
 import { executeSearch } from "../../services/searchService";
-import { FilterInput } from "../../../components/FilterInput";
+import { SearchInput } from "../../../components/SearchInput";
 import { MarkdownDisplay, } from "../../../components/MarkdownDisplay";
 import { Tooltip, TooltipTrigger, TooltipContent, } from "../../../components/ui/tooltip";
 import { useEditContext } from "../../client/editContext";
 import { cn } from "../../../lib/utils";
 import { sanitizeSvg } from "../../../lib/sanitize";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../../components/ui/dropdown-menu";
+import { waitForSelectorAnimations } from "../../ui/animationSettle";
 /** Render a sanitized SVG string at a specific pixel size. */
 function SvgIcon({ svg, size, className, }) {
     const sanitizedSvg = sanitizeSvg(svg).trim();
     return (_jsx("span", { className: cn("inline-flex items-center justify-center [&>svg]:block [&>svg]:h-full [&>svg]:w-full", className), style: { width: size, height: size }, dangerouslySetInnerHTML: { __html: sanitizedSvg } }));
 }
 const HIGHLIGHT_DURATION_MS = 2000;
+const EDITOR_FORM_SLIDER_SELECTOR = '[data-testid="editor-form-slider"]';
+const EDITOR_FORM_HIDDEN_ATTRIBUTE = "aria-hidden";
+const CLOSE_PANE_LABEL = "Close pane";
+function waitForDelay(delayMs) {
+    return new Promise((resolve) => {
+        window.setTimeout(resolve, delayMs);
+    });
+}
+function getEditorFormSlider(elements = []) {
+    for (const element of elements) {
+        const slider = element.closest(EDITOR_FORM_SLIDER_SELECTOR);
+        if (slider) {
+            return slider;
+        }
+    }
+    return document.querySelector(EDITOR_FORM_SLIDER_SELECTOR);
+}
+function isEditorFormSliderHidden(slider) {
+    return slider?.getAttribute(EDITOR_FORM_HIDDEN_ATTRIBUTE) === "true";
+}
+async function waitForResolvedElements(resolveElements, selector, timeoutMs = 1000) {
+    const startedAt = Date.now();
+    while (Date.now() - startedAt < timeoutMs) {
+        const elements = resolveElements(selector);
+        if (elements.length > 0) {
+            return elements;
+        }
+        await waitForDelay(50);
+    }
+    return resolveElements(selector);
+}
+// Wait until at least one element for the selector is actually VISIBLE (not just
+// present). After a reveal/animation a target can be in the DOM but not yet laid
+// out, which would otherwise cause highlightElement to skip it.
+async function waitForVisibleElements(selector, timeoutMs = 1000) {
+    const startedAt = Date.now();
+    while (Date.now() - startedAt < timeoutMs) {
+        const elements = getVisibleElementsForSelector(selector);
+        if (elements.length > 0) {
+            return elements;
+        }
+        await waitForDelay(50);
+    }
+    return getVisibleElementsForSelector(selector);
+}
 const manualMarkdownComponents = {
-    h1: ({ children }) => (_jsx("h1", { className: "mt-4 mb-0 text-xl font-bold text-gray-900", children: children })),
-    h2: ({ children }) => (_jsx("h2", { className: "mt-3 mb-0 text-lg font-semibold text-gray-800", children: children })),
-    h3: ({ children }) => (_jsx("h3", { className: "mt-2 mb-0 text-base font-semibold text-gray-700", children: children })),
-    h4: ({ children }) => (_jsx("h4", { className: "mt-2 mb-0 text-sm font-semibold text-gray-700", children: children })),
+    h1: ({ children }) => (_jsx("h1", { className: "text-neutral-grey-100 mt-4 mb-0 text-xl font-bold", children: children })),
+    h2: ({ children }) => (_jsx("h2", { className: "text-neutral-grey-100 mt-3 mb-0 text-lg font-medium", children: children })),
+    h3: ({ children }) => (_jsx("h3", { className: "text-neutral-grey-100 mt-2 mb-0 text-base font-medium", children: children })),
+    h4: ({ children }) => (_jsx("h4", { className: "text-neutral-grey-100 mt-2 mb-0 text-sm font-medium", children: children })),
 };
 // Parse the uiSelectors field
 // Formats:
@@ -51,7 +98,15 @@ export function parseUiSelectors(uiSelectors) {
             let beforeAction;
             let afterAction;
             let availabilitySelector;
+            let selectorOverride;
+            let tab;
+            let closeMode;
             for (const segment of segments) {
+                if (segment.startsWith("close=")) {
+                    const value = segment.substring("close=".length).trim();
+                    closeMode = value === "auto" ? "auto" : "click";
+                    continue;
+                }
                 if (segment.startsWith("beforeAction=")) {
                     beforeAction = segment.substring("beforeAction=".length).trim();
                     continue;
@@ -66,6 +121,14 @@ export function parseUiSelectors(uiSelectors) {
                         .trim();
                     continue;
                 }
+                if (segment.startsWith("selector=")) {
+                    selectorOverride = segment.substring("selector=".length).trim();
+                    continue;
+                }
+                if (segment.startsWith("tab=")) {
+                    tab = segment.substring("tab=".length).trim();
+                    continue;
+                }
                 if (!notFoundMessage) {
                     notFoundMessage = segment;
                 }
@@ -79,14 +142,16 @@ export function parseUiSelectors(uiSelectors) {
                 : undefined;
             const parsed = {
                 name,
-                selector: isSidebarOnly ? "" : `@${name}`, // Empty selector for sidebar-only
+                selector: isSidebarOnly ? "" : selectorOverride || `@${name}`,
                 availabilitySelector,
+                tab,
                 description,
                 notFoundMessage: notFoundMessage || undefined,
                 location: isSidebarOnly ? sidebarId : undefined, // Use actual sidebar ID (without -sidebar suffix) for sidebar-only
                 isSidebarOnly,
                 beforeAction,
                 afterAction,
+                closeMode,
             };
             // Primary key remains the selector name
             map.set(name, parsed);
@@ -98,7 +163,8 @@ function parseSelectorToken(selectorToken) {
     if (!selectorToken.startsWith("@"))
         return { selector: selectorToken };
     const raw = selectorToken.slice(1);
-    // Preserve iframe: selectors (handled specially by expandSelector/highlightElement)
+    // Preserve iframe: selectors as unavailable selectors. Page DOM inspection now
+    // goes through the editing bridge instead of same-origin iframe probing.
     if (raw.startsWith("iframe:"))
         return { selector: selectorToken };
     // Check for sidebar-only syntax: @sidebar-id-sidebar (e.g., @reviews-sidebar)
@@ -134,7 +200,6 @@ export function expandSelector(selectorShorthand) {
         return selector;
     }
     if (selector.startsWith("iframe:")) {
-        // Iframe selector: @iframe:selector → iframe:selector (handled by GuidanceOverlay)
         return selector;
     }
     // Default: data-testid selector: @name → [data-testid="name"]
@@ -143,15 +208,50 @@ export function expandSelector(selectorShorthand) {
 function getElementsForSelector(selector) {
     const cssSelector = expandSelector(selector);
     if (cssSelector.startsWith("iframe:")) {
-        const iframeSelector = cssSelector.substring(7);
-        const iframe = document.querySelector("iframe.page-iframe");
-        if (!iframe?.contentDocument) {
-            return [];
-        }
-        return Array.from(iframe.contentDocument.querySelectorAll(iframeSelector));
+        return [];
     }
     return Array.from(document.querySelectorAll(cssSelector));
 }
+// Determine whether an element is genuinely visible to the user, not merely
+// present in the DOM. A target sitting inside a collapsed panel, a hidden
+// sidebar (aria-hidden), or with `display:none` / `visibility:hidden` / zero
+// size counts as NOT visible.
+function isElementVisible(element) {
+    // Treat anything inside an explicitly aria-hidden container (e.g. a collapsed
+    // editor form slider) as not visible.
+    if (element.closest('[aria-hidden="true"]')) {
+        return false;
+    }
+    const candidate = element;
+    if (typeof candidate.checkVisibility === "function") {
+        if (!candidate.checkVisibility({
+            checkOpacity: true,
+            checkVisibilityCSS: true,
+        })) {
+            return false;
+        }
+    }
+    else {
+        // Fallback for environments without Element.checkVisibility (e.g. jsdom).
+        const style = window.getComputedStyle(element);
+        if (style.display === "none" ||
+            style.visibility === "hidden" ||
+            style.visibility === "collapse") {
+            return false;
+        }
+        // position:fixed elements have a null offsetParent but can still be visible.
+        if (element.offsetParent === null && style.position !== "fixed") {
+            return false;
+        }
+    }
+    // Reject zero-area elements (e.g. a width:0 collapsed panel).
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+// Return only the elements matching a selector that are currently visible.
+function getVisibleElementsForSelector(selector) {
+    return getElementsForSelector(selector).filter(isElementVisible);
+}
 function shouldSkipHighlightScroll(element) {
     const rect = element.getBoundingClientRect();
     const computedStyle = window.getComputedStyle(element);
@@ -203,9 +303,12 @@ async function scrollElementForHighlight(element) {
 // Highlight an element temporarily
 export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_MS) {
     const cssSelector = expandSelector(selector);
-    const elements = getElementsForSelector(selector);
+    // Only ever highlight elements that are actually visible. A target inside a
+    // collapsed panel or hidden sidebar must not receive a stray overlay.
+    const elements = getElementsForSelector(selector).filter(isElementVisible);
     if (elements.length === 0)
         return;
+    const overlayLifetimes = [];
     if (cssSelector.startsWith("iframe:")) {
         const iframe = document.querySelector("iframe.page-iframe");
         const iframeRect = iframe?.getBoundingClientRect();
@@ -214,8 +317,9 @@ export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_M
         }
         elements.forEach((element) => {
             const elementRect = element.getBoundingClientRect();
-            showHighlightOverlay(elementRect.left + (iframeRect?.left ?? 0), elementRect.top + (iframeRect?.top ?? 0), elementRect.width, elementRect.height, duration);
+            overlayLifetimes.push(showHighlightOverlay(elementRect.left + (iframeRect?.left ?? 0), elementRect.top + (iframeRect?.top ?? 0), elementRect.width, elementRect.height, duration));
         });
+        await Promise.all(overlayLifetimes);
         return;
     }
     if (elements[0]) {
@@ -223,14 +327,52 @@ export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_M
     }
     elements.forEach((element) => {
         const rect = element.getBoundingClientRect();
-        showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration);
+        overlayLifetimes.push(showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration));
     });
+    await Promise.all(overlayLifetimes);
 }
-// Check if an element is currently available in the DOM
-function isElementAvailable(selector) {
+// Check if an element is currently present in the DOM (regardless of visibility)
+function isElementPresent(selector) {
     return getElementsForSelector(selector).length > 0;
 }
-// Create a temporary highlight overlay
+// Check if an element matching the selector is currently visible to the user
+function isElementVisibleBySelector(selector) {
+    return getVisibleElementsForSelector(selector).length > 0;
+}
+export function deriveSelectorState(params) {
+    if (!params.isAnchorReachable) {
+        return "disabled";
+    }
+    // Sidebar-only selectors have no element to "see"; opening the sidebar is the action.
+    if (params.isSidebarOnly) {
+        return "show-action";
+    }
+    if (params.isTargetVisible) {
+        return "show";
+    }
+    if (params.hasRevealPath) {
+        return "show-action";
+    }
+    return "disabled";
+}
+export function shouldResetActiveReveal(params) {
+    if (!params.hasReveal || !params.isRevealStillOpen) {
+        return true;
+    }
+    return params.hasAvailabilitySelector && !params.isAnchorPresent;
+}
+// Finishers for every highlight overlay currently on screen. Lets a superseding
+// reveal wipe the previous reveal's highlight immediately so it does not keep
+// pulsing over the close/re-open transition (the "uncoordinated animation").
+const activeHighlightFinishers = new Set();
+// Remove all active highlight overlays right now (resolving their lifetimes).
+function clearActiveHighlightOverlays() {
+    for (const finish of [...activeHighlightFinishers]) {
+        finish();
+    }
+}
+// Create a temporary highlight overlay. Resolves when its finite "life"
+// animation ends and the overlay has been removed (event-driven, not a timer).
 function showHighlightOverlay(x, y, width, height, duration) {
     const padding = 4;
     const viewportWidth = window.innerWidth;
@@ -247,22 +389,24 @@ function showHighlightOverlay(x, y, width, height, duration) {
     const clampedHeight = bottom - top;
     // Skip if target is fully outside the viewport after clamping.
     if (clampedWidth <= 0 || clampedHeight <= 0)
-        return;
+        return Promise.resolve();
     const overlay = document.createElement("div");
     overlay.className = "selector-highlight-overlay";
+    // Two animations: the infinite pulse for the visual, and a finite "life"
+    // animation whose animationend drives removal (single source of duration).
     overlay.style.cssText = `
     position: fixed;
     left: ${left}px;
     top: ${top}px;
     width: ${clampedWidth}px;
     height: ${clampedHeight}px;
-    border: 2px solid #3b82f6;
+    border: 2px solid var(--color-component-default);
     border-radius: 4px;
-    background: rgba(59, 130, 246, 0.1);
+    background: color-mix(in srgb, var(--color-component-default) 10%, transparent);
     pointer-events: none;
     z-index: 999999;
-    animation: pulse-highlight 1s ease-in-out infinite;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
+    animation: pulse-highlight 1s ease-in-out infinite, selector-highlight-life ${duration}ms linear forwards;
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-component-default) 20%, transparent);
   `;
     // Add animation keyframes if not already added
     if (!document.querySelector("#selector-highlight-style")) {
@@ -270,130 +414,748 @@ function showHighlightOverlay(x, y, width, height, duration) {
         style.id = "selector-highlight-style";
         style.textContent = `
       @keyframes pulse-highlight {
-        0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
-        50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); }
+        0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-component-default) 20%, transparent); }
+        50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-component-default) 10%, transparent); }
+      }
+      @keyframes selector-highlight-life {
+        from { opacity: 1; }
+        to { opacity: 1; }
       }
     `;
         document.head.appendChild(style);
     }
     document.body.appendChild(overlay);
-    setTimeout(() => {
-        overlay.remove();
-    }, duration);
+    return new Promise((resolve) => {
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            activeHighlightFinishers.delete(finish);
+            overlay.removeEventListener("animationend", onAnimationEnd);
+            overlay.remove();
+            resolve();
+        };
+        const onAnimationEnd = (event) => {
+            // Ignore the infinite pulse; only the finite life animation ends.
+            if (event.animationName === "selector-highlight-life") {
+                finish();
+            }
+        };
+        overlay.addEventListener("animationend", onAnimationEnd);
+        // Allow a superseding reveal to wipe this overlay immediately.
+        activeHighlightFinishers.add(finish);
+        // Guardrail: if animationend is ever missed, remove shortly after duration.
+        window.setTimeout(finish, duration + 500);
+    });
+}
+export function hasStatefulRevealSurface(surfaceKeys) {
+    return surfaceKeys.some((key) => !key.startsWith("custom:"));
+}
+// Whether a superseding reveal should keep (hand off) the previous reveal's
+// already-open editor-form slider instead of closing and reopening it. The
+// slider is a controlled surface (not dismiss-on-outside), so it can persist
+// across reveals: when the incoming reveal is non-sidebar and the slider is
+// already open, we carry the surface forward to avoid a visible close-reopen
+// flicker. Mirrors the `shouldOpenEditorForm` gate but on the "already open"
+// state (there is only something to carry when it is open).
+export function shouldCarryEditorFormSurface(params) {
+    return !params.isSidebarOnly && params.sliderExists && params.isSliderOpen;
+}
+let activeRevealController = null;
+let revealControllerSeq = 0;
+// Serialize Show-me reveal clicks across ALL buttons so overlapping rapid clicks
+// can never interleave. Each click chains behind the previous handler and grabs
+// a monotonic token. This closes the race where, during the
+// `await superseded.close()` teardown window, no global controller is registered:
+// without serialization a faster later click could start, become active, and
+// then be overwritten by this (older, still-awaiting) handler — i.e. NOT
+// "last click wins". With the chain, a newer click waits for this one to fully
+// settle (and is then properly superseded), and an older handler that has been
+// overtaken while waiting discards its work via the token check.
+let revealClickChain = Promise.resolve();
+let revealClickSeq = 0;
+// Store the new active reveal. Superseding the previous one is done explicitly
+// at click start (see supersedeActiveReveal), so this only records state.
+function registerActiveReveal(controller) {
+    activeRevealController = controller;
+}
+// Detach and return the currently active reveal unless it belongs to exceptId.
+// The caller is responsible for closing it (and awaiting its teardown).
+function supersedeActiveReveal(exceptId) {
+    const current = activeRevealController;
+    if (current && current.id !== exceptId) {
+        activeRevealController = null;
+        return current;
+    }
+    return null;
+}
+function clearActiveReveal(id) {
+    if (activeRevealController?.id === id) {
+        activeRevealController = null;
+    }
+}
+// The surface key for the Agents panel depends on HOW it opens (mirrors the
+// open logic in config.tsx `openAgentsPanel`): the dedicated far-right panel on
+// desktop ("agents-panel") vs. a left sidebar stack on mobile / contexts without
+// `setShowAgentsPanel` ("sidebar:agents-panel"). Used for de-duplication within
+// a reveal and to keep the surface key self-documenting.
+function agentsPanelSurfaceKey(editContext) {
+    if (editContext &&
+        !editContext.isMobile &&
+        typeof editContext.setShowAgentsPanel === "function") {
+        return "agents-panel";
+    }
+    return "sidebar:agents-panel";
+}
+// Close the More-panels flyout if it is currently open (inverse of open-more-sidebars).
+function isMorePanelsExpanded() {
+    return !!document.querySelector('[data-testid="more-sidebars-button"][aria-expanded="true"]');
+}
+function closeMorePanelsIfOpen() {
+    if (!isMorePanelsExpanded())
+        return;
+    const trigger = document.querySelector('[data-testid="more-sidebars-button"]');
+    trigger?.click();
+}
+function closeVersionSelectorIfOpen() {
+    if (!isElementPresent("@version-selector-list"))
+        return;
+    const list = document.querySelector('[data-testid="version-selector-list"]');
+    if (list) {
+        list.dispatchEvent(new KeyboardEvent("keydown", {
+            key: "Escape",
+            code: "Escape",
+            bubbles: true,
+            cancelable: true,
+        }));
+        return;
+    }
+    const trigger = document.querySelector('[data-testid="version-selector"][aria-expanded="true"]') ??
+        document.querySelector('[data-testid="version-selector"]');
+    trigger?.click();
+}
+function isNotificationCenterExpanded() {
+    return !!document.querySelector('[data-testid="notification-center-trigger"][aria-expanded="true"]');
+}
+function closeNotificationCenterIfOpen() {
+    if (!isElementPresent("@notification-center-list"))
+        return;
+    const list = document.querySelector('[data-testid="notification-center-list"]');
+    if (list) {
+        list.dispatchEvent(new KeyboardEvent("keydown", {
+            key: "Escape",
+            code: "Escape",
+            bubbles: true,
+            cancelable: true,
+        }));
+        return;
+    }
+    const trigger = document.querySelector('[data-testid="notification-center-trigger"][aria-expanded="true"]') ??
+        document.querySelector('[data-testid="notification-center-trigger"]');
+    trigger?.click();
+}
+// Resolve once the More-panels popover is fully closed: its list is gone AND
+// the trigger no longer reports aria-expanded="true". This lets a superseding
+// More-panels reveal reopen from a truly closed state instead of sampling
+// present-but-closing menu items.
+async function waitForMorePanelsClosed(timeoutMs = 1000) {
+    const isStillOpen = () => isElementPresent("@more-sidebars-panel") || isMorePanelsExpanded();
+    const waitUntilClosed = async () => {
+        const startedAt = Date.now();
+        while (Date.now() - startedAt < timeoutMs && isStillOpen()) {
+            await waitForDelay(50);
+        }
+        return !isStillOpen();
+    };
+    if (await waitUntilClosed())
+        return;
+    // If the first close signal was missed, try one guarded close again. The
+    // guard prevents toggling a panel that is already closing or closed.
+    closeMorePanelsIfOpen();
+    await waitForSelectorAnimations('[data-testid="more-sidebars-panel"]');
+    await waitUntilClosed();
+}
+// Resolve once the version-selector popover is fully closed: its list is gone
+// AND the trigger no longer reports aria-expanded="true". The supersede close
+// awaits this so the next reveal's open-version-selector (which early-returns
+// when it believes the popover is still open/visible) always starts from a
+// truly closed state, making the close-then-reopen deterministic.
+async function waitForVersionSelectorClosed(timeoutMs = 1000) {
+    const startedAt = Date.now();
+    const isStillOpen = () => isElementPresent("@version-selector-list") ||
+        !!document.querySelector('[data-testid="version-selector"][aria-expanded="true"]');
+    while (Date.now() - startedAt < timeoutMs && isStillOpen()) {
+        await waitForDelay(50);
+    }
+}
+async function waitForNotificationCenterClosed(timeoutMs = 1000) {
+    const startedAt = Date.now();
+    const isStillOpen = () => isElementPresent("@notification-center-list") ||
+        isNotificationCenterExpanded();
+    while (Date.now() - startedAt < timeoutMs && isStillOpen()) {
+        await waitForDelay(50);
+    }
+}
+function isAgentsPanelOpen() {
+    const trigger = document.querySelector('[data-testid="agents-panel-button"]');
+    return (trigger?.getAttribute("aria-pressed") === "true" ||
+        isElementVisibleBySelector("@sidebar-panel-agents-panel"));
 }
 // Button component for "Show me" functionality with availability detection
 function SelectorButton({ selectorDef, keyProp, }) {
     const editContext = useEditContext();
     const manualActions = editContext?.configuration.editor.manualActions;
-    const availabilitySelector = selectorDef.availabilitySelector || selectorDef.selector;
-    // For sidebar-only selectors, we don't need to check for an element
-    const isSidebarOnly = selectorDef.isSidebarOnly;
-    // Initialize to true for sidebar-only, false otherwise to avoid hydration mismatch
-    // (document.querySelector doesn't exist during SSR)
-    const [isAvailable, setIsAvailable] = useState(isSidebarOnly ? true : false);
-    // Can open sidebar if: sidebar-only selector
-    const canAutoOpenSidebar = Boolean(isSidebarOnly && editContext?.openSidebar && selectorDef.location);
+    const isSidebarOnly = !!selectorDef.isSidebarOnly;
+    const targetSelector = selectorDef.selector;
+    // Anchor = explicit availabilitySelector only. It gates the disabled state.
+    const anchorSelector = selectorDef.availabilitySelector;
+    const hasAvailabilitySelector = Boolean(anchorSelector);
+    const closeMode = selectorDef.closeMode ?? "click";
+    // Keep a fresh reference to editContext for use inside reveal/restore closures.
+    const editContextRef = useRef(editContext);
+    editContextRef.current = editContext;
     const hasBeforeAction = Boolean(selectorDef.beforeAction &&
         manualActions?.[selectorDef.beforeAction] &&
         editContext);
-    const isActionable = isSidebarOnly
-        ? canAutoOpenSidebar || hasBeforeAction
-        : isAvailable || canAutoOpenSidebar || hasBeforeAction;
-    // Monitor for element availability changes (skip for sidebar-only selectors)
-    useEffect(() => {
-        // Sidebar-only selectors are always "available" if openSidebar exists
-        if (isSidebarOnly) {
-            setIsAvailable(true);
-            return;
+    // A sidebar-only selector is reachable only when the current workspace
+    // supports sidebars and offers this specific sidebar (both are workspace-scoped).
+    const canAutoOpenSidebar = Boolean(isSidebarOnly &&
+        selectorDef.location &&
+        editContext?.openSidebar &&
+        editContext.workspace?.supportsSidebars &&
+        editContext.availableSidebars?.some((s) => s.id === selectorDef.location));
+    // Presence/visibility probes, kept up to date by the effect below.
+    // The anchor gates "is this relevant in the current context", so it checks
+    // presence (it may itself be a currently-collapsed container). The target
+    // checks visibility to distinguish "show" from "show-action".
+    const [isTargetPresent, setIsTargetPresent] = useState(false);
+    const [isTargetVisible, setIsTargetVisible] = useState(false);
+    const [isAnchorPresent, setIsAnchorPresent] = useState(false);
+    // True while THIS button has revealed a container (State 3 active -> green).
+    const [isActiveReveal, setIsActiveReveal] = useState(false);
+    const controllerIdRef = useRef(0);
+    const revealRef = useRef(null);
+    const isAnchorReachable = hasAvailabilitySelector
+        ? isAnchorPresent
+        : isSidebarOnly
+            ? canAutoOpenSidebar
+            : isTargetPresent || hasBeforeAction;
+    const hasRevealPath = isSidebarOnly || hasBeforeAction || canAutoOpenSidebar || isTargetPresent;
+    const state = deriveSelectorState({
+        isSidebarOnly,
+        isAnchorReachable,
+        isTargetVisible,
+        hasRevealPath,
+    });
+    const isDisabled = state === "disabled";
+    // Reset active (green) state WITHOUT running the undo steps. Used when the
+    // revealed container was closed by some other means.
+    const resetActiveState = useCallback(() => {
+        clearActiveReveal(controllerIdRef.current);
+        revealRef.current = null;
+        setIsActiveReveal(false);
+    }, []);
+    // Tear down this reveal: wipe its highlight, reset the button, and close every
+    // owned surface (reverse open order so nested surfaces close first) EXCEPT
+    // those whose key is in `keepKeys`. Kept (still-open) surfaces are returned so
+    // a superseding reveal can adopt them instead of closing+reopening them.
+    // Used for explicit close (2nd click, auto timer), external-close handling,
+    // and being superseded by another reveal.
+    const runRestoreKeeping = useCallback(async (keepKeys = []) => {
+        const reveal = revealRef.current;
+        // Remove the highlight immediately so it does not keep pulsing over the
+        // close/re-open transition while the next reveal builds up.
+        clearActiveHighlightOverlays();
+        // Reset button state immediately (button turns blue) while the surface
+        // teardown animation plays out; the promise resolves once settled.
+        clearActiveReveal(reveal?.id ?? controllerIdRef.current);
+        revealRef.current = null;
+        setIsActiveReveal(false);
+        if (!reveal)
+            return [];
+        const kept = [];
+        // Close in reverse open order (nested surfaces close first).
+        for (let i = reveal.surfaceOps.length - 1; i >= 0; i -= 1) {
+            const op = reveal.surfaceOps[i];
+            if (!op)
+                continue;
+            if (keepKeys.includes(op.key) && op.isOpen()) {
+                kept.push(op);
+                continue;
+            }
+            try {
+                await op.close();
+            }
+            catch {
+                // ignore individual close failures
+            }
         }
-        // Initial check
-        const initialAvailable = isElementAvailable(availabilitySelector);
-        setIsAvailable(initialAvailable);
-        // Set up MutationObserver to watch for DOM changes
-        const checkAvailability = () => {
-            const available = isElementAvailable(availabilitySelector);
-            setIsAvailable(available);
+        // Returned in open order so the adopting reveal can splice them back in.
+        return kept.reverse();
+    }, []);
+    const runRestore = useCallback(async () => {
+        await runRestoreKeeping([]);
+    }, [runRestoreKeeping]);
+    const runRestoreRef = useRef(runRestore);
+    runRestoreRef.current = runRestore;
+    const runRestoreKeepingRef = useRef(runRestoreKeeping);
+    runRestoreKeepingRef.current = runRestoreKeeping;
+    // Keep the presence/visibility probes fresh.
+    useEffect(() => {
+        const check = () => {
+            setIsTargetPresent(targetSelector ? isElementPresent(targetSelector) : false);
+            setIsTargetVisible(targetSelector ? isElementVisibleBySelector(targetSelector) : false);
+            setIsAnchorPresent(anchorSelector ? isElementPresent(anchorSelector) : false);
         };
-        // Watch the main document for changes
-        const observer = new MutationObserver(checkAvailability);
+        check();
+        const attributeFilter = [
+            "data-testid",
+            "class",
+            "id",
+            "style",
+            "hidden",
+            "aria-hidden",
+        ];
+        const observer = new MutationObserver(check);
         observer.observe(document.body, {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ["data-testid", "class", "id"],
+            attributeFilter,
         });
-        // Also watch the iframe if it exists (for iframe: selectors)
         let iframeObserver = null;
         const iframe = document.querySelector("iframe.page-iframe");
         if (iframe?.contentDocument?.body) {
-            iframeObserver = new MutationObserver(checkAvailability);
+            iframeObserver = new MutationObserver(check);
             iframeObserver.observe(iframe.contentDocument.body, {
                 childList: true,
                 subtree: true,
                 attributes: true,
-                attributeFilter: ["data-testid", "class", "id"],
+                attributeFilter,
             });
         }
-        // Also poll periodically as a fallback (iframe might load after mount)
-        const intervalId = setInterval(checkAvailability, 1000);
+        const intervalId = setInterval(check, 1000);
         return () => {
             observer.disconnect();
             iframeObserver?.disconnect();
             clearInterval(intervalId);
         };
-    }, [availabilitySelector, isSidebarOnly]);
-    const tooltipText = isActionable
-        ? selectorDef.description
-        : selectorDef.notFoundMessage || selectorDef.description;
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { "aria-label": "Show me", onClick: async () => {
-                        if (!isActionable)
+    }, [targetSelector, anchorSelector]);
+    // While active, detect if the revealed container was closed externally and
+    // reset the button's active (green) state accordingly.
+    useEffect(() => {
+        if (!isActiveReveal)
+            return;
+        const check = () => {
+            const reveal = revealRef.current;
+            const anchorPresent = anchorSelector
+                ? isElementPresent(anchorSelector)
+                : isAnchorPresent;
+            if (shouldResetActiveReveal({
+                hasReveal: Boolean(reveal),
+                isRevealStillOpen: reveal?.isStillOpen() ?? false,
+                hasAvailabilitySelector,
+                isAnchorPresent: anchorPresent,
+            })) {
+                resetActiveState();
+            }
+        };
+        const observer = new MutationObserver(check);
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                EDITOR_FORM_HIDDEN_ATTRIBUTE,
+                "class",
+                "style",
+                "data-testid",
+            ],
+        });
+        const intervalId = setInterval(check, 500);
+        return () => {
+            observer.disconnect();
+            clearInterval(intervalId);
+        };
+    }, [
+        anchorSelector,
+        hasAvailabilitySelector,
+        isActiveReveal,
+        isAnchorPresent,
+        resetActiveState,
+    ]);
+    // Clear the global active controller if this button unmounts while active.
+    useEffect(() => {
+        return () => {
+            clearActiveReveal(controllerIdRef.current);
+        };
+    }, []);
+    const tooltipText = isActiveReveal
+        ? CLOSE_PANE_LABEL
+        : isDisabled
+            ? selectorDef.notFoundMessage || selectorDef.description
+            : selectorDef.description;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { "data-manual-show-me": "true", "data-manual-show-me-before-action": selectorDef.beforeAction || undefined, "aria-label": isActiveReveal ? CLOSE_PANE_LABEL : "Show me", onClick: async () => {
+                        // Second click while active -> restore (close=click behaviour).
+                        if (isActiveReveal) {
+                            runRestore();
+                            return;
+                        }
+                        if (isDisabled)
                             return;
-                        const runId = globalThis.crypto?.randomUUID?.() ??
-                            `manual-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-                        const resolveElements = (selector = selectorDef.selector) => selector ? getElementsForSelector(selector) : [];
-                        const runManualAction = async (actionName, elements) => {
-                            if (!actionName || !editContext || !manualActions?.[actionName]) {
+                        // Sequence overlapping Show-me clicks across ALL buttons so a rapid
+                        // second click can't interleave with this one. We chain behind any
+                        // in-flight reveal and take a monotonic token; if a newer click
+                        // arrives while we wait our turn, this (now stale) handler bails out
+                        // instead of overtaking it. This guarantees "last click wins" and
+                        // closes the teardown-window race where, during
+                        // `await superseded.close()`, no global controller is registered.
+                        const clickToken = ++revealClickSeq;
+                        const previousClick = revealClickChain;
+                        let releaseClick = () => { };
+                        revealClickChain = new Promise((resolve) => {
+                            releaseClick = resolve;
+                        });
+                        try {
+                            await previousClick;
+                            // A newer click superseded this one while we waited our turn.
+                            if (clickToken !== revealClickSeq) {
                                 return;
                             }
-                            const action = manualActions[actionName];
-                            const actionProps = {
-                                editContext,
-                                selectorDef,
-                                duration: HIGHLIGHT_DURATION_MS,
-                                runId,
-                                elements,
-                                resolveElements,
+                            const resolveElements = (selector = selectorDef.selector) => selector ? getElementsForSelector(selector) : [];
+                            // State-machine semantics: any new Show-me action supersedes the
+                            // currently active State 3 reveal from another button, tearing it
+                            // down (clearing its highlight and closing its surfaces) BEFORE
+                            // this reveal starts opening. Await the teardown so the close
+                            // animation completes first - the transition is a clean, sequenced
+                            // close-then-open - and so this reveal samples fresh DOM and avoids
+                            // a stale "was this surface open?" read. Because clicks are
+                            // serialized above, the superseded controller is always the
+                            // previous fully-settled reveal (no race here).
+                            //
+                            // Exception: if this reveal would only reopen the same editor-form
+                            // slider, hand the already-open surface off instead of closing it,
+                            // so the slider does not visibly close and reopen. We then own it
+                            // and close it on our own restore.
+                            const carrySlider = getEditorFormSlider([
+                                ...resolveElements(),
+                                ...(anchorSelector ? resolveElements(anchorSelector) : []),
+                            ]);
+                            const keepKeys = shouldCarryEditorFormSurface({
+                                isSidebarOnly,
+                                sliderExists: carrySlider !== null,
+                                isSliderOpen: !isEditorFormSliderHidden(carrySlider),
+                            })
+                                ? ["editor-form"]
+                                : [];
+                            const superseded = supersedeActiveReveal(controllerIdRef.current);
+                            let carriedSurfaceOps = [];
+                            if (superseded) {
+                                try {
+                                    carriedSurfaceOps = await superseded.closeKeeping(keepKeys);
+                                }
+                                catch {
+                                    // ignore supersede failures
+                                    carriedSurfaceOps = [];
+                                }
+                            }
+                            const runId = globalThis.crypto?.randomUUID?.() ??
+                                `manual-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                            const runManualAction = async (actionName, elements) => {
+                                if (!actionName ||
+                                    !editContext ||
+                                    !manualActions?.[actionName]) {
+                                    return;
+                                }
+                                const action = manualActions[actionName];
+                                const actionProps = {
+                                    editContext,
+                                    selectorDef,
+                                    duration: HIGHLIGHT_DURATION_MS,
+                                    runId,
+                                    elements,
+                                    resolveElements,
+                                };
+                                await action(actionProps);
+                            };
+                            // Surfaces this reveal owns, in open order. Closed in reverse on
+                            // restore. Any surface handed off by the superseded reveal (the
+                            // already-open editor-form slider) is adopted here, so we keep it
+                            // open instead of reopening it and still close it on our restore.
+                            const surfaceOps = [...carriedSurfaceOps];
+                            // Register a surface unless one with the same key was already
+                            // pushed by an earlier step in this same reveal.
+                            const pushSurface = (op) => {
+                                if (surfaceOps.some((existing) => existing.key === op.key)) {
+                                    return;
+                                }
+                                surfaceOps.push(op);
                             };
-                            await action(actionProps);
-                        };
-                        // If this selector is sidebar-only, open the sidebar before highlighting.
-                        // For sidebar-only selectors, location is the sidebar ID (without -sidebar suffix)
-                        if (selectorDef.isSidebarOnly &&
-                            editContext?.openSidebar &&
-                            selectorDef.location) {
-                            const sidebarId = selectorDef.location;
-                            const isSidebarAlreadyOpen = !!editContext.openSidebars?.includes(sidebarId);
-                            if (!isSidebarAlreadyOpen) {
-                                editContext.openSidebar(sidebarId);
-                                // Give the sidebar a moment to render before querying/highlighting.
-                                await new Promise((resolve) => setTimeout(resolve, 150));
+                            // 1. Sidebar-only: open the sidebar.
+                            if (isSidebarOnly &&
+                                editContext?.openSidebar &&
+                                selectorDef.location) {
+                                const sidebarId = selectorDef.location;
+                                const surfaceKey = `sidebar:${sidebarId}`;
+                                const wasOpen = !!editContext.openSidebars?.includes(sidebarId);
+                                if (!wasOpen) {
+                                    editContext.openSidebar(sidebarId);
+                                    pushSurface({
+                                        key: surfaceKey,
+                                        close: async () => {
+                                            editContextRef.current?.toggleSidebar?.(sidebarId, {
+                                                forceClose: true,
+                                            });
+                                            await editContextRef.current?.waitForSurfaceSettled?.(`sidebar:${sidebarId}`);
+                                        },
+                                        isOpen: () => !!editContextRef.current?.openSidebars?.includes(sidebarId),
+                                    });
+                                    // Wait for the sidebar's open animation to finish before querying.
+                                    await editContext.waitForSurfaceSettled?.(`sidebar:${sidebarId}`);
+                                }
+                            }
+                            const availabilityElements = anchorSelector
+                                ? resolveElements(anchorSelector)
+                                : [];
+                            const relevantElements = !isSidebarOnly
+                                ? [...resolveElements(), ...availabilityElements]
+                                : availabilityElements;
+                            const formSlider = getEditorFormSlider(relevantElements);
+                            const shouldOpenEditorForm = !isSidebarOnly &&
+                                !!formSlider &&
+                                isEditorFormSliderHidden(formSlider);
+                            if (selectorDef.tab) {
+                                editContext?.setActiveEditorTab(selectorDef.tab);
+                            }
+                            // 2. Editor form slider.
+                            if (shouldOpenEditorForm && editContext) {
+                                const slotId = editContext.getActiveSlotId();
+                                editContext.setEditorFormHiddenForSlot(slotId, false);
+                                pushSurface({
+                                    key: "editor-form",
+                                    close: async () => {
+                                        editContextRef.current?.setEditorFormHiddenForSlot(slotId, true);
+                                        await editContextRef.current?.waitForSurfaceSettled?.("editor-form");
+                                    },
+                                    isOpen: () => {
+                                        const slider = getEditorFormSlider();
+                                        return slider !== null && !isEditorFormSliderHidden(slider);
+                                    },
+                                });
+                                await editContext.waitForSurfaceSettled?.("editor-form");
+                            }
+                            else if (selectorDef.tab) {
+                                await waitForNextFrame();
+                            }
+                            // 3. beforeAction (may open the More-panels flyout, reveal fields, etc.).
+                            const resolvedElements = !isSidebarOnly
+                                ? await waitForResolvedElements(resolveElements, selectorDef.selector)
+                                : [];
+                            const actionElements = resolvedElements.length > 0
+                                ? resolvedElements
+                                : availabilityElements;
+                            const morePanelsWasOpen = isElementPresent("@more-sidebars-panel");
+                            const versionSelectorWasOpen = isElementPresent("@version-selector-list");
+                            const notificationCenterWasOpen = isElementPresent("@notification-center-list");
+                            // Capture pre-reveal state for the AI Assistant reveals so we only
+                            // restore (close) what THIS button actually opened.
+                            const agentsPanelWasOpen = isAgentsPanelOpen();
+                            const agentSettingsWasOpen = !!selectorDef.selector &&
+                                isElementPresent(selectorDef.selector) &&
+                                selectorDef.beforeAction === "open-agent-settings";
+                            await runManualAction(selectorDef.beforeAction, actionElements);
+                            if (selectorDef.beforeAction === "open-more-sidebars") {
+                                const morePanelsNowOpen = isElementPresent("@more-sidebars-panel");
+                                if (!morePanelsWasOpen && morePanelsNowOpen) {
+                                    pushSurface({
+                                        key: "more-sidebars-panel",
+                                        close: async () => {
+                                            closeMorePanelsIfOpen();
+                                            await waitForSelectorAnimations('[data-testid="more-sidebars-panel"]');
+                                            await waitForMorePanelsClosed();
+                                        },
+                                        isOpen: () => isElementPresent("@more-sidebars-panel"),
+                                    });
+                                }
+                            }
+                            if (selectorDef.beforeAction === "open-version-selector") {
+                                const versionSelectorNowOpen = isElementPresent("@version-selector-list");
+                                if (!versionSelectorWasOpen && versionSelectorNowOpen) {
+                                    pushSurface({
+                                        key: "version-selector",
+                                        close: async () => {
+                                            closeVersionSelectorIfOpen();
+                                            await waitForSelectorAnimations('[data-testid="version-selector-list"]');
+                                            // Gate until the popover is truly gone so the next
+                                            // reveal's open-version-selector reopens from a closed
+                                            // state (deterministic close-then-reopen).
+                                            await waitForVersionSelectorClosed();
+                                        },
+                                        isOpen: () => isElementPresent("@version-selector-list"),
+                                    });
+                                }
+                            }
+                            if (selectorDef.beforeAction === "open-notification-center") {
+                                const notificationCenterNowOpen = isElementPresent("@notification-center-list");
+                                if (!notificationCenterWasOpen && notificationCenterNowOpen) {
+                                    pushSurface({
+                                        key: "notification-center",
+                                        close: async () => {
+                                            closeNotificationCenterIfOpen();
+                                            await waitForSelectorAnimations('[data-testid="notification-center-list"]');
+                                            await waitForNotificationCenterClosed();
+                                        },
+                                        isOpen: () => isElementPresent("@notification-center-list"),
+                                    });
+                                }
+                            }
+                            if (selectorDef.beforeAction === "open-agents-panel" ||
+                                selectorDef.beforeAction === "open-agent-settings") {
+                                // The beforeAction already awaited the panel/popover open
+                                // animation (see config openAgentsPanel/openAgentSettings), so
+                                // no polling here.
+                                const agentsPanelNowOpen = isAgentsPanelOpen();
+                                // Push the panel surface first so that, since surfaces close in
+                                // reverse, the settings popover is closed before the panel.
+                                if (!agentsPanelWasOpen && agentsPanelNowOpen) {
+                                    pushSurface({
+                                        key: agentsPanelSurfaceKey(editContext),
+                                        close: async () => {
+                                            if (editContextRef.current?.isMobile) {
+                                                editContextRef.current?.toggleSidebar?.("agents-panel", {
+                                                    forceClose: true,
+                                                });
+                                                await editContextRef.current?.waitForSurfaceSettled?.("sidebar:agents-panel");
+                                            }
+                                            else {
+                                                editContextRef.current?.setShowAgentsPanel?.(false);
+                                                await editContextRef.current?.waitForSurfaceSettled?.("agents-panel");
+                                            }
+                                        },
+                                        isOpen: () => isAgentsPanelOpen(),
+                                    });
+                                }
+                                if (selectorDef.beforeAction === "open-agent-settings") {
+                                    const settingsTargetNowOpen = !!selectorDef.selector &&
+                                        isElementPresent(selectorDef.selector);
+                                    if (!agentSettingsWasOpen && settingsTargetNowOpen) {
+                                        pushSurface({
+                                            key: "agent-settings",
+                                            close: async () => {
+                                                const trigger = document.querySelector('[data-testid="agent-settings-popover-trigger"]');
+                                                if (trigger &&
+                                                    selectorDef.selector &&
+                                                    isElementPresent(selectorDef.selector)) {
+                                                    trigger.click();
+                                                    await waitForSelectorAnimations('[data-testid="agent-settings-popover-content"]');
+                                                }
+                                            },
+                                            isOpen: () => selectorDef.selector
+                                                ? isElementPresent(selectorDef.selector)
+                                                : false,
+                                        });
+                                    }
+                                }
+                            }
+                            // afterAction is the declared inverse for custom reveals (e.g.
+                            // field actions). It is a restore-only step with no open surface,
+                            // so it uses a "custom:" key and is excluded from the still-open
+                            // check below.
+                            if (selectorDef.afterAction) {
+                                pushSurface({
+                                    key: "custom:afterAction",
+                                    close: async () => {
+                                        await runManualAction(selectorDef.afterAction, !isSidebarOnly ? resolveElements() : availabilityElements);
+                                    },
+                                    isOpen: () => true,
+                                });
+                            }
+                            // Highlight the target. For sidebar-only selectors there is no
+                            // inner target, so we highlight the opened sidebar panel itself.
+                            // Wait for it to become visible first, since a just-revealed
+                            // element may be present but not yet laid out (highlightElement
+                            // skips invisible ones).
+                            const highlightSelector = isSidebarOnly
+                                ? selectorDef.location
+                                    ? `@sidebar-panel-${selectorDef.location}`
+                                    : ""
+                                : selectorDef.selector;
+                            // The highlight runs a finite CSS animation; highlightElement
+                            // resolves on its animationend. Stateful reveals register below
+                            // without awaiting it; close=auto chains restore onto this lifetime.
+                            let highlightLifetime = Promise.resolve();
+                            if (highlightSelector) {
+                                const highlightTargets = await waitForVisibleElements(highlightSelector, 1500);
+                                if (highlightTargets.length > 0) {
+                                    highlightLifetime = highlightElement(highlightSelector, HIGHLIGHT_DURATION_MS);
+                                }
+                            }
+                            const hasStatefulSurface = hasStatefulRevealSurface(surfaceOps.map((op) => op.key));
+                            if (surfaceOps.length > 0 && !hasStatefulSurface) {
+                                // Restore-only custom actions (for example field action reveals)
+                                // should clean up after the highlight, but they do not represent
+                                // an opened pane/popover that needs a green "close" state.
+                                void highlightLifetime.then(async () => {
+                                    for (let i = surfaceOps.length - 1; i >= 0; i -= 1) {
+                                        const op = surfaceOps[i];
+                                        if (!op)
+                                            continue;
+                                        try {
+                                            await op.close();
+                                        }
+                                        catch {
+                                            // ignore individual restore failures
+                                        }
+                                    }
+                                });
+                            }
+                            // If we opened a real surface, this was a State-3 reveal: keep the
+                            // button active (green) and register it for mutual exclusion.
+                            if (hasStatefulSurface) {
+                                const id = ++revealControllerSeq;
+                                controllerIdRef.current = id;
+                                revealRef.current = {
+                                    id,
+                                    surfaceOps,
+                                    // Restore-only "custom:" surfaces (e.g. afterAction) have no
+                                    // open state and must not keep the reveal "open" forever.
+                                    isStillOpen: () => {
+                                        const tracked = surfaceOps.filter((op) => !op.key.startsWith("custom:"));
+                                        return tracked.length === 0
+                                            ? true
+                                            : tracked.some((op) => op.isOpen());
+                                    },
+                                };
+                                registerActiveReveal({
+                                    id,
+                                    close: () => runRestoreRef.current(),
+                                    closeKeeping: (keepKeys) => runRestoreKeepingRef.current(keepKeys),
+                                    isStillOpen: () => revealRef.current?.isStillOpen() ?? false,
+                                });
+                                setIsActiveReveal(true);
+                                if (closeMode === "auto") {
+                                    // Restore right after the highlight animation completes,
+                                    // instead of racing a duration-matched timer.
+                                    void highlightLifetime.then(() => {
+                                        if (controllerIdRef.current === id) {
+                                            void runRestoreRef.current();
+                                        }
+                                    });
+                                }
                             }
                         }
-                        const resolvedElements = !isSidebarOnly ? resolveElements() : [];
-                        await runManualAction(selectorDef.beforeAction, resolvedElements);
-                        // For sidebar-only selectors, we just open the sidebar (done above)
-                        // For regular selectors, also highlight the element
-                        if (!isSidebarOnly && selectorDef.selector) {
-                            await highlightElement(selectorDef.selector, HIGHLIGHT_DURATION_MS);
-                        }
-                        if (selectorDef.afterAction) {
-                            window.setTimeout(() => {
-                                void runManualAction(selectorDef.afterAction, !isSidebarOnly ? resolveElements() : []);
-                            }, HIGHLIGHT_DURATION_MS);
+                        finally {
+                            // Release our slot so the next queued click can proceed (and then
+                            // properly supersede us). Runs even if the reveal threw, so the
+                            // click chain can never deadlock.
+                            releaseClick();
                         }
-                    }, disabled: !isActionable, className: cn("inline-flex h-5 w-5 items-center justify-center rounded border transition-colors", isActionable
-                        ? "cursor-pointer border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100"
-                        : "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"), children: [_jsx(LocateFixed, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "sr-only", children: "Show me" })] }, keyProp) }), _jsx(TooltipContent, { children: tooltipText })] }));
+                    }, disabled: isDisabled && !isActiveReveal, className: cn("inline-flex h-5 w-5 items-center justify-center rounded border transition-colors", isActiveReveal
+                        ? "border-feedback-green bg-feedback-green-light text-feedback-green hover:bg-feedback-green-light cursor-pointer"
+                        : !isDisabled
+                            ? "border-feedback-blue bg-feedback-blue-light text-feedback-blue hover:bg-feedback-blue-light cursor-pointer"
+                            : "border-border-default bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed"), children: [_jsx(LocateFixed, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "sr-only", children: "Show me" })] }, keyProp) }), _jsx(TooltipContent, { children: tooltipText })] }));
 }
 // Render markdown content with clickable selectors
 // Supports both {{selectorName}} syntax (looks up in uiSelectors) and legacy @selector syntax
@@ -420,10 +1182,10 @@ function renderLineWithSelectors(text, uiSelectors, manualLinkTargets, onManualL
         }
         const targetId = manualLinkTargets.get(linkTitle.toLowerCase());
         if (targetId) {
-            parts.push(_jsx("button", { type: "button", onClick: () => onManualLinkClick(targetId), className: "cursor-pointer text-blue-600 underline decoration-blue-300 underline-offset-2 hover:text-blue-700", title: `Open "${linkTitle}"`, children: linkTitle }, `manual-link-${match.index}`));
+            parts.push(_jsx("button", { type: "button", onClick: () => onManualLinkClick(targetId), className: "text-feedback-blue decoration-feedback-blue hover:text-feedback-blue cursor-pointer underline underline-offset-2", title: `Open "${linkTitle}"`, children: linkTitle }, `manual-link-${match.index}`));
         }
         else {
-            parts.push(_jsx("span", { className: "text-orange-600", title: `Manual section not found: ${linkTitle}`, children: fullMatch }, `manual-link-missing-${match.index}`));
+            parts.push(_jsx("span", { className: "text-component-shared", title: `Manual section not found: ${linkTitle}`, children: fullMatch }, `manual-link-missing-${match.index}`));
         }
         lastIndex = match.index + fullMatch.length;
     }
@@ -436,10 +1198,10 @@ function renderLineWithSelectors(text, uiSelectors, manualLinkTargets, onManualL
 function renderInlineSelectorsAndFormatting(text, uiSelectors) {
     const parts = [];
     let lastIndex = 0;
-    // Combined regex for {{namedSelector}}, @selector, and **bold**
-    // Note: @selector can include -sidebar suffix for sidebar-only selectors
-    // Also supports @iframe:selector syntax (iframe: is special and allowed)
-    // Now also matches optional parentheses around selectors: ({{name}}) or (@selector)
+    // Combined regex for {{namedSelector}}, @selector, and **bold**.
+    // @selector can include -sidebar suffix for sidebar-only selectors.
+    // The matcher keeps legacy @iframe: tokens parseable, but they are unavailable.
+    // Also matches optional parentheses around selectors: ({{name}}) or (@selector).
     const regex = /(\()?(\{\{([\w\-]+)\}\})|(\()?(@(?:iframe:[\w\-\.#\[\]=]*[\w\-#\[\]=]|[\w\-\.#\[\]=]*[\w\-#\[\]=]))|(\*\*(.+?)\*\*)/g;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -470,7 +1232,7 @@ function renderInlineSelectorsAndFormatting(text, uiSelectors) {
             }
             else {
                 // Unknown selector, render as text (keep parens if present)
-                parts.push(_jsxs("span", { className: "text-orange-600", title: "Unknown selector", children: [hasOpenParen ? "(" : "", selectorName, text[match.index + match[0].length] === ")" ? ")" : ""] }, match.index));
+                parts.push(_jsxs("span", { className: "text-component-shared", title: "Unknown selector", children: [hasOpenParen ? "(" : "", selectorName, text[match.index + match[0].length] === ")" ? ")" : ""] }, match.index));
             }
         }
         else if (match[5]) {
@@ -554,39 +1316,39 @@ function findNearestNavigableAncestor(path) {
 const SECTION_THEMES = {
     "getting started": {
         icon: Rocket,
-        color: "text-emerald-600",
-        bg: "bg-emerald-50",
-        border: "border-emerald-100",
-        accent: "bg-emerald-500",
+        color: "text-feedback-green",
+        bg: "bg-feedback-green-light",
+        border: "border-feedback-green",
+        accent: "bg-feedback-green",
     },
     "page editing": {
         icon: FileEdit,
-        color: "text-blue-600",
-        bg: "bg-blue-50",
-        border: "border-blue-100",
-        accent: "bg-blue-500",
+        color: "text-feedback-blue",
+        bg: "bg-feedback-blue-light",
+        border: "border-feedback-blue",
+        accent: "bg-feedback-blue",
     },
     "managing content": {
         icon: BookOpen,
-        color: "text-amber-600",
-        bg: "bg-amber-50",
-        border: "border-amber-100",
-        accent: "bg-amber-500",
+        color: "text-feedback-orange",
+        bg: "bg-feedback-orange-light",
+        border: "border-feedback-orange",
+        accent: "bg-feedback-orange",
     },
     "ai assistant": {
         icon: BookOpen,
-        color: "text-violet-600",
-        bg: "bg-violet-50",
-        border: "border-violet-100",
-        accent: "bg-violet-500",
+        color: "text-highlight-100",
+        bg: "bg-highlight-10",
+        border: "border-highlight-100",
+        accent: "bg-highlight-100",
     },
 };
 const DEFAULT_THEME = {
     icon: BookOpen,
-    color: "text-violet-600",
-    bg: "bg-violet-50",
-    border: "border-violet-100",
-    accent: "bg-violet-500",
+    color: "text-highlight-100",
+    bg: "bg-highlight-10",
+    border: "border-highlight-100",
+    accent: "bg-highlight-100",
 };
 function getSectionTheme(title) {
     if (!title)
@@ -597,7 +1359,7 @@ function TocSectionCard({ section, onSelect, onToggleCollapse, isCollapsed, }) {
     const theme = getSectionTheme(section.title);
     const Icon = theme.icon;
     const hasChildren = !!(section.children && section.children.length > 0);
-    return (_jsxs("div", { className: "group", children: [_jsx("button", { type: "button", onClick: () => onSelect(section.id), className: cn("w-full rounded-lg p-3 text-left transition-all", "bg-white hover:bg-gray-50/50"), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", theme.bg), children: section.svgIcon ? (_jsx(SvgIcon, { svg: section.svgIcon, size: 24, className: theme.color })) : (_jsx(Icon, { className: cn("h-[18px] w-[18px]", theme.color), strokeWidth: 1.75 })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-sm font-semibold text-gray-900", children: section.title || "Untitled" }) }), section.summary && (_jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-relaxed text-gray-500", children: section.summary }))] })] }) }), hasChildren && (_jsxs("div", { className: "mt-1", children: [_jsxs("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "ml-[60px] flex w-fit items-center gap-1.5 rounded-md py-1 text-xs text-gray-400 transition-colors hover:text-gray-600", children: [_jsx(ChevronRight, { className: cn("h-3 w-3 shrink-0 transition-transform", !isCollapsed && "rotate-90") }), _jsx("span", { children: isCollapsed ? "Show articles" : "Hide articles" })] }), !isCollapsed && (_jsx("div", { className: "mt-0.5 ml-[60px] space-y-px border-l-2 border-gray-100 pl-3", children: section.children.map((child) => (_jsxs("button", { type: "button", onClick: () => onSelect(child.id), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", theme.accent, "opacity-40 transition-opacity group-hover:opacity-70") }), _jsx("span", { className: "truncate", children: child.title || "Untitled" })] }, child.id))) }))] }))] }));
+    return (_jsxs("div", { className: "group", children: [_jsx("button", { type: "button", onClick: () => onSelect(section.id), className: cn("w-full rounded-lg p-3 text-left transition-all", "hover:bg-neutral-grey-5/50 bg-white"), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", theme.bg), children: section.svgIcon ? (_jsx(SvgIcon, { svg: section.svgIcon, size: 24, className: theme.color })) : (_jsx(Icon, { className: cn("h-[18px] w-[18px]", theme.color), strokeWidth: 1.75 })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-neutral-grey-100 text-sm font-medium", children: section.title || "Untitled" }) }), section.summary && (_jsx("p", { className: "text-neutral-grey-50 mt-0.5 line-clamp-2 text-xs leading-relaxed", children: section.summary }))] })] }) }), hasChildren && (_jsxs("div", { className: "mt-1", children: [_jsxs("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "text-neutral-grey-50 hover:text-neutral-grey-50 ml-[60px] flex w-fit items-center gap-1.5 rounded-md py-1 text-xs transition-colors", children: [_jsx(ChevronRight, { className: cn("h-3 w-3 shrink-0 transition-transform", !isCollapsed && "rotate-90") }), _jsx("span", { children: isCollapsed ? "Show articles" : "Hide articles" })] }), !isCollapsed && (_jsx("div", { className: "border-border-default mt-0.5 ml-[60px] space-y-px border-l-2 pl-3", children: section.children.map((child) => (_jsxs("button", { type: "button", onClick: () => onSelect(child.id), className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", theme.accent, "opacity-40 transition-opacity group-hover:opacity-70") }), _jsx("span", { className: "truncate", children: child.title || "Untitled" })] }, child.id))) }))] }))] }));
 }
 function renderTocTree(sections, onSelect, onToggleCollapse, collapsedSectionIds, depth = 0) {
     if (depth === 0) {
@@ -606,10 +1368,10 @@ function renderTocTree(sections, onSelect, onToggleCollapse, collapsedSectionIds
                 return (_jsx(TocSectionCard, { section: section, onSelect: onSelect, onToggleCollapse: onToggleCollapse, isCollapsed: isCollapsed }, section.id));
             }) }));
     }
-    return (_jsx("div", { className: cn(depth > 0 && "ml-3 border-l border-gray-100 pl-2"), children: sections.map((section) => {
+    return (_jsx("div", { className: cn(depth > 0 && "border-border-default ml-3 border-l pl-2"), children: sections.map((section) => {
             const hasChildren = !!(section.children && section.children.length > 0);
             const isCollapsed = hasChildren && collapsedSectionIds.has(section.id);
-            return (_jsxs("div", { className: "my-0.5", children: [_jsxs("div", { className: cn("group flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50", "text-sm text-gray-500 hover:text-gray-700"), children: [hasChildren ? (_jsx("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "rounded p-0.5 text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500", "aria-label": isCollapsed
+            return (_jsxs("div", { className: "my-0.5", children: [_jsxs("div", { className: cn("group hover:bg-neutral-grey-5 flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors", "text-neutral-grey-50 hover:text-neutral-grey-100 text-sm"), children: [hasChildren ? (_jsx("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 rounded p-0.5 transition-colors", "aria-label": isCollapsed
                                     ? `Expand ${section.title || "section"}`
                                     : `Collapse ${section.title || "section"}`, title: isCollapsed ? "Expand section" : "Collapse section", children: _jsx(ChevronRight, { className: cn("h-3.5 w-3.5 shrink-0 transition-transform", !isCollapsed && "rotate-90") }) })) : (_jsx("span", { className: "h-3.5 w-3.5 shrink-0" })), _jsx("button", { type: "button", onClick: () => onSelect(section.id), className: "flex-1 text-left", children: section.title || "Untitled" })] }), hasChildren &&
                         !isCollapsed &&
@@ -641,15 +1403,15 @@ function InChapterDropdown({ toc, currentTocPath, selectedSectionId, onSelect, }
     if (!chapter || chapterOptions.length <= 1)
         return null;
     const selectedTitle = chapterOptions.find((o) => o.section.id === selectedSectionId)?.section.title;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex w-full items-center justify-between gap-2 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs transition-colors hover:bg-gray-50", children: [_jsxs("span", { className: "truncate text-gray-500", children: [_jsx("span", { className: "font-medium text-gray-700", children: selectedTitle ?? chapter.title }), " ", _jsxs("span", { className: "text-gray-400", children: ["\u2014 in ", chapter.title] })] }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-gray-400" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "max-h-80 w-[--radix-dropdown-menu-trigger-width] overflow-y-auto", children: [allChapters.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { className: "text-[11px] font-semibold tracking-wide text-gray-400 uppercase", children: "Chapters" }), allChapters.map((c) => {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "border-border-default hover:bg-neutral-grey-5 inline-flex w-full items-center justify-between gap-2 rounded-md border bg-white px-2 py-1.5 text-xs transition-colors", children: [_jsxs("span", { className: "text-neutral-grey-50 truncate", children: [_jsx("span", { className: "text-neutral-grey-100 font-medium", children: selectedTitle ?? chapter.title }), " ", _jsxs("span", { className: "text-neutral-grey-50", children: ["\u2014 in ", chapter.title] })] }), _jsx(ChevronDown, { className: "text-neutral-grey-50 h-3.5 w-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "max-h-80 w-[--radix-dropdown-menu-trigger-width] overflow-y-auto", children: [allChapters.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { className: "text-neutral-grey-50 text-[11px] font-medium tracking-wide", children: "Chapters" }), allChapters.map((c) => {
                                 const isCurrent = c.id === chapter?.id;
                                 const theme = getSectionTheme(c.title);
                                 const Icon = theme.icon;
-                                return (_jsxs(DropdownMenuItem, { onClick: () => !isCurrent && onSelect(c.id), className: cn(isCurrent && "bg-blue-50 font-medium"), children: [c.svgIcon ? (_jsx(SvgIcon, { svg: c.svgIcon, size: 14, className: cn("mr-1.5 shrink-0", theme.color) })) : (_jsx(Icon, { className: cn("mr-1.5 h-3.5 w-3.5 shrink-0", theme.color), strokeWidth: 1.75 })), _jsx("span", { className: "truncate", children: c.title })] }, c.id));
-                            }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuLabel, { className: "text-[11px] font-semibold tracking-wide text-gray-400 uppercase", children: ["In ", chapter.title] })] })), chapterOptions.map(({ section, depth }) => {
+                                return (_jsxs(DropdownMenuItem, { onClick: () => !isCurrent && onSelect(c.id), className: cn(isCurrent && "bg-feedback-blue-light font-medium"), children: [c.svgIcon ? (_jsx(SvgIcon, { svg: c.svgIcon, size: 14, className: cn("mr-1.5 shrink-0", theme.color) })) : (_jsx(Icon, { className: cn("mr-1.5 h-3.5 w-3.5 shrink-0", theme.color), strokeWidth: 1.75 })), _jsx("span", { className: "truncate", children: c.title })] }, c.id));
+                            }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuLabel, { className: "text-neutral-grey-50 text-[11px] font-medium tracking-wide", children: ["In ", chapter.title] })] })), chapterOptions.map(({ section, depth }) => {
                         const isActive = section.id === selectedSectionId;
                         const navigable = isDirectlyNavigableSection(section);
-                        return (_jsx(DropdownMenuItem, { disabled: !navigable, onClick: () => navigable && onSelect(section.id), className: cn(isActive && "bg-blue-50 font-medium", !navigable && "pointer-events-none opacity-60"), style: { paddingLeft: `${8 + depth * 16}px` }, children: _jsx("span", { className: "truncate", children: section.title || "Untitled" }) }, section.id));
+                        return (_jsx(DropdownMenuItem, { disabled: !navigable, onClick: () => navigable && onSelect(section.id), className: cn(isActive && "bg-feedback-blue-light font-medium", !navigable && "pointer-events-none opacity-60"), style: { paddingLeft: `${8 + depth * 16}px` }, children: _jsx("span", { className: "truncate", children: section.title || "Untitled" }) }, section.id));
                     })] })] }));
 }
 function flattenSections(sections) {
@@ -675,8 +1437,10 @@ function flattenNavigableSections(sections) {
     return flattened;
 }
 const MANUAL_SECTION_TEMPLATE_ID = "c5f1e8a2-9b50-4fe2-9b6d-3db00c3b3b8a";
+const MANUAL_SEARCH_DEBOUNCE_MS = 600;
 export function ManualBrowser({ onClose }) {
     const editContext = useEditContext();
+    const editContextRef = useRef(editContext);
     const [toc, setToc] = useState([]);
     const selectedSectionId = editContext?.selectedHelpSectionId ?? null;
     const [currentSection, setCurrentSection] = useState(null);
@@ -739,6 +1503,7 @@ export function ManualBrowser({ onClose }) {
         }
         return map;
     }, [toc]);
+    const manualSectionsByIdRef = useRef(manualSectionsById);
     const backTargetSectionId = manualBackHistory.length > 0
         ? manualBackHistory[manualBackHistory.length - 1]
         : null;
@@ -751,6 +1516,8 @@ export function ManualBrowser({ onClose }) {
         ? `Back to ${backTargetSection.title}`
         : "Back to contents";
     const backButtonText = backTargetSectionId === null ? "Contents" : "Back";
+    editContextRef.current = editContext;
+    manualSectionsByIdRef.current = manualSectionsById;
     // Keep selectedSectionId ref in sync
     useEffect(() => {
         selectedSectionIdRef.current = selectedSectionId;
@@ -871,17 +1638,23 @@ export function ManualBrowser({ onClose }) {
     useEffect(() => {
         let cancelled = false;
         const trimmedQuery = searchQuery.trim();
-        if (!trimmedQuery || !editContext) {
+        if (!trimmedQuery || !editContextRef.current) {
             setSearching(false);
             setSearchResults([]);
             return;
         }
         const timeoutId = window.setTimeout(async () => {
+            const latestEditContext = editContextRef.current;
+            if (!latestEditContext) {
+                setSearching(false);
+                setSearchResults([]);
+                return;
+            }
             setSearching(true);
             try {
                 const result = await executeSearch({
                     query: `${trimmedQuery}|template:${MANUAL_SECTION_TEMPLATE_ID}`,
-                    editContext,
+                    editContext: latestEditContext,
                     maxResults: 20,
                     index: "master",
                     skipValidation: true,
@@ -890,8 +1663,9 @@ export function ManualBrowser({ onClose }) {
                     return;
                 if (result.type === "success") {
                     const items = result.data || [];
+                    const latestManualSectionsById = manualSectionsByIdRef.current;
                     const mapped = items
-                        .map((item) => manualSectionsById.get(String(item.id || "").toLowerCase()))
+                        .map((item) => latestManualSectionsById.get(String(item.id || "").toLowerCase()))
                         .filter((section) => !!section);
                     const unique = Array.from(new Map(mapped.map((section) => [section.id, section])).values());
                     setSearchResults(unique);
@@ -912,12 +1686,12 @@ export function ManualBrowser({ onClose }) {
                     setSearching(false);
                 }
             }
-        }, 300);
+        }, MANUAL_SEARCH_DEBOUNCE_MS);
         return () => {
             cancelled = true;
             window.clearTimeout(timeoutId);
         };
-    }, [searchQuery, editContext, manualSectionsById]);
+    }, [searchQuery]);
     // Listen for websocket messages to auto-refresh when manual items change
     // Use ref for selectedSectionId to avoid stale closures and only re-register when selection actually changes
     useEffect(() => {
@@ -989,15 +1763,15 @@ export function ManualBrowser({ onClose }) {
         editContext.setSelectedHelpSectionId(normalizeHistorySectionId(previousSectionId));
     }, [editContext, normalizeHistorySectionId, selectedSectionId]);
     if (loadingToc) {
-        return (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) }));
+        return (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "text-neutral-grey-50 h-5 w-5 animate-spin" }) }));
     }
     if (error) {
-        return (_jsx("div", { className: "px-4 py-8 text-center text-sm text-red-500", children: error }));
+        return (_jsx("div", { className: "text-feedback-red px-4 py-8 text-center text-sm", children: error }));
     }
     if (toc.length === 0) {
-        return (_jsxs("div", { className: "px-4 py-8 text-center text-sm text-gray-500", children: [_jsx(Book, { className: "mx-auto mb-2 h-8 w-8 text-gray-300" }), _jsx("p", { children: "No manual content available yet." })] }));
+        return (_jsxs("div", { className: "text-neutral-grey-50 px-4 py-8 text-center text-sm", children: [_jsx(Book, { className: "text-neutral-grey-50 mx-auto mb-2 h-8 w-8" }), _jsx("p", { children: "No manual content available yet." })] }));
     }
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-gray-200/60 bg-linear-to-b from-gray-50 to-white px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-50", children: _jsx(Book, { className: "h-4 w-4 text-blue-600", strokeWidth: 1.75 }) }), _jsx("h2", { className: "text-base font-semibold text-gray-900", children: "User Manual" })] }), onClose && (_jsx("button", { onClick: onClose, className: "shrink-0 rounded p-1 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-600", "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 1.5 }) }))] }), _jsx("div", { className: "mt-2", children: _jsx(FilterInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Search manual pages...", size: "xs", loading: searching }) }), selectedSectionId && (_jsx("div", { className: "mt-2", children: _jsx(InChapterDropdown, { toc: toc, currentTocPath: currentTocPath, selectedSectionId: selectedSectionId, onSelect: handleSelectSection }) })), searchQuery.trim().length > 0 && (_jsx("div", { className: "mt-2 max-h-52 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-sm", children: searching ? (_jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-xs text-gray-500", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Searching manual..."] })) : searchResults.length > 0 ? (searchResults.map((section) => (_jsxs("button", { type: "button", onClick: () => handleSelectSearchResult(section.id), className: "group block w-full border-b border-gray-50 px-3 py-2.5 text-left transition-colors last:border-b-0 hover:bg-blue-50/50", children: [_jsx("span", { className: "block text-sm font-medium text-gray-900 transition-colors group-hover:text-blue-700", children: section.title || "Untitled" }), section.summary && (_jsx("span", { className: "mt-0.5 line-clamp-2 block text-xs leading-relaxed text-gray-500", children: section.summary }))] }, section.id)))) : (_jsx("div", { className: "px-3 py-3 text-center text-xs text-gray-500", children: "No manual pages matched your search." })) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 select-text", children: loadingSection ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) })) : !selectedSectionId ? (_jsx("div", { children: renderTocTree(toc, handleSelectSection, handleToggleTocSection, collapsedTocSectionIds) })) : currentSection ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsxs("button", { type: "button", onClick: handleGoBack, className: "inline-flex shrink-0 items-center gap-1 rounded px-2 py-1 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900", "aria-label": backButtonLabel, title: backButtonLabel, children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: backButtonText })] }), editContext?.user?.isAdministrator && editContext?.loadItem && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: async (e) => {
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "border-border-default/60 from-neutral-grey-5 shrink-0 border-b bg-linear-to-b to-white px-4 py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex min-w-0 items-center gap-3", children: _jsxs("div", { className: "flex min-w-0 flex-col items-start leading-tight", children: [_jsx("h2", { className: "text-neutral-grey-100 truncate text-sm leading-tight font-medium", children: "User Manual" }), _jsx("p", { className: "text-neutral-grey-50 truncate text-[11px] leading-tight", children: "Browse help articles, tutorials, and guides" })] }) }), onClose && _jsx(CloseButton, { onClick: onClose, label: "Close" })] }), _jsx("div", { className: "mt-3", children: _jsx(SearchInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Search manual pages...", size: "xs", loading: searching }) }), selectedSectionId && (_jsx("div", { className: "mt-2", children: _jsx(InChapterDropdown, { toc: toc, currentTocPath: currentTocPath, selectedSectionId: selectedSectionId, onSelect: handleSelectSection }) })), searchQuery.trim().length > 0 && (_jsx("div", { className: "border-border-default mt-2 max-h-52 overflow-y-auto rounded-lg border bg-white shadow-sm", children: searching ? (_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 px-3 py-3 text-xs", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Searching manual..."] })) : searchResults.length > 0 ? (searchResults.map((section) => (_jsxs("button", { type: "button", onClick: () => handleSelectSearchResult(section.id), className: "group border-border-default hover:bg-feedback-blue-light/50 block w-full border-b px-3 py-2.5 text-left transition-colors last:border-b-0", children: [_jsx("span", { className: "text-neutral-grey-100 group-hover:text-feedback-blue block text-sm font-medium transition-colors", children: section.title || "Untitled" }), section.summary && (_jsx("span", { className: "text-neutral-grey-50 mt-0.5 line-clamp-2 block text-xs leading-relaxed", children: section.summary }))] }, section.id)))) : (_jsx("div", { className: "text-neutral-grey-50 px-3 py-3 text-center text-xs", children: "No manual pages matched your search." })) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 select-text", children: loadingSection ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "text-neutral-grey-50 h-5 w-5 animate-spin" }) })) : !selectedSectionId ? (_jsx("div", { children: renderTocTree(toc, handleSelectSection, handleToggleTocSection, collapsedTocSectionIds) })) : currentSection ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsxs("button", { type: "button", onClick: handleGoBack, className: "badge-pad text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 inline-flex shrink-0 items-center gap-1 rounded text-sm transition-colors", "aria-label": backButtonLabel, title: backButtonLabel, children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: backButtonText })] }), editContext?.user?.isAdministrator && editContext?.loadItem && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: async (e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     if (!editContext?.loadItem) {
@@ -1019,20 +1793,20 @@ export function ManualBrowser({ onClose }) {
                                                     catch (error) {
                                                         console.error("Failed to load manual section:", error);
                                                     }
-                                                }, className: "shrink-0 rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700", "aria-label": "Edit item", title: "Edit item", children: _jsx(Edit, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { children: "Edit item" })] }))] }), _jsxs("h2", { className: "my-2 flex items-center gap-2 text-xl font-bold text-gray-900", children: [currentSection.svgIcon && (_jsx(SvgIcon, { svg: currentSection.svgIcon, size: 24, className: "shrink-0 text-gray-500" })), currentSection.title] }), currentSection.summary &&
+                                                }, className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 shrink-0 rounded p-1.5 transition-colors", "aria-label": "Edit item", title: "Edit item", children: _jsx(Edit, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { children: "Edit item" })] }))] }), _jsxs("h2", { className: "text-neutral-grey-100 my-2 flex items-center gap-2 text-xl font-bold", children: [currentSection.svgIcon && (_jsx(SvgIcon, { svg: currentSection.svgIcon, size: 24, className: "text-neutral-grey-50 shrink-0" })), currentSection.title] }), currentSection.summary &&
                             (() => {
                                 const theme = parentTocSection
                                     ? getSectionTheme(parentTocSection.title)
                                     : getSectionTheme(currentSection.title);
-                                return (_jsx("p", { className: cn("my-4 mb-8 border-l-2 pl-3 text-sm text-gray-500 italic", theme.border), children: currentSection.summary }));
+                                return (_jsx("p", { className: cn("text-neutral-grey-50 my-4 mb-8 border-l-2 pl-3 text-sm italic", theme.border), children: currentSection.summary }));
                             })(), _jsx("div", { className: "prose prose-sm max-w-none select-text", children: renderMarkdownWithSelectors(currentSection.content || "", parseUiSelectors(currentSection.uiSelectors), manualLinkTargets, handleSelectSection) }), currentSection.subsections &&
-                            currentSection.subsections.length > 0 && (_jsxs("div", { className: "mt-8 border-t border-gray-100 pt-4", children: [_jsx("h3", { className: "mb-3 text-[11px] font-bold tracking-widest text-gray-400 uppercase", children: "In this section" }), _jsx("div", { className: "space-y-0.5", children: currentSection.subsections.map((subsection) => {
+                            currentSection.subsections.length > 0 && (_jsxs("div", { className: "border-border-default mt-8 border-t pt-4", children: [_jsx("h3", { className: "text-neutral-grey-50 mb-3 text-[11px] font-bold tracking-widest", children: "In this section" }), _jsx("div", { className: "space-y-0.5", children: currentSection.subsections.map((subsection) => {
                                         const theme = getSectionTheme(currentSection.title);
-                                        return (_jsxs("button", { onClick: () => handleSelectSection(subsection.id), className: "group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-gray-600 transition-all hover:bg-gray-50 hover:text-gray-900", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full transition-transform group-hover:scale-125", theme.accent, "opacity-50 group-hover:opacity-80") }), _jsx("span", { className: "flex-1 truncate font-medium", children: subsection.title }), _jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" })] }, subsection.id));
-                                    }) })] }))] })) : (_jsx("div", { className: "py-8 text-center text-sm text-gray-500", children: "Select a section to view its content" })) }), selectedSectionId &&
+                                        return (_jsxs("button", { onClick: () => handleSelectSection(subsection.id), className: "group text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-all", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full transition-transform group-hover:scale-125", theme.accent, "opacity-50 group-hover:opacity-80") }), _jsx("span", { className: "flex-1 truncate font-medium", children: subsection.title }), _jsx(ChevronRight, { className: "text-neutral-grey-50 group-hover:text-neutral-grey-50 h-3.5 w-3.5 shrink-0 transition-colors" })] }, subsection.id));
+                                    }) })] }))] })) : (_jsx("div", { className: "text-neutral-grey-50 py-8 text-center text-sm", children: "Select a section to view its content" })) }), selectedSectionId &&
                 currentSection &&
-                (chapterNavigation.previous || chapterNavigation.next) && (_jsx("div", { className: "shrink-0 border-t border-gray-200/60 bg-white px-4 py-3", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [chapterNavigation.previous ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.previous &&
-                                handleSelectSection(chapterNavigation.previous.id), className: "group rounded-lg border border-gray-200 px-3 py-2 text-left transition-all hover:border-blue-200 hover:bg-blue-50/30", children: [_jsxs("span", { className: "mb-0.5 inline-flex items-center gap-1 text-xs font-medium text-gray-400 transition-colors group-hover:text-blue-500", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), "Previous"] }), _jsx("span", { className: "block truncate text-sm font-medium text-gray-700 transition-colors group-hover:text-gray-900", children: chapterNavigation.previous.title })] })) : (_jsx("div", {})), chapterNavigation.next ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.next &&
-                                handleSelectSection(chapterNavigation.next.id), className: "group rounded-lg border border-gray-200 px-3 py-2 text-right transition-all hover:border-blue-200 hover:bg-blue-50/30", children: [_jsxs("span", { className: "mb-0.5 inline-flex items-center justify-end gap-1 text-xs font-medium text-gray-400 transition-colors group-hover:text-blue-500", children: ["Next", _jsx(ArrowRight, { className: "h-3 w-3" })] }), _jsx("span", { className: "block truncate text-sm font-medium text-gray-700 transition-colors group-hover:text-gray-900", children: chapterNavigation.next.title })] })) : (_jsx("div", {}))] }) }))] }));
+                (chapterNavigation.previous || chapterNavigation.next) && (_jsx("div", { className: "border-border-default/60 shrink-0 border-t bg-white px-4 py-3", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [chapterNavigation.previous ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.previous &&
+                                handleSelectSection(chapterNavigation.previous.id), className: "group border-border-default hover:border-feedback-blue hover:bg-feedback-blue-light/30 rounded-lg border px-3 py-2 text-left transition-all", children: [_jsxs("span", { className: "text-neutral-grey-50 group-hover:text-feedback-blue mb-0.5 inline-flex items-center gap-1 text-xs font-medium transition-colors", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), "Previous"] }), _jsx("span", { className: "text-neutral-grey-100 group-hover:text-neutral-grey-100 block truncate text-sm font-medium transition-colors", children: chapterNavigation.previous.title })] })) : (_jsx("div", {})), chapterNavigation.next ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.next &&
+                                handleSelectSection(chapterNavigation.next.id), className: "group border-border-default hover:border-feedback-blue hover:bg-feedback-blue-light/30 rounded-lg border px-3 py-2 text-right transition-all", children: [_jsxs("span", { className: "text-neutral-grey-50 group-hover:text-feedback-blue mb-0.5 inline-flex items-center justify-end gap-1 text-xs font-medium transition-colors", children: ["Next", _jsx(ArrowRight, { className: "h-3 w-3" })] }), _jsx("span", { className: "text-neutral-grey-100 group-hover:text-neutral-grey-100 block truncate text-sm font-medium transition-colors", children: chapterNavigation.next.title })] })) : (_jsx("div", {}))] }) }))] }));
 }
 //# sourceMappingURL=ManualBrowser.js.map