@parhelia/core 0.1.12903 → 0.1.12905

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

@@ -1,73 +1,26 @@
 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, } from "lucide-react";
-import { CloseButton } from "../../../components/ui/close-button";
-import { loadManualToc, loadManualSection, invalidateManualSectionCache, } from "../../services/manualService";
+import { Book, BookOpen, Loader2, Edit, ArrowLeft, ArrowRight, ChevronDown, ChevronRight, LocateFixed, Rocket, FileEdit, X, } from "lucide-react";
+import { loadManualToc, loadManualSection, invalidateManualSectionCache, } from "../../services/aiService";
 import { executeSearch } from "../../services/searchService";
-import { SearchInput } from "../../../components/SearchInput";
+import { FilterInput } from "../../../components/FilterInput";
 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: "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 })),
+    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 })),
 };
 // Parse the uiSelectors field
 // Formats:
@@ -98,15 +51,7 @@ 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;
@@ -121,14 +66,6 @@ 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;
                 }
@@ -142,16 +79,14 @@ export function parseUiSelectors(uiSelectors) {
                 : undefined;
             const parsed = {
                 name,
-                selector: isSidebarOnly ? "" : selectorOverride || `@${name}`,
+                selector: isSidebarOnly ? "" : `@${name}`, // Empty selector for sidebar-only
                 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);
@@ -163,8 +98,7 @@ function parseSelectorToken(selectorToken) {
     if (!selectorToken.startsWith("@"))
         return { selector: selectorToken };
     const raw = selectorToken.slice(1);
-    // Preserve iframe: selectors as unavailable selectors. Page DOM inspection now
-    // goes through the editing bridge instead of same-origin iframe probing.
+    // Preserve iframe: selectors (handled specially by expandSelector/highlightElement)
     if (raw.startsWith("iframe:"))
         return { selector: selectorToken };
     // Check for sidebar-only syntax: @sidebar-id-sidebar (e.g., @reviews-sidebar)
@@ -200,6 +134,7 @@ 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"]
@@ -208,49 +143,14 @@ export function expandSelector(selectorShorthand) {
 function getElementsForSelector(selector) {
     const cssSelector = expandSelector(selector);
     if (cssSelector.startsWith("iframe:")) {
-        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;
+        const iframeSelector = cssSelector.substring(7);
+        const iframe = document.querySelector("iframe.page-iframe");
+        if (!iframe?.contentDocument) {
+            return [];
         }
+        return Array.from(iframe.contentDocument.querySelectorAll(iframeSelector));
     }
-    // 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);
+    return Array.from(document.querySelectorAll(cssSelector));
 }
 function shouldSkipHighlightScroll(element) {
     const rect = element.getBoundingClientRect();
@@ -303,12 +203,9 @@ async function scrollElementForHighlight(element) {
 // Highlight an element temporarily
 export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_MS) {
     const cssSelector = expandSelector(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);
+    const elements = getElementsForSelector(selector);
     if (elements.length === 0)
         return;
-    const overlayLifetimes = [];
     if (cssSelector.startsWith("iframe:")) {
         const iframe = document.querySelector("iframe.page-iframe");
         const iframeRect = iframe?.getBoundingClientRect();
@@ -317,9 +214,8 @@ export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_M
         }
         elements.forEach((element) => {
             const elementRect = element.getBoundingClientRect();
-            overlayLifetimes.push(showHighlightOverlay(elementRect.left + (iframeRect?.left ?? 0), elementRect.top + (iframeRect?.top ?? 0), elementRect.width, elementRect.height, duration));
+            showHighlightOverlay(elementRect.left + (iframeRect?.left ?? 0), elementRect.top + (iframeRect?.top ?? 0), elementRect.width, elementRect.height, duration);
         });
-        await Promise.all(overlayLifetimes);
         return;
     }
     if (elements[0]) {
@@ -327,52 +223,14 @@ export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_M
     }
     elements.forEach((element) => {
         const rect = element.getBoundingClientRect();
-        overlayLifetimes.push(showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration));
+        showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration);
     });
-    await Promise.all(overlayLifetimes);
 }
-// Check if an element is currently present in the DOM (regardless of visibility)
-function isElementPresent(selector) {
+// Check if an element is currently available in the DOM
+function isElementAvailable(selector) {
     return getElementsForSelector(selector).length > 0;
 }
-// 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).
+// Create a temporary highlight overlay
 function showHighlightOverlay(x, y, width, height, duration) {
     const padding = 4;
     const viewportWidth = window.innerWidth;
@@ -389,24 +247,22 @@ 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 Promise.resolve();
+        return;
     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 var(--color-component-default);
+    border: 2px solid #3b82f6;
     border-radius: 4px;
-    background: color-mix(in srgb, var(--color-component-default) 10%, transparent);
+    background: rgba(59, 130, 246, 0.1);
     pointer-events: none;
     z-index: 999999;
-    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);
+    animation: pulse-highlight 1s ease-in-out infinite;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
   `;
     // Add animation keyframes if not already added
     if (!document.querySelector("#selector-highlight-style")) {
@@ -414,748 +270,130 @@ 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 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; }
+        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); }
       }
     `;
         document.head.appendChild(style);
     }
     document.body.appendChild(overlay);
-    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"));
+    setTimeout(() => {
+        overlay.remove();
+    }, duration);
 }
 // Button component for "Show me" functionality with availability detection
 function SelectorButton({ selectorDef, keyProp, }) {
     const editContext = useEditContext();
     const manualActions = editContext?.configuration.editor.manualActions;
-    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 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 hasBeforeAction = Boolean(selectorDef.beforeAction &&
         manualActions?.[selectorDef.beforeAction] &&
         editContext);
-    // 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
-            }
-        }
-        // 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.
+    const isActionable = isSidebarOnly
+        ? canAutoOpenSidebar || hasBeforeAction
+        : isAvailable || canAutoOpenSidebar || hasBeforeAction;
+    // Monitor for element availability changes (skip for sidebar-only selectors)
     useEffect(() => {
-        const check = () => {
-            setIsTargetPresent(targetSelector ? isElementPresent(targetSelector) : false);
-            setIsTargetVisible(targetSelector ? isElementVisibleBySelector(targetSelector) : false);
-            setIsAnchorPresent(anchorSelector ? isElementPresent(anchorSelector) : false);
+        // Sidebar-only selectors are always "available" if openSidebar exists
+        if (isSidebarOnly) {
+            setIsAvailable(true);
+            return;
+        }
+        // Initial check
+        const initialAvailable = isElementAvailable(availabilitySelector);
+        setIsAvailable(initialAvailable);
+        // Set up MutationObserver to watch for DOM changes
+        const checkAvailability = () => {
+            const available = isElementAvailable(availabilitySelector);
+            setIsAvailable(available);
         };
-        check();
-        const attributeFilter = [
-            "data-testid",
-            "class",
-            "id",
-            "style",
-            "hidden",
-            "aria-hidden",
-        ];
-        const observer = new MutationObserver(check);
+        // Watch the main document for changes
+        const observer = new MutationObserver(checkAvailability);
         observer.observe(document.body, {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter,
+            attributeFilter: ["data-testid", "class", "id"],
         });
+        // 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(check);
+            iframeObserver = new MutationObserver(checkAvailability);
             iframeObserver.observe(iframe.contentDocument.body, {
                 childList: true,
                 subtree: true,
                 attributes: true,
-                attributeFilter,
+                attributeFilter: ["data-testid", "class", "id"],
             });
         }
-        const intervalId = setInterval(check, 1000);
+        // Also poll periodically as a fallback (iframe might load after mount)
+        const intervalId = setInterval(checkAvailability, 1000);
         return () => {
             observer.disconnect();
             iframeObserver?.disconnect();
             clearInterval(intervalId);
         };
-    }, [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)
+    }, [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)
                             return;
-                        // 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) {
+                        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]) {
                                 return;
                             }
-                            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);
+                            const action = manualActions[actionName];
+                            const actionProps = {
+                                editContext,
+                                selectorDef,
+                                duration: HIGHLIGHT_DURATION_MS,
+                                runId,
+                                elements,
+                                resolveElements,
                             };
-                            // 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();
-                                        }
-                                    });
-                                }
+                            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));
                             }
                         }
-                        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();
+                        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);
                         }
-                    }, 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 })] }));
+                    }, 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 })] }));
 }
 // Render markdown content with clickable selectors
 // Supports both {{selectorName}} syntax (looks up in uiSelectors) and legacy @selector syntax
@@ -1182,10 +420,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: "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}`));
+            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}`));
         }
         else {
-            parts.push(_jsx("span", { className: "text-component-shared", title: `Manual section not found: ${linkTitle}`, children: fullMatch }, `manual-link-missing-${match.index}`));
+            parts.push(_jsx("span", { className: "text-orange-600", title: `Manual section not found: ${linkTitle}`, children: fullMatch }, `manual-link-missing-${match.index}`));
         }
         lastIndex = match.index + fullMatch.length;
     }
@@ -1198,10 +436,10 @@ function renderLineWithSelectors(text, uiSelectors, manualLinkTargets, onManualL
 function renderInlineSelectorsAndFormatting(text, uiSelectors) {
     const parts = [];
     let lastIndex = 0;
-    // 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).
+    // 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)
     const regex = /(\()?(\{\{([\w\-]+)\}\})|(\()?(@(?:iframe:[\w\-\.#\[\]=]*[\w\-#\[\]=]|[\w\-\.#\[\]=]*[\w\-#\[\]=]))|(\*\*(.+?)\*\*)/g;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -1232,7 +470,7 @@ function renderInlineSelectorsAndFormatting(text, uiSelectors) {
             }
             else {
                 // Unknown selector, render as text (keep parens if present)
-                parts.push(_jsxs("span", { className: "text-component-shared", title: "Unknown selector", children: [hasOpenParen ? "(" : "", selectorName, text[match.index + match[0].length] === ")" ? ")" : ""] }, match.index));
+                parts.push(_jsxs("span", { className: "text-orange-600", title: "Unknown selector", children: [hasOpenParen ? "(" : "", selectorName, text[match.index + match[0].length] === ")" ? ")" : ""] }, match.index));
             }
         }
         else if (match[5]) {
@@ -1316,39 +554,39 @@ function findNearestNavigableAncestor(path) {
 const SECTION_THEMES = {
     "getting started": {
         icon: Rocket,
-        color: "text-feedback-green",
-        bg: "bg-feedback-green-light",
-        border: "border-feedback-green",
-        accent: "bg-feedback-green",
+        color: "text-emerald-600",
+        bg: "bg-emerald-50",
+        border: "border-emerald-100",
+        accent: "bg-emerald-500",
     },
     "page editing": {
         icon: FileEdit,
-        color: "text-feedback-blue",
-        bg: "bg-feedback-blue-light",
-        border: "border-feedback-blue",
-        accent: "bg-feedback-blue",
+        color: "text-blue-600",
+        bg: "bg-blue-50",
+        border: "border-blue-100",
+        accent: "bg-blue-500",
     },
     "managing content": {
         icon: BookOpen,
-        color: "text-feedback-orange",
-        bg: "bg-feedback-orange-light",
-        border: "border-feedback-orange",
-        accent: "bg-feedback-orange",
+        color: "text-amber-600",
+        bg: "bg-amber-50",
+        border: "border-amber-100",
+        accent: "bg-amber-500",
     },
     "ai assistant": {
         icon: BookOpen,
-        color: "text-highlight-100",
-        bg: "bg-highlight-10",
-        border: "border-highlight-100",
-        accent: "bg-highlight-100",
+        color: "text-violet-600",
+        bg: "bg-violet-50",
+        border: "border-violet-100",
+        accent: "bg-violet-500",
     },
 };
 const DEFAULT_THEME = {
     icon: BookOpen,
-    color: "text-highlight-100",
-    bg: "bg-highlight-10",
-    border: "border-highlight-100",
-    accent: "bg-highlight-100",
+    color: "text-violet-600",
+    bg: "bg-violet-50",
+    border: "border-violet-100",
+    accent: "bg-violet-500",
 };
 function getSectionTheme(title) {
     if (!title)
@@ -1359,7 +597,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", "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))) }))] }))] }));
+    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))) }))] }))] }));
 }
 function renderTocTree(sections, onSelect, onToggleCollapse, collapsedSectionIds, depth = 0) {
     if (depth === 0) {
@@ -1368,10 +606,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 && "border-border-default ml-3 border-l pl-2"), children: sections.map((section) => {
+    return (_jsx("div", { className: cn(depth > 0 && "ml-3 border-l border-gray-100 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 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
+            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
                                     ? `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 &&
@@ -1403,15 +641,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: "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) => {
+    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) => {
                                 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-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 }) => {
+                                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 }) => {
                         const isActive = section.id === selectedSectionId;
                         const navigable = isDirectlyNavigableSection(section);
-                        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));
+                        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));
                     })] })] }));
 }
 function flattenSections(sections) {
@@ -1437,10 +675,8 @@ 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);
@@ -1503,7 +739,6 @@ export function ManualBrowser({ onClose }) {
         }
         return map;
     }, [toc]);
-    const manualSectionsByIdRef = useRef(manualSectionsById);
     const backTargetSectionId = manualBackHistory.length > 0
         ? manualBackHistory[manualBackHistory.length - 1]
         : null;
@@ -1516,8 +751,6 @@ 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;
@@ -1638,23 +871,17 @@ export function ManualBrowser({ onClose }) {
     useEffect(() => {
         let cancelled = false;
         const trimmedQuery = searchQuery.trim();
-        if (!trimmedQuery || !editContextRef.current) {
+        if (!trimmedQuery || !editContext) {
             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: latestEditContext,
+                    editContext,
                     maxResults: 20,
                     index: "master",
                     skipValidation: true,
@@ -1663,9 +890,8 @@ export function ManualBrowser({ onClose }) {
                     return;
                 if (result.type === "success") {
                     const items = result.data || [];
-                    const latestManualSectionsById = manualSectionsByIdRef.current;
                     const mapped = items
-                        .map((item) => latestManualSectionsById.get(String(item.id || "").toLowerCase()))
+                        .map((item) => manualSectionsById.get(String(item.id || "").toLowerCase()))
                         .filter((section) => !!section);
                     const unique = Array.from(new Map(mapped.map((section) => [section.id, section])).values());
                     setSearchResults(unique);
@@ -1686,12 +912,12 @@ export function ManualBrowser({ onClose }) {
                     setSearching(false);
                 }
             }
-        }, MANUAL_SEARCH_DEBOUNCE_MS);
+        }, 300);
         return () => {
             cancelled = true;
             window.clearTimeout(timeoutId);
         };
-    }, [searchQuery]);
+    }, [searchQuery, editContext, manualSectionsById]);
     // 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(() => {
@@ -1763,15 +989,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: "text-neutral-grey-50 h-5 w-5 animate-spin" }) }));
+        return (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) }));
     }
     if (error) {
-        return (_jsx("div", { className: "text-feedback-red px-4 py-8 text-center text-sm", children: error }));
+        return (_jsx("div", { className: "px-4 py-8 text-center text-sm text-red-500", children: error }));
     }
     if (toc.length === 0) {
-        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: "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: "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) => {
+    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) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     if (!editContext?.loadItem) {
@@ -1793,20 +1019,20 @@ export function ManualBrowser({ onClose }) {
                                                     catch (error) {
                                                         console.error("Failed to load manual section:", error);
                                                     }
-                                                }, 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 &&
+                                                }, 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 &&
                             (() => {
                                 const theme = parentTocSection
                                     ? getSectionTheme(parentTocSection.title)
                                     : getSectionTheme(currentSection.title);
-                                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 }));
+                                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 }));
                             })(), _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: "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) => {
+                            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) => {
                                         const theme = getSectionTheme(currentSection.title);
-                                        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 &&
+                                        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 &&
                 currentSection &&
-                (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", {}))] }) }))] }));
+                (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", {}))] }) }))] }));
 }
 //# sourceMappingURL=ManualBrowser.js.map