@likec4/diagram 1.59.4 → 1.60.0

package/dist/LikeC4ProjectsOverview.d.ts

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

package/dist/LikeC4ProjectsOverview.js

@@ -1,26 +0,0 @@
-import "./_virtual/_rolldown/runtime.js";
-import { RootContainer } from "./components/RootContainer.js";
-import { EnsureMantine } from "./context/EnsureMantine.js";
-import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
-import { useId } from "./hooks/useId.js";
-import { useChangeLikeC4Project } from "./hooks/useLikeC4Project.js";
-import { LikeC4Styles } from "./LikeC4Styles.js";
-import { ProjectsOverview } from "./projects-overview/ProjectsOverview.js";
-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.ts

@@ -1,33 +0,0 @@
-import { ProjectId } from '@likec4/core/types';
-import { PropsWithChildren } from 'react';
-import { JSX } from 'react/jsx-runtime';
-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.Element;
-export {};

package/dist/LikeC4ProjectsProvider.js

@@ -1,35 +0,0 @@
-import "./_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "./hooks/useCallbackRef.js";
-import { LikeC4ProjectsContextProvider, useOptionalProjectsContext } from "./context/LikeC4ProjectsContext.js";
-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.ts

@@ -1,14 +0,0 @@
-import { JSX } from 'react/jsx-runtime';
-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;
-export {};

package/dist/LikeC4Styles.js

@@ -1,71 +0,0 @@
-import "./_virtual/_rolldown/runtime.js";
-import { useLikeC4Styles } from "./hooks/useLikeC4Styles.js";
-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
-var scheme = (scheme) => `[data-mantine-color-scheme="${scheme}"]`;
-var whenDark = scheme("dark");
-var 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
-*/
-var 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.ts

@@ -1,284 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from './LikeC4Diagram.props';
-import type * as t from '@likec4/core/types';
-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.Element;

package/dist/LikeC4View.js

@@ -1,151 +0,0 @@
-import "./_virtual/_rolldown/runtime.js";
-import { FitViewPaddings } from "./base/const.js";
-import { stopPropagation } from "./utils/xyflow.js";
-import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
-import { pickViewBounds } from "./utils/view-bounds.js";
-import { Overlay } from "./overlays/overlay/Overlay.js";
-import { LikeC4Diagram } from "./LikeC4Diagram.js";
-import { ErrorMessage } from "./components/ViewNotFound.js";
-import { ShadowRoot } from "./shadowroot/ShadowRoot.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconX } from "@tabler/icons-react";
-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
-var 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 };

package/dist/ReactLikeC4.d.ts

@@ -1,47 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
-import type * as t from '@likec4/core/types';
-export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
-    viewId: t.aux.ViewId<A>;
-    /**
-     * Layout to display
-     * - `auto`: auto-layouted from the current sources
-     * - `manual`: manually layouted (if available, falls back to `auto`)
-     *
-     * Uncontrolled initial value, use `onLayoutTypeChange` to control it.
-     *
-     * @default 'manual'
-     */
-    layoutType?: t.LayoutType | undefined;
-    /**
-     * Keep aspect ratio of the diagram
-     *
-     * @default false
-     */
-    keepAspectRatio?: boolean | undefined;
-    /**
-     * By default determined by the user's system preferences.
-     */
-    colorScheme?: 'light' | 'dark' | undefined;
-    /**
-     * LikeC4 views are using 'IBM Plex Sans Variable' 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;
-    style?: CSSProperties | undefined;
-    mantineTheme?: any;
-    /** Function to generate nonce attribute added to all generated `<style />` tags */
-    styleNonce?: string | (() => string | undefined) | undefined;
-    children?: ReactNode | undefined;
-} & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
-/**
- * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
- * But provides more control over the diagram
- *
- * Component is wrapped in ShadowRoot to isolate styles.
- */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, layoutType: initialLayoutType, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): JSX.Element;