@parhelia/core 0.1.12534 → 0.1.12555

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

@@ -1,26 +1,11 @@
 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, ChevronRight, LocateFixed, Rocket, FileEdit, X, } from "lucide-react";
+import { useState, useEffect, useCallback, useMemo, useRef, } from "react";
+import { Book, Loader2, Edit, ArrowLeft } from "lucide-react";
 import { loadManualToc, loadManualSection, invalidateManualSectionCache, } from "../../services/aiService";
-import { executeSearch } from "../../services/searchService";
-import { FilterInput } from "../../../components/FilterInput";
-import { MarkdownDisplay, } from "../../../components/MarkdownDisplay";
+import { Select } from "../../../components/ui/select";
 import { Tooltip, TooltipTrigger, TooltipContent, } from "../../../components/ui/tooltip";
 import { useEditContext } from "../../client/editContext";
 import { cn } from "../../../lib/utils";
-import { sanitizeSvg } from "../../../lib/sanitize";
-/** 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 manualMarkdownComponents = {
-    h1: ({ children }) => (_jsx("h1", { className: "mt-4 mb-0 text-xl font-bold text-gray-900", children: children })),
-    h2: ({ children }) => (_jsx("h2", { className: "mt-3 mb-0 text-lg font-semibold text-gray-800", children: children })),
-    h3: ({ children }) => (_jsx("h3", { className: "mt-2 mb-0 text-base font-semibold text-gray-700", children: children })),
-    h4: ({ children }) => (_jsx("h4", { className: "mt-2 mb-0 text-sm font-semibold text-gray-700", children: children })),
-};
 // Parse the uiSelectors field
 // Formats:
 // - @selector-name: Description | Not found message
@@ -29,10 +14,7 @@ export function parseUiSelectors(uiSelectors) {
     const map = new Map();
     if (!uiSelectors)
         return map;
-    const lines = uiSelectors
-        .split(/\r?\n/)
-        .map((line) => line.trim())
-        .filter(Boolean);
+    const lines = uiSelectors.split("\n").filter((line) => line.trim());
     for (const line of lines) {
         // Format: @selector-name: ...
         const match = line.match(/^@([\w\-]+):\s*(.+)$/);
@@ -41,34 +23,10 @@ export function parseUiSelectors(uiSelectors) {
             const rest = match[2];
             if (!name || !rest)
                 continue;
-            const segments = rest
-                .split("|")
-                .map((segment) => segment.trim())
-                .filter(Boolean);
-            const description = segments.shift() ?? "";
-            let notFoundMessage;
-            let beforeAction;
-            let afterAction;
-            let availabilitySelector;
-            for (const segment of segments) {
-                if (segment.startsWith("beforeAction=")) {
-                    beforeAction = segment.substring("beforeAction=".length).trim();
-                    continue;
-                }
-                if (segment.startsWith("afterAction=")) {
-                    afterAction = segment.substring("afterAction=".length).trim();
-                    continue;
-                }
-                if (segment.startsWith("availabilitySelector=")) {
-                    availabilitySelector = segment
-                        .substring("availabilitySelector=".length)
-                        .trim();
-                    continue;
-                }
-                if (!notFoundMessage) {
-                    notFoundMessage = segment;
-                }
-            }
+            // Split by | for optional not-found message
+            const pipeIndex = rest.indexOf("|");
+            const description = pipeIndex >= 0 ? rest.substring(0, pipeIndex).trim() : rest.trim();
+            const notFoundMessage = pipeIndex >= 0 ? rest.substring(pipeIndex + 1).trim() : undefined;
             // Check if this is a sidebar-only selector (e.g., @reviews-sidebar)
             // These end with -sidebar
             const isSidebarOnly = name.endsWith("-sidebar");
@@ -79,13 +37,10 @@ export function parseUiSelectors(uiSelectors) {
             const parsed = {
                 name,
                 selector: isSidebarOnly ? "" : `@${name}`, // Empty selector for sidebar-only
-                availabilitySelector,
                 description,
                 notFoundMessage: notFoundMessage || undefined,
                 location: isSidebarOnly ? sidebarId : undefined, // Use actual sidebar ID (without -sidebar suffix) for sidebar-only
                 isSidebarOnly,
-                beforeAction,
-                afterAction,
             };
             // Primary key remains the selector name
             map.set(name, parsed);
@@ -139,122 +94,59 @@ export function expandSelector(selectorShorthand) {
     // Default: data-testid selector: @name → [data-testid="name"]
     return `[data-testid="${selector}"]`;
 }
-function getElementsForSelector(selector) {
+// Highlight an element temporarily
+export function highlightElement(selector, duration = 2000) {
     const cssSelector = expandSelector(selector);
+    // Handle iframe selectors
     if (cssSelector.startsWith("iframe:")) {
         const iframeSelector = cssSelector.substring(7);
         const iframe = document.querySelector("iframe.page-iframe");
-        if (!iframe?.contentDocument) {
-            return [];
-        }
-        return Array.from(iframe.contentDocument.querySelectorAll(iframeSelector));
-    }
-    return Array.from(document.querySelectorAll(cssSelector));
-}
-function shouldSkipHighlightScroll(element) {
-    const rect = element.getBoundingClientRect();
-    const computedStyle = window.getComputedStyle(element);
-    const viewportPadding = 24;
-    const isFixedLike = computedStyle.position === "fixed" || computedStyle.position === "sticky";
-    const isFullyVisible = rect.top >= viewportPadding &&
-        rect.bottom <= window.innerHeight - viewportPadding &&
-        rect.left >= 0 &&
-        rect.right <= window.innerWidth;
-    const isLargeTarget = rect.height >= window.innerHeight * 0.6;
-    return isFixedLike || isFullyVisible || isLargeTarget;
-}
-function waitForNextFrame() {
-    return new Promise((resolve) => {
-        window.requestAnimationFrame(() => resolve());
-    });
-}
-async function waitForScrollToFinish(element) {
-    let stableFrames = 0;
-    let previousRect = element.getBoundingClientRect();
-    for (let frame = 0; frame < 30; frame++) {
-        await waitForNextFrame();
-        const currentRect = element.getBoundingClientRect();
-        const moved = Math.abs(currentRect.top - previousRect.top) > 0.5 ||
-            Math.abs(currentRect.left - previousRect.left) > 0.5;
-        if (moved) {
-            stableFrames = 0;
-        }
-        else {
-            stableFrames += 1;
-            if (stableFrames >= 2) {
-                return;
+        if (iframe?.contentDocument) {
+            const elements = iframe.contentDocument.querySelectorAll(iframeSelector);
+            if (elements.length > 0) {
+                const iframeRect = iframe.getBoundingClientRect();
+                elements.forEach((element) => {
+                    const elementRect = element.getBoundingClientRect();
+                    showHighlightOverlay(elementRect.left + iframeRect.left, elementRect.top + iframeRect.top, elementRect.width, elementRect.height, duration);
+                });
+                // Scroll the first element into view
+                elements[0]?.scrollIntoView({ behavior: "smooth", block: "center" });
             }
         }
-        previousRect = currentRect;
-    }
-}
-async function scrollElementForHighlight(element) {
-    if (shouldSkipHighlightScroll(element)) {
         return;
     }
-    element.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest",
-    });
-    await waitForScrollToFinish(element);
-}
-// Highlight an element temporarily
-export async function highlightElement(selector, duration = HIGHLIGHT_DURATION_MS) {
-    const cssSelector = expandSelector(selector);
-    const elements = getElementsForSelector(selector);
-    if (elements.length === 0)
-        return;
-    if (cssSelector.startsWith("iframe:")) {
-        const iframe = document.querySelector("iframe.page-iframe");
-        const iframeRect = iframe?.getBoundingClientRect();
-        if (elements[0]) {
-            await scrollElementForHighlight(elements[0]);
-        }
+    // Regular selectors - highlight all matching elements
+    const elements = document.querySelectorAll(cssSelector);
+    if (elements.length > 0) {
         elements.forEach((element) => {
-            const elementRect = element.getBoundingClientRect();
-            showHighlightOverlay(elementRect.left + (iframeRect?.left ?? 0), elementRect.top + (iframeRect?.top ?? 0), elementRect.width, elementRect.height, duration);
+            const rect = element.getBoundingClientRect();
+            showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration);
         });
-        return;
-    }
-    if (elements[0]) {
-        await scrollElementForHighlight(elements[0]);
+        // Scroll the first element into view
+        elements[0]?.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-    elements.forEach((element) => {
-        const rect = element.getBoundingClientRect();
-        showHighlightOverlay(rect.left, rect.top, rect.width, rect.height, duration);
-    });
 }
 // Check if an element is currently available in the DOM
 function isElementAvailable(selector) {
-    return getElementsForSelector(selector).length > 0;
+    const cssSelector = expandSelector(selector);
+    if (cssSelector.startsWith("iframe:")) {
+        const iframeSelector = cssSelector.substring(7);
+        const iframe = document.querySelector("iframe.page-iframe");
+        return !!iframe?.contentDocument?.querySelector(iframeSelector);
+    }
+    return !!document.querySelector(cssSelector);
 }
 // Create a temporary highlight overlay
 function showHighlightOverlay(x, y, width, height, duration) {
     const padding = 4;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const rawLeft = x - padding;
-    const rawTop = y - padding;
-    const rawRight = x + width + padding;
-    const rawBottom = y + height + padding;
-    const left = Math.max(0, Math.min(rawLeft, viewportWidth));
-    const top = Math.max(0, Math.min(rawTop, viewportHeight));
-    const right = Math.max(0, Math.min(rawRight, viewportWidth));
-    const bottom = Math.max(0, Math.min(rawBottom, viewportHeight));
-    const clampedWidth = right - left;
-    const clampedHeight = bottom - top;
-    // Skip if target is fully outside the viewport after clamping.
-    if (clampedWidth <= 0 || clampedHeight <= 0)
-        return;
     const overlay = document.createElement("div");
     overlay.className = "selector-highlight-overlay";
     overlay.style.cssText = `
     position: fixed;
-    left: ${left}px;
-    top: ${top}px;
-    width: ${clampedWidth}px;
-    height: ${clampedHeight}px;
+    left: ${x - padding}px;
+    top: ${y - padding}px;
+    width: ${width + padding * 2}px;
+    height: ${height + padding * 2}px;
     border: 2px solid #3b82f6;
     border-radius: 4px;
     background: rgba(59, 130, 246, 0.1);
@@ -283,8 +175,6 @@ function showHighlightOverlay(x, y, width, height, duration) {
 // Button component for "Show me" functionality with availability detection
 function SelectorButton({ selectorDef, keyProp, }) {
     const editContext = useEditContext();
-    const manualActions = editContext?.configuration.editor.manualActions;
-    const availabilitySelector = selectorDef.availabilitySelector || selectorDef.selector;
     // For sidebar-only selectors, we don't need to check for an element
     const isSidebarOnly = selectorDef.isSidebarOnly;
     // Initialize to true for sidebar-only, false otherwise to avoid hydration mismatch
@@ -292,12 +182,9 @@ function SelectorButton({ selectorDef, keyProp, }) {
     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);
     const isActionable = isSidebarOnly
-        ? canAutoOpenSidebar || hasBeforeAction
-        : isAvailable || canAutoOpenSidebar || hasBeforeAction;
+        ? canAutoOpenSidebar
+        : isAvailable || canAutoOpenSidebar;
     // Monitor for element availability changes (skip for sidebar-only selectors)
     useEffect(() => {
         // Sidebar-only selectors are always "available" if openSidebar exists
@@ -306,11 +193,10 @@ function SelectorButton({ selectorDef, keyProp, }) {
             return;
         }
         // Initial check
-        const initialAvailable = isElementAvailable(availabilitySelector);
-        setIsAvailable(initialAvailable);
+        setIsAvailable(isElementAvailable(selectorDef.selector));
         // Set up MutationObserver to watch for DOM changes
         const checkAvailability = () => {
-            const available = isElementAvailable(availabilitySelector);
+            const available = isElementAvailable(selectorDef.selector);
             setIsAvailable(available);
         };
         // Watch the main document for changes
@@ -340,31 +226,13 @@ function SelectorButton({ selectorDef, keyProp, }) {
             iframeObserver?.disconnect();
             clearInterval(intervalId);
         };
-    }, [availabilitySelector, isSidebarOnly]);
-    const tooltipText = isActionable
+    }, [selectorDef.selector, isSidebarOnly]);
+    const tooltipText = isAvailable
         ? selectorDef.description
         : selectorDef.notFoundMessage || selectorDef.description;
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { "aria-label": "Show me", onClick: async () => {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: async () => {
                         if (!isActionable)
                             return;
-                        const runId = globalThis.crypto?.randomUUID?.() ??
-                            `manual-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-                        const resolveElements = (selector = selectorDef.selector) => selector ? getElementsForSelector(selector) : [];
-                        const runManualAction = async (actionName, elements) => {
-                            if (!actionName || !editContext || !manualActions?.[actionName]) {
-                                return;
-                            }
-                            const action = manualActions[actionName];
-                            const actionProps = {
-                                editContext,
-                                selectorDef,
-                                duration: HIGHLIGHT_DURATION_MS,
-                                runId,
-                                elements,
-                                resolveElements,
-                            };
-                            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 &&
@@ -378,68 +246,164 @@ function SelectorButton({ selectorDef, keyProp, }) {
                                 await new Promise((resolve) => setTimeout(resolve, 150));
                             }
                         }
-                        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);
+                            highlightElement(selectorDef.selector);
                         }
-                    }, disabled: !isActionable, className: cn("inline-flex h-5 w-5 items-center justify-center rounded border transition-colors", isActionable
+                    }, disabled: !isActionable, className: cn("inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium 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 })] }));
+                        : "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"), children: "Show me" }, keyProp) }), _jsx(TooltipContent, { children: tooltipText })] }));
+}
+// Check if a line is a markdown table row (starts and ends with |)
+function isTableRow(line) {
+    const trimmed = line.trim();
+    return trimmed.startsWith("|") && trimmed.endsWith("|");
+}
+// Check if a line is a table separator row (contains only |, -, :, and spaces)
+function isTableSeparator(line) {
+    const trimmed = line.trim();
+    return isTableRow(line) && /^\|[\s\-:|]+\|$/.test(trimmed);
+}
+// Parse table cells from a row, handling the | delimiters
+function parseTableCells(line) {
+    const trimmed = line.trim();
+    // Remove leading and trailing |, then split by |
+    const inner = trimmed.slice(1, -1);
+    return inner.split("|").map((cell) => cell.trim());
+}
+// Parse column alignments from separator row
+function parseTableAlignments(separatorLine) {
+    const cells = parseTableCells(separatorLine);
+    return cells.map((cell) => {
+        const trimmed = cell.trim();
+        const startsWithColon = trimmed.startsWith(":");
+        const endsWithColon = trimmed.endsWith(":");
+        if (startsWithColon && endsWithColon)
+            return "center";
+        if (endsWithColon)
+            return "right";
+        return "left";
+    });
+}
+// Render a markdown table
+function renderTable(headerCells, alignments, bodyRows, uiSelectors, keyPrefix) {
+    const alignClasses = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx("div", { className: "my-3 overflow-x-auto", children: _jsxs("table", { className: "min-w-full border-collapse rounded-md border border-gray-200 text-sm", children: [_jsx("thead", { className: "bg-gray-50", children: _jsx("tr", { children: headerCells.map((cell, cellIndex) => (_jsx("th", { className: cn("border border-gray-200 px-3 py-2 font-semibold text-gray-700", alignClasses[alignments[cellIndex] || "left"]), children: renderLineWithSelectors(cell, uiSelectors) }, cellIndex))) }) }), _jsx("tbody", { children: bodyRows.map((row, rowIndex) => (_jsx("tr", { className: rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50", children: row.map((cell, cellIndex) => (_jsx("td", { className: cn("border border-gray-200 px-3 py-2 text-gray-600", alignClasses[alignments[cellIndex] || "left"]), children: renderLineWithSelectors(cell, uiSelectors) }, cellIndex))) }, rowIndex))) })] }) }, keyPrefix));
 }
 // Render markdown content with clickable selectors
 // Supports both {{selectorName}} syntax (looks up in uiSelectors) and legacy @selector syntax
-function renderMarkdownWithSelectors(content, uiSelectors, manualLinkTargets, onManualLinkClick) {
-    return (_jsx(MarkdownDisplay, { source: content, className: "space-y-0", components: manualMarkdownComponents, renderInline: (line) => renderLineWithSelectors(line, uiSelectors, manualLinkTargets, onManualLinkClick) }));
-}
-// Render a line with clickable selectors and basic formatting
-// Supports: {{selectorName}} for named selectors, @selector for legacy direct selectors, **bold** text
-// Parentheses around selectors (e.g., ({{name}})) are automatically hidden
-function renderLineWithSelectors(text, uiSelectors, manualLinkTargets, onManualLinkClick) {
-    if (!manualLinkTargets || !onManualLinkClick) {
-        return renderInlineSelectorsAndFormatting(text, uiSelectors);
-    }
-    const parts = [];
-    const linkRegex = /\[\[([^\]]+)\]\]/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = linkRegex.exec(text)) !== null) {
-        const fullMatch = match[0] || "";
-        const linkTitle = (match[1] || "").trim();
-        if (match.index > lastIndex) {
-            const prefix = text.substring(lastIndex, match.index);
-            parts.push(_jsx(React.Fragment, { children: renderInlineSelectorsAndFormatting(prefix, uiSelectors) }, `text-${match.index}`));
+function renderMarkdownWithSelectors(content, uiSelectors) {
+    // Simple markdown rendering with selector support
+    // Normalize line endings (handle \r\n and \r)
+    const normalizedContent = content.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    const lines = normalizedContent.split("\n");
+    const elements = [];
+    let lineIndex = 0;
+    while (lineIndex < lines.length) {
+        const line = lines[lineIndex] || "";
+        // Check if this is the start of a table
+        if (isTableRow(line) && !isTableSeparator(line)) {
+            // Look ahead for separator row to confirm this is a table
+            const nextLine = lines[lineIndex + 1];
+            if (nextLine && isTableSeparator(nextLine)) {
+                // This is a table! Parse it
+                const headerCells = parseTableCells(line);
+                const alignments = parseTableAlignments(nextLine);
+                const bodyRows = [];
+                // Skip header and separator
+                let tableLineIndex = lineIndex + 2;
+                // Collect body rows
+                while (tableLineIndex < lines.length &&
+                    isTableRow(lines[tableLineIndex] || "") &&
+                    !isTableSeparator(lines[tableLineIndex] || "")) {
+                    bodyRows.push(parseTableCells(lines[tableLineIndex] || ""));
+                    tableLineIndex++;
+                }
+                elements.push(renderTable(headerCells, alignments, bodyRows, uiSelectors, lineIndex));
+                lineIndex = tableLineIndex;
+                continue;
+            }
         }
-        const targetId = manualLinkTargets.get(linkTitle.toLowerCase());
-        if (targetId) {
-            parts.push(_jsx("button", { type: "button", onClick: () => onManualLinkClick(targetId), className: "cursor-pointer text-blue-600 underline decoration-blue-300 underline-offset-2 hover:text-blue-700", title: `Open "${linkTitle}"`, children: linkTitle }, `manual-link-${match.index}`));
+        // Handle headings
+        if (line.startsWith("# ")) {
+            elements.push(_jsx("h1", { className: "mt-4 mb-2 text-xl font-bold text-gray-900", children: renderLineWithSelectors(line.substring(2), uiSelectors) }, lineIndex));
+            lineIndex++;
+            continue;
+        }
+        if (line.startsWith("## ")) {
+            elements.push(_jsx("h2", { className: "mt-3 mb-2 text-lg font-semibold text-gray-800", children: renderLineWithSelectors(line.substring(3), uiSelectors) }, lineIndex));
+            lineIndex++;
+            continue;
+        }
+        if (line.startsWith("### ")) {
+            elements.push(_jsx("h3", { className: "mt-2 mb-1 text-base font-semibold text-gray-700", children: renderLineWithSelectors(line.substring(4), uiSelectors) }, lineIndex));
+            lineIndex++;
+            continue;
+        }
+        // Handle unordered list items - collect consecutive items and wrap in <ul>
+        if (line.match(/^[-*] /)) {
+            const listItems = [];
+            const startIndex = lineIndex;
+            while (lineIndex < lines.length &&
+                (lines[lineIndex] || "").match(/^[-*] /)) {
+                const itemLine = lines[lineIndex] || "";
+                listItems.push(_jsx("li", { className: "text-sm text-gray-600", children: renderLineWithSelectors(itemLine.substring(2), uiSelectors) }, lineIndex));
+                lineIndex++;
+            }
+            elements.push(_jsx("ul", { className: "my-2 ml-6 space-y-1", style: { listStyleType: "disc", paddingLeft: "1rem" }, children: listItems }, `ul-${startIndex}`));
+            continue;
+        }
+        // Handle ordered list items - collect consecutive items and wrap in <ol>
+        if (line.match(/^\d+\.\s/)) {
+            const listItems = [];
+            const startIndex = lineIndex;
+            while (lineIndex < lines.length &&
+                (lines[lineIndex] || "").match(/^\d+\.\s/)) {
+                const itemLine = lines[lineIndex] || "";
+                // Extract content after "N. " - use substring to get everything after the number and dot
+                const dotIndex = itemLine.indexOf(".");
+                const itemContent = dotIndex >= 0
+                    ? itemLine.substring(dotIndex + 1).trimStart()
+                    : itemLine;
+                listItems.push(_jsx("li", { className: "text-sm text-gray-600", children: renderLineWithSelectors(itemContent, uiSelectors) }, lineIndex));
+                lineIndex++;
+            }
+            elements.push(_jsx("ol", { className: "my-2 ml-6 space-y-1", style: { listStyleType: "decimal", paddingLeft: "1rem" }, children: listItems }, `ol-${startIndex}`));
+            continue;
+        }
+        // Handle horizontal rules (---, ***, ___)
+        if (line.match(/^[-*_]{3,}\s*$/)) {
+            elements.push(_jsx("hr", { className: "my-4 border-t border-gray-200" }, lineIndex));
+            lineIndex++;
+            continue;
+        }
+        // Regular paragraph
+        if (line.trim()) {
+            elements.push(_jsx("p", { className: "my-1 text-sm text-gray-600", children: renderLineWithSelectors(line, uiSelectors) }, lineIndex));
         }
         else {
-            parts.push(_jsx("span", { className: "text-orange-600", title: `Manual section not found: ${linkTitle}`, children: fullMatch }, `manual-link-missing-${match.index}`));
+            elements.push(_jsx("div", { className: "h-2" }, lineIndex));
         }
-        lastIndex = match.index + fullMatch.length;
+        lineIndex++;
     }
-    if (lastIndex < text.length) {
-        const suffix = text.substring(lastIndex);
-        parts.push(_jsx(React.Fragment, { children: renderInlineSelectorsAndFormatting(suffix, uiSelectors) }, `suffix-${lastIndex}`));
-    }
-    return _jsx(_Fragment, { children: parts });
+    return _jsx("div", { className: "space-y-1", children: elements });
 }
-function renderInlineSelectorsAndFormatting(text, uiSelectors) {
+// Render a line with clickable selectors and basic formatting
+// Supports: {{selectorName}} for named selectors, @selector for legacy direct selectors, **bold** text
+// Parentheses around selectors (e.g., ({{name}})) are automatically hidden
+function renderLineWithSelectors(text, uiSelectors) {
     const parts = [];
     let lastIndex = 0;
     // Combined regex for {{namedSelector}}, @selector, and **bold**
     // Note: @selector can include -sidebar suffix for sidebar-only selectors
     // Also supports @iframe:selector syntax (iframe: is special and allowed)
     // Now also matches optional parentheses around selectors: ({{name}}) or (@selector)
-    const regex = /(\()?(\{\{([\w\-]+)\}\})|(\()?(@(?:iframe:[\w\-\.#\[\]=]*[\w\-#\[\]=]|[\w\-\.#\[\]=]*[\w\-#\[\]=]))|(\*\*(.+?)\*\*)/g;
+    const regex = /(\()?(\{\{([\w\-]+)\}\})|(\()?(@(?:iframe:[\w\-\.#\[\]=]+|[\w\-\.#\[\]=]+))|(\*\*(.+?)\*\*)/g;
     let match;
     while ((match = regex.exec(text)) !== null) {
         // Check if there's an opening parenthesis before the selector
@@ -476,9 +440,7 @@ function renderInlineSelectorsAndFormatting(text, uiSelectors) {
             // @selector match (legacy direct selector syntax) - create ad-hoc selector def
             const selectorToken = match[5];
             const parsed = parseSelectorToken(selectorToken);
-            const selectorName = selectorToken.replace(/^@/, "");
-            const registeredSelectorDef = uiSelectors.get(selectorName);
-            const effectiveSelectorDef = registeredSelectorDef ?? {
+            const adHocSelectorDef = {
                 name: selectorToken,
                 selector: parsed.selector,
                 description: parsed.isSidebarOnly
@@ -490,7 +452,7 @@ function renderInlineSelectorsAndFormatting(text, uiSelectors) {
             // Check if there's a closing paren after this selector
             const afterMatch = match.index + match[0].length;
             const hasCloseParen = text[afterMatch] === ")";
-            parts.push(_jsx(SelectorButton, { selectorDef: effectiveSelectorDef, keyProp: match.index }, match.index));
+            parts.push(_jsx(SelectorButton, { selectorDef: adHocSelectorDef, keyProp: match.index }, match.index));
             // Skip the closing paren if present
             if (hasCloseParen && hasOpenParen) {
                 lastIndex = afterMatch + 1;
@@ -510,6 +472,21 @@ function renderInlineSelectorsAndFormatting(text, uiSelectors) {
     }
     return _jsx(_Fragment, { children: parts });
 }
+// Flatten TOC tree into options with indentation for hierarchy
+function flattenTocToOptions(sections, depth = 0) {
+    const options = [];
+    for (const section of sections) {
+        const indent = "\u00A0\u00A0".repeat(depth); // Non-breaking spaces for indentation
+        options.push({
+            value: section.id,
+            label: `${indent}${section.title || "Untitled"}`,
+        });
+        if (section.children && section.children.length > 0) {
+            options.push(...flattenTocToOptions(section.children, depth + 1));
+        }
+    }
+    return options;
+}
 function findTocPath(sections, targetId, ancestors = []) {
     for (const section of sections) {
         const nextAncestors = [...ancestors, section];
@@ -523,196 +500,36 @@ function findTocPath(sections, targetId, ancestors = []) {
     }
     return null;
 }
-function isDirectlyNavigableSection(section) {
-    return !!section.hasContent || section.children.length === 0;
-}
-function resolveFirstNavigableSection(section) {
-    if (isDirectlyNavigableSection(section) || section.children.length === 0) {
-        return section;
-    }
-    return resolveFirstNavigableSection(section.children[0]);
-}
-function resolveSelectedSectionId(sections, targetId) {
-    const path = findTocPath(sections, targetId);
-    const targetSection = path?.[path.length - 1];
-    if (!targetSection)
-        return targetId;
-    return resolveFirstNavigableSection(targetSection).id;
-}
-function findNearestNavigableAncestor(path) {
-    if (!path || path.length < 2)
-        return null;
-    for (let i = path.length - 2; i >= 0; i -= 1) {
-        const section = path[i];
-        if (section && isDirectlyNavigableSection(section)) {
-            return section;
-        }
-    }
-    return null;
-}
-const SECTION_THEMES = {
-    "getting started": {
-        icon: Rocket,
-        color: "text-emerald-600",
-        bg: "bg-emerald-50",
-        border: "border-emerald-100",
-        accent: "bg-emerald-500",
-    },
-    "page editing": {
-        icon: FileEdit,
-        color: "text-blue-600",
-        bg: "bg-blue-50",
-        border: "border-blue-100",
-        accent: "bg-blue-500",
-    },
-    "managing content": {
-        icon: BookOpen,
-        color: "text-amber-600",
-        bg: "bg-amber-50",
-        border: "border-amber-100",
-        accent: "bg-amber-500",
-    },
-    "ai assistant": {
-        icon: BookOpen,
-        color: "text-violet-600",
-        bg: "bg-violet-50",
-        border: "border-violet-100",
-        accent: "bg-violet-500",
-    },
-};
-const DEFAULT_THEME = {
-    icon: BookOpen,
-    color: "text-violet-600",
-    bg: "bg-violet-50",
-    border: "border-violet-100",
-    accent: "bg-violet-500",
-};
-function getSectionTheme(title) {
-    if (!title)
-        return DEFAULT_THEME;
-    return SECTION_THEMES[title.toLowerCase()] ?? DEFAULT_THEME;
-}
-function TocSectionCard({ section, onSelect, onToggleCollapse, isCollapsed, }) {
-    const theme = getSectionTheme(section.title);
-    const Icon = theme.icon;
-    const hasChildren = !!(section.children && section.children.length > 0);
-    return (_jsxs("div", { className: "group", children: [_jsx("button", { type: "button", onClick: () => onSelect(section.id), className: cn("w-full rounded-lg p-3 text-left transition-all", "bg-white hover:bg-gray-50/50"), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", theme.bg), children: section.svgIcon ? (_jsx(SvgIcon, { svg: section.svgIcon, size: 24, className: theme.color })) : (_jsx(Icon, { className: cn("h-[18px] w-[18px]", theme.color), strokeWidth: 1.75 })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-sm font-semibold text-gray-900", children: section.title || "Untitled" }) }), section.summary && (_jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-relaxed text-gray-500", children: section.summary }))] })] }) }), hasChildren && (_jsxs("div", { className: "mt-1", children: [_jsxs("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "ml-[60px] flex w-fit items-center gap-1.5 rounded-md py-1 text-xs text-gray-400 transition-colors hover:text-gray-600", children: [_jsx(ChevronRight, { className: cn("h-3 w-3 shrink-0 transition-transform", !isCollapsed && "rotate-90") }), _jsx("span", { children: isCollapsed ? "Show articles" : "Hide articles" })] }), !isCollapsed && (_jsx("div", { className: "mt-0.5 ml-[60px] space-y-px border-l-2 border-gray-100 pl-3", children: section.children.map((child) => (_jsxs("button", { type: "button", onClick: () => onSelect(child.id), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", theme.accent, "opacity-40 transition-opacity group-hover:opacity-70") }), _jsx("span", { className: "truncate", children: child.title || "Untitled" })] }, child.id))) }))] }))] }));
-}
-function renderTocTree(sections, onSelect, onToggleCollapse, collapsedSectionIds, depth = 0) {
-    if (depth === 0) {
-        return (_jsx("div", { className: "space-y-3", children: sections.map((section) => {
-                const isCollapsed = collapsedSectionIds.has(section.id);
-                return (_jsx(TocSectionCard, { section: section, onSelect: onSelect, onToggleCollapse: onToggleCollapse, isCollapsed: isCollapsed }, section.id));
-            }) }));
-    }
-    return (_jsx("div", { className: cn(depth > 0 && "ml-3 border-l border-gray-100 pl-2"), children: sections.map((section) => {
-            const hasChildren = !!(section.children && section.children.length > 0);
-            const isCollapsed = hasChildren && collapsedSectionIds.has(section.id);
-            return (_jsxs("div", { className: "my-0.5", children: [_jsxs("div", { className: cn("group flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50", "text-sm text-gray-500 hover:text-gray-700"), children: [hasChildren ? (_jsx("button", { type: "button", onClick: () => onToggleCollapse(section.id), className: "rounded p-0.5 text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500", "aria-label": isCollapsed
-                                    ? `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 &&
-                        renderTocTree(section.children, onSelect, onToggleCollapse, collapsedSectionIds, depth + 1)] }, section.id));
-        }) }));
-}
-function flattenSections(sections) {
-    const flattened = [];
-    for (const section of sections) {
-        flattened.push(section);
-        if (section.children && section.children.length > 0) {
-            flattened.push(...flattenSections(section.children));
-        }
-    }
-    return flattened;
-}
-function flattenNavigableSections(sections) {
-    const flattened = [];
-    for (const section of sections) {
-        if (isDirectlyNavigableSection(section)) {
-            flattened.push(section);
-        }
-        if (section.children.length > 0) {
-            flattened.push(...flattenNavigableSections(section.children));
-        }
-    }
-    return flattened;
-}
-const MANUAL_SECTION_TEMPLATE_ID = "c5f1e8a2-9b50-4fe2-9b6d-3db00c3b3b8a";
-export function ManualBrowser({ onClose }) {
+export function ManualBrowser() {
     const editContext = useEditContext();
     const [toc, setToc] = useState([]);
-    const selectedSectionId = editContext?.selectedHelpSectionId ?? null;
+    const [selectedSectionId, setSelectedSectionId] = useState(null);
     const [currentSection, setCurrentSection] = useState(null);
-    const currentSectionRef = useRef(null);
     const [loadingToc, setLoadingToc] = useState(false);
     const [loadingSection, setLoadingSection] = useState(false);
     const [error, setError] = useState(null);
-    const [searchQuery, setSearchQuery] = useState("");
-    const [searchResults, setSearchResults] = useState([]);
-    const [searching, setSearching] = useState(false);
-    const [collapsedTocSectionIds, setCollapsedTocSectionIds] = useState(() => new Set());
     // Track revision to force re-fetch (incremented when websocket notifies of changes)
     const [sectionRevision, setSectionRevision] = useState(0);
     // Keep a ref to all TOC item IDs for checking if changed item is in the manual
     const tocItemIdsRef = useRef(new Set());
     // Keep a ref to selectedSectionId to avoid stale closures in websocket callback
     const selectedSectionIdRef = useRef(null);
+    // Flatten TOC into select options
+    const sectionOptions = useMemo(() => flattenTocToOptions(toc), [toc]);
     const currentTocPath = useMemo(() => {
         if (!selectedSectionId)
             return null;
         return findTocPath(toc, selectedSectionId);
     }, [toc, selectedSectionId]);
     const parentTocSection = useMemo(() => {
-        return findNearestNavigableAncestor(currentTocPath);
+        if (!currentTocPath || currentTocPath.length < 2)
+            return null;
+        return currentTocPath[currentTocPath.length - 2] || null;
     }, [currentTocPath]);
-    const chapterNavigation = useMemo(() => {
-        if (!selectedSectionId)
-            return { previous: null, next: null };
-        const flatSections = flattenNavigableSections(toc);
-        const currentIndex = flatSections.findIndex((section) => section.id === selectedSectionId);
-        if (currentIndex < 0)
-            return { previous: null, next: null };
-        return {
-            previous: currentIndex > 0 ? flatSections[currentIndex - 1] : null,
-            next: currentIndex < flatSections.length - 1
-                ? flatSections[currentIndex + 1]
-                : null,
-        };
-    }, [toc, selectedSectionId]);
-    const manualLinkTargets = useMemo(() => {
-        const lookup = new Map();
-        const sections = flattenSections(toc);
-        for (const section of sections) {
-            const key = section.title?.trim().toLowerCase();
-            if (key && !lookup.has(key)) {
-                lookup.set(key, resolveFirstNavigableSection(section).id);
-            }
-        }
-        return lookup;
-    }, [toc]);
-    const manualSectionsById = useMemo(() => {
-        const map = new Map();
-        const sections = flattenSections(toc);
-        for (const section of sections) {
-            map.set(section.id.toLowerCase(), section);
-        }
-        return map;
-    }, [toc]);
     // Keep selectedSectionId ref in sync
     useEffect(() => {
         selectedSectionIdRef.current = selectedSectionId;
     }, [selectedSectionId]);
-    useEffect(() => {
-        currentSectionRef.current = currentSection;
-    }, [currentSection]);
-    useEffect(() => {
-        if (!selectedSectionId || !editContext || toc.length === 0)
-            return;
-        const resolvedSectionId = resolveSelectedSectionId(toc, selectedSectionId);
-        if (resolvedSectionId !== selectedSectionId) {
-            editContext.setSelectedHelpSectionId(resolvedSectionId);
-        }
-    }, [editContext, selectedSectionId, toc]);
     // Build set of all TOC item IDs (for websocket matching)
     useEffect(() => {
         const collectIds = (sections) => {
@@ -734,6 +551,10 @@ export function ManualBrowser({ onClose }) {
         loadManualToc()
             .then((data) => {
             setToc(data);
+            // Auto-select first section if available
+            if (data.length > 0 && data[0]) {
+                setSelectedSectionId(data[0].id);
+            }
         })
             .catch((err) => {
             console.error("Failed to load manual TOC:", err);
@@ -745,96 +566,28 @@ export function ManualBrowser({ onClose }) {
     }, []);
     // Load section content when selection changes or revision changes
     useEffect(() => {
-        let cancelled = false;
         if (!selectedSectionId) {
             setCurrentSection(null);
             setLoadingSection(false);
             return;
         }
-        const resolvedSectionId = toc.length > 0
-            ? resolveSelectedSectionId(toc, selectedSectionId)
-            : selectedSectionId;
-        if (resolvedSectionId !== selectedSectionId) {
-            return () => {
-                cancelled = true;
-            };
-        }
         // Only show loading spinner if we don't have current section (initial load)
         // For refreshes, keep showing the old content to avoid flicker
-        const isInitialLoad = !currentSectionRef.current ||
-            currentSectionRef.current.id !== selectedSectionId;
+        const isInitialLoad = !currentSection || currentSection.id !== selectedSectionId;
         if (isInitialLoad) {
             setLoadingSection(true);
         }
-        loadManualSection(resolvedSectionId)
+        loadManualSection(selectedSectionId)
             .then((data) => {
-            if (cancelled)
-                return;
             setCurrentSection(data);
             setLoadingSection(false);
         })
             .catch((err) => {
-            if (cancelled)
-                return;
             console.error("Failed to load section:", err);
             setCurrentSection(null);
             setLoadingSection(false);
         });
-        return () => {
-            cancelled = true;
-        };
-    }, [sectionRevision, selectedSectionId, toc]);
-    // Search manual sections using internal search (SQL + AI providers).
-    useEffect(() => {
-        let cancelled = false;
-        const trimmedQuery = searchQuery.trim();
-        if (!trimmedQuery || !editContext) {
-            setSearching(false);
-            setSearchResults([]);
-            return;
-        }
-        const timeoutId = window.setTimeout(async () => {
-            setSearching(true);
-            try {
-                const result = await executeSearch({
-                    query: `${trimmedQuery}|template:${MANUAL_SECTION_TEMPLATE_ID}`,
-                    editContext,
-                    maxResults: 20,
-                    index: "master",
-                    skipValidation: true,
-                });
-                if (cancelled)
-                    return;
-                if (result.type === "success") {
-                    const items = result.data || [];
-                    const mapped = items
-                        .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);
-                }
-                else {
-                    console.error("Failed to search manual", result.response.statusText);
-                    setSearchResults([]);
-                }
-            }
-            catch (err) {
-                if (!cancelled) {
-                    console.error("Manual search failed", err);
-                    setSearchResults([]);
-                }
-            }
-            finally {
-                if (!cancelled) {
-                    setSearching(false);
-                }
-            }
-        }, 300);
-        return () => {
-            cancelled = true;
-            window.clearTimeout(timeoutId);
-        };
-    }, [searchQuery, editContext, manualSectionsById]);
+    }, [selectedSectionId, sectionRevision]);
     // 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(() => {
@@ -868,28 +621,7 @@ export function ManualBrowser({ onClose }) {
         return removeListener;
     }, [selectedSectionId]); // Only re-register when selectedSectionId changes, not when editContext object changes
     const handleSelectSection = useCallback((id) => {
-        if (!editContext)
-            return;
-        editContext.setSelectedHelpSectionId(resolveSelectedSectionId(toc, id));
-    }, [editContext, toc]);
-    const handleSelectSearchResult = useCallback((id) => {
-        if (!editContext)
-            return;
-        editContext.setSelectedHelpSectionId(resolveSelectedSectionId(toc, id));
-        setSearchQuery("");
-        setSearchResults([]);
-    }, [editContext, toc]);
-    const handleToggleTocSection = useCallback((id) => {
-        setCollapsedTocSectionIds((prev) => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
+        setSelectedSectionId(id);
     }, []);
     if (loadingToc) {
         return (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) }));
@@ -900,7 +632,7 @@ export function ManualBrowser({ onClose }) {
     if (toc.length === 0) {
         return (_jsxs("div", { className: "px-4 py-8 text-center text-sm text-gray-500", children: [_jsx(Book, { className: "mx-auto mb-2 h-8 w-8 text-gray-300" }), _jsx("p", { children: "No manual content available yet." })] }));
     }
-    return (_jsxs("div", { className: "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 }) }), 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-2 flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [parentTocSection ? (_jsxs("button", { type: "button", onClick: () => handleSelectSection(parentTocSection.id), 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": `Back to ${parentTocSection.title}`, title: `Back to ${parentTocSection.title}`, children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Back" })] })) : (_jsxs("button", { type: "button", onClick: () => editContext?.setSelectedHelpSectionId(null), 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": "Back to contents", title: "Back to contents", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Contents" })] })), _jsxs("h2", { className: "ml-1 min-w-0 flex-1 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] })] }), 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: [_jsx("div", { className: "shrink-0 border-b border-gray-100 px-3 py-2", children: _jsx(Select, { value: selectedSectionId || undefined, onValueChange: handleSelectSection, options: sectionOptions, placeholder: "Select a section...", size: "sm", className: "w-full rounded-md", searchable: sectionOptions.length > 10, searchPlaceholder: "Search sections..." }) }), _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" }) })) : currentSection ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [parentTocSection && (_jsxs("button", { type: "button", onClick: () => handleSelectSection(parentTocSection.id), 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": `Back to ${parentTocSection.title}`, title: `Back to ${parentTocSection.title}`, children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Back" })] })), _jsx("h2", { className: "min-w-0 flex-1 text-xl font-bold text-gray-900", children: currentSection.title })] }), 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) {
@@ -923,20 +655,7 @@ export function ManualBrowser({ onClose }) {
                                                     catch (error) {
                                                         console.error("Failed to load manual section:", error);
                                                     }
-                                                }, className: "shrink-0 rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700", "aria-label": "Edit item", title: "Edit item", children: _jsx(Edit, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { children: "Edit item" })] }))] }), currentSection.summary &&
-                            (() => {
-                                const theme = parentTocSection
-                                    ? getSectionTheme(parentTocSection.title)
-                                    : getSectionTheme(currentSection.title);
-                                return (_jsx("p", { className: cn("my-4 mb-8 border-l-2 pl-3 text-sm text-gray-500 italic", theme.border), children: currentSection.summary }));
-                            })(), _jsx("div", { className: "prose prose-sm max-w-none select-text", children: renderMarkdownWithSelectors(currentSection.content || "", parseUiSelectors(currentSection.uiSelectors), manualLinkTargets, handleSelectSection) }), currentSection.subsections &&
-                            currentSection.subsections.length > 0 && (_jsxs("div", { className: "mt-8 border-t border-gray-100 pt-4", children: [_jsx("h3", { className: "mb-3 text-[11px] font-bold tracking-widest text-gray-400 uppercase", children: "In this section" }), _jsx("div", { className: "space-y-0.5", children: currentSection.subsections.map((subsection) => {
-                                        const theme = getSectionTheme(currentSection.title);
-                                        return (_jsxs("button", { onClick: () => handleSelectSection(subsection.id), className: "group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-gray-600 transition-all hover:bg-gray-50 hover:text-gray-900", children: [_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full transition-transform group-hover:scale-125", theme.accent, "opacity-50 group-hover:opacity-80") }), _jsx("span", { className: "flex-1 truncate font-medium", children: subsection.title }), _jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" })] }, subsection.id));
-                                    }) })] }))] })) : (_jsx("div", { className: "py-8 text-center text-sm text-gray-500", children: "Select a section to view its content" })) }), selectedSectionId &&
-                currentSection &&
-                (chapterNavigation.previous || chapterNavigation.next) && (_jsx("div", { className: "shrink-0 border-t border-gray-200/60 bg-white px-4 py-3", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [chapterNavigation.previous ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.previous &&
-                                handleSelectSection(chapterNavigation.previous.id), className: "group rounded-lg border border-gray-200 px-3 py-2 text-left transition-all hover:border-blue-200 hover:bg-blue-50/30", children: [_jsxs("span", { className: "mb-0.5 inline-flex items-center gap-1 text-xs font-medium text-gray-400 transition-colors group-hover:text-blue-500", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), "Previous"] }), _jsx("span", { className: "block truncate text-sm font-medium text-gray-700 transition-colors group-hover:text-gray-900", children: chapterNavigation.previous.title })] })) : (_jsx("div", {})), chapterNavigation.next ? (_jsxs("button", { type: "button", onClick: () => chapterNavigation.next &&
-                                handleSelectSection(chapterNavigation.next.id), className: "group rounded-lg border border-gray-200 px-3 py-2 text-right transition-all hover:border-blue-200 hover:bg-blue-50/30", children: [_jsxs("span", { className: "mb-0.5 inline-flex items-center justify-end gap-1 text-xs font-medium text-gray-400 transition-colors group-hover:text-blue-500", children: ["Next", _jsx(ArrowRight, { className: "h-3 w-3" })] }), _jsx("span", { className: "block truncate text-sm font-medium text-gray-700 transition-colors group-hover:text-gray-900", children: chapterNavigation.next.title })] })) : (_jsx("div", {}))] }) }))] }));
+                                                }, 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" })] }))] }), currentSection.summary && (_jsx("p", { className: "mb-3 text-sm text-gray-500", children: currentSection.summary })), _jsx("div", { className: "prose prose-sm max-w-none select-text", children: renderMarkdownWithSelectors(currentSection.content || "", parseUiSelectors(currentSection.uiSelectors)) }), currentSection.subsections &&
+                            currentSection.subsections.length > 0 && (_jsxs("div", { className: "mt-6 border-t border-gray-200 pt-4", children: [_jsx("h3", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Subsections" }), _jsx("ul", { className: "space-y-2", children: currentSection.subsections.map((subsection) => (_jsx("li", { children: _jsx("button", { onClick: () => handleSelectSection(subsection.id), className: "text-left text-sm text-blue-600 hover:text-blue-800 hover:underline", children: subsection.title }) }, subsection.id))) })] }))] })) : (_jsx("div", { className: "py-8 text-center text-sm text-gray-500", children: "Select a section to view its content" })) })] }));
 }
 //# sourceMappingURL=ManualBrowser.js.map