@salesforcedevs/docs-components 1.34.1-redoc-latest-banner-2 → 1.34.3-final-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.34.1-redoc-latest-banner-2",
+  "version": "1.34.3-final-alpha",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -25,6 +25,5 @@
     "@types/lodash.orderby": "4.6.9",
     "@types/lodash.uniqby": "4.7.9"
   },
-  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
-  "stableVersion": "1.34.0"
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/contentActionToolbar/constants.ts

@@ -0,0 +1,43 @@
+export const DEFAULT_TOOLTIP_LABEL = "Click to copy";
+export const COPIED_TOOLTIP_LABEL = "Copied!";
+export const COPIED_RESET_MS = 1000;
+
+export const ANALYTICS_CONTENT_CATEGORY = "content action toolbar";
+export const MORE_ACTIONS_LABEL = "More actions";
+
+export const COPY_MARKDOWN_LABEL = "Copy as Markdown";
+export const VIEW_MARKDOWN_LABEL = "View as Markdown";
+export const COPY_MARKDOWN_URL_LABEL = "Copy URL to Markdown";
+export const VIEW_LLMS_LABEL = "View llms.txt";
+export const COPY_LLMS_URL_LABEL = "Copy URL to llms.txt";
+export const OPEN_CHATGPT_LABEL = "Open in ChatGPT";
+export const OPEN_CLAUDE_LABEL = "Open in Claude";
+export const OPEN_PERPLEXITY_LABEL = "Open in Perplexity";
+
+export const LLMS_TXT_PATH = "/docs/llms.txt";
+export const CHATGPT_URL = "https://chatgpt.com/";
+export const CLAUDE_URL = "https://claude.ai/new";
+export const PERPLEXITY_URL = "https://www.perplexity.ai/search";
+
+export const ACTION_COPY_MARKDOWN = "copy-markdown";
+export const ACTION_VIEW_MARKDOWN = "view-markdown";
+export const ACTION_COPY_MARKDOWN_URL = "copy-markdown-url";
+export const ACTION_VIEW_LLMS = "view-llms";
+export const ACTION_COPY_LLMS_URL = "copy-llms-url";
+export const ACTION_OPEN_CHATGPT = "open-chatgpt";
+export const ACTION_OPEN_CLAUDE = "open-claude";
+export const ACTION_OPEN_PERPLEXITY = "open-perplexity";
+
+export const AI_ASSISTANTS = [
+    {
+        action: ACTION_OPEN_CHATGPT,
+        base: CHATGPT_URL,
+        label: OPEN_CHATGPT_LABEL
+    },
+    { action: ACTION_OPEN_CLAUDE, base: CLAUDE_URL, label: OPEN_CLAUDE_LABEL },
+    {
+        action: ACTION_OPEN_PERPLEXITY,
+        base: PERPLEXITY_URL,
+        label: OPEN_PERPLEXITY_LABEL
+    }
+] as const;

package/src/modules/doc/contentActionToolbar/contentActionToolbar.css

@@ -2,16 +2,27 @@
 
 :host {
     display: block;
+
+    /* 4px gap below the trigger, and the same 4px gap above when the menu
+       flips */
+    --popover-container-open-transform: translateY(var(--dx-g-spacing-xs));
+    --popover-container-open-transform-up: translateY(
+        calc(-1 * var(--dx-g-spacing-xs))
+    );
 }
 
 .toolbar {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: var(--dx-g-spacing-smd);
     margin-bottom: var(--dx-g-spacing-lg);
 }
 
+.toolbar > * {
+    flex-shrink: 0;
+}
+
 .toolbar-button {
     --dx-c-button-font-weight: var(--dx-g-font-demi);
     --dx-c-button-line-height: var(--dx-g-spacing-mlg);
@@ -24,9 +35,26 @@
     background-color: var(--dx-g-gray-70);
 }
 
-@media screen and (max-width: 480px) {
-    .toolbar-button_copy-url,
-    .divider_copy-url {
-        display: none;
-    }
+.toolbar_no-markdown .divider_view-llms {
+    display: none;
+}
+
+.toolbar-menu {
+    --dx-c-popover-z-index: calc(var(--dx-g-z-index-100) + 6);
+
+    flex: 0 0 auto;
+}
+
+.menu-trigger {
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.toolbar > [data-overflow="true"] {
+    display: none;
+}
+
+.toolbar > .divider_view-markdown[data-overflow="true"] ~ .divider_menu,
+.toolbar_no-markdown .divider_menu {
+    display: none;
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbar.html

@@ -1,53 +1,88 @@
 <template>
-    <div class="toolbar" lwc:if={markdownUrl}>
-        <dx-tooltip placement="top-right" label={copyMarkdownLabel}>
+    <div class={toolbarClass}>
+        <template lwc:if={hasMarkdown}>
+            <dx-tooltip
+                placement="top-right"
+                label={copyMarkdownTooltipLabel}
+                visible={copyMarkdownTooltipVisible}
+            >
+                <dx-button
+                    class="toolbar-button"
+                    variant="inline"
+                    size="small"
+                    icon-sprite="utility"
+                    icon-symbol="copy"
+                    icon-size="medium"
+                    icon-position="right"
+                    aria-label={copyMarkdownButtonText}
+                    onclick={handleCopyMarkdown}
+                >
+                    {copyMarkdownButtonText}
+                </dx-button>
+            </dx-tooltip>
+
+            <div class="divider divider_view-markdown"></div>
+
             <dx-button
-                class="toolbar-button"
+                class="toolbar-button toolbar-button_view-markdown"
                 variant="inline"
                 size="small"
                 icon-sprite="utility"
-                icon-symbol="copy"
+                icon-symbol="new_window"
                 icon-size="medium"
                 icon-position="right"
-                aria-label={copyMarkdownButtonText}
-                onclick={handleCopyMarkdown}
+                aria-label={viewMarkdownButtonText}
+                onclick={handleViewMarkdown}
             >
-                {copyMarkdownButtonText}
+                {viewMarkdownButtonText}
             </dx-button>
-        </dx-tooltip>
+        </template>
 
-        <div class="divider"></div>
+        <div class="divider divider_view-llms"></div>
 
         <dx-button
-            class="toolbar-button"
+            class="toolbar-button toolbar-button_view-llms"
             variant="inline"
             size="small"
             icon-sprite="utility"
             icon-symbol="new_window"
             icon-size="medium"
             icon-position="right"
-            aria-label={viewMarkdownButtonText}
-            onclick={handleViewMarkdown}
+            aria-label={viewLlmsButtonText}
+            onclick={handleViewLlms}
         >
-            {viewMarkdownButtonText}
+            {viewLlmsButtonText}
         </dx-button>
 
-        <div class="divider divider_copy-url"></div>
+        <div class="divider divider_menu"></div>
 
-        <dx-tooltip placement="top-right" label={copyUrlLabel}>
-            <dx-button
-                class="toolbar-button toolbar-button_copy-url"
-                variant="inline"
-                size="small"
-                icon-sprite="utility"
-                icon-symbol="link"
-                icon-size="medium"
-                icon-position="right"
-                aria-label={copyUrlButtonText}
-                onclick={handleCopyUrl}
+        <dx-dropdown
+            class="toolbar-menu"
+            options={menuOptions}
+            placement="bottom-end"
+            width-mode="fit-content"
+            onchange={handleMenuSelect}
+            onopen={handleMenuOpen}
+            onclose={handleMenuClose}
+        >
+            <dx-tooltip
+                placement="top-right"
+                label={menuTooltipLabel}
+                visible={menuTooltipVisible}
+                suppressed={menuOpen}
             >
-                {copyUrlButtonText}
-            </dx-button>
-        </dx-tooltip>
+                <dx-button
+                    class="menu-trigger"
+                    variant="secondary"
+                    size="small"
+                    icon-sprite="utility"
+                    icon-symbol="threedots"
+                    icon-size="medium"
+                    icon-only
+                >
+                    {moreActionsLabel}
+                </dx-button>
+            </dx-tooltip>
+        </dx-dropdown>
     </div>
 </template>

package/src/modules/doc/contentActionToolbar/contentActionToolbar.ts

@@ -1,14 +1,26 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
-
-const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
-const COPIED_TOOLTIP_LABEL = "Copied!";
-const COPIED_TOOLTIP_RESET_MS = 1000;
-
-const ANALYTICS_CONTENT_CATEGORY = "content action toolbar";
-const COPY_MARKDOWN_LABEL = "Copy as Markdown";
-const VIEW_MARKDOWN_LABEL = "View as Markdown";
-const COPY_URL_LABEL = "Copy URL to Markdown";
+import {
+    DEFAULT_TOOLTIP_LABEL,
+    COPIED_TOOLTIP_LABEL,
+    COPIED_RESET_MS,
+    ANALYTICS_CONTENT_CATEGORY,
+    MORE_ACTIONS_LABEL,
+    COPY_MARKDOWN_LABEL,
+    VIEW_MARKDOWN_LABEL,
+    COPY_MARKDOWN_URL_LABEL,
+    VIEW_LLMS_LABEL,
+    COPY_LLMS_URL_LABEL,
+    LLMS_TXT_PATH,
+    ACTION_COPY_MARKDOWN,
+    ACTION_VIEW_MARKDOWN,
+    ACTION_COPY_MARKDOWN_URL,
+    ACTION_VIEW_LLMS,
+    ACTION_COPY_LLMS_URL,
+    AI_ASSISTANTS
+} from "./constants";
 
 export default class ContentActionToolbar extends LightningElement {
     @api
@@ -23,17 +35,18 @@ export default class ContentActionToolbar extends LightningElement {
     }
     private _pageUrl?: string;
 
-    copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
-    copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+    @api pageTitle?: string;
 
-    private copyTooltipResetTimeout: number | null = null;
+    copyMarkdownTooltipLabel: string = DEFAULT_TOOLTIP_LABEL;
+    copyMarkdownTooltipVisible: boolean = false;
+    menuTooltipLabel: string = MORE_ACTIONS_LABEL;
+    menuTooltipVisible: boolean = false;
+    menuOpen: boolean = false;
 
-    /**
-     * Returns the `.md` equivalent of `pageUrl` with any hash and query
-     * string stripped, or `null` when `pageUrl` is not set or does not end
-     * with `.html`.
-     */
-    get markdownUrl(): string | null {
+    private tooltipResetTimeout: number | null = null;
+    private resizeObserver: ResizeObserver | null = null;
+
+    private get absolutePageUrl(): string | null {
         if (!this.pageUrl) {
             return null;
         }
@@ -41,7 +54,15 @@ export default class ContentActionToolbar extends LightningElement {
         const url = new URL(this.pageUrl, window.location.href);
         url.hash = "";
         url.search = "";
+        return url.toString();
+    }
 
+    get markdownUrl(): string | null {
+        if (!this.absolutePageUrl) {
+            return null;
+        }
+
+        const url = new URL(this.absolutePageUrl);
         if (!url.pathname.endsWith(".html")) {
             return null;
         }
@@ -50,6 +71,39 @@ export default class ContentActionToolbar extends LightningElement {
         return url.toString();
     }
 
+    get llmsUrl(): string {
+        return new URL(LLMS_TXT_PATH, window.location.href).toString();
+    }
+
+    private buildAiAssistantUrl(base: string): string | null {
+        if (!this.absolutePageUrl) {
+            return null;
+        }
+
+        const title = this.pageTitle?.trim();
+        const intro = title
+            ? `I'm reading "${title}" at ${this.absolutePageUrl}.`
+            : `I'm reading ${this.absolutePageUrl}.`;
+
+        const prompt = `${intro} Read this page so I can ask questions about it. For broader context, see ${this.llmsUrl}`;
+
+        const url = new URL(base);
+        url.searchParams.set("q", prompt);
+        return url.toString();
+    }
+
+    get hasMarkdown(): boolean {
+        return Boolean(this.markdownUrl);
+    }
+
+    get toolbarClass(): string {
+        return cx("toolbar", !this.hasMarkdown && "toolbar_no-markdown");
+    }
+
+    get moreActionsLabel(): string {
+        return MORE_ACTIONS_LABEL;
+    }
+
     get copyMarkdownButtonText(): string {
         return COPY_MARKDOWN_LABEL;
     }
@@ -58,98 +112,355 @@ export default class ContentActionToolbar extends LightningElement {
         return VIEW_MARKDOWN_LABEL;
     }
 
-    get copyUrlButtonText(): string {
-        return COPY_URL_LABEL;
+    get viewLlmsButtonText(): string {
+        return VIEW_LLMS_LABEL;
+    }
+
+    get menuOptions(): OptionWithNested[] {
+        const groups: OptionWithNested[] = [];
+
+        if (this.hasMarkdown) {
+            groups.push({
+                id: "this-page",
+                label: "This Page",
+                options: [
+                    {
+                        id: ACTION_COPY_MARKDOWN,
+                        label: COPY_MARKDOWN_LABEL,
+                        iconSprite: "utility",
+                        iconSymbol: "copy"
+                    },
+                    {
+                        id: ACTION_VIEW_MARKDOWN,
+                        label: VIEW_MARKDOWN_LABEL,
+                        iconSprite: "utility",
+                        iconSymbol: "new_window"
+                    },
+                    {
+                        id: ACTION_COPY_MARKDOWN_URL,
+                        label: COPY_MARKDOWN_URL_LABEL,
+                        iconSprite: "utility",
+                        iconSymbol: "link"
+                    },
+                    ...AI_ASSISTANTS.map(({ action, label }) => ({
+                        id: action,
+                        label,
+                        iconSprite: "utility",
+                        iconSymbol: "new_window"
+                    }))
+                ]
+            });
+        }
+
+        groups.push({
+            id: "all-documentation",
+            label: "All Documentation",
+            options: [
+                {
+                    id: ACTION_VIEW_LLMS,
+                    label: VIEW_LLMS_LABEL,
+                    iconSprite: "utility",
+                    iconSymbol: "new_window"
+                },
+                {
+                    id: ACTION_COPY_LLMS_URL,
+                    label: COPY_LLMS_URL_LABEL,
+                    iconSprite: "utility",
+                    iconSymbol: "link"
+                }
+            ]
+        });
+
+        return groups;
     }
 
     async handleCopyMarkdown(event: Event) {
+        if (await this.copyMarkdown(event)) {
+            this.flashCopyMarkdownTooltip();
+        }
+    }
+
+    handleViewMarkdown(event: Event) {
         if (!this.markdownUrl) {
             return;
         }
 
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            COPY_MARKDOWN_LABEL,
-            this.markdownUrl
-        );
+        this.trackToolbarEvent(event, VIEW_MARKDOWN_LABEL, this.markdownUrl);
+        window.open(this.markdownUrl, "_blank", "noopener,noreferrer");
+    }
+
+    handleViewLlms(event: Event) {
+        this.trackToolbarEvent(event, VIEW_LLMS_LABEL, this.llmsUrl);
+        window.open(this.llmsUrl, "_blank", "noopener,noreferrer");
+    }
+
+    private handleOpenAiAssistant(
+        event: Event,
+        label: string,
+        url: string | null
+    ) {
+        if (!url) {
+            return;
+        }
+
+        this.trackToolbarEvent(event, label, url);
+        window.open(url, "_blank", "noopener,noreferrer");
+    }
+
+    handleMenuOpen() {
+        this.menuOpen = true;
+    }
+
+    handleMenuClose() {
+        this.menuOpen = false;
+    }
+
+    async handleMenuSelect(event: CustomEvent) {
+        switch (event.detail) {
+            case ACTION_COPY_MARKDOWN:
+                if (await this.copyMarkdown(event)) {
+                    this.flashMenuCopied();
+                }
+                return;
+            case ACTION_VIEW_MARKDOWN:
+                this.handleViewMarkdown(event);
+                return;
+            case ACTION_COPY_MARKDOWN_URL:
+                await this.handleCopyMarkdownUrl(event);
+                return;
+            case ACTION_VIEW_LLMS:
+                this.handleViewLlms(event);
+                return;
+            case ACTION_COPY_LLMS_URL:
+                await this.handleCopyLlmsUrl(event);
+                return;
+            default: {
+                const assistant = AI_ASSISTANTS.find(
+                    ({ action }) => action === event.detail
+                );
+                if (assistant) {
+                    this.handleOpenAiAssistant(
+                        event,
+                        assistant.label,
+                        this.buildAiAssistantUrl(assistant.base)
+                    );
+                }
+            }
+        }
+    }
+
+    private async copyMarkdown(event: Event): Promise<boolean> {
+        if (!this.markdownUrl) {
+            return false;
+        }
+
+        this.trackToolbarEvent(event, COPY_MARKDOWN_LABEL, this.markdownUrl);
 
         try {
             const response = await fetch(this.markdownUrl);
             if (!response.ok) {
-                return;
+                return false;
             }
             const markdown = await response.text();
             await navigator.clipboard.writeText(markdown);
-            this.flashCopied("copyMarkdownLabel");
+            return true;
         } catch (error) {
             console.error(error);
+            return false;
         }
     }
 
-    handleViewMarkdown(event: Event) {
+    private async handleCopyMarkdownUrl(event: Event) {
         if (!this.markdownUrl) {
             return;
         }
 
         this.trackToolbarEvent(
             event,
-            "custEv_linkClick",
-            VIEW_MARKDOWN_LABEL,
+            COPY_MARKDOWN_URL_LABEL,
             this.markdownUrl
         );
 
-        window.open(this.markdownUrl, "_blank", "noopener,noreferrer");
+        await this.copyToClipboard(this.markdownUrl);
     }
 
-    async handleCopyUrl(event: Event) {
-        if (!this.markdownUrl) {
-            return;
-        }
+    private async handleCopyLlmsUrl(event: Event) {
+        this.trackToolbarEvent(event, COPY_LLMS_URL_LABEL, this.llmsUrl);
 
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            COPY_URL_LABEL,
-            this.markdownUrl
-        );
+        await this.copyToClipboard(this.llmsUrl);
+    }
 
+    private async copyToClipboard(text: string) {
         try {
-            await navigator.clipboard.writeText(this.markdownUrl);
-            this.flashCopied("copyUrlLabel");
+            await navigator.clipboard.writeText(text);
+            this.flashMenuCopied();
         } catch (error) {
             console.error(error);
         }
     }
 
-    private trackToolbarEvent(
-        event: Event,
-        eventName: "custEv_linkClick",
-        label: string,
-        url: string
-    ): void {
-        track(event.currentTarget!, eventName, {
+    private trackToolbarEvent(event: Event, label: string, url: string): void {
+        track(event.currentTarget!, "custEv_linkClick", {
             click_text: label,
             click_url: url,
             element_type: "button_link",
             element_title: label,
             content_category: ANALYTICS_CONTENT_CATEGORY,
             // Source page the CTA was clicked from; `click_url` above is the
-            // `.md` destination. Uses the same `page_path` expression as the
+            // destination. Uses the same `page_path` expression as the
             // amfReference doc_page_view events.
             page_path: window.location.pathname + window.location.search
         });
     }
 
-    private flashCopied(labelKey: "copyMarkdownLabel" | "copyUrlLabel") {
-        if (this.copyTooltipResetTimeout !== null) {
-            window.clearTimeout(this.copyTooltipResetTimeout);
+    private flashCopyMarkdownTooltip() {
+        this.copyMarkdownTooltipLabel = COPIED_TOOLTIP_LABEL;
+        this.copyMarkdownTooltipVisible = true;
+        this.flashCopied();
+    }
+
+    private flashMenuCopied() {
+        this.menuTooltipLabel = COPIED_TOOLTIP_LABEL;
+        this.menuTooltipVisible = true;
+        this.flashCopied();
+    }
+
+    private flashCopied() {
+        if (this.tooltipResetTimeout !== null) {
+            window.clearTimeout(this.tooltipResetTimeout);
+        }
+        this.tooltipResetTimeout = window.setTimeout(() => {
+            this.copyMarkdownTooltipLabel = DEFAULT_TOOLTIP_LABEL;
+            this.copyMarkdownTooltipVisible = false;
+            this.menuTooltipVisible = false;
+            this.menuTooltipLabel = MORE_ACTIONS_LABEL;
+            this.tooltipResetTimeout = null;
+        }, COPIED_RESET_MS);
+    }
+
+    renderedCallback(): void {
+        this.layoutToolbar();
+        this.ensureResizeObserver();
+    }
+
+    disconnectedCallback(): void {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+
+    /* Keep every visible control on one row. The menu trigger stays at the
+       end; action buttons that no longer fit are hidden, last one first. */
+    private layoutToolbar(): void {
+        const toolbar = this.template.querySelector(
+            ".toolbar"
+        ) as HTMLElement | null;
+        if (!toolbar || toolbar.clientWidth <= 0) {
+            return;
+        }
+
+        const children = ([...toolbar.children] as HTMLElement[]).filter(
+            (node) => node instanceof HTMLElement
+        );
+        children.forEach((el) => {
+            delete el.dataset.overflow;
+        });
+        // Reading layout after clearing overflow flushes styles so the
+        // measurements below see the unhidden controls.
+        const availableWidth = toolbar.clientWidth;
+
+        const gap = this.readGap(toolbar);
+        const actionItems = children.filter(
+            (node) =>
+                !node.classList.contains("toolbar-menu") &&
+                !node.classList.contains("divider_menu") &&
+                this.isShown(node)
+        );
+
+        const menuDivider = toolbar.querySelector(
+            ".divider_menu"
+        ) as HTMLElement | null;
+        const menu = toolbar.querySelector(
+            ".toolbar-menu"
+        ) as HTMLElement | null;
+        const menuPieces = [menuDivider, menu].filter(
+            (el): el is HTMLElement => !!el && this.isShown(el)
+        );
+
+        let menuWidth = 0;
+        menuPieces.forEach((el, index) => {
+            menuWidth += el.offsetWidth + (index > 0 ? gap : 0);
+        });
+
+        const groups = this.groupActions(actionItems);
+        let used = 0;
+        let fittedCount = 0;
+
+        for (const group of groups) {
+            let groupWidth = 0;
+            group.forEach((el, index) => {
+                groupWidth += el.offsetWidth + (index > 0 ? gap : 0);
+            });
+
+            const gapBefore = used > 0 ? gap : 0;
+            const gapBeforeMenu = menuWidth > 0 ? gap : 0;
+            const next =
+                used + gapBefore + groupWidth + gapBeforeMenu + menuWidth;
+
+            if (next <= availableWidth + 1) {
+                used += gapBefore + groupWidth;
+                fittedCount += group.length;
+            } else {
+                break;
+            }
+        }
+
+        actionItems.slice(fittedCount).forEach((el) => {
+            el.dataset.overflow = "true";
+        });
+    }
+
+    private ensureResizeObserver(): void {
+        if (this.resizeObserver || typeof ResizeObserver === "undefined") {
+            return;
         }
-        this[labelKey] = COPIED_TOOLTIP_LABEL;
-        this.copyTooltipResetTimeout = window.setTimeout(() => {
-            this.copyMarkdownLabel = DEFAULT_COPY_TOOLTIP_LABEL;
-            this.copyUrlLabel = DEFAULT_COPY_TOOLTIP_LABEL;
-            this.copyTooltipResetTimeout = null;
-        }, COPIED_TOOLTIP_RESET_MS);
+
+        const toolbar = this.template.querySelector(".toolbar");
+        if (!toolbar) {
+            return;
+        }
+
+        this.resizeObserver = new ResizeObserver(() => {
+            this.layoutToolbar();
+        });
+        this.resizeObserver.observe(toolbar);
+    }
+
+    private groupActions(items: HTMLElement[]): HTMLElement[][] {
+        const groups: HTMLElement[][] = [];
+        let current: HTMLElement[] = [];
+
+        items.forEach((el) => {
+            if (el.classList.contains("divider") && current.length > 0) {
+                groups.push(current);
+                current = [el];
+                return;
+            }
+            current.push(el);
+        });
+
+        if (current.length > 0) {
+            groups.push(current);
+        }
+
+        return groups;
+    }
+
+    private isShown(el: HTMLElement): boolean {
+        return getComputedStyle(el).display !== "none";
+    }
+
+    private readGap(toolbar: HTMLElement): number {
+        const value = parseFloat(getComputedStyle(toolbar).columnGap);
+        return Number.isFinite(value) ? value : 0;
     }
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbarMocks.ts

@@ -40,7 +40,7 @@ export function interceptWindowOpenForContentActionToolbar() {
     const originalOpen = window.open.bind(window);
     window.open = ((url?: string | URL, target?: string, features?: string) => {
         const stringUrl = url?.toString() ?? "";
-        if (stringUrl.endsWith(".md")) {
+        if (stringUrl.endsWith(".md") || stringUrl.endsWith("/llms.txt")) {
             return originalOpen(DUMMY_MARKDOWN_DATA_URL, target, features);
         }
         return originalOpen(url ?? "", target, features);

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -307,9 +307,10 @@ export default class ContentLayout extends LightningElement {
         const toolbar = (this.contentActionToolbarElement ??
             createElement(CONTENT_ACTION_TOOLBAR_TAG, {
                 is: ContentActionToolbar
-            })) as HTMLElement & { pageUrl?: string };
+            })) as HTMLElement & { pageUrl?: string; pageTitle?: string };
 
         toolbar.pageUrl = this.sidebarValue;
+        toolbar.pageTitle = heading.textContent?.trim() || undefined;
 
         if (toolbar.previousElementSibling !== heading) {
             heading.parentNode?.insertBefore(toolbar, heading.nextSibling);

package/src/modules/doc/header/header.ts

@@ -74,6 +74,13 @@ export default class Header extends HeaderBase {
         return (this.hideDocHeader && !this.mobile) || this.showDocDivider;
     }
 
+    private get isDocsPath(): boolean {
+        return (
+            window.location.pathname.includes("/docs/") &&
+            window.location.pathname !== "/docs/apis"
+        );
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -83,9 +90,7 @@ export default class Header extends HeaderBase {
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
-            (!this.shouldHideHeader &&
-                window.location.pathname.includes("/docs/") &&
-                window.location.pathname !== "/docs/apis") ||
+            (!this.shouldHideHeader && this.isDocsPath) ||
             window.location.pathname ===
                 "/tableau/embedding-playground/overview" ||
             isStorybook()
@@ -109,6 +114,12 @@ export default class Header extends HeaderBase {
         );
     }
 
+    renderedCallback(): void {
+        if (this.hideDocHeader) {
+            this.shouldRender = !this.shouldHideHeader && this.isDocsPath;
+        }
+    }
+
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 

package/src/modules/doc/redocReference/redocReference.ts

@@ -790,7 +790,8 @@ export default class RedocReference extends LightningElement {
     // "newer version" banner into a shared doc-phase-wrapper at container start
     private insertStatusItems(container: HTMLElement): void {
         const docPhaseInfo = this.getDocPhaseInfo();
-        if (!docPhaseInfo && !this.oldVersionInfo) {
+        const oldVersionInfo = this.oldVersionInfo;
+        if (!docPhaseInfo && !oldVersionInfo) {
             return;
         }
 
@@ -806,10 +807,10 @@ export default class RedocReference extends LightningElement {
             wrapper.appendChild(docPhaseElement);
         }
 
-        if (this.oldVersionInfo) {
+        if (oldVersionInfo) {
             const versionBanner = createElement("doc-phase", { is: DocPhase });
             Object.assign(versionBanner, {
-                docPhaseInfo: this.oldVersionInfo,
+                docPhaseInfo: oldVersionInfo,
                 dismissible: true,
                 iconName: "warning"
             });

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.html

@@ -24,6 +24,14 @@
             lwc:if={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
+        <doc-phase
+            slot="version-banner"
+            lwc:if={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
         <slot></slot>
     </doc-content-layout>
 </template>

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.ts

@@ -1,6 +1,12 @@
-import { LightningElement, api } from "lwc";
+import { LightningElement, api, track } from "lwc";
 import { toJson } from "dxUtils/normalizers";
-import type { OptionWithLink, TreeNode } from "typings/custom";
+import type { VersionedNode } from "dxUtils/topicVersion";
+import {
+    findTopicVersionForCurrentPage,
+    latestHrefForCurrentPage
+} from "dxUtils/topicVersion";
+import { oldVersionDocInfo } from "docUtils/utils";
+import type { DocPhaseInfo, OptionWithLink, TreeNode } from "typings/custom";
 
 /**
  * Per-topic type emitted by the docs content-type parser
@@ -10,9 +16,36 @@ import type { OptionWithLink, TreeNode } from "typings/custom";
  */
 const TOPIC_TYPE_SPEC = "spec";
 
+/**
+ * Walks down the first-child chain and returns the first markdown content
+ * page found, descending through nested content-less parents. Returns
+ * undefined if the chain breaks on a spec or external link before reaching a
+ * content page.
+ */
+function firstChildContentPage(node: TreeNode): TreeNode | undefined {
+    const firstChild = node.children?.[0];
+    if (!firstChild) {
+        return undefined;
+    }
+
+    const isSpec =
+        (firstChild as { topicType?: string }).topicType === TOPIC_TYPE_SPEC;
+    const isExternal = firstChild.link?.target === "_blank";
+    if (isSpec || isExternal) {
+        return undefined;
+    }
+
+    if (firstChild.link?.href) {
+        return firstChild;
+    }
+
+    return firstChildContentPage(firstChild);
+}
+
 /**
  * Translates per-topic `topicType` into the generic `showForwardArrow` flag
- * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc).
+ * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc),
+ * and redirects content-less parent topics whose first child is a content page
  */
 function decorateTopicsWithForwardArrow(
     topics:
@@ -33,6 +66,21 @@ function decorateTopicsWithForwardArrow(
                 decorated.children
             );
         }
+
+        /** Redirect a parent that has no content of its own to its first child
+         * but only when that first child is itself a content page
+         */
+        const isContentlessParent =
+            !!decorated.children?.length && !decorated.link?.href;
+
+        if (isContentlessParent) {
+            decorated.redirectToChild = true;
+            const firstChild = firstChildContentPage(topic);
+            if (firstChild?.link) {
+                decorated.link = { ...firstChild.link };
+            }
+        }
+
         return decorated;
     });
 }
@@ -67,6 +115,9 @@ export default class UnifiedContentLayout extends LightningElement {
 
     private _docPhaseInfo: string | null = null;
     private _sidebarContent: unknown = null;
+    private _oldVersionInfo: DocPhaseInfo | null = null;
+
+    @track showVersionBanner = false;
 
     @api
     get docPhaseInfo(): string | null {
@@ -83,9 +134,40 @@ export default class UnifiedContentLayout extends LightningElement {
     }
 
     set sidebarContent(value: string) {
-        this._sidebarContent = decorateTopicsWithForwardArrow(
-            toJson(value)?.topics
-        );
+        const topics = decorateTopicsWithForwardArrow(toJson(value)?.topics);
+        this._sidebarContent = topics;
+        this.updateTopicVersionBanner(topics as VersionedNode[] | undefined);
+    }
+
+    get oldVersionInfo(): DocPhaseInfo | null {
+        return this._oldVersionInfo;
+    }
+
+    handleDismissVersionBanner(): void {
+        this.showVersionBanner = false;
+    }
+
+    /**
+     * Same banner references use when the reader is on an older version.
+     * Topic versions are not a separate page property: the sidebar tree
+     * carries each version's switching URL, and the current pathname says
+     * which one is open.
+     */
+    private updateTopicVersionBanner(
+        topics: VersionedNode[] | undefined
+    ): void {
+        const match = findTopicVersionForCurrentPage(topics);
+        const latest = match?.node.versions?.[0];
+        const latestHref = latestHrefForCurrentPage(match?.node.versions);
+
+        if (match && latest && match.version.id !== latest.id && latestHref) {
+            this._oldVersionInfo = oldVersionDocInfo(latestHref);
+            this.showVersionBanner = true;
+            return;
+        }
+
+        this._oldVersionInfo = null;
+        this.showVersionBanner = false;
     }
 
     private get enableFooter(): boolean {

package/src/modules/doc/versionPicker/versionPicker.css

@@ -120,6 +120,16 @@ dx-type-badge.not-latest-badge {
         var(--dx-g-spacing-sm);
     --dx-c-dropdown-option-border-radius: 0;
     --dx-c-popover-border: none;
+
+    /* Hug the labels (down to the shortest) but never wider than the ToC
+       content: 296px on desktop, and on the smallest breakpoint the sidebar
+       variable grows with the viewport up to 720px. Long labels wrap inside
+       that cap. */
+    --dx-c-dropdown-menu-max-width: var(--doc-version-picker-width, 296px);
+    --dx-c-dropdown-fit-white-space: normal;
+    --dx-c-dropdown-fit-overflow: hidden;
+    --dx-c-dropdown-fit-text-overflow: clip;
+    --dx-c-dropdown-option-overflow-wrap: anywhere;
 }
 
 .version-picker-button-small {

package/src/modules/doc/versionPicker/versionPicker.html

@@ -16,7 +16,7 @@
             analytics-event="custEv_docVersionSelect"
             analytics-payload={analyticsPayload}
             value={selectedVersion.id}
-            full-width="true"
+            width-mode={dropdownWidthMode}
             onchange={onVersionChange}
         >
             <dx-button

package/src/modules/doc/versionPicker/versionPicker.ts

@@ -124,6 +124,12 @@ export default class VersionPicker extends LightningElement {
         return this.small ? "version-picker-dropdown-small" : undefined;
     }
 
+    // "full" matches the trigger (ToC width). "fit-end" sizes to the labels,
+    // caps at the ToC width, and opens inward.
+    private get dropdownWidthMode(): "full" | "fit-end" {
+        return this.small ? "fit-end" : "full";
+    }
+
     private get triggerClass(): string {
         return cx(
             "version-picker-button",

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -148,10 +148,6 @@ dx-toc {
     .content-body {
         margin-top: var(--dx-c-content-vertical-spacing);
     }
-
-    .content-body-doc-phase-container {
-        border-left: 0;
-    }
 }
 
 @media screen and (max-width: 768px) {
@@ -163,6 +159,10 @@ dx-toc {
         flex-direction: column;
     }
 
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+
     .content-body-container {
         padding-right: 0;
         padding-left: 0;