@likec4/diagram 1.59.4 → 1.60.0

package/dist/LikeC4ModelProvider.mjs

@@ -0,0 +1,17 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4ModelContextProvider } from "./context/LikeC4ModelContext.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/LikeC4ModelProvider.tsx
+/**
+* Ensures LikeC4Model context
+*/
+function LikeC4ModelProvider({ children, likec4model }) {
+	return /* @__PURE__ */ jsx(LikeC4ModelContextProvider, {
+		value: likec4model,
+		children
+	});
+}
+
+//#endregion
+export { LikeC4ModelProvider };

package/dist/LikeC4ProjectsOverview.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { ProjectsOverviewProps } from "./projects-overview/ProjectsOverview.mjs";
+import "./projects-overview/index.mjs";
+import { JSX } from "react/jsx-runtime";
+import { Simplify } from "type-fest";
+//#region src/LikeC4ProjectsOverview.d.ts
+export type LikeC4ProjectsOverviewProps = Simplify<ProjectsOverviewProps & {
+  className?: string;
+  onSelectProject?: ProjectsOverviewProps['onNavigateToProject'];
+}>;
+export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): JSX.Element;
+//#endregion

package/dist/LikeC4ProjectsOverview.mjs

@@ -0,0 +1,28 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { RootContainer } from "./components/RootContainer.mjs";
+import { EnsureMantine } from "./context/EnsureMantine.mjs";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
+import { useId } from "./hooks/useId.mjs";
+import { useChangeLikeC4Project } from "./hooks/useLikeC4Project.mjs";
+import { LikeC4Styles } from "./LikeC4Styles.mjs";
+import { ProjectsOverview } from "./projects-overview/ProjectsOverview.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LikeC4ProjectsOverview.tsx
+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, { rootSelector: `#${id}` }), /* @__PURE__ */ jsx(RootContainer, {
+		id,
+		className,
+		children: /* @__PURE__ */ jsx(ProjectsOverview, {
+			view,
+			onNavigateToProject,
+			...props
+		})
+	})] }) });
+}
+
+//#endregion
+export { LikeC4ProjectsOverview };

package/dist/LikeC4ProjectsProvider.d.mts

@@ -0,0 +1,35 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import { ProjectId } from "@likec4/core/types";
+//#region src/LikeC4ProjectsProvider.d.ts
+type LandingPageConfig = {
+  redirect: true;
+} | {
+  include: string[];
+} | {
+  exclude: string[];
+};
+export interface LikeC4ProjectData {
+  readonly id: ProjectId;
+  readonly title?: string | undefined;
+  readonly path?: string | undefined;
+  readonly landingPage?: LandingPageConfig | undefined;
+  readonly exportFormats?: readonly string[] | undefined;
+}
+export interface LikeC4ProjectsProviderProps {
+  /**
+   * Projects to be used in the navigation panel.
+   * Current project is taken from the LikeC4Model
+   */
+  projects: ReadonlyArray<LikeC4ProjectData>;
+  /**
+   * Optional callback when another project is selected.
+   */
+  onProjectChange?: (id: ProjectId) => void;
+}
+/**
+ * Ensures LikeC4Projects context
+ */
+export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange }: PropsWithChildren<LikeC4ProjectsProviderProps>): JSX$1.Element;
+//#endregion

package/dist/LikeC4ProjectsProvider.mjs

@@ -0,0 +1,37 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "./hooks/useCallbackRef.mjs";
+import { LikeC4ProjectsContextProvider, useOptionalProjectsContext } from "./context/LikeC4ProjectsContext.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+
+//#region src/LikeC4ProjectsProvider.tsx
+/**
+* Ensures LikeC4Projects context
+*/
+function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange }) {
+	const outerScope = useOptionalProjectsContext();
+	useEffect(() => {
+		if (outerScope) console.warn("LikeC4ProjectsProvider should not be nested inside another one");
+	}, []);
+	const onProjectChange = useCallbackRef(_onProjectChange);
+	const [value, setValue] = useState(() => ({
+		projects,
+		onProjectChange
+	}));
+	useEffect(() => {
+		setValue((current) => {
+			return deepEqual(current.projects, projects) ? current : {
+				...current,
+				projects
+			};
+		});
+	}, [projects]);
+	return /* @__PURE__ */ jsx(LikeC4ProjectsContextProvider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.mts

@@ -0,0 +1,16 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { JSX } from "react/jsx-runtime";
+//#region src/LikeC4Styles.d.ts
+interface LikeC4StylesProps {
+  /**
+   * Root element selector to scope the styles to (e.g., "#diagram-root")
+   * Must be a valid CSS selector
+   */
+  rootSelector: string;
+}
+/**
+ * Component that renders LikeC4 theme colors as CSS variables
+ * scoped to the provided root selector
+ */
+export declare function LikeC4Styles({ rootSelector }: LikeC4StylesProps): JSX.Element;
+//#endregion

package/dist/LikeC4Styles.mjs

@@ -0,0 +1,73 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { entries, join, map, pipe } from "remeda";
+import { useMantineStyleNonce } from "@mantine/core";
+
+//#region src/LikeC4Styles.tsx
+const scheme = (scheme) => `[data-mantine-color-scheme="${scheme}"]`;
+const whenDark = scheme("dark");
+const generateCompoundColors = (rootSelector, name, colors, depth) => {
+	return `
+${`${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`} {
+  --likec4-palette-fill: ${colors.fill};
+  --likec4-palette-stroke: ${colors.stroke};  
+}
+  `;
+};
+function toStyle(styles, params) {
+	const { rootSelector, name, colors } = params;
+	const { elements, relationships } = colors;
+	const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
+	return [`
+${selector} {
+  --likec4-palette-fill: ${elements.fill};
+  --likec4-palette-stroke: ${elements.stroke};
+  --likec4-palette-hiContrast: ${elements.hiContrast};
+  --likec4-palette-loContrast: ${elements.loContrast};
+  --likec4-palette-relation-stroke: ${relationships.line};
+  --likec4-palette-relation-label: ${relationships.label};
+  --likec4-palette-relation-label-bg: ${relationships.labelBg};
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l - 0.15) c h);
+}
+${whenDark} ${selector} {
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l + 0.15) c h);
+}
+
+  `, ...styles.colorsForCompounds(elements, 5).map((colors, depth) => generateCompoundColors(rootSelector, name, colors, depth + 1))].map((s) => s.trim()).join("\n");
+}
+function generateBuiltInColorStyles(styles, rootSelector) {
+	return pipe(styles.theme.colors, entries(), map(([name, colors]) => toStyle(styles, {
+		rootSelector,
+		name,
+		colors
+	})), join("\n"));
+}
+/**
+* Component that renders LikeC4 theme colors as CSS variables
+* scoped to the provided root selector
+*/
+function LikeC4Styles({ rootSelector }) {
+	const nonce = useMantineStyleNonce()?.();
+	const $styles = useLikeC4Styles();
+	const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint]);
+	return /* @__PURE__ */ jsx(MemoizedStyle, {
+		id: $styles.fingerprint,
+		nonce,
+		colorsStyles
+	});
+}
+/**
+* @internal Memoized styles gives a performance boost during development
+*/
+const MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	"data-likec4-colors": id,
+	nonce: nonce || void 0,
+	children: colorsStyles
+}));
+MemoizedStyle.displayName = "MemoizedStyle";
+
+//#endregion
+export { LikeC4Styles };

package/dist/LikeC4View.d.mts

@@ -0,0 +1,287 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from "./LikeC4Diagram.props.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import * as t from "@likec4/core/types";
+//#region src/LikeC4View.d.ts
+export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
+  /**
+   * View to display.
+   */
+  viewId: t.aux.ViewId<A>;
+  /**
+   * Layout to display
+   * - `auto`: auto-layouted from the current sources
+   * - `manual`: manually layouted (if available, falls back to `auto`)
+   *
+   * @default 'manual'
+   */
+  layoutType?: t.LayoutType | undefined;
+  /**
+   * Enable/disable panning
+   * @default false
+   */
+  pannable?: boolean | undefined;
+  /**
+   * Enable/disable zooming
+   * @default false
+   */
+  zoomable?: boolean | undefined;
+  /**
+   * @default true
+   */
+  keepAspectRatio?: boolean | undefined;
+  /**
+   * Background pattern
+   * @default 'transparent'
+   */
+  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+  /**
+   * Click on the view opens a modal with browser.
+   * You can customize or disable the browser.
+   *
+   * @default true
+   */
+  browser?: boolean | LikeC4BrowserProps | undefined;
+  /**
+   * @default - determined by the user's system preferences.
+   */
+  colorScheme?: 'light' | 'dark' | undefined;
+  /**
+   * LikeC4 views are using 'IBM Plex Sans' font.
+   * By default, component injects the CSS to document head.
+   * Set to false if you want to handle the font yourself.
+   *
+   * @default true
+   */
+  injectFontCss?: boolean | undefined;
+  /**
+   * Show/hide panel with top left controls,
+   * @default false
+   */
+  controls?: boolean | undefined;
+  /**
+   * If set, initial viewport will show all nodes & edges
+   * @default true
+   */
+  fitView?: boolean | undefined;
+  /**
+   * Padding around the diagram
+   * @default '16px'
+   *
+   * @see {@link ViewPadding}
+   *
+   * @example
+   * ```tsx
+   * <LikeC4View
+   *   fitViewPadding={{
+   *     x: '16px',
+   *     y: 16,
+   *   }}
+   * />
+   *
+   * <LikeC4View
+   *   fitViewPadding={{
+   *     top: 8,
+   *     right: '8px',
+   *     bottom: '1px',
+   *     left: '8px',
+   *   }}
+   * />
+   * ```
+   */
+  fitViewPadding?: ViewPadding | undefined;
+  /**
+   * Show back/forward navigation buttons in controls panel
+   * @default false
+   */
+  showNavigationButtons?: undefined | boolean;
+  /**
+   * Display notations of the view
+   * @default false
+   */
+  enableNotations?: boolean | undefined;
+  /**
+   * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+   * Conflicts with `browser` prop
+   *
+   * @default false
+   */
+  enableFocusMode?: boolean | undefined;
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default false
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined;
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined;
+  /**
+   * Enable popup with element details
+   * @default false
+   */
+  enableElementDetails?: boolean | undefined;
+  /**
+   * Display element tags in the bottom left corner
+   * @default false
+   */
+  enableElementTags?: boolean | undefined;
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default false
+   */
+  enableRelationshipDetails?: boolean | undefined;
+  /**
+   * Allow popup to browse relationships
+   *
+   * @default enableRelationshipDetails
+   */
+  enableRelationshipBrowser?: boolean | undefined;
+  /**
+   * Display element notes, if they are present in the view
+   *
+   * @default false
+   */
+  enableNotes?: boolean | undefined;
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined;
+  where?: t.WhereOperator<A> | undefined;
+  /**
+   * Override some react flow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+  /**
+   * Override Mantine theme
+   */
+  mantineTheme?: any;
+  /** Function to generate nonce attribute added to all generated `<style />` tags */
+  styleNonce?: string | (() => string) | undefined;
+  /**
+   * Override node renderers
+   */
+  renderNodes?: NodeRenderers | undefined;
+  /**
+   * Render custom icon for a node
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   */
+  renderIcon?: ElementIconRenderer | undefined;
+  /**
+   * Children to render inside the diagram (not inside the browser overlay)
+   */
+  children?: ReactNode | undefined;
+}
+export interface LikeC4BrowserProps {
+  /**
+   * Background pattern for the browser view.
+   * @default 'dots'
+   */
+  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+  /**
+   * Padding around the diagram
+   * @default '16px'
+   */
+  fitViewPadding?: PaddingWithUnit | undefined;
+  /**
+   * Show/hide panel with top left controls,
+   *
+   * @default true
+   */
+  controls?: boolean | undefined;
+  /**
+   * Show back/forward navigation buttons
+   * @default true
+   */
+  showNavigationButtons?: undefined | boolean;
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined;
+  /**
+   * If double click on a node should enable focus mode
+   *
+   * @default true
+   */
+  enableFocusMode?: boolean | undefined;
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default true
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined;
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined;
+  /**
+   * Enable popup with element details
+   * @default true
+   */
+  enableElementDetails?: boolean | undefined;
+  /**
+   * Experimental feature to browse relationships
+   *
+   * @default true
+   */
+  enableRelationshipBrowser?: boolean | undefined;
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default enableRelationshipBrowser
+   */
+  enableRelationshipDetails?: boolean | undefined;
+  /**
+   * Display element tags in the bottom left corner
+   * @default true
+   */
+  enableElementTags?: boolean | undefined;
+  /**
+   * Display notations of the view
+   * @default true
+   */
+  enableNotations?: boolean | undefined;
+  /**
+   * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+   * @default true
+   */
+  enableCompareWithLatest?: boolean | undefined;
+  /**
+   * Display element notes, if they are present in the view
+   *
+   * @default true
+   */
+  enableNotes?: boolean | undefined;
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+  /**
+   * Override some react flow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined;
+  /**
+   * Children to render inside the browser overlay
+   */
+  children?: ReactNode | undefined;
+}
+/**
+ * Ready-to-use component to display embedded LikeC4 view,
+ * OnClick allows to browse the model.
+ *
+ * {@link ReactLikeC4} gives you more control.
+ *
+ * Component is wrapped in ShadowRoot to isolate styles.
+ */
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, layoutType: initialLayoutType, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableNotes, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): JSX$1.Element;
+//#endregion

package/dist/LikeC4View.mjs

@@ -0,0 +1,153 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import IconX from "./node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { FitViewPaddings } from "./base/const.mjs";
+import { stopPropagation } from "./utils/xyflow.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
+import { Overlay } from "./overlays/overlay/Overlay.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { ErrorMessage } from "./components/ViewNotFound.mjs";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isBoolean } from "remeda";
+import { ActionIcon } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+
+//#region src/LikeC4View.tsx
+const cssInteractive = css({
+	cursor: "pointer",
+	["--mantine-cursor-pointer"]: "pointer",
+	"& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": { cursor: "pointer" }
+});
+/**
+* Ready-to-use component to display embedded LikeC4 view,
+* OnClick allows to browse the model.
+*
+* {@link ReactLikeC4} gives you more control.
+*
+* Component is wrapped in ShadowRoot to isolate styles.
+*/
+function LikeC4View({ viewId, className, pannable = false, zoomable = false, keepAspectRatio = true, colorScheme, injectFontCss = true, controls = false, layoutType: initialLayoutType = "manual", background = "transparent", browser = true, showNavigationButtons = false, enableNotations, enableFocusMode = false, enableDynamicViewWalkthrough = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, enableNotes = false, reduceGraphics = "auto", mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }) {
+	const likec4model = useOptionalLikeC4Model();
+	const [layoutType, setLayoutType] = useState(initialLayoutType);
+	const [browserViewId, _onNavigateTo] = useState(null);
+	const onNavigateTo = (viewId) => {
+		if (viewId && viewId !== browserViewId) setLayoutType(initialLayoutType);
+		_onNavigateTo(viewId);
+	};
+	const onNavigateToThisView = () => {
+		onNavigateTo(viewId);
+	};
+	const closeBrowser = () => {
+		onNavigateTo(null);
+	};
+	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
+	const viewModel = likec4model.findView(viewId);
+	if (!viewModel) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found in LikeC4Model.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Available views: ",
+		[...likec4model.views()].map((v) => v.id).join(", ")
+	] });
+	if (!viewModel.isLayouted()) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" is not layouted.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Make sure you have LikeC4ModelProvider with layouted model."
+	] });
+	const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
+	const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
+	const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
+	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+	const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
+	const isBrowserEnabled = browser !== false;
+	const browserProps = isBoolean(browser) ? {} : browser;
+	const bounds = pickViewBounds(view, props.dynamicViewVariant);
+	return /* @__PURE__ */ jsxs(ShadowRoot, {
+		injectFontCss,
+		theme: mantineTheme,
+		colorScheme,
+		styleNonce,
+		keepAspectRatio: keepAspectRatio ? bounds : false,
+		className: cx("likec4-view", className),
+		style,
+		children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+			view,
+			pannable,
+			zoomable,
+			background,
+			fitView: true,
+			fitViewPadding: FitViewPaddings.default,
+			enableNotations: hasNotations,
+			enableDynamicViewWalkthrough,
+			showNavigationButtons,
+			enableCompareWithLatest: false,
+			enableFocusMode,
+			enableRelationshipDetails,
+			enableElementDetails,
+			enableRelationshipBrowser,
+			enableElementTags: false,
+			enableNotes,
+			controls,
+			reduceGraphics,
+			className: cx("likec4-static-view", isBrowserEnabled && cssInteractive),
+			enableSearch: false,
+			...isBrowserEnabled && {
+				onCanvasClick: onNavigateToThisView,
+				onNodeClick: onNavigateToThisView,
+				onEdgeClick: onNavigateToThisView
+			},
+			reactFlowProps,
+			renderNodes,
+			...props,
+			children
+		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
+			onClose: closeBrowser,
+			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+				view: browserView,
+				pannable: true,
+				zoomable: true,
+				background: "dots",
+				onNavigateTo,
+				showNavigationButtons: true,
+				enableDynamicViewWalkthrough: true,
+				enableFocusMode: true,
+				enableRelationshipBrowser: true,
+				enableElementDetails: true,
+				enableRelationshipDetails: true,
+				enableSearch: true,
+				enableElementTags: true,
+				enableNotes: true,
+				enableCompareWithLatest: true,
+				controls: true,
+				fitView: true,
+				...props,
+				fitViewPadding: FitViewPaddings.withControls,
+				...browserProps,
+				enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+				renderNodes,
+				onLayoutTypeChange: setLayoutType
+			}), /* @__PURE__ */ jsx(Box$1, {
+				pos: "absolute",
+				top: "4",
+				right: "4",
+				zIndex: "dropdown",
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					color: "gray",
+					onClick: closeBrowser,
+					children: /* @__PURE__ */ jsx(IconX, {})
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { LikeC4View };