From db101b8a4719e71383517dfbc7d706f2da052752 Mon Sep 17 00:00:00 2001
From: Cory Rylan <crylan@nvidia.com>
Date: Fri, 31 Jul 2026 11:24:41 -0500
Subject: [PATCH] chore(docs): add component preview to card list

- add small inline preview of the component to the card
- large components like monaco have small mock html/css inlined visuals

Signed-off-by: Cory Rylan <crylan@nvidia.com>
---
 projects/core/src/dialog/dialog.ts            |   2 +-
 projects/core/src/drawer/drawer.ts            |   2 +-
 projects/core/src/gauge/gauge.examples.ts     |   5 +-
 .../core/src/notification/notification.ts     |   2 +-
 projects/core/src/toast/toast.ts              |   2 +-
 projects/core/src/tooltip/tooltip.ts          |   2 +-
 .../src/markdown/markdown.examples.ts         |   2 +-
 projects/site/src/_11ty/layouts/common.js     |  30 +-
 projects/site/src/docs/elements/index.11ty.js | 547 +++++++++++++++++-
 9 files changed, 543 insertions(+), 51 deletions(-)

diff --git a/projects/core/src/dialog/dialog.ts b/projects/core/src/dialog/dialog.ts
index 0492ceb136..744e6b93e1 100644
--- a/projects/core/src/dialog/dialog.ts
+++ b/projects/core/src/dialog/dialog.ts
@@ -21,7 +21,7 @@ import styles from './dialog.css?inline';
 
 /**
  * @element nve-dialog
- * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
  * @documentation https://nvidia.github.io/elements/docs/elements/dialog/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dialog
diff --git a/projects/core/src/drawer/drawer.ts b/projects/core/src/drawer/drawer.ts
index da9a02c59d..37369391ce 100644
--- a/projects/core/src/drawer/drawer.ts
+++ b/projects/core/src/drawer/drawer.ts
@@ -18,7 +18,7 @@ import styles from './drawer.css?inline';
 
 /**
  * @element nve-drawer
- * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
  * @documentation https://nvidia.github.io/elements/docs/elements/drawer/
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/drawer
diff --git a/projects/core/src/gauge/gauge.examples.ts b/projects/core/src/gauge/gauge.examples.ts
index 7c5156b76e..da9c5203b5 100644
--- a/projects/core/src/gauge/gauge.examples.ts
+++ b/projects/core/src/gauge/gauge.examples.ts
@@ -14,10 +14,7 @@ export default {
  */
 export const Default = {
   render: () => html`
-    <div nve-layout="row gap:sm">
-      <nve-gauge value="50">50%</nve-gauge>
-      <nve-gauge status="accent" value="66">66%</nve-gauge>
-    </div>
+    <nve-gauge status="accent" value="66">66%</nve-gauge>
 `};
 
 /**
diff --git a/projects/core/src/notification/notification.ts b/projects/core/src/notification/notification.ts
index 9cb402e4b6..77e2146f88 100644
--- a/projects/core/src/notification/notification.ts
+++ b/projects/core/src/notification/notification.ts
@@ -20,7 +20,7 @@ import styles from './notification.css?inline';
 
 /**
  * @element nve-notification
- * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.
  * @documentation https://nvidia.github.io/elements/docs/elements/notification/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/notification
diff --git a/projects/core/src/toast/toast.ts b/projects/core/src/toast/toast.ts
index 87f3ce44ed..e7e4b9f064 100644
--- a/projects/core/src/toast/toast.ts
+++ b/projects/core/src/toast/toast.ts
@@ -21,7 +21,7 @@ import styles from './toast.css?inline';
 
 /**
  * @element nve-toast
- * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/toast/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast
diff --git a/projects/core/src/tooltip/tooltip.ts b/projects/core/src/tooltip/tooltip.ts
index 107a38d588..fd5963a3e0 100644
--- a/projects/core/src/tooltip/tooltip.ts
+++ b/projects/core/src/tooltip/tooltip.ts
@@ -17,7 +17,7 @@ import styles from './tooltip.css?inline';
 
 /**
  * @element nve-tooltip
- * @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/tooltip
diff --git a/projects/markdown/src/markdown/markdown.examples.ts b/projects/markdown/src/markdown/markdown.examples.ts
index 7ba4f9c7b4..eec79f7979 100644
--- a/projects/markdown/src/markdown/markdown.examples.ts
+++ b/projects/markdown/src/markdown/markdown.examples.ts
@@ -17,7 +17,7 @@ export const Default = {
   render: () => html`
 <nve-markdown>
   <template>
-    # Default
+    ## Markdown
 
     This is a default markdown component in its initial state.
 
diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index de8027b741..f3e708506a 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -219,7 +219,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/design-md/') ? 'highlighted selected' : ''}><a href="/docs/design-md/">DESIGN.md</a></nve-tree-node>
   </nve-tree-node>
 
-  <nve-tree-node ${data.page.url.includes('/docs/elements/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
+  <nve-tree-node ${data.page.url.includes('/docs/elements/') || data.page.url.includes('/docs/monaco/') || data.page.url.includes('/docs/markdown/') || data.page.url.includes('/docs/code/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
     <a href="/docs/elements/">Elements</a>
     <nve-tree-node ${data.page.url.includes('/docs/elements/accordion/') ? 'highlighted selected' : ''}><a href="/docs/elements/accordion/">Accordion</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/alert/') ? 'highlighted selected' : ''}><a href="/docs/elements/alert/">Alert</a></nve-tree-node>
@@ -231,6 +231,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/elements/card/') ? 'highlighted selected' : ''}><a href="/docs/elements/card/">Card</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/chat-message/') ? 'highlighted selected' : ''}><a href="/docs/elements/chat-message/">Chat Message</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/checkbox/') ? 'highlighted selected' : ''}><a href="/docs/elements/checkbox/">Checkbox</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/color/') ? 'highlighted selected' : ''}><a href="/docs/elements/color/">Color</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/combobox/') ? 'highlighted selected' : ''}><a href="/docs/elements/combobox/">Combobox</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/copy-button/') ? 'highlighted selected' : ''}><a href="/docs/elements/copy-button/">Copy Button</a></nve-tree-node>
@@ -285,8 +286,15 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/elements/input/') ? 'highlighted selected' : ''}><a href="/docs/elements/input/">Input</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/input-group/') ? 'highlighted selected' : ''}><a href="/docs/elements/input-group/">Input Group</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/logo/') ? 'highlighted selected' : ''}><a href="/docs/elements/logo/">Logo</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">Markdown CSS</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/menu/') ? 'highlighted selected' : ''}><a href="/docs/elements/menu/">Menu</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/month/') ? 'highlighted selected' : ''}><a href="/docs/elements/month/">Month</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Monaco Input</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Monaco Diff Input</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Monaco Editor</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Monaco Diff Editor</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Monaco Problems</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/notification/') ? 'highlighted selected' : ''}><a href="/docs/elements/notification/">Notification</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/page/') ? 'highlighted selected' : ''}><a href="/docs/elements/page/">Page</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/page-header/') ? 'highlighted selected' : ''}><a href="/docs/elements/page-header/">Page Header</a></nve-tree-node>
@@ -342,26 +350,6 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/patterns/trend/') ? 'highlighted selected' : ''}><a href="/docs/patterns/trend/">Trend</a></nve-tree-node>
   </nve-tree-node>
 
-  <nve-tree-node ${data.page.url.includes('/docs/code/') ? 'expanded' : ''}>
-    <a href="/docs/code/codeblock/">Code</a>
-    <nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
-  </nve-tree-node>
-
-  <nve-tree-node ${data.page.url.includes('/docs/monaco/') ? 'expanded' : ''}>
-    <a href="/docs/monaco/input/">Monaco</a>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Input</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Diff Input</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Editor</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Diff Editor</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Problems</a></nve-tree-node>
-  </nve-tree-node>
-
-  <nve-tree-node ${data.page.url.includes('/docs/markdown/') ? 'expanded' : ''}>
-    <a href="/docs/markdown/">Markdown</a>
-    <nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">CSS Utility</a></nve-tree-node>
-  </nve-tree-node>
-
   <nve-tree-node ${data.page.url.includes('/docs/labs/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/' ? 'highlighted' : ''}>
     <a href="/docs/labs/">Labs</a>
     <nve-tree-node ${data.page.url.includes('/docs/labs/layout/responsive/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/layout/responsive/' ? 'highlighted' : ''}>
diff --git a/projects/site/src/docs/elements/index.11ty.js b/projects/site/src/docs/elements/index.11ty.js
index f72877630b..1398595f43 100644
--- a/projects/site/src/docs/elements/index.11ty.js
+++ b/projects/site/src/docs/elements/index.11ty.js
@@ -1,4 +1,5 @@
 import { siteData } from '../../index.11tydata.js';
+import { parseFragment, serialize } from 'parse5';
 
 export const data = {
   title: 'Components',
@@ -27,6 +28,225 @@ const escapeHtml = value =>
 
 const sortByTitle = (a, b) => a.title.localeCompare(b.title);
 
+const defaultExamplesByTag = new Map(
+  siteData.examples
+    .filter(example => example.name === 'Default' && !example.element.includes('nve-panel'))
+    .map(example => [example.element, example])
+);
+
+const disallowedPreviewElements = new Set(['base', 'embed', 'iframe', 'link', 'meta', 'object', 'script']);
+const previewUrlAttributes = new Set(['action', 'formaction', 'href', 'poster', 'src', 'xlink:href']);
+const safePreviewProtocols = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+
+const isSafePreviewUrl = value => {
+  try {
+    return safePreviewProtocols.has(new URL(value, 'https://elements.invalid').protocol);
+  } catch {
+    return false;
+  }
+};
+
+const sanitizePreviewNode = node => {
+  if (!Array.isArray(node.childNodes)) return;
+  node.childNodes = node.childNodes.filter(child => !disallowedPreviewElements.has(child.nodeName));
+  node.childNodes.forEach(child => {
+    if (Array.isArray(child.attrs)) {
+      child.attrs = child.attrs.filter(attribute => {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith('on') || name === 'srcdoc') return false;
+        if (previewUrlAttributes.has(name)) return isSafePreviewUrl(attribute.value);
+        return true;
+      });
+    }
+
+    sanitizePreviewNode(child);
+    if (child.content) sanitizePreviewNode(child.content);
+  });
+};
+
+const sanitizePreviewTemplate = template => {
+  const fragment = parseFragment(String(template ?? ''));
+  sanitizePreviewNode(fragment);
+  return serialize(fragment).trim();
+};
+
+const flattenNestedContainers = template =>
+  template.replace(/<(nve-(?:grid|accordion-group|accordion))(?=[\s>])([^>]*)>/g, (match, tag, attributes) =>
+    attributes.includes('container=') ? match : `<${tag} container="flat"${attributes}>`
+  );
+
+const renderPopoverMock = ({ title, content, type = 'popover' }) => /* html */ `
+  <div class="preview-mock preview-mock-${type}" nve-layout="column gap:sm">
+    <div nve-layout="row align:space-between gap:md">
+      <span nve-text="label sm medium">${title}</span>
+      <span nve-text="body sm muted">×</span>
+    </div>
+    <p nve-text="body sm">${content}</p>
+  </div>`;
+
+const renderMonacoMock = tag => {
+  const isDiff = tag.includes('diff');
+  const isProblems = tag.includes('problems');
+  const title = isProblems ? 'Problems' : isDiff ? 'Changes' : 'pipeline.ts';
+
+  if (isProblems) {
+    return /* html */ `
+      <div class="preview-editor">
+        <div class="preview-editor-tab" nve-text="label sm medium">${title}</div>
+        <div class="preview-problems" nve-layout="column gap:xs">
+          <p nve-text="body sm"><span class="preview-problems-marker">×</span> Type mismatch in deployment config</p>
+          <p nve-text="body sm"><span class="preview-problems-marker">!</span> Unused environment variable</p>
+          <p nve-text="body sm muted">2 problems in 2 files</p>
+        </div>
+      </div>`;
+  }
+
+  const codePane = (label, value) => /* html */ `
+    <div class="preview-editor-pane">
+      ${label ? `<div class="preview-editor-pane-label" nve-text="label sm muted">${label}</div>` : ''}
+      <div class="preview-editor-code" nve-text="code">
+        <span>1</span><code nve-text="code">const model = '${value}';</code>
+        <span>2</span><code nve-text="code">deploy(model);</code>
+        <span>3</span><code nve-text="code">monitor('gpu');</code>
+      </div>
+    </div>`;
+
+  return /* html */ `
+    <div class="preview-editor">
+      <div class="preview-editor-tab" nve-text="label sm medium">${title}</div>
+      <div class="preview-editor-panes">
+        ${isDiff ? codePane('Original', 'v1') + codePane('Modified', 'v2') : codePane('', 'nemotron')}
+      </div>
+    </div>`;
+};
+
+const previewOverrides = {
+  'nve-dialog': renderPopoverMock({
+    title: 'Deploy model?',
+    content: 'Review the configuration before continuing.',
+    type: 'dialog'
+  }),
+  'nve-drawer': /* html */ `
+    <div class="preview-drawer" nve-layout="column gap:md">
+      <div nve-layout="row align:space-between">
+        <span nve-text="label sm medium">Session details</span>
+        <span nve-text="body sm muted">×</span>
+      </div>
+      <div class="preview-mock-lines"><span></span><span></span><span></span></div>
+    </div>`,
+  'nve-dropdown': /* html */ `
+    <div class="preview-dropdown" nve-layout="column gap:xs">
+      <span nve-text="label sm medium">Actions</span>
+      <span nve-text="body sm">Open details</span>
+      <span nve-text="body sm">Duplicate</span>
+      <span nve-text="body sm">Archive</span>
+    </div>`,
+  'nve-dropdown-group': /* html */ `
+    <div class="preview-dropdown-group">
+      <div class="preview-dropdown" nve-layout="column gap:xs">
+        <span nve-text="label sm medium">Create</span>
+        <span nve-text="body sm">Workspace&nbsp;›</span>
+        <span nve-text="body sm">Deployment</span>
+      </div>
+      <div class="preview-dropdown preview-dropdown-nested" nve-layout="column gap:xs">
+        <span nve-text="body sm">Training</span>
+        <span nve-text="body sm">Inference</span>
+      </div>
+    </div>`,
+  'nve-grid': /* html */ `
+    <nve-grid>
+      <nve-grid-header>
+        <nve-grid-column>Model</nve-grid-column>
+        <nve-grid-column>Status</nve-grid-column>
+        <nve-grid-column>GPUs</nve-grid-column>
+      </nve-grid-header>
+      <nve-grid-row>
+        <nve-grid-cell>Nemotron</nve-grid-cell>
+        <nve-grid-cell>Running</nve-grid-cell>
+        <nve-grid-cell>8</nve-grid-cell>
+      </nve-grid-row>
+      <nve-grid-row>
+        <nve-grid-cell>Cosmos</nve-grid-cell>
+        <nve-grid-cell>Ready</nve-grid-cell>
+        <nve-grid-cell>4</nve-grid-cell>
+      </nve-grid-row>
+    </nve-grid>`,
+  'nve-notification': renderPopoverMock({
+    title: 'Deployment ready',
+    content: 'The new endpoint is available.',
+    type: 'notification'
+  }),
+  'nve-page': /* html */ `
+    <div class="preview-page">
+      <div class="preview-page-header" nve-layout="row align:space-between">
+        <span nve-text="label sm medium">Infrastructure</span>
+        <span nve-text="body sm muted">Deploy</span>
+      </div>
+      <div class="preview-page-body">
+        <div class="preview-page-nav" nve-layout="column gap:sm">
+          <span></span><span></span><span></span>
+        </div>
+        <div class="preview-page-main" nve-layout="column gap:sm">
+          <span nve-text="label sm medium">Models</span>
+          <div class="preview-mock-lines"><span></span><span></span><span></span></div>
+        </div>
+      </div>
+    </div>`,
+  'nve-page-loader': /* html */ `
+    <div class="preview-page-loader" nve-layout="column gap:sm align:center">
+      <nve-progress-ring status="accent"></nve-progress-ring>
+      <span nve-text="body sm muted">Loading workspace</span>
+    </div>`,
+  'nve-panel': /* html */ `
+    <div class="preview-panel" nve-layout="column gap:md">
+      <div nve-layout="column gap:xs">
+        <span nve-text="label medium">Deployment</span>
+        <span nve-text="body sm muted">Session details</span>
+      </div>
+      <div nve-layout="column gap:md">
+        <div nve-layout="column gap:xs">
+          <span nve-text="body sm muted">Status</span>
+          <span nve-text="label sm">Ready</span>
+        </div>
+        <div nve-layout="column gap:xs">
+          <span nve-text="body sm muted">GPUs</span>
+          <span nve-text="label sm">8 × H100</span>
+        </div>
+      </div>
+    </div>`,
+  'nve-toast': renderPopoverMock({ title: 'Changes saved', content: 'Your settings are up to date.', type: 'toast' }),
+  'nve-toggletip': renderPopoverMock({
+    title: 'GPU allocation',
+    content: 'Choose a pool that matches the workload.',
+    type: 'toggletip'
+  }),
+  'nve-tooltip': /* html */ `
+    <div class="preview-tooltip" nve-text="body sm">Copy deployment ID</div>`,
+  'nve-tree': /* html */ `
+    <nve-tree behavior-expand>
+      <nve-tree-node expanded>
+        Infrastructure
+        <nve-tree-node>Training</nve-tree-node>
+        <nve-tree-node>Inference</nve-tree-node>
+      </nve-tree-node>
+      <nve-tree-node>Datasets</nve-tree-node>
+    </nve-tree>`,
+  'nve-monaco-diff-editor': renderMonacoMock('nve-monaco-diff-editor'),
+  'nve-monaco-diff-input': renderMonacoMock('nve-monaco-diff-input'),
+  'nve-monaco-editor': renderMonacoMock('nve-monaco-editor'),
+  'nve-monaco-input': renderMonacoMock('nve-monaco-input'),
+  'nve-monaco-problems': renderMonacoMock('nve-monaco-problems')
+};
+
+const getPreviewTemplate = tag => {
+  const defaultTemplate = defaultExamplesByTag.get(tag)?.template;
+  const template =
+    previewOverrides[tag] ??
+    (defaultTemplate ? sanitizePreviewTemplate(defaultTemplate) : `<code nve-text="code">${escapeHtml(tag)}</code>`);
+
+  return flattenNestedContainers(template);
+};
+
 const createComponentCatalog = componentDocs => {
   const docsByTag = new Map(componentDocs.filter(hasComponentTag).map(component => [component.data.tag, component]));
 
@@ -44,43 +264,328 @@ const createComponentCatalog = componentDocs => {
           description: element.manifest?.description?.trim() ?? `Documentation for ${doc.data.title}.`,
           href: doc.url,
           packageName: element.package,
+          preview: '',
           tag: element.name,
           title: doc.data.title,
           version: element.version
         };
       })
+      .map(component => {
+        const preview = getPreviewTemplate(component.tag);
+
+        return {
+          ...component,
+          preview
+        };
+      })
       .sort(sortByTitle);
 
   return [...createCatalogSection(isElementsComponentDoc), ...createCatalogSection(isLibraryComponentDoc)];
 };
 
-const renderComponentLink = component => /* html */ `
-  <a href="${escapeHtml(component.href)}">
-    <nve-card style="height: 100%; min-height: 150px">
-      <nve-card-header>
-        <div nve-layout="row align:space-between">
-          <h3 nve-text="label medium">${escapeHtml(component.title)}</h3>
-          <p nve-text="body sm muted"><code nve-text="code">${escapeHtml(component.tag)}</code></p>
-        </div>
-      </nve-card-header>
-      <nve-card-content>
+const renderComponentCard = component => /* html */ `
+  <nve-card class="component-card">
+    <div
+      class="component-preview"
+      data-component-preview="${escapeHtml(component.tag)}"
+      aria-hidden="true"
+      inert
+    >
+      <div class="component-preview-content">${component.preview}</div>
+    </div>
+    <nve-card-content>
+      <div nve-layout="column gap:sm">
+        <h3 nve-text="label medium">${escapeHtml(component.title)}</h3>
         <p nve-text="body sm">${escapeHtml(component.description)}</p>
-      </nve-card-content>
-    </nve-card>
-  </a>`;
+      </div>
+    </nve-card-content>
+    <a
+      class="component-card-link"
+      href="${escapeHtml(component.href)}"
+      aria-label="View ${escapeHtml(component.title)} documentation"
+    ></a>
+  </nve-card>`;
+
+const renderPreviewScript = () => /* html */ `
+<script type="module">
+  const loadPreview = async preview => {
+    const tag = preview.dataset.componentPreview;
+
+    try {
+      const customElementNames = new Set(
+        [...preview.querySelectorAll('*')]
+          .map(element => element.localName)
+          .filter(name => name.startsWith('nve-'))
+      );
+      await Promise.all([...customElementNames].map(name => customElements.whenDefined(name)));
+
+      if (tag === 'nve-sparkline') {
+        preview.querySelector('nve-sparkline').data = [18, 22, 20, 24, 19, 28, 25, 30];
+      }
+
+      const updates = [...preview.querySelectorAll('*')]
+        .map(element => element.updateComplete)
+        .filter(Boolean);
+      await Promise.all(updates);
+      await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    } catch (error) {
+      console.error('Unable to load component preview', { error, tag });
+      preview.dataset.previewError = '';
+    }
+
+    preview.dataset.previewReady = '';
+  };
+
+  const previews = document.querySelectorAll('[data-component-preview]');
+
+  if ('IntersectionObserver' in globalThis) {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) return;
+          observer.unobserve(entry.target);
+          void loadPreview(entry.target);
+        });
+      },
+      { rootMargin: '300px 0px' }
+    );
+
+    previews.forEach(preview => observer.observe(preview));
+  } else {
+    previews.forEach(preview => void loadPreview(preview));
+  }
+</script>`;
 
 export function render(data) {
   const components = createComponentCatalog(data.collections.componentDocs);
 
   return /* html */ `
 <style>
-  a:has(nve-card) {
-    text-decoration: none;
+  #doc-content {
+    max-width: 1400px !important;
+  }
+
+  .component-card {
+    position: relative;
+    height: 100%;
+    min-height: 300px;
+  }
+
+  .component-card-link {
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border-radius: var(--nve-ref-border-radius-lg);
+    cursor: pointer;
+  }
+
+  .component-card-link:focus-visible {
+    outline: var(--nve-ref-outline);
+    outline-offset: calc(-1 * var(--nve-ref-size-50));
+  }
+
+  .component-preview {
+    position: relative;
+    display: grid;
+    place-items: center;
+    height: 180px;
+    overflow: hidden;
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: color-mix(
+      in oklab,
+      var(--nve-sys-layer-container-accent-background) 70%,
+      transparent
+    );
+  }
+
+  .component-preview-content {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    transform: scale(0.85);
+  }
+
+  .preview-mock,
+  .preview-dropdown,
+  .preview-tooltip,
+  .preview-drawer,
+  .preview-editor,
+  .preview-page,
+  .preview-panel {
+    border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    border-radius: var(--nve-ref-border-radius-md);
+    background: var(--nve-sys-layer-container-background);
+    color: var(--nve-sys-layer-container-color);
+    box-shadow: var(--nve-ref-shadow-200);
+  }
+
+  .preview-mock {
+    width: 280px;
+    padding: var(--nve-ref-space-md);
+  }
+
+  .preview-mock-notification {
+    border-inline-start: var(--nve-ref-border-width-lg) solid var(--nve-sys-support-accent-color);
+  }
+
+  .preview-tooltip {
+    position: relative;
+    padding: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+  }
+
+  .preview-tooltip::after {
+    position: absolute;
+    bottom: calc(-1 * var(--nve-ref-space-xs));
+    left: 50%;
+    width: var(--nve-ref-space-sm);
+    height: var(--nve-ref-space-sm);
+    background: inherit;
+    content: '';
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  .preview-drawer {
+    width: 250px;
+    height: 170px;
+    padding: var(--nve-ref-space-md);
+    border-radius: 0;
+    border-inline-start: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-panel {
+    width: 260px;
+    height: 180px;
+    padding: var(--nve-ref-space-md);
+    border-radius: 0;
+  }
+
+  .preview-page {
+    width: 560px;
+    height: 260px;
+    overflow: hidden;
+    background: var(--nve-sys-layer-canvas-background);
+  }
+
+  .preview-page-header {
+    min-height: var(--nve-ref-size-900);
+    padding: var(--nve-ref-space-sm) var(--nve-ref-space-md);
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: var(--nve-sys-layer-shell-background);
+  }
+
+  .preview-page-body {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    height: calc(100% - var(--nve-ref-size-900));
+  }
 
-    * {
-      cursor: pointer;
+  .preview-page-nav,
+  .preview-page-main {
+    padding: var(--nve-ref-space-md);
+  }
+
+  .preview-page-nav {
+    border-inline-end: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: var(--nve-sys-layer-container-background);
+
+    > span {
+      display: block;
+      width: 100%;
+      height: var(--nve-ref-space-sm);
+      border-radius: var(--nve-ref-border-radius-sm);
+      background: var(--nve-sys-interaction-background);
     }
   }
+
+  .preview-mock-lines {
+    display: grid;
+    gap: var(--nve-ref-space-sm);
+
+    span {
+      display: block;
+      width: 100%;
+      height: var(--nve-ref-space-sm);
+      border-radius: var(--nve-ref-border-radius-sm);
+      background: var(--nve-sys-interaction-background);
+    }
+
+    span:nth-child(2) {
+      width: 80%;
+    }
+
+    span:nth-child(3) {
+      width: 60%;
+    }
+  }
+
+  .preview-dropdown {
+    min-width: 170px;
+    padding: var(--nve-ref-space-sm);
+  }
+
+  .preview-dropdown-group {
+    position: relative;
+    width: 310px;
+    height: 140px;
+  }
+
+  .preview-dropdown-nested {
+    position: absolute;
+    top: var(--nve-ref-space-lg);
+    right: 0;
+  }
+
+  .preview-editor {
+    width: 430px;
+    height: 180px;
+    overflow: hidden;
+    background: var(--nve-sys-layer-container-background);
+    color: var(--nve-sys-layer-container-color);
+    box-shadow: none;
+  }
+
+  .preview-editor-tab,
+  .preview-editor-pane-label {
+    padding: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-editor-panes {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    height: calc(100% - var(--nve-ref-space-xl));
+  }
+
+  .preview-editor-pane + .preview-editor-pane {
+    border-inline-start: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-editor-code {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+    padding: var(--nve-ref-space-sm);
+
+    > span {
+      color: var(--nve-sys-text-muted-color);
+      text-align: end;
+    }
+  }
+
+  .preview-problems {
+    padding: var(--nve-ref-space-sm);
+  }
+
+  .preview-problems-marker {
+    display: inline-grid;
+    place-items: center;
+    width: var(--nve-ref-space-md);
+    margin-inline-end: var(--nve-ref-space-xs);
+    border-radius: var(--nve-ref-border-radius-full);
+    background: var(--nve-sys-interaction-background);
+  }
 </style>
 
 <h1 nve-text="heading xl mkd">NVIDIA Elements Components</h1>
@@ -91,7 +596,9 @@ export function render(data) {
   stable <code nve-text="code">nve-*</code> APIs, design tokens, accessibility guidance, and examples.
 </p>
 
-<div nve-layout="grid gap:md align:vertical-stretch span-items:12 &md|span-items:6 &xl|span-items:4">
-  ${components.map(renderComponentLink).join('')}
-</div>`;
+<div nve-layout="grid gap:md align:vertical-stretch span-items:12 &lg|span-items:6 &xl|span-items:4 &xxl|span-items:3">
+  ${components.map(renderComponentCard).join('')}
+</div>
+
+${renderPreviewScript()}`;
 }