fix(shell-docs): suppress docs-render snippet warnings + fix ComponentExamples render (CopilotKit#4992)

## Summary

Three changes to `src/lib/docs-render.tsx` that together eliminate the
`[docs-render] snippet missing for component X` log noise on prod AND
fix a hard SSR error on `/quickstart` caused by a missing
`ComponentExamples` registration.

## Changes

**1. Suppress warnings for components the MDX imports** (existing scope
of this PR).

`inlineSnippets()` runs after `stripLeadingImports()` removes the MDX's
`import` lines, so the regex can't tell a `<PascalCase />` reference
apart from a real React component imported into the file. Every imported
component triggered a false-positive `snippet missing` warning. The page
still rendered correctly via `docsComponents`; only the log was wrong.

Capture imports before stripping, then short-circuit the warning when
the regex hits one of those names.

**2. Add `ComponentExamples` to `SNIPPET_MAP`** (new).

`copilot-ui.mdx` imports `ComponentExamples` from
`@/snippets/component-examples.mdx` and renders it. When
`copilot-ui.mdx` is recursively inlined into a parent MDX (e.g. via
`<CopilotUI />`), the import line is stripped and the inliner finds no
`SNIPPET_MAP` entry for `ComponentExamples`. The bare JSX survives the
inliner and `next-mdx-remote` throws `Expected component
ComponentExamples to be defined` at SSR. The error is caught in a
partial-render error boundary so the page returns 200, but a chunk of
content is missing from the rendered output.

Add `ComponentExamples: "component-examples.mdx"` to `SNIPPET_MAP` so
the recursive inliner resolves it the same way it resolves `CopilotUI`.
One line, fixes both the SSR error and the cosmetic warning.

(Note: the `gatherImportedComponentNames` shortcut from change 1 doesn't
help here because it captures imports from the OUTER MDX, not from
recursively-inlined snippet bodies. That deeper structural limitation
can be addressed later; the `SNIPPET_MAP` entry resolves the immediate
failure.)

**3. Skip icon-prefix bare references** (new).

Lucide `Square*` icons (`SquareTerminal`, `SquareChartGantt`) and
`react-icons` `Fa*` / `Si*` / `Pi*` families are bare-referenced in many
MDX files — no explicit import, resolved at render time via the
registry's emoji stubs in `docsComponents`. The existing
`endsWith("Icon")` filter doesn't catch these PascalCase +
library-prefix shapes. Add a regex check next to it:
`/^(Fa|Si|Pi|Square)[A-Z]/`.

## Components covered after changes 1-3

The import-aware filter catches every `import { X } from "..."`
reference (current set: AgentCoreCommandTabs, CodePanel, CodeShowcase,
Frame, IframeSwitcher, ImageAndCode, LinkToCopilotCloud,
NewLookAndFeelPreview, StartProviders).

The icon-prefix filter catches `FaArrowUp`, `FaWrench`,
`SquareTerminal`, `SquareChartGantt`, and future icon-library additions
matching the prefix shape.

`ComponentExamples` is registered in `SNIPPET_MAP` so the inliner
resolves it instead of warning.

Remaining bare references that don't match any of the above (e.g.
`CloudCopilotKit`) still warn — these are runtime React components
registered in `docsComponents` but not imported in the MDX. The right
cleanup for those is to add explicit `import { CloudCopilotKit } from
"..."` lines in the MDX, which the import-aware filter then catches
automatically. Out of scope for this PR.

## Adjacent observation (not fixed)

While diagnosing change 2, found that the underlying
`new-look-and-feel.tsx` component file referenced by
`troubleshooting/migrate-to-1.8.2.mdx` doesn't exist on disk. The MDX
registry stubs the name with `<div>{children}</div>`, so the preview
area in that page renders empty. This PR doesn't address the
empty-preview behavior; the snippet-missing log noise is purely
cosmetic.

## Test plan

- [x] Diff is additive only; runtime render path unchanged.
- [ ] Local: build shell-docs, hit `/built-in-agent/quickstart` +
`/crewai-crews/quickstart` + `/built-in-agent/agentic-protocols/mcp` +
`/built-in-agent/shared-state/predictive-state-updates` +
`/built-in-agent/troubleshooting/migrate-to-1.8.2`. Confirm zero
`[docs-render] snippet missing` and zero `Expected component
ComponentExamples to be defined` warnings in the dev server log.
- [ ] Local: confirm the ComponentExamples Tabs block actually renders
on `/crewai-crews/quickstart` (was silently missing pre-fix).
- [ ] Post-deploy: re-check Railway logs for the warning + error class
over a sample of page loads.

Author: BenTaylorDev

showcase/shell-docs/src/lib/docs-render.tsx

@@ -806,6 +806,7 @@ export const SNIPPET_MAP: Record<string, string> = {
   MigrateTo: "shared/troubleshooting/migrate-to-v2.mdx",
   MigrateToV: "shared/troubleshooting/migrate-to-v2.mdx",
   CopilotUI: "copilot-ui.mdx",
+  ComponentExamples: "component-examples.mdx",
   LandingCodeShowcase: "landing-code-showcase.mdx",
   UseAgentSnippet: "use-agent.mdx",
   InstallSDKSnippet: "install-sdk.mdx",
@@ -1013,11 +1014,40 @@ function isInsideCodeFence(content: string, offset: number): boolean {
   return inlineToggles % 2 === 1;
 }
 
+/**
+ * Names that look like JSX components (PascalCase) imported into the MDX
+ * via `import { ... }` or `import Foo` from any path. Used by the
+ * inliner to distinguish real React components (resolved at render time
+ * via the docsComponents registry) from snippet references that should
+ * map to entries in SNIPPET_MAP. Without this, every imported component
+ * usage logs a false-positive "snippet missing" warning because
+ * stripLeadingImports() removes the import lines before the regex scan.
+ */
+function gatherImportedComponentNames(source: string): Set<string> {
+  const names = new Set<string>();
+  const importRegex =
+    /^import\s+(?:type\s+)?(?:\{([^}]+)\}|(\w+))\s+from\s+["'][^"']+["']\s*;?\s*$/gm;
+  let m: RegExpExecArray | null;
+  while ((m = importRegex.exec(source)) !== null) {
+    if (m[1]) {
+      for (const part of m[1].split(",")) {
+        const renamed = part.trim().split(/\s+as\s+/);
+        const name = renamed[renamed.length - 1].trim();
+        if (/^[A-Z]\w*$/.test(name)) names.add(name);
+      }
+    } else if (m[2] && /^[A-Z]\w*$/.test(m[2])) {
+      names.add(m[2]);
+    }
+  }
+  return names;
+}
+
 export function inlineSnippets(
   content: string,
   slugPath: string = "",
   seen: Set<string> = new Set(),
 ): string {
+  const importedComponentNames = gatherImportedComponentNames(content);
   let result = stripLeadingImports(content);
 
   result = result.replace(
@@ -1070,6 +1100,26 @@ export function inlineSnippets(
         if (componentName.endsWith("Icon")) {
           return match;
         }
+        // Icon-library components also hit the inliner as bare JSX
+        // references (no explicit import — the registry provides them
+        // via docsComponents at render time). Lucide square-prefixed
+        // icons (SquareTerminal, SquareChartGantt, etc.), react-icons
+        // fa/si/pi prefixes, and similar PascalCase + icon-library
+        // shapes don't match the trailing-Icon filter above. Skip
+        // them by name shape so the inliner doesn't log a warning for
+        // every icon usage.
+        if (/^(Fa|Si|Pi|Square)[A-Z]/.test(componentName)) {
+          return match;
+        }
+        // Skip components the MDX explicitly imports. They're real React
+        // components rendered through the docsComponents registry at
+        // request time, not snippet references. stripLeadingImports()
+        // above removes the import line; gatherImportedComponentNames()
+        // preserved the set so the inliner can tell these apart from
+        // genuine missing-snippet cases.
+        if (importedComponentNames.has(componentName)) {
+          return match;
+        }
         // Log so docs authors see a clean signal when a <Component />
         // reference can't be mapped to a snippet file (previously the
         // component just silently rendered nothing). Matches inside code