@salesforcedevs/docs-components 1.28.7 → 1.29.0-llm-alpha

package/lwc.config.json

@@ -5,6 +5,7 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
+        "doc/aiToolbar",
         "doc/amfReference",
         "doc/banner",
         "doc/localeBanner",

package/package.json

@@ -1,29 +1,29 @@
 {
-    "name": "@salesforcedevs/docs-components",
-    "version": "1.28.7",
-    "description": "Docs Lightning web components for DSC",
-    "license": "MIT",
-    "main": "index.js",
-    "engines": {
-        "node": "22.x"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@api-components/amf-helper-mixin": "4.5.29",
-        "classnames": "2.5.1",
-        "dompurify": "3.2.4",
-        "kagekiri": "1.4.2",
-        "lodash.orderby": "4.6.0",
-        "lodash.uniqby": "4.7.0",
-        "query-string": "7.1.3",
-        "sentence-case": "3.0.4"
-    },
-    "devDependencies": {
-        "@types/classnames": "2.3.1",
-        "@types/lodash.orderby": "4.6.9",
-        "@types/lodash.uniqby": "4.7.9"
-    },
-    "gitHead": "aedcb1c0ab8cb16ff85f61c0d3ed0c908502d843"
-}
+  "name": "@salesforcedevs/docs-components",
+  "version": "1.29.0-llm-alpha",
+  "description": "Docs Lightning web components for DSC",
+  "license": "MIT",
+  "main": "index.js",
+  "engines": {
+    "node": "22.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@api-components/amf-helper-mixin": "4.5.29",
+    "classnames": "2.5.1",
+    "dompurify": "3.2.4",
+    "kagekiri": "1.4.2",
+    "lodash.orderby": "4.6.0",
+    "lodash.uniqby": "4.7.0",
+    "query-string": "7.1.3",
+    "sentence-case": "3.0.4"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.3.1",
+    "@types/lodash.orderby": "4.6.9",
+    "@types/lodash.uniqby": "4.7.9"
+  },
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+}

package/src/modules/doc/aiToolbar/aiToolbar.css

@@ -0,0 +1,40 @@
+@import "dxHelpers/reset";
+
+:host {
+    display: inline-flex;
+}
+
+.ai-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+.toolbar-button {
+    --dx-g-button-inline-color: var(--dx-g-blue-vibrant-50);
+    --dx-g-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-horizontal-spacing: 0;
+    --dx-c-button-icon-vertical-align: middle;
+}
+
+.toolbar-button::part(content) {
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    line-height: var(--dx-g-spacing-mlg);
+    letter-spacing: 0.07px;
+}
+
+.divider {
+    width: 1px;
+    height: var(--dx-g-spacing-md);
+    background-color: var(--dx-g-gray-70);
+}
+
+@media screen and (max-width: 480px) {
+    .toolbar-button_copy-url,
+    .divider_copy-url {
+        display: none;
+    }
+}

package/src/modules/doc/aiToolbar/aiToolbar.html

@@ -0,0 +1,53 @@
+<template>
+    <div class="ai-toolbar">
+        <dx-tooltip placement="top-right" label={copyMarkdownLabel}>
+            <dx-button
+                class="toolbar-button"
+                variant="inline"
+                size="small"
+                icon-sprite="utility"
+                icon-symbol="copy"
+                icon-size="medium"
+                icon-position="right"
+                aria-label="Copy as Markdown"
+                onclick={handleCopyMarkdown}
+            >
+                Copy as Markdown
+            </dx-button>
+        </dx-tooltip>
+
+        <div class="divider"></div>
+
+        <dx-button
+            class="toolbar-button"
+            variant="inline"
+            size="small"
+            icon-sprite="utility"
+            icon-symbol="new_window"
+            icon-size="medium"
+            icon-position="right"
+            aria-label="View as Markdown"
+            onclick={handleViewMarkdown}
+        >
+            View as Markdown
+        </dx-button>
+
+        <div class="divider divider_copy-url"></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="Copy URL to Markdown"
+                onclick={handleCopyUrl}
+            >
+                Copy URL to Markdown
+            </dx-button>
+        </dx-tooltip>
+    </div>
+</template>

package/src/modules/doc/aiToolbar/aiToolbar.ts

@@ -0,0 +1,83 @@
+import { LightningElement } from "lwc";
+
+const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
+const COPIED_TOOLTIP_LABEL = "Copied!";
+const COPIED_TOOLTIP_RESET_MS = 2000;
+
+export default class AiToolbar extends LightningElement {
+    copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+    copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+
+    private copyTooltipResetTimeout: number | null = null;
+
+    async handleCopyMarkdown() {
+        const markdownUrl = this.getMarkdownUrl();
+        if (!markdownUrl) {
+            return;
+        }
+
+        try {
+            const response = await fetch(markdownUrl);
+            if (!response.ok) {
+                return;
+            }
+            const markdown = await response.text();
+            await navigator.clipboard.writeText(markdown);
+            this.flashCopied("copyMarkdownLabel");
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    handleViewMarkdown() {
+        const markdownUrl = this.getMarkdownUrl();
+        if (!markdownUrl) {
+            return;
+        }
+        window.open(markdownUrl, "_blank", "noopener,noreferrer");
+    }
+
+    async handleCopyUrl() {
+        const markdownUrl = this.getMarkdownUrl();
+        if (!markdownUrl) {
+            return;
+        }
+
+        try {
+            await navigator.clipboard.writeText(markdownUrl);
+            this.flashCopied("copyUrlLabel");
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    /**
+     * Returns the `.md` equivalent of the current page URL with any hash and
+     * query string stripped, or `null` when the current page does not end
+     * with `.html`.
+     */
+    private getMarkdownUrl(): string | null {
+        const url = new URL(window.location.href);
+        url.hash = "";
+        url.search = "";
+
+        if (!url.pathname.endsWith(".html")) {
+            return null;
+        }
+
+        url.pathname = url.pathname.replace(/\.html$/, ".md");
+        return url.toString();
+    }
+
+    private flashCopied(labelKey: "copyMarkdownLabel" | "copyUrlLabel") {
+        if (this.copyTooltipResetTimeout !== null) {
+            window.clearTimeout(this.copyTooltipResetTimeout);
+        }
+        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);
+    }
+}

package/src/modules/doc/aiToolbar/aiToolbarMocks.ts

@@ -0,0 +1,48 @@
+import { http, HttpResponse } from "msw";
+
+/**
+ * Mocks for the AI toolbar so stories never hit the real
+ * docs backend. Any story rendering `doc-ai-toolbar` (directly or via
+ * `doc-content-layout`) must register `aiToolbarMswHandlers` and call
+ * `interceptWindowOpenForAiToolbar()`.
+ */
+export const DUMMY_MARKDOWN_CONTENT = `# Dummy Markdown
+
+Storybook serves this placeholder content in place of the real markdown
+that the docs backend would return for the current page. It exists so
+the "Copied" tooltip, the "View as Markdown" new tab, and the
+"Copy URL to Markdown" clipboard behavior are all exercisable in
+storybook without hitting the live backend.
+
+- Item 1
+- Item 2
+- Item 3
+`;
+
+export const DUMMY_MARKDOWN_DATA_URL = `data:text/markdown;charset=utf-8,${encodeURIComponent(
+    DUMMY_MARKDOWN_CONTENT
+)}`;
+
+/** Intercepts any `.md` GET request and returns the dummy markdown. */
+export const aiToolbarMswHandlers = [
+    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT))
+];
+
+let windowOpenIntercepted = false;
+
+/** Redirects `window.open` calls for `.md` URLs to the dummy markdown data URL (MSW does not cover new tabs). */
+export function interceptWindowOpenForAiToolbar() {
+    if (windowOpenIntercepted) {
+        return;
+    }
+    windowOpenIntercepted = true;
+
+    const originalOpen = window.open.bind(window);
+    window.open = ((url?: string | URL, target?: string, features?: string) => {
+        const stringUrl = url?.toString() ?? "";
+        if (stringUrl.endsWith(".md")) {
+            return originalOpen(DUMMY_MARKDOWN_DATA_URL, target, features);
+        }
+        return originalOpen(url ?? "", target, features);
+    }) as typeof window.open;
+}

package/src/modules/doc/amfReference/amfReference.ts

@@ -37,6 +37,7 @@ type NavigationItem = {
     isExpanded: boolean;
     children: ParsedMarkdownTopic[];
     isChildrenLoading: boolean;
+    showForwardArrow?: boolean;
 };
 
 export default class AmfReference extends LightningElement {
@@ -204,6 +205,7 @@ export default class AmfReference extends LightningElement {
 
     _boundOnApiNavigationChanged;
     _boundUpdateSelectedItemFromUrlQuery;
+    _boundOnPageShow;
 
     constructor() {
         super();
@@ -212,6 +214,7 @@ export default class AmfReference extends LightningElement {
             this.onApiNavigationChanged.bind(this);
         this._boundUpdateSelectedItemFromUrlQuery =
             this.updateSelectedItemFromUrlQuery.bind(this);
+        this._boundOnPageShow = this.onPageShow.bind(this);
     }
 
     connectedCallback(): void {
@@ -223,6 +226,7 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
+        window.addEventListener("pageshow", this._boundOnPageShow);
     }
 
     disconnectedCallback(): void {
@@ -234,6 +238,22 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
+        window.removeEventListener("pageshow", this._boundOnPageShow);
+    }
+
+    /**
+     * On bfcache restore, reset the sidebar selection so the tree re-syncs
+     * its highlighted tile with the current URL.
+     */
+    protected onPageShow(event: PageTransitionEvent): void {
+        if (!event.persisted) {
+            return;
+        }
+        const currentPath = window.location.pathname;
+        this.selectedSidebarValue = "";
+        Promise.resolve().then(() => {
+            this.selectedSidebarValue = currentPath;
+        });
     }
 
     renderedCallback(): void {
@@ -443,16 +463,21 @@ export default class AmfReference extends LightningElement {
             let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
-                if (amfConfig.isSelected) {
-                    const amfPromise = this.fetchAmf(amfConfig).then(
-                        (amfJson) => {
-                            this.updateModel(amfConfig.id, amfJson);
-                            this.assignNavigationItemsFromAmf(amfConfig, index);
-                        }
-                    );
-                    this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
+                if (amfConfig.amf) {
+                    if (amfConfig.isSelected) {
+                        const amfPromise = this.fetchAmf(amfConfig).then(
+                            (amfJson) => {
+                                this.updateModel(amfConfig.id, amfJson);
+                                this.assignNavigationItemsFromAmf(
+                                    amfConfig,
+                                    index
+                                );
+                            }
+                        );
+                        this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
+                    }
+                    isChildrenLoading = true;
                 }
-                isChildrenLoading = true;
             } else {
                 const isExpandChildrenEnabled = this.isExpandChildrenEnabled(
                     amfConfig.id
@@ -473,13 +498,30 @@ export default class AmfReference extends LightningElement {
                     amfConfig.isSelected ||
                     this.isExpandChildrenEnabled(amfConfig.id),
                 children: navItemChildren,
-                isChildrenLoading
+                isChildrenLoading,
+                showForwardArrow: this.resolveNavRenderWith(amfConfig)
             };
             this.parentReferenceUrls.push(amfConfig.href);
         }
         this.navigation = navAmfOrder;
     }
 
+    /**
+     * Determines whether the sidebar tile should render a forward arrow for
+     * this reference. Honors `redoc` set on the config, and also infers it
+     * for non-markdown references that have no AMF URL (i.e. those rendered
+     * by Redoc).
+     */
+    private resolveNavRenderWith(amfConfig: AmfConfig): boolean {
+        if (amfConfig.renderWith) {
+            return amfConfig.renderWith === "redoc";
+        }
+        return (
+            amfConfig.referenceType !== REFERENCE_TYPES.markdown &&
+            !amfConfig.amf
+        );
+    }
+
     /**
      * Returns a boolean indicating whether the children should be expanded or not.
      */

package/src/modules/doc/amfReference/types.ts

@@ -78,6 +78,11 @@ export interface AmfConfig {
 
     // required for markdown based references
     topic?: ParsedMarkdownTopic;
+
+    /**
+     * Required for rendering the arrow on LNB
+     */
+    renderWith?: string;
 }
 
 export interface ParsedTopicModel {

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

@@ -1,11 +1,15 @@
 /* eslint-disable @lwc/lwc/no-document-query */
-import { LightningElement, api, track } from "lwc";
-import { closest } from "kagekiri";
+import { LightningElement, api, createElement, track } from "lwc";
+import { closest, querySelector } from "kagekiri";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import type { OptionWithLink } from "typings/custom";
 import { buildDocLinkClickHandler } from "dxUtils/analytics";
+import AiToolbar from "doc/aiToolbar";
+
+const AI_TOOLBAR_TAG = "doc-ai-toolbar";
+const PAGE_HEADING_SELECTOR = "h1";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -95,6 +99,17 @@ export default class ContentLayout extends LightningElement {
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
     @api origin: string | null = null;
 
+    /** Controls whether the AI toolbar is displayed. */
+    @api
+    get showAiToolbar() {
+        return this._showAiToolbar;
+    }
+    set showAiToolbar(value) {
+        this._showAiToolbar = normalizeBoolean(value);
+        this.updateAiToolbar();
+    }
+    private _showAiToolbar = false;
+
     @api
     get breadcrumbs() {
         return this._breadcrumbs;
@@ -152,6 +167,7 @@ export default class ContentLayout extends LightningElement {
     protected hasRendered: boolean = false;
     protected contentLoaded: boolean = false;
     protected sidebarOpen: boolean = false;
+    protected aiToolbarElement: HTMLElement | null = null;
 
     get shouldDisplayFeedback() {
         return this.contentLoaded && typeof Sprig !== "undefined";
@@ -257,6 +273,8 @@ export default class ContentLayout extends LightningElement {
         window.addEventListener("scroll", this.adjustNavPosition);
         window.addEventListener("resize", this.adjustNavPosition);
 
+        this.updateAiToolbar();
+
         if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
@@ -266,6 +284,47 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
+    /**
+     * Inserts the AI toolbar into the slotted content immediately after the
+     * first H1 found inside this layout. The H1 typically lives deep in
+     * `doc-content`'s shadow (rendered via `lwc:dom="manual"`), so we use
+     * kagekiri's shadow-piercing query to locate it from here.
+     */
+    protected updateAiToolbar(): void {
+        if (!this.showAiToolbar) {
+            this.removeAiToolbar();
+            return;
+        }
+
+        const heading = querySelector(
+            PAGE_HEADING_SELECTOR,
+            this.template.host
+        ) as HTMLElement | null;
+
+        if (!heading) {
+            return;
+        }
+
+        if (this.aiToolbarElement?.previousElementSibling === heading) {
+            return;
+        }
+
+        this.removeAiToolbar();
+
+        const toolbar = createElement(AI_TOOLBAR_TAG, {
+            is: AiToolbar
+        }) as unknown as HTMLElement;
+        heading.parentNode?.insertBefore(toolbar, heading.nextSibling);
+        this.aiToolbarElement = toolbar;
+    }
+
+    protected removeAiToolbar(): void {
+        if (this.aiToolbarElement) {
+            this.aiToolbarElement.remove();
+            this.aiToolbarElement = null;
+        }
+    }
+
     disconnectedCallback(): void {
         this.disconnectObserver();
         window.removeEventListener(
@@ -281,6 +340,8 @@ export default class ContentLayout extends LightningElement {
 
         // Remove link click handler
         this.template.removeEventListener("click", this.handleLinkClick);
+
+        this.removeAiToolbar();
     }
 
     restoreScroll() {
@@ -523,6 +584,7 @@ export default class ContentLayout extends LightningElement {
 
     onSlotChange(): void {
         this.updateRNB();
+        this.updateAiToolbar();
         this.contentLoaded = true;
     }
 

package/src/modules/doc/header/header.html

@@ -13,7 +13,6 @@
                         onclick={onLinkClick}
                         class="dev-center-content"
                     >
-                        <dx-icon symbol="back"></dx-icon>
                         <dx-icon
                             class="brand-icon"
                             lwc:if={devCenter.icon}

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

@@ -2,6 +2,7 @@
 import { createElement, LightningElement, api } from "lwc";
 import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
+import DxIcon from "dx/icon";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
@@ -14,11 +15,19 @@ declare global {
 
 declare const Sprig: (eventType: string, eventName: string) => void;
 
+type ReferenceTopic = {
+    link?: { href?: string };
+    children?: ReferenceTopic[];
+};
+
 type ReferenceItem = {
     source: string;
     href: string;
+    title?: string;
     isSelected?: boolean;
     docPhase?: string | null;
+    referenceType?: string;
+    topic?: ReferenceTopic;
 };
 
 type ReferenceConfig = {
@@ -28,6 +37,7 @@ type ReferenceConfig = {
 const SCROLL_THROTTLE_DELAY = 50;
 const ELEMENT_TIMEOUT = 10000;
 const ELEMENT_CHECK_INTERVAL = 100;
+const REFERENCES_SEGMENT = "/references/";
 
 export default class RedocReference extends LightningElement {
     private _referenceConfig: ReferenceConfig = { refList: [] };
@@ -38,6 +48,12 @@ export default class RedocReference extends LightningElement {
     private docPhaseWrapperElement: Element | null = null;
     private lastSidebarTop = 0;
 
+    /**
+     * History length captured at mount (pre-Redoc), used by `onBackClick` to
+     * distinguish in-tab navigation (> 1) from a fresh entry (=== 1).
+     */
+    private initialHistoryLength = 0;
+
     showError = false;
 
     @api
@@ -71,6 +87,75 @@ export default class RedocReference extends LightningElement {
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
     @api origin: string | null = null;
 
+    /**
+     * Project title (same value passed to `<doc-header>` as `subtitle`). Used
+     * inside the Redoc-rendered UI to label the parent project.
+     */
+    @api projectTitle: string | null = "All Reference";
+
+    get specTitle(): string | null {
+        return this.getSelectedReference()?.title ?? null;
+    }
+
+    /**
+     * Whether to show the project header (only for multi-spec reference sets).
+     */
+    get showRedocHeader(): boolean {
+        const refCount = this._referenceConfig?.refList?.length ?? 0;
+        const isMultiSpecSet = refCount > 1;
+        return isMultiSpecSet && !!(this.projectTitle || this.specTitle);
+    }
+
+    /**
+     * Navigates back to reference doc.
+     */
+    private onBackClick = (event: Event): void => {
+        event.preventDefault();
+        const referrerHref = this.getSameOriginReferrerHref();
+        if (referrerHref) {
+            window.location.href = referrerHref;
+            return;
+        }
+        const fallbackHref = this.getReferencesRootHref();
+        if (fallbackHref) {
+            window.location.href = fallbackHref;
+        }
+    };
+
+    /**
+     * Returns the referrer URL when the page was reached via in-tab navigation
+     * from a same-origin page; otherwise `null`. Both `initialHistoryLength`
+     * and `document.referrer` are checked since neither signal is reliable on
+     * its own.
+     */
+    private getSameOriginReferrerHref(): string | null {
+        if (this.initialHistoryLength <= 1 || !document.referrer) {
+            return null;
+        }
+        try {
+            const referrerUrl = new URL(document.referrer);
+            if (referrerUrl.origin !== window.location.origin) {
+                return null;
+            }
+            return referrerUrl.href;
+        } catch {
+            return null;
+        }
+    }
+
+    /**
+     * Derives the project's `.../references` root from the current URL by
+     * trimming any trailing reference id (and deeper segments). Returns null
+     * when the URL doesn't contain a `/references` segment.
+     */
+    private getReferencesRootHref(): string | null {
+        const { pathname } = window.location;
+        const idx = pathname.lastIndexOf(REFERENCES_SEGMENT);
+        return idx === -1
+            ? null
+            : pathname.slice(0, idx + REFERENCES_SEGMENT.length);
+    }
+
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
         return (
@@ -79,6 +164,10 @@ export default class RedocReference extends LightningElement {
     }
 
     connectedCallback(): void {
+        // Snapshot history length before Redoc pushes its own hash entries,
+        // so it reflects real in-tab navigation rather than Redoc's churn.
+        this.initialHistoryLength = window.history.length;
+
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
     }
@@ -304,6 +393,9 @@ export default class RedocReference extends LightningElement {
 
             this.appendFooterItems(apiContentDiv);
 
+            // Inject the multi-spec project header into Redoc's left menu only.
+            this.insertProjectHeaderInMenu(redocContainer);
+
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
                 this.updateRedocThirdColumnStyle(redocContainer);
@@ -316,6 +408,65 @@ export default class RedocReference extends LightningElement {
         }
     }
 
+    /**
+     * Inserts the project header into Redoc for multi-spec reference sets.
+     */
+    private insertProjectHeaderInMenu(redocContainer: HTMLElement): void {
+        if (!this.showRedocHeader) {
+            return;
+        }
+
+        // Select the LNB and content area of Redoc and insert the requried header.
+        redocContainer
+            .querySelectorAll<HTMLElement>(".menu-content, .api-content")
+            .forEach((target) => {
+                target.insertBefore(
+                    this.buildProjectHeaderDom(),
+                    target.firstChild
+                );
+            });
+    }
+
+    /**
+     * Builds a fresh project-title/spec-title header DOM node.
+     */
+    private buildProjectHeaderDom(): HTMLElement {
+        const wrapper = document.createElement("div");
+        wrapper.className = "redoc-project-header";
+
+        if (this.projectTitle) {
+            const backLink = document.createElement("a");
+            backLink.className = "redoc-project-back";
+            backLink.href = "#";
+            backLink.addEventListener("click", this.onBackClick);
+
+            const icon = createElement("dx-icon", { is: DxIcon });
+            Object.assign(icon, {
+                sprite: "utility",
+                symbol: "back",
+                size: "medium"
+            });
+            icon.classList.add("redoc-project-back-arrow");
+
+            const label = document.createElement("span");
+            label.className = "redoc-project-title";
+            label.textContent = this.projectTitle;
+
+            backLink.appendChild(icon);
+            backLink.appendChild(label);
+            wrapper.appendChild(backLink);
+        }
+
+        if (this.specTitle) {
+            const specEl = document.createElement("h2");
+            specEl.className = "redoc-spec-title dx-text-display-7";
+            specEl.textContent = this.specTitle;
+            wrapper.appendChild(specEl);
+        }
+
+        return wrapper;
+    }
+
     // Waits for Redoc's API content element to be rendered
     private async waitForApiContent(
         container: HTMLElement

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.