feat(Compass): add integrations & react-flow compass demo (#4848)

* feat(Compass): add integrations compass demo

* remove ver update cursorrules

* update demo with logo and dropdown

* testing cursor fix for build

* add react-flow demo & fix compass demo actionlist

* omit react-flow from server build

* revert webpack configs and add compass to ssr exclusion

* update demo

* move react-flow demo to new tab, update ssr ignore for subsection

* move new props callouts to demo md

* update demos

* pr updates

* add skip to content

* fix skip to content and move to panel

* add glass toggle

* add drawer

* bump core

* pr feedback

* Update packages/documentation-site/patternfly-docs/content/demos/Compass/Compass.md

Co-authored-by: Michael Coker <[email protected]>

* pr feedback

* update aria label for card view

---------

Co-authored-by: Michael Coker <[email protected]>

Author: kmcfaul

package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@octokit/rest": "^19.0.7",
-    "@patternfly/patternfly": "^6.5.0-prerelease.19",
+    "@patternfly/patternfly": "^6.5.0-prerelease.20",
     "@patternfly/react-code-editor": "^6.5.0-prerelease.9",
     "@patternfly/react-core": "^6.5.0-prerelease.9",
     "@patternfly/react-table": "^6.5.0-prerelease.9",

packages/documentation-framework/package.json

@@ -66,7 +66,7 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^6.5.0-prerelease.19",
+    "@patternfly/patternfly": "^6.5.0-prerelease.20",
     "@patternfly/react-code-editor": "^6.5.0-prerelease.9",
     "@patternfly/react-core": "^6.5.0-prerelease.9",
     "@patternfly/react-table": "^6.5.0-prerelease.9",

packages/documentation-framework/routes.js

@@ -86,6 +86,7 @@ const sourceOrder = {
   'accessibility': 100,
   'upgrade-guide': 101,
   'release-notes': 102,
+  'org-demos': 103,
 };
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {

packages/documentation-framework/scripts/webpack/getHtmlWebpackPlugins.js

@@ -13,7 +13,12 @@ async function getHtmlWebpackPlugin({ isProd, googleAnalyticsID, algolia, url, t
       title: getTitle(title),
       // Don't prerender fullscreen pages (expensive!)
       prerendering:
-        isProd && !isFullscreen && !url.includes('chatbot') && !url.includes('topology') && !url.includes('extensions')
+        isProd &&
+        !isFullscreen &&
+        !url.includes('chatbot') &&
+        !url.includes('topology') &&
+        !url.includes('extensions') &&
+        !url.includes('generative-uis')
           ? await prerender(url)
           : null,
       // Don't use GA in dev mode
@@ -37,9 +42,10 @@ async function getHtmlWebpackPlugins(options) {
       templateParameters: {
         urls: Object.entries(routes)
           .map(([path, { sources }]) => [
-            path, 
-            ...(sources || []).slice(1)
-              .filter(source => source.slug !== path) // Filter out sources that would create duplicate routes
+            path,
+            ...(sources || [])
+              .slice(1)
+              .filter((source) => source.slug !== path) // Filter out sources that would create duplicate routes
               .map((source) => source.slug)
           ])
           .flat()
@@ -60,8 +66,9 @@ async function getHtmlWebpackPlugins(options) {
     .map(([url, { sources = [], title, isFullscreen }]) => [
       [url, { title, isFullscreen }],
       // Add pages for sources, but filter out duplicates
-      ...sources.slice(1)
-        .filter(source => source.slug !== url) // Filter out sources that would create duplicate routes
+      ...sources
+        .slice(1)
+        .filter((source) => source.slug !== url) // Filter out sources that would create duplicate routes
         .map((source) => [source.slug, source])
     ])
     .flat()

packages/documentation-framework/versions.json

@@ -5,7 +5,7 @@
       "date": "2025-11-06",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "6.5.0-prerelease.19",
+        "@patternfly/patternfly": "6.5.0-prerelease.20",
         "@patternfly/react-catalog-view-extension": "6.2.0",
         "@patternfly/react-charts": "8.5.0-prerelease.4",
         "@patternfly/react-code-editor": "6.5.0-prerelease.9",
@@ -23,8 +23,8 @@
         "@patternfly/quickstarts": "6.4.0",
         "@patternfly/react-virtualized-extension": "6.1.0",
         "@patternfly/react-templates": "6.5.0-prerelease.9",
-        "@patternfly/chatbot": "6.4.1",
-        "@patternfly/react-data-view": "6.5.0-prerelease.10"
+        "@patternfly/chatbot": "6.5.0-prerelease.10",
+        "@patternfly/react-data-view": "6.4.0"
       }
     },
     {

packages/documentation-site/package.json

@@ -32,6 +32,7 @@
     "@patternfly/react-topology": "6.4.0",
     "@patternfly/react-user-feedback": "6.2.0",
     "@patternfly/react-virtualized-extension": "6.1.0",
+    "@xyflow/react": "^12.9.0",
     "echarts": "^5.6.0",
     "file-saver": "^2.0.5",
     "marked": "^15.0.7",

packages/documentation-site/patternfly-docs/content/demos/Compass/Compass.md

@@ -0,0 +1,45 @@
+---
+id: Compass
+section: PatternFly-AI
+subsection: Generative UIs
+---
+
+## Demo
+
+import { useState, memo, useCallback, useRef, useEffect } from 'react';
+
+import { ActionsColumn } from "@patternfly/react-table";
+import { DataViewTable } from "@patternfly/react-data-view/dist/dynamic/DataViewTable";
+import { DataViewToolbar } from "@patternfly/react-data-view/dist/dynamic/DataViewToolbar";
+import { DataViewTextFilter } from "@patternfly/react-data-view/dist/dynamic/DataViewTextFilter";
+
+import { MessageBar } from '@patternfly/chatbot';
+
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+import wallpaperLight from './assets/wallpaper-light.png'
+import wallpaperDark from './assets/wallpaper-dark.png'
+import imgAvatar from './assets/avatar.jpg';
+
+## Demo notes
+
+To facilitate building a compass layout, there several are useful variants and props exposed on other PatternFly components that may be useful:
+
+- `isPlain` on [Card](/components/card#modifiers), [DataList](/components/data-list#plain), and [Table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `CompassPanel` to appear as the background.
+- `isVertical` on [ActionList](/components/action-list#vertical-action-list). This flag sets the orientation on `ActionList` to support vertical icon lists for the sidebars.
+- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation.
+- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape.
+- `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look.
+- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component.
+- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component.
+
+### Card and data view layout
+
+```js file="./CompassIntegrationsDemo.tsx" isFullscreen
+```