@salesforcedevs/docs-components 1.28.7-alpha.9 → 1.29.0-alpha1

package/lwc.config.json

@@ -5,6 +5,7 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
+        "doc/apiPlayground",
         "doc/amfReference",
         "doc/breadcrumbs",
         "doc/componentPlayground",

package/package.json

@@ -1,29 +1,29 @@
 {
-    "name": "@salesforcedevs/docs-components",
-    "version": "1.28.7-alpha.9",
-    "description": "Docs Lightning web components for DSC",
-    "license": "MIT",
-    "main": "index.js",
-    "engines": {
-        "node": "20.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": "c742ad7d26b81c3e78806e5dc0641c23c640f898"
-}
+  "name": "@salesforcedevs/docs-components",
+  "version": "1.29.0-alpha1",
+  "description": "Docs Lightning web components for DSC",
+  "license": "MIT",
+  "main": "index.js",
+  "engines": {
+    "node": "20.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"
+  },
+  "stableVersion": "1.29.0-alpha1"
+}

package/src/modules/doc/apiPlayground/apiPlayground.css

@@ -0,0 +1,186 @@
+:host {
+    display: block;
+}
+
+.playground-container {
+    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
+    border-radius: 8px;
+    padding: 20px;
+    margin: 16px 0;
+    background: var(--dx-g-color-surface-primary, #ffffff);
+}
+
+.playground-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.method-badge {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+
+.method-get {
+    background-color: #61affe;
+}
+
+.method-post {
+    background-color: #49cc90;
+}
+
+.method-put {
+    background-color: #fca130;
+}
+
+.method-delete {
+    background-color: #f93e3e;
+}
+
+.method-patch {
+    background-color: #50e3c2;
+}
+
+.method-options,
+.method-head {
+    background-color: #9012fe;
+}
+
+.operation-path {
+    font-family: var(--dx-g-font-family-mono, monospace);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--dx-g-color-text-primary, #181818);
+}
+
+.params-section {
+    margin-bottom: 16px;
+}
+
+.section-title {
+    font-size: 13px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: var(--dx-g-color-text-secondary, #444);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.field-group {
+    margin-bottom: 12px;
+}
+
+.field-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 4px;
+    color: var(--dx-g-color-text-primary, #181818);
+}
+
+.required-marker {
+    color: #f93e3e;
+    margin-left: 2px;
+}
+
+.field-input,
+.server-select {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: var(--dx-g-font-family-mono, monospace);
+    background: var(--dx-g-color-surface-primary, #ffffff);
+    color: var(--dx-g-color-text-primary, #181818);
+    box-sizing: border-box;
+}
+
+.field-input:focus,
+.server-select:focus {
+    outline: none;
+    border-color: var(--dx-g-color-brand, #0070d2);
+    box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
+}
+
+.body-textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
+    border-radius: 4px;
+    font-size: 13px;
+    font-family: var(--dx-g-font-family-mono, monospace);
+    background: var(--dx-g-color-surface-primary, #ffffff);
+    color: var(--dx-g-color-text-primary, #181818);
+    resize: vertical;
+    box-sizing: border-box;
+}
+
+.body-textarea:focus {
+    outline: none;
+    border-color: var(--dx-g-color-brand, #0070d2);
+    box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
+}
+
+.actions {
+    margin: 16px 0;
+}
+
+.error-display {
+    margin-top: 16px;
+    padding: 12px;
+    border-radius: 4px;
+    background-color: #fef0ef;
+    border: 1px solid #f93e3e;
+}
+
+.error-message {
+    color: #c23934;
+    font-size: 13px;
+    margin: 0;
+}
+
+.response-section {
+    margin-top: 16px;
+}
+
+.response-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.status-code {
+    font-weight: 700;
+    font-size: 14px;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.status-success {
+    color: #256029;
+    background-color: #e6f9ec;
+}
+
+.status-client-error {
+    color: #974b00;
+    background-color: #fff3e0;
+}
+
+.status-server-error {
+    color: #c23934;
+    background-color: #fef0ef;
+}
+
+.response-duration {
+    font-size: 12px;
+    color: var(--dx-g-color-text-tertiary, #999);
+}

package/src/modules/doc/apiPlayground/apiPlayground.html

@@ -0,0 +1,136 @@
+<template>
+    <div class="playground-container">
+        <div class="playground-header">
+            <span class={methodBadgeClass}>{operation.method}</span>
+            <span class="operation-path">{operation.path}</span>
+        </div>
+
+        <template lwc:if={showServerSelector}>
+            <div class="field-group">
+                <label class="field-label" for="server-select">Server</label>
+                <select id="server-select" class="server-select" aria-label="Server" onchange={handleServerChange}>
+                    <template for:each={serverOptions} for:item="server">
+                        <option key={server.value} value={server.value}>
+                            {server.label}
+                        </option>
+                    </template>
+                </select>
+            </div>
+        </template>
+
+        <template lwc:if={hasPathParams}>
+            <div class="params-section">
+                <h4 class="section-title">Path Parameters</h4>
+                <template for:each={pathParams} for:item="param">
+                    <div class="field-group" key={param.name}>
+                        <label class="field-label">
+                            {param.name}
+                            <template lwc:if={param.required}>
+                                <span class="required-marker">*</span>
+                            </template>
+                        </label>
+                        <input
+                            type="text"
+                            class="field-input"
+                            data-param={param.name}
+                            value={param.value}
+                            placeholder={param.description}
+                            onchange={handleParamChange}
+                        />
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <template lwc:if={hasQueryParams}>
+            <div class="params-section">
+                <h4 class="section-title">Query Parameters</h4>
+                <template for:each={queryParams} for:item="param">
+                    <div class="field-group" key={param.name}>
+                        <label class="field-label">
+                            {param.name}
+                            <template lwc:if={param.required}>
+                                <span class="required-marker">*</span>
+                            </template>
+                        </label>
+                        <input
+                            type="text"
+                            class="field-input"
+                            data-param={param.name}
+                            value={param.value}
+                            placeholder={param.description}
+                            onchange={handleParamChange}
+                        />
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <template lwc:if={hasHeaderParams}>
+            <div class="params-section">
+                <h4 class="section-title">Headers</h4>
+                <template for:each={headerParams} for:item="param">
+                    <div class="field-group" key={param.name}>
+                        <label class="field-label">
+                            {param.name}
+                            <template lwc:if={param.required}>
+                                <span class="required-marker">*</span>
+                            </template>
+                        </label>
+                        <input
+                            type="text"
+                            class="field-input"
+                            data-param={param.name}
+                            value={param.value}
+                            placeholder={param.description}
+                            onchange={handleParamChange}
+                        />
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <template lwc:if={hasRequestBody}>
+            <div class="params-section">
+                <h4 class="section-title">Request Body</h4>
+                <textarea
+                    class="body-textarea"
+                    value={requestBody}
+                    onchange={handleBodyChange}
+                    rows="8"
+                ></textarea>
+            </div>
+        </template>
+
+        <div class="actions">
+            <dx-button
+                variant="brand"
+                onclick={handleSendRequest}
+                disabled={loading}
+            >
+                <template lwc:if={loading}>Sending...</template>
+                <template lwc:else>Send Request</template>
+            </dx-button>
+        </div>
+
+        <template lwc:if={hasError}>
+            <div class="error-display">
+                <p class="error-message">{error}</p>
+            </div>
+        </template>
+
+        <template lwc:if={hasResponse}>
+            <div class="response-section">
+                <div class="response-header">
+                    <span class={responseStatusClass}>
+                        {response.status} {response.statusText}
+                    </span>
+                    <span class="response-duration">{response.duration}ms</span>
+                </div>
+                <dx-code-block
+                    language={responseLanguage}
+                >{formattedResponseBody}</dx-code-block>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/doc/apiPlayground/apiPlayground.ts

@@ -0,0 +1,240 @@
+import { LightningElement, api, track } from "lwc";
+import type {
+    OperationDefinition,
+    ParameterDefinition
+} from "docUtils/openApiParser";
+import {
+    generateSampleFromSchema,
+    resolveRef
+} from "docUtils/openApiParser";
+import {
+    buildRequestUrl,
+    executeRequest
+} from "docUtils/apiRequestExecutor";
+import type { ApiResponse } from "docUtils/apiRequestExecutor";
+
+type ParamState = {
+    name: string;
+    in: string;
+    value: string;
+    required: boolean;
+    description: string;
+};
+
+export default class ApiPlayground extends LightningElement {
+    @api operation!: OperationDefinition;
+    @api spec: any;
+
+    @track paramStates: ParamState[] = [];
+    @track requestBody = "";
+    @track selectedServer = "";
+    @track response: ApiResponse | null = null;
+    @track error: string | null = null;
+    @track loading = false;
+
+    private initialized = false;
+
+    renderedCallback(): void {
+        if (!this.initialized && this.operation) {
+            this.initialized = true;
+            this.initializeState();
+        }
+    }
+
+    private initializeState(): void {
+        this.paramStates = (this.operation.parameters ?? []).map(
+            (param: ParameterDefinition) => ({
+                name: param.name,
+                in: param.in,
+                value: param.example !== undefined ? String(param.example) : "",
+                required: param.required,
+                description: param.description
+            })
+        );
+
+        if (this.operation.requestBody) {
+            const content = this.operation.requestBody.content;
+            const jsonContent = content?.["application/json"];
+            if (jsonContent?.schema) {
+                const sample = generateSampleFromSchema(
+                    jsonContent.schema,
+                    this.spec
+                );
+                if (sample !== undefined) {
+                    this.requestBody = JSON.stringify(sample, null, 2);
+                }
+            }
+        }
+
+        if (this.servers.length > 0) {
+            this.selectedServer = this.servers[0].url;
+        }
+    }
+
+    get servers(): Array<{ url: string; description: string }> {
+        return (this.spec?.servers ?? []).map((s: any) => ({
+            url: s.url ?? "",
+            description: s.description ?? s.url ?? ""
+        }));
+    }
+
+    get showServerSelector(): boolean {
+        return this.servers.length > 1;
+    }
+
+    get serverOptions(): Array<{ label: string; value: string }> {
+        return this.servers.map((s) => ({
+            label: s.description || s.url,
+            value: s.url
+        }));
+    }
+
+    get pathParams(): ParamState[] {
+        return this.paramStates.filter((p) => p.in === "path");
+    }
+
+    get queryParams(): ParamState[] {
+        return this.paramStates.filter((p) => p.in === "query");
+    }
+
+    get headerParams(): ParamState[] {
+        return this.paramStates.filter((p) => p.in === "header");
+    }
+
+    get hasPathParams(): boolean {
+        return this.pathParams.length > 0;
+    }
+
+    get hasQueryParams(): boolean {
+        return this.queryParams.length > 0;
+    }
+
+    get hasHeaderParams(): boolean {
+        return this.headerParams.length > 0;
+    }
+
+    get hasRequestBody(): boolean {
+        return this.operation?.requestBody !== null && this.operation?.requestBody !== undefined;
+    }
+
+    get methodBadgeClass(): string {
+        const method = this.operation?.method?.toLowerCase() ?? "get";
+        return `method-badge method-${method}`;
+    }
+
+    get responseStatusClass(): string {
+        if (!this.response) {
+            return "status-code";
+        }
+        const status = this.response.status;
+        if (status >= 200 && status < 300) {
+            return "status-code status-success";
+        }
+        if (status >= 400 && status < 500) {
+            return "status-code status-client-error";
+        }
+        if (status >= 500) {
+            return "status-code status-server-error";
+        }
+        return "status-code";
+    }
+
+    get hasResponse(): boolean {
+        return this.response !== null;
+    }
+
+    get hasError(): boolean {
+        return this.error !== null;
+    }
+
+    get formattedResponseBody(): string {
+        if (!this.response?.body) {
+            return "";
+        }
+        try {
+            return JSON.stringify(JSON.parse(this.response.body), null, 2);
+        } catch {
+            return this.response.body;
+        }
+    }
+
+    get responseLanguage(): string {
+        if (!this.response?.body) {
+            return "text";
+        }
+        try {
+            JSON.parse(this.response.body);
+            return "json";
+        } catch {
+            return "text";
+        }
+    }
+
+    handleParamChange(event: Event): void {
+        const target = event.target as HTMLInputElement;
+        const paramName = target.dataset.param;
+        this.paramStates = this.paramStates.map((p) =>
+            p.name === paramName ? { ...p, value: target.value } : p
+        );
+    }
+
+    handleBodyChange(event: Event): void {
+        const target = event.target as HTMLTextAreaElement;
+        this.requestBody = target.value;
+    }
+
+    handleServerChange(event: Event): void {
+        const target = event.target as HTMLSelectElement;
+        this.selectedServer = target.value;
+    }
+
+    async handleSendRequest(): Promise<void> {
+        this.loading = true;
+        this.response = null;
+        this.error = null;
+
+        try {
+            const pathParams: Record<string, string> = {};
+            const queryParams: Record<string, string> = {};
+            const headers: Record<string, string> = {};
+
+            for (const param of this.paramStates) {
+                if (param.in === "path") {
+                    pathParams[param.name] = param.value;
+                } else if (param.in === "query") {
+                    queryParams[param.name] = param.value;
+                } else if (param.in === "header") {
+                    headers[param.name] = param.value;
+                }
+            }
+
+            const serverUrl =
+                this.selectedServer || this.servers[0]?.url || "";
+            const url = buildRequestUrl(
+                serverUrl,
+                this.operation.path,
+                pathParams,
+                queryParams
+            );
+
+            if (this.hasRequestBody && this.requestBody) {
+                headers["Content-Type"] =
+                    headers["Content-Type"] || "application/json";
+            }
+
+            this.response = await executeRequest({
+                url,
+                method: this.operation.method,
+                headers,
+                body: this.hasRequestBody ? this.requestBody : undefined
+            });
+        } catch (err: any) {
+            this.error =
+                err?.message?.includes("fetch")
+                    ? "Network error: The request failed. This may be due to CORS restrictions or a network issue."
+                    : err?.message || "An unexpected error occurred.";
+        } finally {
+            this.loading = false;
+        }
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -1,34 +1,21 @@
 <template>
     <div class="content">
-        <template lwc:if={showDataCloudSidebar}>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
-        <template lwc:if={showOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-                empty-state-message={emptyStateMessage}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>

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

@@ -1,7 +1,6 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
-import { fetchHasResults } from "dxUtils/dataCloudSearch";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
@@ -109,24 +108,9 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
-    /** Show Data Cloud sidebar only when not using old sidebar and the page has searchable results. */
-    protected get showDataCloudSidebar(): boolean {
-        return !this.useOldSidebar && this.hasDataCloudResults === true;
-    }
-
-    /** Show legacy sidebar when explicitly requested or when Data Cloud has no results. Don't show until we know (avoids flash). */
-    protected get showOldSidebar(): boolean {
-        return (
-            this.useOldSidebar === true || this.hasDataCloudResults === false
-        );
-    }
-
     @track
     protected _sidebarContent: unknown;
 
-    @track
-    protected hasDataCloudResults: boolean | null = null;
-
     protected _breadcrumbs = null;
 
     @track
@@ -197,11 +181,6 @@ export default class ContentLayout extends LightningElement {
     }
 
     connectedCallback(): void {
-        if (!this.useOldSidebar) {
-            fetchHasResults().then((hasResults: boolean) => {
-                this.hasDataCloudResults = hasResults;
-            });
-        }
         const hasParentHighlightListener = closest(
             "doc-xml-content",
             this.template.host
@@ -278,9 +257,7 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarEl =
-            this.template.querySelector("dx-sidebar") ||
-            this.template.querySelector("dx-sidebar-old");
+        const sidebarEl = this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -1,7 +1,6 @@
 <template>
     <div class="content">
         <dx-sidebar-old
-            lwc:if={useOldSidebar}
             class="is-sticky left-nav-bar"
             trees={sidebarContent}
             value={sidebarValue}
@@ -16,16 +15,6 @@
         >
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
-        <dx-sidebar
-            lwc:else
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
@@ -68,7 +57,7 @@
                 </div>
             </div>
             <div lwc:if={showFooter} class="footer-container">
-                <dx-footer variant="no-signup"></dx-footer>
+                <dx-footer variant="no-signup" mfe-config-origin={effectiveFooterOrigin}></dx-footer>
             </div>
         </div>
     </div>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -1,3 +1,4 @@
+import { api } from "lwc";
 import ContentLayout from "doc/contentLayout";
 import cx from "classnames";
 
@@ -15,6 +16,16 @@ export default class LwcContentLayout extends ContentLayout {
     private allTabsCache: any[] | null = null;
     private mainSlotCache: any = null;
 
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
+    @api origin: string | null = null;
+
+    /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
+    get effectiveFooterOrigin(): string {
+        return (
+            this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
+        );
+    }
+
     private setRNBByTab() {
         const tabPanelListItem = this.getTabPanelList();
         this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;

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

@@ -3,8 +3,11 @@ import { createElement, LightningElement, api } from "lwc";
 import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
 import SprigSurvey from "doc/sprigSurvey";
+import ApiPlayground from "doc/apiPlayground";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
+import { parseOpenApiSpec } from "docUtils/openApiParser";
+import type { OperationDefinition } from "docUtils/openApiParser";
 
 declare global {
     interface Window {
@@ -40,6 +43,10 @@ export default class RedocReference extends LightningElement {
 
     showError = false;
 
+    private parsedOperations: OperationDefinition[] = [];
+    private openApiSpec: any = null;
+    private playgroundInstances: Map<string, HTMLElement> = new Map();
+
     @api
     get referenceConfig(): ReferenceConfig {
         return this._referenceConfig;
@@ -68,6 +75,16 @@ export default class RedocReference extends LightningElement {
         this._parentDocPhaseInfo = value;
     }
 
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
+    @api origin: string | null = null;
+
+    /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
+    get effectiveFooterOrigin(): string {
+        return (
+            this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
+        );
+    }
+
     connectedCallback(): void {
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
@@ -89,6 +106,7 @@ export default class RedocReference extends LightningElement {
         // Clean up cached DOM element references to prevent memory leaks
         this.docHeaderElement = null;
         this.docPhaseWrapperElement = null;
+        this.playgroundInstances.clear();
     }
 
     // Displays error UI and logs error message for debugging
@@ -236,6 +254,8 @@ export default class RedocReference extends LightningElement {
                     return;
                 }
 
+                this.fetchAndParseSpec(specUrl);
+
                 window.Redoc.init(
                     specUrl,
                     {
@@ -296,6 +316,7 @@ export default class RedocReference extends LightningElement {
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
                 this.updateRedocThirdColumnStyle(redocContainer);
+                this.injectTryItButtons();
 
                 // Fix initial hash scroll after doc phase insertion
                 this.handleInitialHashScrollFix();
@@ -338,7 +359,7 @@ export default class RedocReference extends LightningElement {
     // Appends footer component to container
     private insertFooter(container: HTMLElement): void {
         const footerElement = createElement("dx-footer", { is: DxFooter });
-        Object.assign(footerElement, { variant: "no-signup" });
+        Object.assign(footerElement, { variant: "no-signup", mfeConfigOrigin: this.effectiveFooterOrigin });
         container.appendChild(footerElement);
     }
 
@@ -400,6 +421,114 @@ export default class RedocReference extends LightningElement {
         );
     }
 
+    // Fetches and parses the OpenAPI spec for Try It playground
+    private async fetchAndParseSpec(specUrl: string): Promise<void> {
+        try {
+            const response = await fetch(specUrl);
+            if (!response.ok) {
+                return;
+            }
+            this.openApiSpec = await response.json();
+            this.parsedOperations = parseOpenApiSpec(this.openApiSpec);
+        } catch {
+            // Non-fatal: playground simply won't be available
+        }
+    }
+
+    // Injects "Try It" toggle buttons into Redoc operation sections
+    private injectTryItButtons(): void {
+        if (this.parsedOperations.length === 0) {
+            return;
+        }
+
+        const redocContainer = this.getRedocContainer();
+        if (!redocContainer) {
+            return;
+        }
+
+        for (const operation of this.parsedOperations) {
+            const sectionId = `operation/${operation.operationId}`;
+            const section = redocContainer.querySelector(
+                `[data-section-id="${sectionId}"]`
+            );
+            if (!section) {
+                continue;
+            }
+
+            // Skip if button already injected
+            if (section.querySelector(".try-it-toggle")) {
+                continue;
+            }
+
+            const button = document.createElement("button");
+            button.className = "try-it-toggle";
+            button.textContent = "Try It";
+            button.setAttribute("type", "button");
+            button.setAttribute("aria-expanded", "false");
+            button.style.cssText =
+                "display:inline-flex;align-items:center;gap:4px;padding:4px 12px;" +
+                "border:1px solid #0070d2;border-radius:4px;background:#fff;color:#0070d2;" +
+                "font-size:12px;font-weight:600;cursor:pointer;margin-left:12px;vertical-align:middle;";
+            button.addEventListener("click", () => {
+                this.togglePlayground(operation, section as HTMLElement);
+            });
+
+            // Insert button after the first heading or at the start
+            const heading = section.querySelector("h1, h2, h3");
+            if (heading?.parentElement) {
+                heading.parentElement.insertBefore(
+                    button,
+                    heading.nextSibling
+                );
+            } else {
+                section.insertBefore(button, section.firstChild);
+            }
+        }
+    }
+
+    // Toggles the playground panel for an operation section
+    private togglePlayground(
+        operation: OperationDefinition,
+        section: HTMLElement
+    ): void {
+        const operationId = operation.operationId;
+        const existingWrapper = this.playgroundInstances.get(operationId);
+
+        if (existingWrapper) {
+            const isHidden = existingWrapper.style.display === "none";
+            existingWrapper.style.display = isHidden ? "block" : "none";
+
+            const button = section.querySelector(".try-it-toggle");
+            if (button) {
+                button.setAttribute(
+                    "aria-expanded",
+                    isHidden ? "true" : "false"
+                );
+            }
+            return;
+        }
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "try-it-playground-wrapper";
+
+        const playgroundElement = createElement("doc-api-playground", {
+            is: ApiPlayground
+        });
+        Object.assign(playgroundElement, {
+            operation,
+            spec: this.openApiSpec
+        });
+
+        wrapper.appendChild(playgroundElement);
+        section.appendChild(wrapper);
+        this.playgroundInstances.set(operationId, wrapper);
+
+        const button = section.querySelector(".try-it-toggle");
+        if (button) {
+            button.setAttribute("aria-expanded", "true");
+        }
+    }
+
     // Fixes initial hash scroll positioning after doc phase insertion
     private handleInitialHashScrollFix(): void {
         const hash = window.location.hash;

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -48,6 +48,9 @@ export default class DocXmlContent extends LightningElementWithState<{
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer-mfe. */
     @api origin: string | null = null;
 
+    /** Optional base URL for the canonical link (e.g. https://developer.salesforce.com). When set, used instead of window.location for the canonical href. */
+    @api baseUrl: string | null = null;
+
     @api
     get allLanguages(): Array<Language> {
         return this._allLanguages;
@@ -251,6 +254,17 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.pageReference.deliverable;
     }
 
+    private get useOldSidebar(): boolean {
+        // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
+        // TODO: we need a better fix for version number check
+        return !(
+            !this.version?.releaseVersion ||
+            (this.version?.releaseVersion &&
+                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
+                    53)
+        );
+    }
+
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;
@@ -755,21 +769,19 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pageReference) {
-            const metadescription = document.querySelector(
+            const canonicalLink = document.querySelector(
                 'link[rel="canonical"]'
             );
-            if (metadescription) {
+            if (canonicalLink) {
                 const copyPageReference = { ...this.pageReference };
                 copyPageReference.docId = copyPageReference.docId
                     ? this.dropVersionFromDocId(copyPageReference.docId)
                     : copyPageReference.docId;
-                metadescription.setAttribute(
-                    "href",
-                    window.location.protocol +
-                        "//" +
-                        window.location.host +
-                        this.pageReferenceToString(copyPageReference)
-                );
+                const path = this.pageReferenceToString(copyPageReference);
+                const origin = this.baseUrl
+                    ? this.baseUrl.replace(/\/$/, "")
+                    : `${window.location.protocol}//${window.location.host}`;
+                canonicalLink.setAttribute("href", `${origin}${path}`);
             }
         }
 

package/src/modules/docUtils/apiRequestExecutor/apiRequestExecutor.ts

@@ -0,0 +1,96 @@
+export type ApiRequest = {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    body?: string;
+};
+
+export type ApiResponse = {
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    body: string;
+    duration: number;
+};
+
+export type RequestExecutor = (request: ApiRequest) => Promise<ApiResponse>;
+
+export function buildRequestUrl(
+    serverUrl: string,
+    pathTemplate: string,
+    pathParams: Record<string, string>,
+    queryParams: Record<string, string>
+): string {
+    let url = pathTemplate;
+    for (const [key, value] of Object.entries(pathParams)) {
+        url = url.replace(`{${key}}`, encodeURIComponent(value));
+    }
+
+    const fullUrl = `${serverUrl.replace(/\/$/, "")}${url}`;
+
+    const queryEntries = Object.entries(queryParams).filter(
+        ([, v]) => v !== ""
+    );
+    if (queryEntries.length === 0) {
+        return fullUrl;
+    }
+
+    const searchParams = new URLSearchParams();
+    for (const [key, value] of queryEntries) {
+        searchParams.append(key, value);
+    }
+    return `${fullUrl}?${searchParams.toString()}`;
+}
+
+export const directFetchExecutor: RequestExecutor = async (
+    request: ApiRequest
+): Promise<ApiResponse> => {
+    const start = performance.now();
+
+    const fetchOptions: RequestInit = {
+        method: request.method,
+        headers: request.headers,
+        mode: "cors"
+    };
+
+    if (
+        request.body &&
+        request.method !== "GET" &&
+        request.method !== "HEAD"
+    ) {
+        fetchOptions.body = request.body;
+    }
+
+    const response = await fetch(request.url, fetchOptions);
+    const duration = Math.round(performance.now() - start);
+
+    const responseHeaders: Record<string, string> = {};
+    response.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+    });
+
+    let body: string;
+    try {
+        body = await response.text();
+    } catch {
+        body = "";
+    }
+
+    return {
+        status: response.status,
+        statusText: response.statusText,
+        headers: responseHeaders,
+        body,
+        duration
+    };
+};
+
+let currentExecutor: RequestExecutor = directFetchExecutor;
+
+export function setRequestExecutor(executor: RequestExecutor): void {
+    currentExecutor = executor;
+}
+
+export function executeRequest(request: ApiRequest): Promise<ApiResponse> {
+    return currentExecutor(request);
+}

package/src/modules/docUtils/openApiParser/openApiParser.ts

@@ -0,0 +1,187 @@
+export type ParameterDefinition = {
+    name: string;
+    in: "path" | "query" | "header" | "cookie";
+    required: boolean;
+    description: string;
+    schema: any;
+    example?: any;
+};
+
+export type RequestBodyDefinition = {
+    description: string;
+    required: boolean;
+    content: Record<string, { schema: any }>;
+};
+
+export type OperationDefinition = {
+    operationId: string;
+    method: string;
+    path: string;
+    summary: string;
+    description: string;
+    parameters: ParameterDefinition[];
+    requestBody: RequestBodyDefinition | null;
+    responses: Record<string, any>;
+    tags: string[];
+};
+
+export function resolveRef(ref: string, spec: any): any {
+    if (!ref || !ref.startsWith("#/")) {
+        return ref;
+    }
+    const parts = ref.replace("#/", "").split("/");
+    let current = spec;
+    for (const part of parts) {
+        current = current?.[part];
+        if (current === undefined) {
+            return undefined;
+        }
+    }
+    return current;
+}
+
+export function generateSampleFromSchema(schema: any, spec: any): any {
+    if (!schema) {
+        return undefined;
+    }
+
+    if (schema.$ref) {
+        return generateSampleFromSchema(resolveRef(schema.$ref, spec), spec);
+    }
+
+    if (schema.example !== undefined) {
+        return schema.example;
+    }
+
+    if (schema.default !== undefined) {
+        return schema.default;
+    }
+
+    if (schema.enum && schema.enum.length > 0) {
+        return schema.enum[0];
+    }
+
+    switch (schema.type) {
+        case "string":
+            return schema.format === "date"
+                ? "2024-01-01"
+                : schema.format === "date-time"
+                  ? "2024-01-01T00:00:00Z"
+                  : schema.format === "email"
+                    ? "user@example.com"
+                    : schema.format === "uri"
+                      ? "https://example.com"
+                      : "string";
+        case "integer":
+            return schema.minimum ?? 0;
+        case "number":
+            return schema.minimum ?? 0.0;
+        case "boolean":
+            return false;
+        case "array":
+            if (schema.items) {
+                return [generateSampleFromSchema(schema.items, spec)];
+            }
+            return [];
+        case "object": {
+            const result: Record<string, any> = {};
+            if (schema.properties) {
+                for (const [key, propSchema] of Object.entries(
+                    schema.properties
+                )) {
+                    result[key] = generateSampleFromSchema(
+                        propSchema as any,
+                        spec
+                    );
+                }
+            }
+            return result;
+        }
+        default:
+            return null;
+    }
+}
+
+function resolveParameter(param: any, spec: any): ParameterDefinition {
+    const resolved = param.$ref ? resolveRef(param.$ref, spec) : param;
+    return {
+        name: resolved.name ?? "",
+        in: resolved.in ?? "query",
+        required: resolved.required ?? false,
+        description: resolved.description ?? "",
+        schema: resolved.schema ?? {},
+        example: resolved.example
+    };
+}
+
+export function parseOpenApiSpec(spec: any): OperationDefinition[] {
+    if (!spec?.paths) {
+        return [];
+    }
+
+    const operations: OperationDefinition[] = [];
+    const httpMethods = [
+        "get",
+        "post",
+        "put",
+        "delete",
+        "patch",
+        "options",
+        "head"
+    ];
+
+    for (const [path, pathItem] of Object.entries(spec.paths)) {
+        const pathObj = pathItem as any;
+        const pathLevelParams: any[] = pathObj.parameters ?? [];
+
+        for (const method of httpMethods) {
+            const operation = pathObj[method];
+            if (!operation) {
+                continue;
+            }
+
+            const operationParams = (operation.parameters ?? []).map(
+                (p: any) => resolveParameter(p, spec)
+            );
+            const pathParams = pathLevelParams
+                .map((p: any) => resolveParameter(p, spec))
+                .filter(
+                    (pp) =>
+                        !operationParams.some(
+                            (op: ParameterDefinition) => op.name === pp.name
+                        )
+                );
+
+            const mergedParams = [...pathParams, ...operationParams];
+
+            let requestBody: RequestBodyDefinition | null = null;
+            if (operation.requestBody) {
+                const rb = operation.requestBody.$ref
+                    ? resolveRef(operation.requestBody.$ref, spec)
+                    : operation.requestBody;
+                if (rb) {
+                    requestBody = {
+                        description: rb.description ?? "",
+                        required: rb.required ?? false,
+                        content: rb.content ?? {}
+                    };
+                }
+            }
+
+            operations.push({
+                operationId:
+                    operation.operationId ?? `${method}_${path.replace(/\//g, "_")}`,
+                method: method.toUpperCase(),
+                path,
+                summary: operation.summary ?? "",
+                description: operation.description ?? "",
+                parameters: mergedParams,
+                requestBody,
+                responses: operation.responses ?? {},
+                tags: operation.tags ?? []
+            });
+        }
+    }
+
+    return operations;
+}

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.