@backstage/plugin-app-visualizer 0.1.28-next.1 → 0.1.28

package/CHANGELOG.md

@@ -1,28 +1,12 @@
 # @backstage/plugin-app-visualizer
 
-## 0.1.28-next.1
+## 0.1.28
 
 ### Patch Changes
 
-- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
+- 40a02d2: Pinned `react-aria-components` dependency range to use tilde (`~`) instead of caret (`^`) to avoid pulling in minor version bumps that may include breaking changes.
 - Updated dependencies
-  - @backstage/ui@0.12.0-next.2
-  - @backstage/frontend-plugin-api@0.14.0-next.2
-  - @backstage/core-components@0.18.7-next.2
-  - @backstage/core-plugin-api@1.12.3-next.1
-
-## 0.1.28-next.0
-
-### Patch Changes
-
-- cb090b4: Bump react-aria-components to v1.14.0
-- c38b74d: Internal updates for blueprint moves to `@backstage/plugin-app-react`.
-- 4d50e1f: Improved rendering performance of the details page.
-- Updated dependencies
-  - @backstage/ui@0.12.0-next.0
-  - @backstage/core-components@0.18.6-next.0
-  - @backstage/frontend-plugin-api@0.14.0-next.0
-  - @backstage/core-plugin-api@1.12.2-next.0
+  - @backstage/ui@0.11.3
 
 ## 0.1.27
 

package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js

@@ -1,9 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NavItemBlueprint, coreExtensionData, ApiBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ThemeBlueprint, NavItemBlueprint, coreExtensionData, ApiBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
 import { Flex, Box, TooltipTrigger, Text, Tooltip, Link } from '@backstage/ui';
 import { RiCloseCircleLine, RiInputField } from '@remixicon/react';
 import { Focusable } from 'react-aria-components';
-import { useMemo, memo, useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
 
 function getContrastColor(bgColor) {
   const hex = bgColor.replace("#", "");
@@ -45,6 +44,7 @@ const getOutputColor = createOutputColorGenerator(
     [coreExtensionData.routePath.id]: "#ffeb3b",
     [coreExtensionData.routeRef.id]: "#9c27b0",
     [ApiBlueprint.dataRefs.factory.id]: "#2196f3",
+    [ThemeBlueprint.dataRefs.theme.id]: "#cddc39",
     [NavItemBlueprint.dataRefs.target.id]: "#ff9800"
   },
   ["#90caf9", "#ffcc80", "#a5d6a7", "#ef9a9a", "#fff59d", "#ce93d8", "#e6ee9c"]
@@ -66,106 +66,99 @@ function getFullPath(node) {
   }
   return getFullPath(parent) + part;
 }
-function ProgressiveCollection({
-  items,
-  batchSize = 10
-}) {
-  const [maxIndex, setMaxIndex] = useState(0);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    if (maxIndex >= items.length) {
-      return void 0;
-    }
-    const processBatch = () => {
-      const nextIndex = Math.min(maxIndex + batchSize, items.length);
-      setMaxIndex(nextIndex);
-      if (nextIndex < items.length) {
-        timeoutRef.current = setTimeout(processBatch, 0);
-      }
-    };
-    timeoutRef.current = setTimeout(processBatch, 0);
-    return () => {
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, [maxIndex, items.length, batchSize]);
-  return /* @__PURE__ */ jsx(Fragment, { children: items.slice(0, maxIndex).map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: item() }, index)) });
-}
-const Output = memo(
-  function Output2(props) {
-    const { dataRef, node } = props;
-    const { id } = dataRef;
-    const instance = node?.instance;
-    const routeResolutionApi = useApi(routeResolutionApiRef);
-    const { backgroundColor, color } = getOutputColor(id);
-    const chipStyle = {
-      height: 20,
-      padding: "0 10px",
-      borderRadius: "10px",
-      color,
-      backgroundColor,
-      display: "flex",
-      alignItems: "center",
-      fontWeight: "var(--bui-font-weight-regular)"
-    };
-    if (id === coreExtensionData.routeRef.id && node) {
-      try {
-        const routeRef = props.node?.instance?.getData(
-          coreExtensionData.routeRef
-        );
-        const link = routeRef && routeResolutionApi.resolve(routeRef)?.();
-        if (link) {
-          return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-            /* @__PURE__ */ jsx(Link, { href: link, style: chipStyle, children: "link" }),
-            /* @__PURE__ */ jsx(Tooltip, { children: id })
-          ] });
-        }
-      } catch {
+function Output(props) {
+  const { dataRef, node } = props;
+  const { id } = dataRef;
+  const instance = node?.instance;
+  const routeResolutionApi = useApi(routeResolutionApiRef);
+  const { backgroundColor, color } = getOutputColor(id);
+  const chipStyle = {
+    height: 20,
+    padding: "0 10px",
+    borderRadius: "10px",
+    color,
+    backgroundColor,
+    display: "flex",
+    alignItems: "center",
+    fontWeight: "var(--bui-font-weight-regular)"
+  };
+  if (id === coreExtensionData.routeRef.id && node) {
+    try {
+      const routeRef = props.node?.instance?.getData(
+        coreExtensionData.routeRef
+      );
+      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();
+      if (link) {
+        return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(Link, { href: link, style: chipStyle, children: "link" }),
+          /* @__PURE__ */ jsx(Tooltip, { children: id })
+        ] });
       }
+    } catch {
     }
-    let tooltip = id;
-    let text = void 0;
-    if (id === coreExtensionData.routePath.id) {
-      text = String(instance?.getData(dataRef) ?? "");
-      tooltip = getFullPath(node);
-    }
-    return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-      /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { ...chipStyle, cursor: "help" }, children: text }) }),
-      /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: tooltip })
-    ] });
-  },
-  (prevProps, nextProps) => {
-    return prevProps.dataRef.id === nextProps.dataRef.id && prevProps.node?.spec.id === nextProps.node?.spec.id;
   }
-);
-function Extension({ node, depth }) {
+  let tooltip = id;
+  let text = void 0;
+  if (id === coreExtensionData.routePath.id) {
+    text = String(instance?.getData(dataRef) ?? "");
+    tooltip = getFullPath(node);
+  }
+  return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { ...chipStyle, cursor: "help" }, children: text }) }),
+    /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: tooltip })
+  ] });
+}
+function Attachments(props) {
+  const { node, depth } = props;
+  const { attachments } = node.edges;
+  if (attachments.size === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: [...attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, children], idx) => {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          p: "2",
+          align: "center",
+          style: {
+            borderTopWidth: "var(--bui-space-1_5)",
+            borderTopStyle: "solid",
+            borderTopColor: getBorderColor(depth),
+            borderTop: idx === 0 ? "none" : void 0,
+            width: "fit-content"
+          },
+          children: [
+            /* @__PURE__ */ jsx(RiInputField, { size: 16 }),
+            /* @__PURE__ */ jsx("div", { style: { marginLeft: "var(--bui-space-2)" }, children: key })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Flex, { ml: "2", mb: "2", direction: "column", align: "start", gap: "1", children: children.map((childNode) => /* @__PURE__ */ jsx(
+        Extension,
+        {
+          node: childNode,
+          depth: depth + 1
+        },
+        childNode.spec.id
+      )) })
+    ] }, key);
+  }) });
+}
+function Extension(props) {
+  const { node, depth } = props;
   const enabled = Boolean(node.instance);
-  const tooltipText = useMemo(() => {
-    const tooltipParts = [];
-    let currentNode = node;
-    tooltipParts.push(currentNode.spec.id);
-    while (currentNode.edges.attachedTo) {
-      const input = currentNode.edges.attachedTo.input;
-      currentNode = currentNode.edges.attachedTo.node;
-      tooltipParts.push(`${currentNode.spec.id} [${input}]`);
-    }
-    tooltipParts.reverse();
-    return tooltipParts.join("\n");
-  }, [node]);
-  const sortedDataRefs = useMemo(() => {
-    if (!node.instance) {
-      return [];
-    }
-    const dataRefs = [...node.instance.getDataRefs()];
-    return dataRefs.sort((a, b) => a.id.localeCompare(b.id));
-  }, [node.instance]);
-  const sortedAttachments = useMemo(() => {
-    return [...node.edges.attachments.entries()].sort(
-      ([a], [b]) => a.localeCompare(b)
-    );
-  }, [node.edges.attachments]);
+  const dataRefs = node.instance && [...node.instance.getDataRefs()];
+  const tooltipParts = [];
+  let currentNode = node;
+  tooltipParts.push(currentNode.spec.id);
+  while (currentNode.edges.attachedTo) {
+    const input = currentNode.edges.attachedTo.input;
+    currentNode = currentNode.edges.attachedTo.node;
+    tooltipParts.push(`${currentNode.spec.id} [${input}]`);
+  }
+  tooltipParts.reverse();
+  const tooltipText = tooltipParts.join("\n");
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -184,7 +177,7 @@ function Extension({ node, depth }) {
             style: {
               width: "fit-content",
               color: enabled ? "var(--bui-fg-primary)" : "var(--bui-fg-disabled)",
-              background: "var(--bui-bg-neutral-1)",
+              background: "var(--bui-bg-surface-1)",
               borderTopRightRadius: "var(--bui-radius-2)",
               borderBottomRightRadius: "var(--bui-radius-2)"
             },
@@ -194,45 +187,13 @@ function Extension({ node, depth }) {
                 /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: /* @__PURE__ */ jsx(Text, { style: { whiteSpace: "pre-wrap" }, children: tooltipText }) })
               ] }),
               /* @__PURE__ */ jsxs(Flex, { ml: "2", align: "center", gap: "2", children: [
-                sortedDataRefs.length > 0 && sortedDataRefs.map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
+                dataRefs && dataRefs.length > 0 && dataRefs.sort((a, b) => a.id.localeCompare(b.id)).map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
                 !enabled && /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
               ] })
             ]
           }
         ),
-        sortedAttachments.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: sortedAttachments.map(([key, children], idx) => /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              p: "2",
-              align: "center",
-              style: {
-                borderTopWidth: "var(--bui-space-1_5)",
-                borderTopStyle: "solid",
-                borderTopColor: getBorderColor(depth),
-                borderTop: idx === 0 ? "none" : void 0,
-                width: "fit-content"
-              },
-              children: [
-                /* @__PURE__ */ jsx(RiInputField, { size: 16 }),
-                /* @__PURE__ */ jsx("div", { style: { marginLeft: "var(--bui-space-2)" }, children: key })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Flex, { ml: "2", mb: "2", direction: "column", align: "start", gap: "1", children: /* @__PURE__ */ jsx(
-            ProgressiveCollection,
-            {
-              items: children.map((childNode) => () => /* @__PURE__ */ jsx(
-                Extension,
-                {
-                  node: childNode,
-                  depth: depth + 1
-                },
-                childNode.spec.id
-              ))
-            }
-          ) })
-        ] }, key)) })
+        /* @__PURE__ */ jsx(Attachments, { node, enabled, depth })
       ]
     },
     node.spec.id
@@ -243,7 +204,8 @@ const legendMap = {
   "Utility API": ApiBlueprint.dataRefs.factory,
   "Route Path": coreExtensionData.routePath,
   "Route Ref": coreExtensionData.routeRef,
-  "Nav Target": NavItemBlueprint.dataRefs.target
+  "Nav Target": NavItemBlueprint.dataRefs.target,
+  Theme: ThemeBlueprint.dataRefs.theme
 };
 function Legend() {
   return /* @__PURE__ */ jsx(
@@ -272,7 +234,7 @@ function DetailedVisualizer({ tree }) {
         m: "2",
         style: {
           flex: "0 0 auto",
-          background: "var(--bui-bg-neutral-1)",
+          background: "var(--bui-bg-surface-1)",
           border: "1px solid var(--bui-border)",
           borderRadius: "var(--bui-radius-2)"
         },

package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AppNode,\n  AppTree,\n  ExtensionDataRef,\n  coreExtensionData,\n  ApiBlueprint,\n  NavItemBlueprint,\n  useApi,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport {\n  RiInputField as InputIcon,\n  RiCloseCircleLine as DisabledIcon,\n} from '@remixicon/react';\nimport { Focusable } from 'react-aria-components';\nimport { memo, useMemo, useState, useEffect, useRef, Fragment } from 'react';\n\nfunction getContrastColor(bgColor: string): string {\n  const hex = bgColor.replace('#', '');\n  const r = parseInt(hex.substr(0, 2), 16);\n  const g = parseInt(hex.substr(2, 2), 16);\n  const b = parseInt(hex.substr(4, 2), 16);\n  const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n  return brightness > 128 ? '#000000' : '#ffffff';\n}\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, { backgroundColor: string; color: string }>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    let backgroundColor: string;\n    if (id in colorMap) {\n      backgroundColor = colorMap[id];\n    } else {\n      const cached = map.get(id);\n      if (cached) {\n        return cached;\n      }\n      backgroundColor = availableColors[i];\n      i += 1;\n      if (i >= availableColors.length) {\n        i = 0;\n      }\n    }\n    const result = {\n      backgroundColor,\n      color: getContrastColor(backgroundColor),\n    };\n    map.set(id, result);\n    return result;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: '#4caf50',\n    [coreExtensionData.routePath.id]: '#ffeb3b',\n    [coreExtensionData.routeRef.id]: '#9c27b0',\n    [ApiBlueprint.dataRefs.factory.id]: '#2196f3',\n    [NavItemBlueprint.dataRefs.target.id]: '#ff9800',\n  },\n\n  ['#90caf9', '#ffcc80', '#a5d6a7', '#ef9a9a', '#fff59d', '#ce93d8', '#e6ee9c'],\n);\n\n// Helper function to get border color based on depth\nfunction getBorderColor(depth: number): string {\n  const greyLevels = [8, 7, 6, 5]; // darker levels that contrast well with background\n  const index = depth % greyLevels.length;\n  const level = greyLevels[index];\n  return `var(--bui-gray-${level})`;\n}\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction ProgressiveCollection({\n  items,\n  batchSize = 10,\n}: {\n  items: Array<() => React.ReactElement>;\n  batchSize?: number;\n}) {\n  const [maxIndex, setMaxIndex] = useState(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (maxIndex >= items.length) {\n      return undefined;\n    }\n\n    const processBatch = () => {\n      const nextIndex = Math.min(maxIndex + batchSize, items.length);\n      setMaxIndex(nextIndex);\n\n      if (nextIndex < items.length) {\n        timeoutRef.current = setTimeout(processBatch, 0);\n      }\n    };\n\n    timeoutRef.current = setTimeout(processBatch, 0);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      if (timeoutRef.current !== null) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n    };\n  }, [maxIndex, items.length, batchSize]);\n\n  return (\n    <>\n      {items.slice(0, maxIndex).map((item, index) => (\n        <Fragment key={index}>{item()}</Fragment>\n      ))}\n    </>\n  );\n}\n\nconst Output = memo(\n  function Output(props: {\n    dataRef: ExtensionDataRef<unknown>;\n    node?: AppNode;\n  }) {\n    const { dataRef, node } = props;\n    const { id } = dataRef;\n    const instance = node?.instance;\n\n    const routeResolutionApi = useApi(routeResolutionApiRef);\n\n    const { backgroundColor, color } = getOutputColor(id);\n\n    const chipStyle: React.CSSProperties = {\n      height: 20,\n      padding: '0 10px',\n      borderRadius: '10px',\n      color,\n      backgroundColor,\n      display: 'flex',\n      alignItems: 'center',\n      fontWeight:\n        'var(--bui-font-weight-regular)' as React.CSSProperties['fontWeight'],\n    };\n\n    if (id === coreExtensionData.routeRef.id && node) {\n      try {\n        const routeRef = props.node?.instance?.getData(\n          coreExtensionData.routeRef,\n        );\n        const link = routeRef && routeResolutionApi.resolve(routeRef)?.();\n        if (link) {\n          return (\n            <TooltipTrigger>\n              <Link href={link} style={chipStyle}>\n                link\n              </Link>\n              <Tooltip>{id}</Tooltip>\n            </TooltipTrigger>\n          );\n        }\n      } catch {\n        /* ignore */\n      }\n    }\n\n    let tooltip = id;\n    let text: string | undefined = undefined;\n    if (id === coreExtensionData.routePath.id) {\n      text = String(instance?.getData(dataRef) ?? '');\n      tooltip = getFullPath(node);\n    }\n\n    return (\n      <TooltipTrigger>\n        <Focusable>\n          <Text style={{ ...chipStyle, cursor: 'help' }}>{text}</Text>\n        </Focusable>\n        <Tooltip style={{ maxWidth: 'unset' }}>{tooltip}</Tooltip>\n      </TooltipTrigger>\n    );\n  },\n  (prevProps, nextProps) => {\n    return (\n      prevProps.dataRef.id === nextProps.dataRef.id &&\n      prevProps.node?.spec.id === nextProps.node?.spec.id\n    );\n  },\n);\n\nfunction Extension({ node, depth }: { node: AppNode; depth: number }) {\n  const enabled = Boolean(node.instance);\n\n  const tooltipText = useMemo(() => {\n    const tooltipParts = [];\n    let currentNode = node;\n    tooltipParts.push(currentNode.spec.id);\n    while (currentNode.edges.attachedTo) {\n      const input = currentNode.edges.attachedTo.input;\n      currentNode = currentNode.edges.attachedTo.node;\n      tooltipParts.push(`${currentNode.spec.id} [${input}]`);\n    }\n    tooltipParts.reverse();\n    return tooltipParts.join('\\n');\n  }, [node]);\n\n  const sortedDataRefs = useMemo(() => {\n    if (!node.instance) {\n      return [];\n    }\n    const dataRefs = [...node.instance.getDataRefs()];\n    return dataRefs.sort((a, b) => a.id.localeCompare(b.id));\n  }, [node.instance]);\n\n  const sortedAttachments = useMemo(() => {\n    return [...node.edges.attachments.entries()].sort(([a], [b]) =>\n      a.localeCompare(b),\n    );\n  }, [node.edges.attachments]);\n\n  return (\n    <Box\n      key={node.spec.id}\n      style={{\n        borderLeftWidth: 'var(--bui-space-1_5)',\n        borderLeftStyle: 'solid',\n        borderLeftColor: getBorderColor(depth),\n      }}\n    >\n      <Flex\n        py=\"1\"\n        px=\"2\"\n        align=\"center\"\n        style={{\n          width: 'fit-content',\n          color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',\n          background: 'var(--bui-bg-neutral-1)',\n          borderTopRightRadius: 'var(--bui-radius-2)',\n          borderBottomRightRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <TooltipTrigger>\n          <Focusable>\n            <Text style={{ userSelect: 'all' }}>{node.spec.id}</Text>\n          </Focusable>\n          <Tooltip style={{ maxWidth: 'unset' }}>\n            <Text style={{ whiteSpace: 'pre-wrap' }}>{tooltipText}</Text>\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex ml=\"2\" align=\"center\" gap=\"2\">\n          {sortedDataRefs.length > 0 &&\n            sortedDataRefs.map(ref => (\n              <Output key={ref.id} dataRef={ref} node={node} />\n            ))}\n          {!enabled && <DisabledIcon size={16} />}\n        </Flex>\n      </Flex>\n      {sortedAttachments.length > 0 && (\n        <Flex direction=\"column\" gap=\"4\">\n          {sortedAttachments.map(([key, children], idx) => (\n            <Box key={key}>\n              <Flex\n                p=\"2\"\n                align=\"center\"\n                style={{\n                  borderTopWidth: 'var(--bui-space-1_5)',\n                  borderTopStyle: 'solid',\n                  borderTopColor: getBorderColor(depth),\n                  borderTop: idx === 0 ? 'none' : undefined,\n                  width: 'fit-content',\n                }}\n              >\n                <InputIcon size={16} />\n                <div style={{ marginLeft: 'var(--bui-space-2)' }}>{key}</div>\n              </Flex>\n              <Flex ml=\"2\" mb=\"2\" direction=\"column\" align=\"start\" gap=\"1\">\n                <ProgressiveCollection\n                  items={children.map(childNode => () => (\n                    <Extension\n                      key={childNode.spec.id}\n                      node={childNode}\n                      depth={depth + 1}\n                    />\n                  ))}\n                />\n              </Flex>\n            </Box>\n          ))}\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': ApiBlueprint.dataRefs.factory,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': NavItemBlueprint.dataRefs.target,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      p=\"2\"\n      style={{\n        display: 'grid',\n        maxWidth: 600,\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 'var(--bui-space-4)',\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Flex key={dataRef.id} gap=\"2\" align=\"center\">\n          <Output dataRef={dataRef} />\n          <div>{label}</div>\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Flex direction=\"column\" style={{ height: '100%', flex: '1 1 100%' }}>\n      <Box ml=\"4\" mt=\"4\" style={{ flex: '1 1 0', overflow: 'auto' }}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box\n        m=\"2\"\n        style={{\n          flex: '0 0 auto',\n          background: 'var(--bui-bg-neutral-1)',\n          border: '1px solid var(--bui-border)',\n          borderRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <Legend />\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["getOutputColor","Fragment","Output","DisabledIcon","InputIcon"],"mappings":"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"}
+{"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AppNode,\n  AppTree,\n  ExtensionDataRef,\n  coreExtensionData,\n  ApiBlueprint,\n  NavItemBlueprint,\n  ThemeBlueprint,\n  useApi,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport {\n  RiInputField as InputIcon,\n  RiCloseCircleLine as DisabledIcon,\n} from '@remixicon/react';\nimport { Focusable } from 'react-aria-components';\n\nfunction getContrastColor(bgColor: string): string {\n  const hex = bgColor.replace('#', '');\n  const r = parseInt(hex.substr(0, 2), 16);\n  const g = parseInt(hex.substr(2, 2), 16);\n  const b = parseInt(hex.substr(4, 2), 16);\n  const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n  return brightness > 128 ? '#000000' : '#ffffff';\n}\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, { backgroundColor: string; color: string }>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    let backgroundColor: string;\n    if (id in colorMap) {\n      backgroundColor = colorMap[id];\n    } else {\n      const cached = map.get(id);\n      if (cached) {\n        return cached;\n      }\n      backgroundColor = availableColors[i];\n      i += 1;\n      if (i >= availableColors.length) {\n        i = 0;\n      }\n    }\n    const result = {\n      backgroundColor,\n      color: getContrastColor(backgroundColor),\n    };\n    map.set(id, result);\n    return result;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: '#4caf50',\n    [coreExtensionData.routePath.id]: '#ffeb3b',\n    [coreExtensionData.routeRef.id]: '#9c27b0',\n    [ApiBlueprint.dataRefs.factory.id]: '#2196f3',\n    [ThemeBlueprint.dataRefs.theme.id]: '#cddc39',\n    [NavItemBlueprint.dataRefs.target.id]: '#ff9800',\n  },\n\n  ['#90caf9', '#ffcc80', '#a5d6a7', '#ef9a9a', '#fff59d', '#ce93d8', '#e6ee9c'],\n);\n\n// Helper function to get border color based on depth\nfunction getBorderColor(depth: number): string {\n  const greyLevels = [8, 7, 6, 5]; // darker levels that contrast well with background\n  const index = depth % greyLevels.length;\n  const level = greyLevels[index];\n  return `var(--bui-gray-${level})`;\n}\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n  const { dataRef, node } = props;\n  const { id } = dataRef;\n  const instance = node?.instance;\n\n  const routeResolutionApi = useApi(routeResolutionApiRef);\n\n  const { backgroundColor, color } = getOutputColor(id);\n\n  const chipStyle: React.CSSProperties = {\n    height: 20,\n    padding: '0 10px',\n    borderRadius: '10px',\n    color,\n    backgroundColor,\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight:\n      'var(--bui-font-weight-regular)' as React.CSSProperties['fontWeight'],\n  };\n\n  if (id === coreExtensionData.routeRef.id && node) {\n    try {\n      const routeRef = props.node?.instance?.getData(\n        coreExtensionData.routeRef,\n      );\n      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();\n      if (link) {\n        return (\n          <TooltipTrigger>\n            <Link href={link} style={chipStyle}>\n              link\n            </Link>\n            <Tooltip>{id}</Tooltip>\n          </TooltipTrigger>\n        );\n      }\n    } catch {\n      /* ignore */\n    }\n  }\n\n  let tooltip = id;\n  let text: string | undefined = undefined;\n  if (id === coreExtensionData.routePath.id) {\n    text = String(instance?.getData(dataRef) ?? '');\n    tooltip = getFullPath(node);\n  }\n\n  return (\n    <TooltipTrigger>\n      <Focusable>\n        <Text style={{ ...chipStyle, cursor: 'help' }}>{text}</Text>\n      </Focusable>\n      <Tooltip style={{ maxWidth: 'unset' }}>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n\nfunction Attachments(props: {\n  node: AppNode;\n  enabled: boolean;\n  depth: number;\n}) {\n  const { node, depth } = props;\n  const { attachments } = node.edges;\n\n  if (attachments.size === 0) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {[...attachments.entries()]\n        .sort(([a], [b]) => a.localeCompare(b))\n        .map(([key, children], idx) => {\n          return (\n            <Box key={key}>\n              <Flex\n                p=\"2\"\n                align=\"center\"\n                style={{\n                  borderTopWidth: 'var(--bui-space-1_5)',\n                  borderTopStyle: 'solid',\n                  borderTopColor: getBorderColor(depth),\n                  borderTop: idx === 0 ? 'none' : undefined,\n                  width: 'fit-content',\n                }}\n              >\n                <InputIcon size={16} />\n                <div style={{ marginLeft: 'var(--bui-space-2)' }}>{key}</div>\n              </Flex>\n              <Flex ml=\"2\" mb=\"2\" direction=\"column\" align=\"start\" gap=\"1\">\n                {children.map(childNode => (\n                  <Extension\n                    key={childNode.spec.id}\n                    node={childNode}\n                    depth={depth + 1}\n                  />\n                ))}\n              </Flex>\n            </Box>\n          );\n        })}\n    </Flex>\n  );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n  const { node, depth } = props;\n\n  const enabled = Boolean(node.instance);\n  const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n  // Build tooltip text\n  const tooltipParts = [];\n  let currentNode = node;\n  tooltipParts.push(currentNode.spec.id);\n  while (currentNode.edges.attachedTo) {\n    const input = currentNode.edges.attachedTo.input;\n    currentNode = currentNode.edges.attachedTo.node;\n    tooltipParts.push(`${currentNode.spec.id} [${input}]`);\n  }\n  tooltipParts.reverse();\n  const tooltipText = tooltipParts.join('\\n');\n\n  return (\n    <Box\n      key={node.spec.id}\n      style={{\n        borderLeftWidth: 'var(--bui-space-1_5)',\n        borderLeftStyle: 'solid',\n        borderLeftColor: getBorderColor(depth),\n      }}\n    >\n      <Flex\n        py=\"1\"\n        px=\"2\"\n        align=\"center\"\n        style={{\n          width: 'fit-content',\n          color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',\n          background: 'var(--bui-bg-surface-1)',\n          borderTopRightRadius: 'var(--bui-radius-2)',\n          borderBottomRightRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <TooltipTrigger>\n          <Focusable>\n            <Text style={{ userSelect: 'all' }}>{node.spec.id}</Text>\n          </Focusable>\n          <Tooltip style={{ maxWidth: 'unset' }}>\n            <Text style={{ whiteSpace: 'pre-wrap' }}>{tooltipText}</Text>\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex ml=\"2\" align=\"center\" gap=\"2\">\n          {dataRefs &&\n            dataRefs.length > 0 &&\n            dataRefs\n              .sort((a, b) => a.id.localeCompare(b.id))\n              .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n          {!enabled && <DisabledIcon size={16} />}\n        </Flex>\n      </Flex>\n      <Attachments node={node} enabled={enabled} depth={depth} />\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': ApiBlueprint.dataRefs.factory,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': NavItemBlueprint.dataRefs.target,\n  Theme: ThemeBlueprint.dataRefs.theme,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      p=\"2\"\n      style={{\n        display: 'grid',\n        maxWidth: 600,\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 'var(--bui-space-4)',\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Flex key={dataRef.id} gap=\"2\" align=\"center\">\n          <Output dataRef={dataRef} />\n          <div>{label}</div>\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Flex direction=\"column\" style={{ height: '100%', flex: '1 1 100%' }}>\n      <Box ml=\"4\" mt=\"4\" style={{ flex: '1 1 0', overflow: 'auto' }}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box\n        m=\"2\"\n        style={{\n          flex: '0 0 auto',\n          background: 'var(--bui-bg-surface-1)',\n          border: '1px solid var(--bui-border)',\n          borderRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <Legend />\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["getOutputColor","InputIcon","DisabledIcon"],"mappings":"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"}

package/dist/components/AppVisualizerPage/TextVisualizer.esm.js

@@ -54,7 +54,7 @@ function TextVisualizer({ tree }) {
         py: "2",
         px: "4",
         style: {
-          background: "var(--bui-bg-neutral-1)",
+          background: "var(--bui-bg-surface-1)",
           borderTop: "1px solid var(--bui-border)"
         },
         children: [

package/dist/components/AppVisualizerPage/TextVisualizer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TextVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport { Box, Checkbox } from '@backstage/ui';\nimport { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n  children: ReactNode,\n  options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n  return (\n    <div\n      key={options?.key}\n      style={{\n        color: options?.color,\n        marginLeft: options?.indent ? 'var(--bui-space-4)' : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction nodeToText(\n  node: AppNode,\n  options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n  const dataRefIds =\n    node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n  const out =\n    options?.showOutputs && dataRefIds && dataRefIds.length > 0\n      ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n      : '';\n  const color = node.instance ? undefined : 'gray';\n\n  if (node.edges.attachments.size === 0) {\n    return mkDiv(`<${node.spec.id}${out}/>`, { color });\n  }\n\n  return mkDiv([\n    mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n    ...[...node.edges.attachments.entries()]\n      .sort(([a], [b]) => a.localeCompare(b))\n      .map(([key, v]) => {\n        const children = v\n          .filter(e => options?.showDisabled || e.instance)\n          .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n        if (children.length === 0) {\n          return mkDiv(`${key} []`, { key, indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`, { key: 'start' }),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true, key: e.spec.id }),\n            ),\n            mkDiv(']', { key: 'end' }),\n          ],\n          { key, indent: true },\n        );\n      }),\n    mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n  ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n  const [showOutputs, setShowOutputs] = useState(false);\n  const [showDisabled, setShowDisabled] = useState(false);\n\n  return (\n    <>\n      <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n        <Box m=\"4\" style={{ width: 'max-content' }}>\n          {nodeToText(tree.root, { showOutputs, showDisabled })}\n        </Box>\n      </Box>\n      <Box\n        py=\"2\"\n        px=\"4\"\n        style={{\n          background: 'var(--bui-bg-neutral-1)',\n          borderTop: '1px solid var(--bui-border)',\n        }}\n      >\n        <Checkbox isSelected={showOutputs} onChange={setShowOutputs}>\n          Show Outputs\n        </Checkbox>\n        <Checkbox isSelected={showDisabled} onChange={setShowDisabled}>\n          Show Disabled\n        </Checkbox>\n      </Box>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TextVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport { Box, Checkbox } from '@backstage/ui';\nimport { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n  children: ReactNode,\n  options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n  return (\n    <div\n      key={options?.key}\n      style={{\n        color: options?.color,\n        marginLeft: options?.indent ? 'var(--bui-space-4)' : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction nodeToText(\n  node: AppNode,\n  options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n  const dataRefIds =\n    node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n  const out =\n    options?.showOutputs && dataRefIds && dataRefIds.length > 0\n      ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n      : '';\n  const color = node.instance ? undefined : 'gray';\n\n  if (node.edges.attachments.size === 0) {\n    return mkDiv(`<${node.spec.id}${out}/>`, { color });\n  }\n\n  return mkDiv([\n    mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n    ...[...node.edges.attachments.entries()]\n      .sort(([a], [b]) => a.localeCompare(b))\n      .map(([key, v]) => {\n        const children = v\n          .filter(e => options?.showDisabled || e.instance)\n          .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n        if (children.length === 0) {\n          return mkDiv(`${key} []`, { key, indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`, { key: 'start' }),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true, key: e.spec.id }),\n            ),\n            mkDiv(']', { key: 'end' }),\n          ],\n          { key, indent: true },\n        );\n      }),\n    mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n  ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n  const [showOutputs, setShowOutputs] = useState(false);\n  const [showDisabled, setShowDisabled] = useState(false);\n\n  return (\n    <>\n      <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n        <Box m=\"4\" style={{ width: 'max-content' }}>\n          {nodeToText(tree.root, { showOutputs, showDisabled })}\n        </Box>\n      </Box>\n      <Box\n        py=\"2\"\n        px=\"4\"\n        style={{\n          background: 'var(--bui-bg-surface-1)',\n          borderTop: '1px solid var(--bui-border)',\n        }}\n      >\n        <Checkbox isSelected={showOutputs} onChange={setShowOutputs}>\n          Show Outputs\n        </Checkbox>\n        <Checkbox isSelected={showDisabled} onChange={setShowDisabled}>\n          Show Disabled\n        </Checkbox>\n      </Box>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-app-visualizer";
-var version = "0.1.28-next.1";
+var version = "0.1.28";
 var description = "Visualizes the Backstage app structure";
 var backstage = {
 	role: "frontend-plugin",
@@ -38,7 +38,7 @@ var dependencies = {
 	"@backstage/frontend-plugin-api": "workspace:^",
 	"@backstage/ui": "workspace:^",
 	"@remixicon/react": "^4.6.0",
-	"react-aria-components": "^1.14.0"
+	"react-aria-components": "~1.13.0"
 };
 var devDependencies = {
 	"@backstage/cli": "workspace:^",
@@ -46,13 +46,13 @@ var devDependencies = {
 	"@types/react": "^18.0.0",
 	react: "^18.0.2",
 	"react-dom": "^18.0.2",
-	"react-router-dom": "^6.30.2"
+	"react-router-dom": "^6.3.0"
 };
 var peerDependencies = {
 	"@types/react": "^17.0.0 || ^18.0.0",
 	react: "^17.0.0 || ^18.0.0",
 	"react-dom": "^17.0.0 || ^18.0.0",
-	"react-router-dom": "^6.30.2"
+	"react-router-dom": "^6.3.0"
 };
 var peerDependenciesMeta = {
 	"@types/react": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.28-next.1",
+  "version": "0.1.28",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin",
@@ -37,26 +37,26 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.18.7-next.2",
-    "@backstage/core-plugin-api": "1.12.3-next.1",
-    "@backstage/frontend-plugin-api": "0.14.0-next.2",
-    "@backstage/ui": "0.12.0-next.2",
+    "@backstage/core-components": "^0.18.6",
+    "@backstage/core-plugin-api": "^1.12.2",
+    "@backstage/frontend-plugin-api": "^0.13.4",
+    "@backstage/ui": "^0.11.3",
     "@remixicon/react": "^4.6.0",
-    "react-aria-components": "^1.14.0"
+    "react-aria-components": "~1.13.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.35.4-next.2",
-    "@backstage/frontend-defaults": "0.4.0-next.2",
+    "@backstage/cli": "^0.35.3",
+    "@backstage/frontend-defaults": "^0.3.6",
     "@types/react": "^18.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-router-dom": "^6.30.2"
+    "react-router-dom": "^6.3.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.30.2"
+    "react-router-dom": "^6.3.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {