fix(docs): add missing mcp apps and custom elements manifest docs

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/internals/patterns/src/chat.examples.ts

@@ -0,0 +1,163 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { html } from 'lit';
+import '@nvidia-elements/core/button/define.js';
+import '@nvidia-elements/core/chat-message/define.js';
+import '@nvidia-elements/core/dialog/define.js';
+import '@nvidia-elements/core/icon-button/define.js';
+import '@nvidia-elements/core/logo/define.js';
+import '@nvidia-elements/core/page/define.js';
+import '@nvidia-elements/core/page-header/define.js';
+import '@nvidia-elements/core/textarea/define.js';
+
+export default {
+  title: 'Patterns/Chat',
+  component: 'nve-patterns'
+};
+
+/**
+ * @summary Centered page chat with a constrained message column and footer composer. Use for primary assistant experiences where the conversation is the main task and needs persistent input.
+ * @tags pattern
+ */
+export const PageChat = {
+  render: () => html`
+<nve-page>
+  <nve-page-header slot="header">
+    <nve-logo slot="prefix" size="sm" color="brand-green">AI</nve-logo>
+    <h1 slot="prefix" nve-text="heading sm">Assistant</h1>
+  </nve-page-header>
+  <nve-page-panel slot="subheader">
+    <nve-page-panel-content>
+      <h2 nve-text="heading sm">Deployment risk review</h2>
+    </nve-page-panel-content>
+  </nve-page-panel>
+  <main nve-layout="column pad:lg align:horizontal-center">
+    <section nve-layout="column gap:lg align:horizontal-stretch" aria-live="polite" aria-relevant="additions text" style="max-width: 520px; margin: 0 auto;">
+      <nve-chat-message aria-label="user message" arrow-position="top-end" style="margin-inline-start: auto; max-width: 80%;">
+      <nve-avatar slot="suffix" color="brand-green">NV</nve-avatar>
+        Summarize the deployment risk for the new inference endpoint.
+      </nve-chat-message>
+      <nve-chat-message aria-label="assistant message" arrow-position="top-start" style="max-width: 80%;">
+        <nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
+        The highest risk is the cold-start latency on the first request after scale-out. Keep the rollout limited to the staging pool until p95 startup time stays below the service target for three consecutive runs.
+      </nve-chat-message>
+      <nve-chat-message aria-label="user message" arrow-position="top-end" style="margin-inline-start: auto; max-width: 80%;">
+        <nve-avatar slot="suffix" color="brand-green">NV</nve-avatar>
+        What should the operator check first?
+      </nve-chat-message>
+    </section>
+  </main>
+  <form slot="footer" nve-layout="column gap:sm full pad:md" style="max-width: 520px; margin: 0 auto;">
+    <nve-textarea>
+      <textarea aria-label="Message Agent" name="message" rows="3" maxlength="4000" placeholder="Ask about this deployment"></textarea>
+    </nve-textarea>
+    <nve-button type="button" style="margin-inline-start: auto;">Send</nve-button>
+  </form>
+</nve-page>
+  `
+};
+
+/**
+ * @summary Right-side chat panel with persistent header, scrollable transcript, and footer composer. Use when chat supports a larger workspace without taking over the main content.
+ * @tags pattern
+ */
+export const PanelChat = {
+  render: () => html`
+<nve-page>
+  <nve-page-header slot="header">
+    <nve-logo slot="prefix" size="sm" color="brand-green">AI</nve-logo>
+    <h1 slot="prefix" nve-text="heading sm">Prompt API Chat</h1>
+  </nve-page-header>
+  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
+    <section nve-layout="column gap:md" style="max-width: 900px;">
+      <h2 nve-text="heading">Model deployment</h2>
+      <p nve-text="body">
+        Keep the assistant available while operators inspect logs, metrics, and deployment details in the main workspace.
+      </p>
+    </section>
+  </main>
+  <nve-page-panel id="chat-panel" slot="right" aria-labelledby="chat-title">
+    <nve-page-panel-header>
+      <h2 id="chat-title" nve-text="heading sm">Assistant</h2>
+    </nve-page-panel-header>
+    <nve-page-panel-content>
+      <section nve-layout="column gap:lg align:horizontal-stretch" aria-live="polite" aria-relevant="additions text" style="margin-inline-start: auto;">
+        <nve-chat-message aria-label="user message" arrow-position="top-end" color="brand-green" style="margin-inline-start: auto;">
+          How does the nve-badge work?
+        </nve-chat-message>
+        <nve-chat-message aria-label="assistant message" arrow-position="top-start">
+          The badge communicates short status, count, or label information next to related content. Use status values when the badge describes system state and color values when it needs to match a broader visual category.
+        </nve-chat-message>
+      </section>
+    </nve-page-panel-content>
+    <nve-page-panel-footer>
+      <form nve-layout="column gap:sm full">
+        <nve-textarea>
+          <textarea aria-label="Message Agent" name="message" rows="3" maxlength="4000" placeholder="Ask about NVIDIA Elements"></textarea>
+        </nve-textarea>
+        <nve-button type="button" style="margin-inline-start: auto;">Send</nve-button>
+      </form>
+    </nve-page-panel-footer>
+  </nve-page-panel>
+</nve-page>
+  `
+};
+
+/**
+ * @summary Bottom-right anchored chat dialog with launcher button. Use for optional contextual help or assistant support that should stay available without changing the page layout.
+ * @tags pattern
+ */
+export const PopoverChat = {
+  render: () => html`
+<nve-icon-button
+  id="chat-launcher"
+  popovertarget="chat-popover"
+  interaction="emphasis"
+  icon-name="chat-bubble"
+  size="lg"
+  aria-label="Open assistant"
+  style="position: fixed; inset-block-end: var(--nve-ref-space-xl); inset-inline-end: var(--nve-ref-space-xl); z-index: 100;"
+></nve-icon-button>
+<nve-dialog
+  id="chat-popover"
+  anchor="chat-launcher"
+  position="top"
+  alignment="end"
+  size="sm"
+  closable
+  style="--max-width: 320px; --min-height: 340px; margin: var(--nve-ref-space-sm)"
+>
+  <nve-dialog-header>
+    <h2 nve-text="heading sm">Assistant</h2>
+  </nve-dialog-header>
+  <section nve-layout="column gap:md full" aria-live="polite" aria-relevant="additions text">
+    <nve-chat-message aria-label="assistant message" arrow-position="top-start">
+      I can help compare alerts, explain metrics, or draft a remediation checklist.
+    </nve-chat-message>
+    <nve-chat-message aria-label="user message" arrow-position="top-end" color="brand-green" style="margin-inline-start: auto;">
+      Why did the deployment pause?
+    </nve-chat-message>
+    <nve-chat-message aria-label="assistant message" arrow-position="top-start">
+      The canary paused because error rate exceeded the threshold for two consecutive windows.
+    </nve-chat-message>
+  </section>
+  <nve-dialog-footer>
+    <form nve-layout="column gap:sm full">
+      <nve-textarea>
+        <textarea aria-label="Message Agent" name="message" rows="2" maxlength="4000" placeholder="Ask for help"></textarea>
+      </nve-textarea>
+      <nve-button type="button" style="margin-inline-start: auto;">Send</nve-button>
+    </form>
+  </nve-dialog-footer>
+</nve-dialog>
+<script type="module">
+  await customElements.whenDefined('nve-dialog');
+  const dialog = document.querySelector('#chat-popover');
+  const launcher = document.querySelector('#chat-launcher');
+  if (dialog && launcher && !dialog.matches(':popover-open')) {
+    dialog.showPopover({ source: launcher });
+  }
+</script>
+  `
+};

projects/site/src/_11ty/layouts/common.js

@@ -136,6 +136,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/lint/') ? 'highlighted selected' : ''}><a href="docs/lint/">Lint</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/angular/') ? 'highlighted selected' : ''}><a href="docs/integrations/angular/">Angular</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/bundles/') ? 'highlighted selected' : ''}><a href="docs/integrations/bundles/">Bundles</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/integrations/custom-elements/') ? 'highlighted selected' : ''}><a href="docs/integrations/custom-elements/">Custom Elements</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/extensions/') ? 'highlighted selected' : ''}><a href="docs/integrations/extensions/">Extensions</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/go/') ? 'highlighted selected' : ''}><a href="docs/integrations/go/">Golang</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/hugo/') ? 'highlighted selected' : ''}><a href="docs/integrations/hugo/">Hugo</a></nve-tree-node>
@@ -287,6 +288,7 @@ export const renderDocsNav = data => /* html */ `
     <a href="docs/patterns/">Patterns</a>
     <nve-tree-node ${data.page.url.includes('/docs/patterns/authentication/') ? 'highlighted selected' : ''}><a href="docs/patterns/authentication/">Authentication</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/patterns/browse/') ? 'highlighted selected' : ''}><a href="docs/patterns/browse/">Browse</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/patterns/chat/') ? 'highlighted selected' : ''}><a href="docs/patterns/chat/">Chat</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/patterns/dashboard/') ? 'highlighted selected' : ''}><a href="docs/patterns/dashboard/">Dashboard</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/patterns/editor/') ? 'highlighted selected' : ''}><a href="docs/patterns/editor/">Editor</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/patterns/empty-states/') ? 'highlighted selected' : ''}><a href="docs/patterns/empty-states/">Empty States</a></nve-tree-node>

projects/site/src/docs/integrations/custom-elements.md

@@ -0,0 +1,101 @@
+---
+{
+  title: 'Custom Elements Manifest',
+  description: 'Use the Custom Elements Manifest files published with NVIDIA Elements packages for editor integrations, generated types, documentation, validation, and AI tooling.',
+  layout: 'docs.11ty.js'
+}
+---
+
+# {{ title }}
+
+<h2 nve-text="heading sm muted">Elements packages publish machine-readable component API metadata for tools that understand Web Components</h2>
+
+A [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) is a JSON file that describes a package's custom elements. The standard exists so editors, documentation viewers, linters, framework adapters, catalogs, and test tooling can read one package-level API description instead of scraping source code.
+
+Elements packages that publish a manifest declare it in `package.json`:
+
+```json
+{
+  "customElements": "dist/custom-elements.json"
+}
+```
+
+That field is the discovery hook. Tools can inspect `package.json`, find the `customElements` path, and load the package's `dist/custom-elements.json` file from `node_modules`.
+
+## What Is In The Manifest
+
+The manifest describes the public Web Component surface. For Elements components, that includes:
+
+- Tag names such as `nve-button`
+- JavaScript module paths and custom element definition exports
+- Public properties and reflected attributes
+- Events
+- Slots
+- CSS custom properties
+- Component descriptions, examples, status metadata, and package metadata
+
+The manifest does not register components. Continue to use explicit registration imports such as `@nvidia-elements/core/button/define.js` when application code needs the component at runtime.
+
+## Published Package Files
+
+Most published `@nvidia-elements/*` packages include `customElements` metadata. Component packages commonly expose a small set of generated integration files beside the manifest:
+
+<nve-grid>
+  <nve-grid-header>
+    <nve-grid-column width="260px">File</nve-grid-column>
+    <nve-grid-column>Description</nve-grid-column>
+  </nve-grid-header>
+  <nve-grid-row>
+    <nve-grid-cell><code nve-text="code">dist/custom-elements.json</code></nve-grid-cell>
+    <nve-grid-cell>The standard Custom Elements Manifest. This is the canonical component API metadata file.</nve-grid-cell>
+  </nve-grid-row>
+  <nve-grid-row>
+    <nve-grid-cell><code nve-text="code">dist/data.html.json</code></nve-grid-cell>
+    <nve-grid-cell>VS Code HTML custom data generated from the manifest. Editors use it for tag, attribute, hover, and reference information.</nve-grid-cell>
+  </nve-grid-row>
+  <nve-grid-row>
+    <nve-grid-cell><code nve-text="code">dist/data.snippets.json</code></nve-grid-cell>
+    <nve-grid-cell>Generated HTML snippets for faster component authoring.</nve-grid-cell>
+  </nve-grid-row>
+  <nve-grid-row>
+    <nve-grid-cell><code nve-text="code">dist/custom-elements-jsx.d.ts</code></nve-grid-cell>
+    <nve-grid-cell>Generated JSX intrinsic element types for JSX-based integrations such as Preact and SolidJS.</nve-grid-cell>
+  </nve-grid-row>
+  <nve-grid-row>
+    <nve-grid-cell><code nve-text="code">dist/custom-elements-vue.d.ts</code></nve-grid-cell>
+    <nve-grid-cell>Generated Vue template and JSX types where the package exposes Vue integration types.</nve-grid-cell>
+  </nve-grid-row>
+</nve-grid>
+
+The exact generated files vary by package. The `customElements` field is the stable signal that a package ships a CEM file.
+
+## Tooling Enabled By CEM
+
+### Editor Integration
+
+VS Code can load custom HTML and CSS data through `html.customData`, `css.customData`, and extension contribution points. Elements converts CEM data into `data.html.json` so VS Code-compatible HTML language services can offer completions and hover docs for `nve-*` tags and attributes. The Elements project setup command writes the common Elements custom data paths into `.vscode/settings.json` for supported packages.
+
+```json
+{
+  "html.customData": [
+    "./node_modules/@nvidia-elements/styles/dist/data.html.json",
+    "./node_modules/@nvidia-elements/core/dist/data.html.json",
+    "./node_modules/@nvidia-elements/monaco/dist/data.html.json",
+    "./node_modules/@nvidia-elements/code/dist/data.html.json",
+    "./node_modules/@nvidia-elements/markdown/dist/data.html.json"
+  ]
+}
+```
+
+Some editors and extensions can consume CEM more directly. [WebComponents.dev](https://webcomponents.dev/docs/custom-elements-manifest) recognizes `custom-elements.json` and the `package.json#customElements` field. The [Custom Elements Manifest Language Server for Zed](https://zed.dev/extensions/cem) provides autocomplete and hover documentation from CEM data. The [Custom Element Language Server VS Code extension](https://open-vsx.org/extension/wc-toolkit/web-components-language-server) can find `customElements` fields and convert CEM into VS Code custom data.
+
+### Framework Types
+
+Elements uses CEM to generate type adapters for framework-specific authoring surfaces. The build uses `custom-element-jsx-integration` for JSX intrinsic element types and `custom-element-vuejs-integration` for Vue type declarations. These files help template and JSX tooling validate component names, attributes, properties, and events without requiring a framework-specific implementation of each component.
+
+## References
+
+- [Custom Elements Manifest specification](https://github.com/webcomponents/custom-elements-manifest)
+- [Custom Elements Manifest analyzer](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/)
+- [VS Code custom data](https://github.com/microsoft/vscode-custom-data)
+- [WebComponents.dev CEM support](https://webcomponents.dev/docs/custom-elements-manifest)