@likec4/diagram 1.59.4 → 1.61.0

package/dist/LikeC4MantineProvider.mjs

@@ -0,0 +1,173 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { css } from "@likec4/styles/css";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { map } from "remeda";
+import { ActionBar, Card, Code, MantineProvider, Menu, Paper, Popover, SegmentedControl, Table, Title, Tooltip, createTheme, mergeThemeOverrides } from "@mantine/core";
+import { token } from "@likec4/styles/tokens";
+
+// src/LikeC4MantineProvider.tsx
+function t(name) {
+	return token.var(name);
+}
+const tshirts = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const sizes = (tokenCategory) => {
+	return Object.fromEntries(tshirts.map((size) => [size, t(`${tokenCategory}.${size}`)]));
+};
+const shades = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+const mapColor = (color) => {
+	return map(shades, (shade) => t(`colors.${color}.${shade}`));
+};
+const titles = [
+	css({ textStyle: "h1" }),
+	css({ textStyle: "h2" }),
+	css({ textStyle: "h3" }),
+	css({ textStyle: "h4" }),
+	css({ textStyle: "h5" }),
+	css({ textStyle: "h6" })
+];
+const likec4Theme = createTheme({
+	primaryColor: "likec4",
+	cursorType: "pointer",
+	autoContrast: true,
+	primaryShade: {
+		light: 5,
+		dark: 6
+	},
+	colors: { likec4: mapColor("likec4.accent") },
+	fontFamily: t("fonts.body"),
+	fontFamilyMonospace: t("fonts.mono"),
+	headings: {
+		fontFamily: t("fonts.display"),
+		fontWeight: t("fontWeights.bold")
+	},
+	defaultRadius: "sm",
+	fontWeights: {
+		regular: t("fontWeights.normal"),
+		medium: t("fontWeights.medium"),
+		semibold: t("fontWeights.semibold"),
+		bold: t("fontWeights.bold")
+	},
+	fontSizes: {
+		...sizes("fontSizes"),
+		xxs: t("fontSizes.xxs")
+	},
+	spacing: {
+		...sizes("spacing"),
+		xxs: t("spacing.xxs")
+	},
+	radius: sizes("radii"),
+	shadows: sizes("shadows"),
+	lineHeights: sizes("lineHeights"),
+	components: {
+		Card: Card.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: css({ bg: "surface.default" }) }
+		}),
+		Paper: Paper.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: css({ bg: "surface.default" }) }
+		}),
+		Title: Title.extend({ classNames: (_theme, props) => ({ root: titles[(props.order ?? 1) - 1] }) }),
+		Code: Code.extend({ classNames: { root: css({ bg: "surface.code" }) } }),
+		Table: Table.extend({ classNames: { th: css({
+			fontSize: "xxs",
+			fontWeight: "bold",
+			color: "text.dimmed",
+			textTransform: "uppercase",
+			letterSpacing: "caps.sm"
+		}) } }),
+		Tooltip: Tooltip.extend({
+			defaultProps: {
+				color: "dark",
+				fz: "xs",
+				withArrow: false,
+				openDelay: 600,
+				closeDelay: 120,
+				offset: 8
+			},
+			classNames: { tooltip: css({
+				shadow: {
+					base: "sm",
+					_dark: "lg"
+				},
+				_dark: {
+					bg: "surface.canvas",
+					border: "subtle"
+				}
+			}) }
+		}),
+		SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
+		Popover: Popover.extend({ defaultProps: {
+			withArrow: false,
+			radius: "sm",
+			shadow: "lg"
+		} }),
+		Menu: Menu.extend({ defaultProps: {
+			radius: "sm",
+			shadow: "lg"
+		} }),
+		ActionBar: ActionBar.extend({ defaultProps: {
+			radius: "sm",
+			shadow: "lg"
+		} })
+	}
+});
+const semantic = (variables) => ({
+	dark: variables,
+	light: variables
+});
+const resolver = (_) => ({
+	variables: { "--mantine-radius-default": t("radii.sm") },
+	...semantic({
+		"--mantine-color-text": t("colors.text"),
+		"--mantine-color-body": t("colors.surface.default"),
+		"--mantine-color-placeholder": t("colors.text.non-essential"),
+		"--mantine-color-anchor": t("colors.text.link"),
+		"--mantine-color-disabled": t("colors.disabled.body"),
+		"--mantine-color-disabled-color": t("colors.disabled.text"),
+		"--mantine-color-disabled-hover": t("colors.disabled.body"),
+		"--mantine-color-disabled-border": t("colors.disabled.border"),
+		"--mantine-color-default": t("colors.surface.default"),
+		"--mantine-color-default-color": t("colors.text"),
+		"--mantine-color-default-border": t("colors.border.default"),
+		"--mantine-color-default-hover": t("colors.surface.hover")
+	})
+});
+/**
+* LikeC4 Mantine provider with custom theme and CSS variables resolver
+*/
+function LikeC4MantineProvider({ children, defaultColorScheme = "auto", theme, ...props }) {
+	const mergedTheme = useMemo(() => theme ? mergeThemeOverrides(likec4Theme, theme) : likec4Theme, [theme]);
+	return /* @__PURE__ */ jsx(MantineProvider, {
+		defaultColorScheme,
+		theme: mergedTheme,
+		cssVariablesResolver: resolver,
+		...props,
+		children
+	});
+}
+/**
+* This is a deprecated alias for LikeC4MantineProvider.
+* @deprecated Use LikeC4MantineProvider instead
+*/
+const DefaultMantineProvider = LikeC4MantineProvider;
+
+export { DefaultMantineProvider, LikeC4MantineProvider };

package/dist/LikeC4ModelProvider.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import { LikeC4Model } from "@likec4/core/model";
+export interface LikeC4ModelProviderProps {
+  likec4model: LikeC4Model<any>;
+}
+/**
+ * Ensures LikeC4Model context
+ */
+export declare function LikeC4ModelProvider({ children, likec4model }: PropsWithChildren<LikeC4ModelProviderProps>): JSX$1.Element;

package/dist/LikeC4ModelProvider.mjs

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

package/dist/LikeC4ProjectsOverview.d.mts

@@ -0,0 +1,10 @@
+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";
+export type LikeC4ProjectsOverviewProps = Simplify<ProjectsOverviewProps & {
+  className?: string;
+  onSelectProject?: ProjectsOverviewProps['onNavigateToProject'];
+}>;
+export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): JSX.Element;

package/dist/LikeC4ProjectsOverview.mjs

@@ -0,0 +1,27 @@
+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";
+
+// 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
+		})
+	})] }) });
+}
+
+export { LikeC4ProjectsOverview };

package/dist/LikeC4ProjectsProvider.d.mts

@@ -0,0 +1,34 @@
+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";
+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;
+export {};

package/dist/LikeC4ProjectsProvider.mjs

@@ -0,0 +1,36 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4ProjectsContextProvider, useOptionalProjectsContext } from "./context/LikeC4ProjectsContext.mjs";
+import { useCallbackRef } from "./hooks/useCallbackRef.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+
+// 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
+	});
+}
+
+export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.mts

@@ -0,0 +1,15 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+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.mjs

@@ -0,0 +1,78 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
+import { memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { entries, join, map, pipe } from "remeda";
+import { useMantineStyleNonce } from "@mantine/core";
+
+// 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,
+		customCss: $styles.customCssContent
+	});
+}
+/**
+* @internal Memoized styles gives a performance boost during development
+*/
+const MemoizedStyle = memo(({ id, nonce, colorsStyles, customCss }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	"data-likec4-colors": id,
+	nonce: nonce || void 0,
+	children: colorsStyles
+}), customCss && /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	"data-likec4-custom-css": id,
+	nonce: nonce || void 0,
+	children: customCss
+})] }));
+MemoizedStyle.displayName = "MemoizedStyle";
+
+export { LikeC4Styles };

package/dist/LikeC4View.d.mts

@@ -0,0 +1,285 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "./customization/customization-types.mjs";
+import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from "./LikeC4Diagram.props.mjs";
+import { CSSProperties, ReactNode } from "react";
+import * as t from "@likec4/core/types";
+export interface LikeC4ViewProps<A extends t.Any = t.Any> {
+  /**
+   * 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 const LikeC4View: Customizable<(<A extends t.Any = t.Any>(properties: LikeC4ViewProps<A>) => import("react").JSX.Element), "LikeC4View">;