@likec4/diagram 1.35.0 → 1.36.0

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -15,30 +15,43 @@ const NavigationButtons = () => {
     hasStepBack: s.navigationHistory.currentIndex > 0,
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
   }));
-  return /* @__PURE__ */ jsxs(m.div, { layout: "position", className: hstack({ gap: 1, mdDown: { display: "none" } }), children: [
-    /* @__PURE__ */ jsx(
-      PanelActionIcon,
-      {
-        disabled: !hasStepBack,
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("back");
-        },
-        children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PanelActionIcon,
-      {
-        disabled: !hasStepForward,
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("forward");
-        },
-        children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      layout: "position",
+      className: hstack({
+        gap: "[1px]",
+        display: {
+          base: "none",
+          "@likec4-root/sm": "flex"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepBack,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("back");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepForward,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("forward");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { NavigationButtons };

package/dist/navigationpanel/controls/OpenSource.js

@@ -19,7 +19,7 @@ const OpenSource = () => {
         e.stopPropagation();
         onOpenSource?.({ view: viewId });
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { size: 12, stroke: 1.5, style: { width: "65%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5, style: { width: "65%" } })
     }
   ) });
 };

package/dist/navigationpanel/controls/SearchControl.js

@@ -21,14 +21,15 @@ function SearchControl() {
         diagram.openSearch();
       },
       whileTap: {
+        scale: 0.95,
         translateY: 1
       },
       className: cx(
         "group",
         hstack({
-          gap: "2xs",
+          gap: "xxs",
           paddingInline: "sm",
-          paddingBlock: "2xs",
+          paddingBlock: "xxs",
           rounded: "sm",
           userSelect: "none",
           cursor: "pointer",
@@ -40,8 +41,9 @@ function SearchControl() {
             base: "likec4.panel.action-icon.bg",
             _hover: "likec4.panel.action-icon.bg.hover"
           },
-          smDown: {
-            display: "none"
+          display: {
+            base: "none",
+            "@/md": "flex"
           }
         })
       ),

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -32,9 +32,9 @@ const ToggleReadonly = () => {
       className: cx(
         "group",
         hstack({
-          gap: "2",
-          paddingInline: "2xs",
-          paddingBlock: "2xs",
+          gap: "0.5",
+          paddingInline: "xxs",
+          paddingBlock: "xxs",
           rounded: "sm",
           userSelect: "none",
           cursor: "pointer",

package/dist/navigationpanel/controls/ViewDetailsCard.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from '@mantine/core';
+export declare const ViewDetailsCard: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -0,0 +1,232 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { HStack, Box, styled } from '@likec4/styles/jsx';
+import { hstack, vstack } from '@likec4/styles/patterns';
+import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { Link } from '../../components/Link.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import { useNavigationActorSnapshot } from '../hooks.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { ElementTag } from '../../base/primitives/element/ElementTags.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+
+const selector = ({ context }) => {
+  const view = context.viewModel;
+  return {
+    id: view.id,
+    title: view.titleOrUntitled,
+    description: view.description,
+    tags: view.tags,
+    links: view.links,
+    relativePath: view.$view.relativePath
+  };
+};
+const ViewDetailsCard = (props) => {
+  const data = useNavigationActorSnapshot(selector);
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom-end",
+      shadow: "xl",
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      trapFocus: true,
+      ...portalProps,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
+        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+      ]
+    }
+  );
+};
+const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+  UnstyledButton,
+  {
+    component: m.button,
+    layout: "position",
+    whileTap: {
+      scale: 0.95,
+      translateY: 1
+    },
+    className: cx(
+      "group",
+      hstack({
+        gap: "2",
+        paddingInline: "xxs",
+        paddingBlock: "xxs",
+        rounded: "sm",
+        userSelect: "none",
+        cursor: "pointer",
+        color: {
+          base: "likec4.panel.action-icon.text",
+          _hover: "likec4.panel.action-icon.text.hover"
+        },
+        backgroundColor: {
+          _hover: "likec4.panel.action-icon.bg.hover"
+        },
+        display: {
+          base: "none",
+          "@/xs": "flex"
+        }
+      }),
+      ``
+    ),
+    children: [
+      /* @__PURE__ */ jsx(IconId, { size: 16, stroke: 1.8 }),
+      linksCount > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "[1px]", children: [
+        /* @__PURE__ */ jsx(IconLink, { size: 14, stroke: 2 }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            css: {
+              fontSize: "11px",
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8
+            },
+            children: linksCount
+          }
+        )
+      ] })
+    ]
+  }
+) });
+const SectionHeader = styled("div", {
+  base: {
+    fontSize: "xs",
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    userSelect: "none",
+    mb: "xxs"
+  }
+});
+const ViewDetailsCardDropdown = ({
+  data: {
+    id,
+    title,
+    description,
+    tags,
+    links,
+    relativePath
+  }
+}) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(
+    Popover.Dropdown,
+    {
+      className: cx(
+        "nowheel nopan nodrag",
+        vstack({
+          margin: "xs",
+          layerStyle: "likec4.dropdown",
+          gap: "md",
+          padding: "md",
+          pointerEvents: "all",
+          maxWidth: "calc(100cqw - 32px)",
+          minWidth: "calc(100cqw - 50px)",
+          maxHeight: "calc(100cqh - 100px)",
+          width: "max-content",
+          cursor: "default",
+          "@/sm": {
+            minWidth: 400,
+            maxWidth: 550
+          },
+          "@/lg": {
+            maxWidth: 700
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title }),
+          /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
+            /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
+            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
+              ElementTag,
+              {
+                tag,
+                cursor: "pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.openSearch(`#${tag}`);
+                }
+              },
+              tag
+            )) })
+          ] })
+        ] }),
+        links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
+          /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
+        ] }),
+        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
+          /* @__PURE__ */ jsx(
+            MarkdownBlock,
+            {
+              value: description,
+              fontSize: "sm",
+              emptyText: "No description",
+              className: css({
+                userSelect: "all"
+              })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const ViewBadge = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
+    /* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        radius: "sm",
+        variant: "light",
+        color: "gray",
+        tt: "none",
+        fw: 500,
+        classNames: {
+          root: css({
+            width: "max-content",
+            overflow: "visible",
+            px: "1",
+            color: {
+              _light: "mantine.colors.gray[8]"
+            }
+          }),
+          label: css({
+            overflow: "visible"
+          }),
+          section: css({
+            opacity: 0.5,
+            userSelect: "none",
+            marginInlineEnd: "0.5"
+          })
+        },
+        children: value
+      }
+    )
+  ] });
+};
+const ViewBadgeLabel = styled("div", {
+  base: {
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    fontSize: "xxs",
+    userSelect: "none"
+  }
+});
+
+export { ViewDetailsCard };

package/dist/navigationpanel/controls/index.d.ts

@@ -3,3 +3,4 @@ export { NavigationButtons } from './NavigationButtons';
 export { OpenSource } from './OpenSource';
 export { SearchControl } from './SearchControl';
 export { ToggleReadonly } from './ToggleReadonly';
+export { ViewDetailsCard } from './ViewDetailsCard';

package/dist/navigationpanel/dropdown/ProjectsMenu.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '@mantine/core';
+export declare function ProjectsMenu(props: ButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { HStack, Box } from '@likec4/styles/jsx';
+import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
+import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../likec4model/useLikeC4Project.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+
+function ProjectsMenu(props) {
+  const { projects, onProjectChange } = useLikeC4ProjectsContext();
+  const projectId = useLikeC4ProjectId();
+  if (projects.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", alignItems: "baseline", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: {
+          fontWeight: "400",
+          fontSize: "xxs",
+          color: "mantine.colors.dimmed",
+          userSelect: "none"
+        },
+        children: "Project"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu, { shadow: "md", position: "bottom-start", offset: { mainAxis: 2 }, closeOnItemClick: true, children: [
+      /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          tabIndex: -1,
+          autoFocus: false,
+          variant: "subtle",
+          size: "compact-xs",
+          color: "gray",
+          classNames: {
+            root: css({
+              fontWeight: "400",
+              fontSize: "xxs",
+              height: "auto",
+              lineHeight: 1.1,
+              color: {
+                _light: "mantine.colors.gray[9]"
+              }
+            }),
+            section: css({
+              '&:is([data-position="right"])': {
+                marginInlineStart: "1"
+              }
+            })
+          },
+          rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
+          ...props,
+          children: projectId
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: (e) => {
+            if (projectId === id) {
+              e.stopPropagation();
+              return;
+            }
+            onProjectChange(id);
+          },
+          children: title ?? id
+        },
+        id
+      )) })
+    ] })
+  ] });
+}
+
+export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -16,11 +16,11 @@ function EditorPanel() {
     {
       layout: "position",
       className: vstack({
-        gap: "sm",
+        gap: "xs",
         layerStyle: "likec4.panel",
         position: "relative",
         cursor: "pointer",
-        padding: "4",
+        padding: "xxs",
         pointerEvents: "all"
       }),
       initial: {
@@ -35,7 +35,7 @@ function EditorPanel() {
         opacity: 0,
         translateX: -20
       },
-      children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+      children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 600, closeDelay: 120, children: [
         /* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
         /* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
         /* @__PURE__ */ jsx(LayoutDriftNotification, {}),

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
-import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup, ActionIcon } from '@mantine/core';
+import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup } from '@mantine/core';
 import { useDiagram } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
 import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
@@ -20,7 +21,7 @@ const Action = ({
   icon,
   onClick
 }) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(
-  ActionIcon,
+  PanelActionIcon,
   {
     classNames: {
       root: "action-icon",
@@ -31,27 +32,24 @@ const Action = ({
         }
       })
     },
-    variant: "subtle",
-    color: "gray",
     onClick,
     children: icon
   }
 ) });
 const ManualLayoutToolsButton = (props) => {
   const diagram = useDiagram();
+  const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
-      position: "right-start",
+      position: "right",
       offset: {
-        mainAxis: 10,
-        crossAxis: -2
+        mainAxis: 12
       },
       clickOutsideEvents: [
         "pointerdown"
       ],
-      radius: "sm",
-      shadow: "lg",
+      ...portalProps,
       ...props,
       children: [
         /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
@@ -59,16 +57,17 @@ const ManualLayoutToolsButton = (props) => {
           PopoverDropdown,
           {
             className: hstack({
-              gap: 1,
+              gap: "0.5",
               layerStyle: "likec4.panel",
-              p: "2"
+              padding: "1",
+              pointerEvents: "all"
             }),
             children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
               /* @__PURE__ */ jsx(
                 Action,
                 {
                   label: "Align in columns",
-                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.2 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Column");
@@ -79,7 +78,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align left",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Left");
@@ -90,7 +89,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align center",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Center");
@@ -101,7 +100,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align right",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Right");
@@ -112,7 +111,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align in rows",
-                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.5, style: { transform: "rotate(90deg)" } }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Row");
@@ -123,7 +122,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align top",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Top");
@@ -134,7 +133,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align middle",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Middle");
@@ -145,7 +144,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align bottom",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Bottom");
@@ -156,7 +155,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Reset all control points",
-                  icon: /* @__PURE__ */ jsx(IconRouteOff, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.resetEdgeControlPoints();

package/dist/navigationpanel/editorpanel/styles.js

@@ -1,15 +1,15 @@
 import { css } from '@likec4/styles/css';
 
 css({
-  gap: "micro",
+  gap: "xxs",
   _empty: {
     display: "none"
   }
 });
 css({
-  top: "1rem",
-  left: "1rem",
-  margin: 0,
+  top: "md",
+  left: "md",
+  margin: "0",
   pointerEvents: "none",
   "& :where(button, .action-icon, [role='dialog'])": {
     pointerEvents: "all"
@@ -43,7 +43,7 @@ const autolayoutButton = css({
   flex: "1 1 40%",
   textAlign: "center",
   fontWeight: 500,
-  padding: "4px 6px",
+  padding: "[4px 6px]",
   fontSize: "11px",
   zIndex: 1
 });

package/dist/navigationpanel/hooks.d.ts

@@ -5,7 +5,7 @@ export declare const NavigationPanelActorContextProvider: Provider<NavigationPan
 export declare const useNavigationActorRef: () => NavigationPanelActorRef;
 export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
 export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-export type NavigationActor = {
+export interface NavigationActor {
     readonly actorRef: NavigationPanelActorRef;
     send: (event: NavigationPanelActorEvent) => void;
     selectFolder: (folderPath: string) => void;
@@ -16,5 +16,5 @@ export type NavigationActor = {
     isOpened: () => boolean;
     clearSearch: () => void;
     closeDropdown: () => void;
-};
+}
 export declare function useNavigationActor(): NavigationActor;

package/dist/navigationpanel/styles.css.js

@@ -5,8 +5,6 @@ const breadcrumbTitle = cva({
     fontSize: "sm",
     fontWeight: "500",
     transition: "fast",
-    // width: 'max-content',
-    alignSelf: "stretch",
     color: {
       base: "mantine.colors.text/90",
       _hover: "mantine.colors.text"