@likec4/diagram 1.46.3 → 1.47.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -30,7 +30,7 @@ function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu,
   onOpenSource,
-  onBurgerMenuClick,
+  onLogoClick,
   onLayoutTypeChange,
   onInitialized,
   view,
@@ -123,7 +123,7 @@ function LikeC4Diagram({
                 onNodeClick,
                 onNodeContextMenu,
                 onOpenSource,
-                onBurgerMenuClick,
+                onLogoClick,
                 onInitialized,
                 onLayoutTypeChange
               },

package/dist/LikeC4Diagram.props.d.ts

@@ -253,7 +253,7 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
     onCanvasClick?: OnCanvasClick | null | undefined;
     onCanvasDblClick?: OnCanvasClick | null | undefined;
-    onBurgerMenuClick?: null | undefined | (() => void);
+    onLogoClick?: null | undefined | (() => void);
     onOpenSource?: OnOpenSource<A> | null | undefined;
     onInitialized?: OnInitialized | null | undefined;
     /**

package/dist/LikeC4ProjectsOverview.d.ts

@@ -0,0 +1,7 @@
+import { Simplify } from 'type-fest';
+import { ProjectsOverviewProps } from './projects-overview';
+export type LikeC4ProjectsOverviewProps = Simplify<Omit<ProjectsOverviewProps, 'id'> & {
+    className?: string;
+    onSelectProject?: ProjectsOverviewProps['onNavigateToProject'];
+}>;
+export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4ProjectsOverview.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RootContainer } from './components/RootContainer.js';
+import { useId } from './hooks/useId.js';
+import { useChangeLikeC4Project } from './hooks/useLikeC4Project.js';
+import { LikeC4Styles } from './LikeC4Styles.js';
+import { EnsureMantine } from './context/EnsureMantine.js';
+import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { ProjectsOverview } from './projects-overview/ProjectsOverview.js';
+
+function LikeC4ProjectsOverview({
+  view,
+  className,
+  onNavigateToProject,
+  ...props
+}) {
+  const onChangeLikeC4Project = useChangeLikeC4Project();
+  const id = useId();
+  onNavigateToProject ??= onChangeLikeC4Project;
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+    /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+    /* @__PURE__ */ jsx(RootContainer, { id, className, children: /* @__PURE__ */ jsx(
+      ProjectsOverview,
+      {
+        view,
+        onNavigateToProject,
+        ...props
+      }
+    ) })
+  ] }) });
+}
+
+export { LikeC4ProjectsOverview };

package/dist/base-primitives/Markdown.d.ts

@@ -1,5 +1,5 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '@likec4/styles/types';
+import { JsxStyleProps } from '../../styled-system/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
 export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;

package/dist/base-primitives/compound/CompoundNodeContainer.d.ts

@@ -1,13 +1,14 @@
 import { Color, ElementStyle } from '@likec4/core/types';
-import { HTMLMotionProps } from 'motion/react';
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { BaseNode, BaseNodeProps } from '../../base/types';
 export type RequiredData = {
     color: Color;
     depth: number;
     style: ElementStyle;
 };
-type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
+type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+    layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+    layoutId?: string | undefined;
     nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
 export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles';
+import { RecipeRuntimeFn } from '../../../styled-system';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/element/ElementNodeContainer.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { ensureSizes } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
+import { elementNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import { container } from './ElementNodeContainer.css.js';
 
 const ElementNodeContainer = forwardRef(({
   nodeProps: {
@@ -39,9 +39,8 @@ const ElementNodeContainer = forwardRef(({
     {
       ref,
       className: cx(
-        container,
+        elementNode(),
         "group",
-        "likec4-element-node",
         className
       ),
       initial: false,

package/dist/base-primitives/element/ElementShape.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
 import { elementShapeRecipe } from '@likec4/styles/recipes';
 import { roundDpr } from '../../utils/roundDpr.js';
 
-function cylinderSVGPath(diameter, height, tilt = 0.065) {
+function cylinderSVGPath(diameter, height, tilt = 0.07) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
   const ry = roundDpr(tilt * radius);
@@ -21,6 +21,48 @@ function cylinderSVGPath(diameter, height, tilt = 0.065) {
     rx
   };
 }
+function docSVGPath(width, height) {
+  const waveHeight = height / 8;
+  const baseY = roundDpr(height - waveHeight / 2);
+  const amplitude = roundDpr(height / 6);
+  const radius = 6;
+  const path = `
+    M 0 ${baseY}
+    V ${radius}
+    Q 0 0 ${radius} 0
+    H ${width - radius}
+    Q ${width} 0 ${width} ${radius}
+    V ${baseY}
+    C ${roundDpr(width * 0.75)} ${baseY + amplitude}, ${roundDpr(width * 0.5)} ${baseY - amplitude}, 0 ${baseY}
+  `.replace(/\s+/g, " ").trim();
+  return {
+    path
+  };
+}
+function bucketSVGPath(width, height) {
+  const cx = width / 2;
+  const topRx = roundDpr(cx);
+  const topRy = roundDpr(Math.min(height / 8, topRx * 0.08));
+  const bottomRx = roundDpr(topRx * 0.8);
+  const bottomRy = roundDpr(topRy * 1.05);
+  const topY = topRy;
+  const bottomY = height - bottomRy;
+  const leftBottomX = cx - bottomRx;
+  const path = `
+    M ${width},${topY}
+    a ${topRx},${topRy} 0,0,0 ${-width} 0
+    L ${leftBottomX},${bottomY}
+    a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
+    Z
+  `.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    topRx,
+    topRy,
+    bottomRx,
+    bottomRy
+  };
+}
 function queueSVGPath(width, height, tilt = 0.185) {
   const diameter = height;
   const radius = Math.round(diameter / 2);
@@ -64,6 +106,17 @@ function ShapeSvg({ shape, w, h }) {
         ] })
       ] });
     }
+    case "document": {
+      const { path } = docSVGPath(w, h);
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: path,
+          "data-likec4-fill": "fill",
+          strokeWidth: 2
+        }
+      );
+    }
     case "browser": {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -123,12 +176,39 @@ function ShapeSvg({ shape, w, h }) {
         /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
+    case "bucket": {
+      const { path, topRx, topRy } = bucketSVGPath(w, h);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: w / 2,
+            cy: topRy,
+            rx: topRx,
+            ry: topRy,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
+      ] });
+    }
     case "storage":
     case "cylinder": {
       const { path, rx, ry } = cylinderSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: rx,
+            cy: ry,
+            ry,
+            rx: rx - 0.75,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
       ] });
     }
     default: {
@@ -139,12 +219,18 @@ function ShapeSvg({ shape, w, h }) {
 function ShapeSvgOutline({ shape, w, h }) {
   let svg;
   switch (shape) {
+    case "bucket":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path }) });
+      break;
     case "queue":
-      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path }) });
+      break;
+    case "document":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path }) });
       break;
     case "storage":
     case "cylinder": {
-      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path }) });
       break;
     }
     default: {
@@ -163,26 +249,29 @@ function ShapeSvgOutline({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
-function ShapeHtml({ multiple, withOutLine }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: elementShapeRecipe({
-        shapetype: "html"
-      }),
-      children: [
-        multiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-        withOutLine && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
-      ]
-    }
-  );
-}
 function ElementShape({ data, width, height, showSeletionOutline = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? false;
+  const borderStyle = data.style?.border ?? "none";
+  const withBorder = borderStyle !== "none";
   if (data.shape === "rectangle") {
-    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: showSeletionOutline });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderStyle
+        },
+        className: elementShapeRecipe({
+          shapetype: "html",
+          withBorder
+        }),
+        children: [
+          isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
+          showSeletionOutline && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+        ]
+      }
+    );
   }
   const className = elementShapeRecipe({
     shapetype: "svg"

package/dist/components/NavigationPanel.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefComponent, HTMLMotionProps } from 'motion/react';
+import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
+import { NavigationPanelRecipe } from '../../styled-system/recipes';
+export declare const NavigationPanel: {
+    Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
+    Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+    Logo: StyleContextConsumer<ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>>>;
+    Label: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+    Dropdown: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+};

package/dist/components/NavigationPanel.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { createStyleContext, isCssProperty } from '@likec4/styles/jsx';
+import { navigationPanel } from '@likec4/styles/recipes';
+import { isValidMotionProp } from 'motion/react';
+import * as m from 'motion/react-m';
+import { forwardRef } from 'react';
+import { Logo as Logo$1 } from './Logo.js';
+
+const { withProvider, withContext } = createStyleContext(navigationPanel);
+const shouldForwardProp = (prop, variantKeys) => isValidMotionProp(prop) || !variantKeys.includes(prop) && !isCssProperty(prop);
+const LogoButton = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      className: cx(
+        "mantine-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsx(
+          Logo$1,
+          {
+            className: css({
+              display: {
+                base: "none",
+                "@/md": "block"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Logo$1,
+          {
+            className: css({
+              display: {
+                base: "block",
+                "@/md": "none"
+              }
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+const Root = withProvider(m.div, "root", {
+  shouldForwardProp
+});
+const Body = withContext(m.div, "body", {
+  shouldForwardProp
+});
+const Logo = withContext(LogoButton, "logo");
+const Label = withContext(m.div, "label", {
+  shouldForwardProp
+});
+withContext(m.div, "dropdown", {
+  shouldForwardProp
+});
+const NavigationPanel = {
+  Root,
+  Body,
+  Logo,
+  Label};
+
+export { NavigationPanel };

package/dist/context/DiagramEventHandlers.js

@@ -12,7 +12,7 @@ const defaultHandlers = {
   onEdgeContextMenu: null,
   onCanvasClick: null,
   onCanvasDblClick: null,
-  onBurgerMenuClick: null,
+  onLogoClick: null,
   onOpenSource: null,
   onInitialized: null,
   onLayoutTypeChange: null

package/dist/context/IconRenderer.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
 import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
 import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
 import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
@@ -57,7 +58,9 @@ const ShapeIcons = {
   person: IconUser,
   queue: IconReorder,
   rectangle: IconRectangularPrism,
-  storage: IconCylinder
+  storage: IconCylinder,
+  bucket: IconCylinder,
+  document: IconFileText
 };
 function IconOrShapeRenderer({
   element,

package/dist/hooks/useLikeC4Project.js

@@ -10,8 +10,16 @@ function useLikeC4Projects() {
   }
   return ctx.projects;
 }
-const emptyOnProjectChange = () => {
+const emptyOnProjectChange = (id) => {
+  console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
 };
+function useChangeLikeC4Project() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  if (!ctx) {
+    return emptyOnProjectChange;
+  }
+  return ctx.onProjectChange;
+}
 const emptyContext = {
   projects: emptyProjects,
   onProjectChange: emptyOnProjectChange
@@ -46,4 +54,4 @@ function useLikeC4Project() {
   return project;
 }
 
-export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };
+export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useLikeC4Styles.js

@@ -4,9 +4,6 @@ import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
 
 function useLikeC4Styles() {
   const model = useContext(LikeC4ModelContext);
-  if (!model) {
-    console.error("No LikeC4ModelContext found");
-  }
   const $styles = model?.$styles ?? LikeC4Styles.DEFAULT;
   const [styles, setStyles] = useState($styles);
   useEffect(() => {

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './Lik
 export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
 export { useCurrentViewModel } from './hooks/useCurrentViewModel';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
+export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
 export type { Types } from './likec4diagram/types';
@@ -17,3 +17,4 @@ export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
 export { useCurrentViewId } from './hooks/useCurrentView';
 export { pickViewBounds } from './utils/view-bounds';
+export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './LikeC4ProjectsOverview';

package/dist/index.js

@@ -6,7 +6,7 @@ export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
 export { useCurrentViewModel } from './hooks/useCurrentViewModel.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
+export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
@@ -14,4 +14,5 @@ export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
 export { useCurrentViewId } from './hooks/useCurrentView.js';
 export { pickViewBounds } from './utils/view-bounds.js';
+export { LikeC4ProjectsOverview } from './LikeC4ProjectsOverview.js';
 export { useDiagram } from './hooks/safeContext.js';

package/dist/likec4diagram/DiagramXYFlow.js

@@ -209,6 +209,7 @@ function LikeC4DiagramXYFlow({
       nodesDraggable,
       nodesSelectable,
       elevateEdgesOnSelect: !enableReadOnly,
+      zIndexMode: "manual",
       ...nodesDraggable && layoutConstraints,
       ...props,
       ...reactFlowProps,

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -19,16 +19,16 @@ function ColorButton({
     Popover,
     {
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      position: "right-end",
+      position: "top-start",
       offset: 2,
       withinPortal: false,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "xs", px: 6, children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
             color: theme.colors[elementColor].elements.fill,
-            size: 14,
+            size: 16,
             withShadow: true,
             style: { color: "#fff", cursor: "pointer" }
           }

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js

@@ -1,8 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box, SegmentedControl } from '@mantine/core';
-import { useState, useEffect } from 'react';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
-import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
@@ -89,40 +87,5 @@ function CompoundDeploymentToolbar(props) {
     }
   );
 }
-function BorderStyleOption({
-  elementBorderStyle = "dashed",
-  onChange
-}) {
-  const [value, setValue] = useState(elementBorderStyle);
-  useEffect(() => {
-    setValue(elementBorderStyle);
-  }, [elementBorderStyle]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fullWidth: true,
-      withItemsBorders: false,
-      value,
-      onChange: (v) => {
-        const border = v;
-        setValue(border);
-        onChange({ border });
-      },
-      styles: {
-        label: {
-          paddingTop: "0.5",
-          paddingBottom: "0.5"
-        }
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  ) });
-}
 
 export { CompoundDeploymentToolbar, CompoundElementToolbar };