@likec4/diagram 1.59.3 → 1.60.0

package/custom/package.json

@@ -1,4 +1,4 @@
 {
-  "types": "../dist/custom/index.d.ts",
-  "module": "../dist/custom/index.js"
+  "types": "../dist/custom/index.d.mts",
+  "module": "../dist/custom/index.mjs"
 }

package/dist/LikeC4Diagram.d.mts

@@ -0,0 +1,15 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
+import { PropsWithChildren } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import { Any } from "@likec4/core/types";
+//#region src/LikeC4Diagram.d.ts
+export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
+/**
+ * Low-level component to display LikeC4 view
+ * Expects CSS to be injected
+ *
+ * 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, onLogoClick, onLayoutTypeChange, onRelationshipBrowserScopeChange, onInitialized, view, className, controls, fitView, initialZoom, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, relationshipBrowserScope, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, enableNotes, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, minZoom, maxZoom, children }: LikeC4DiagramProps<A>): JSX$1.Element;
+//#endregion

package/dist/LikeC4Diagram.mjs

@@ -0,0 +1,173 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { IconRendererProvider } from "./context/IconRenderer.mjs";
+import { FitViewPaddings, MaxZoom, MinZoom } from "./base/const.mjs";
+import { RootContainer } from "./components/RootContainer.mjs";
+import { DiagramEventHandlers } from "./context/DiagramEventHandlers.mjs";
+import { DiagramFeatures } from "./context/DiagramFeatures.mjs";
+import { EnsureMantine } from "./context/EnsureMantine.mjs";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { CurrentViewModelProvider } from "./context/CurrentViewModelProvider.mjs";
+import { TagStylesProvider } from "./context/TagStylesContext.mjs";
+import { useOptionalLikeC4Editor } from "./editor/LikeC4EditorProvider.mjs";
+import { useId } from "./hooks/useId.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
+import { convertToXYFlow } from "./likec4diagram/convert-to-xyflow.mjs";
+import { LikeC4Styles } from "./LikeC4Styles.mjs";
+import { LikeC4DiagramUI } from "./likec4diagram/DiagramUI.mjs";
+import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.mjs";
+import { DiagramActorProvider } from "./likec4diagram/state/DiagramActorProvider.mjs";
+import { Profiler, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCustomCompareMemo } from "@react-hookz/web";
+import { ReactFlowProvider } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { isEmptyish, isPlainObject, mapValues } from "remeda";
+
+//#region src/LikeC4Diagram.tsx
+const noop = () => {};
+/**
+* Low-level component to display LikeC4 view
+* Expects CSS to be injected
+*
+* Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
+*/
+function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onRelationshipBrowserScopeChange, onInitialized, view, className, controls = true, fitView = true, initialZoom, fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default, pannable = true, zoomable = true, background = "dots", enableElementTags = false, enableFocusMode = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = false, relationshipBrowserScope = "view", enableCompareWithLatest = !!onLayoutTypeChange, nodesSelectable, enableNotations = false, showNavigationButtons = !!onNavigateTo, enableDynamicViewWalkthrough = false, dynamicViewVariant, enableSearch = false, enableNotes = true, initialWidth, initialHeight, reduceGraphics = "auto", renderIcon, where, reactFlowProps, renderNodes, minZoom = MinZoom, maxZoom = 3, children }) {
+	const id = useId();
+	const initialRef = useRef(null);
+	const optionalLikeC4Model = useOptionalLikeC4Model();
+	enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
+	const hasLikeC4Model = !!optionalLikeC4Model;
+	const editor = useOptionalLikeC4Editor();
+	const hasEditor = !!editor;
+	const readonly = !hasEditor;
+	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
+	const bounds = pickViewBounds(view, dynamicViewVariant);
+	const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
+	const initialFitView = initialZoom === void 0 && fitView;
+	if (initialRef.current == null) {
+		const { xynodes, xyedges } = convertToXYFlow({
+			view,
+			dynamicViewVariant: dynamicViewVariant ?? "diagram",
+			elementViewVariant: "diagram",
+			where: where ?? null,
+			currentViewId: view.id,
+			collapsedSequenceFlows: {}
+		});
+		initialRef.current = {
+			initialNodes: xynodes,
+			initialEdges: xyedges,
+			initialWidth: initialWidth ?? bounds.width,
+			initialHeight: initialHeight ?? bounds.height,
+			initialFitViewOptions: {
+				maxZoom,
+				minZoom,
+				padding: fitViewPadding
+			},
+			initialMaxZoom: initialZoom ?? maxZoom,
+			initialMinZoom: initialZoom ?? minZoom
+		};
+	}
+	const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && view.bounds.width * view.bounds.height > 16e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
+	return /* @__PURE__ */ jsx(Profiler, {
+		id: "LikeC4Diagram",
+		onRender: noop,
+		children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, {
+			reducedMotion: isReducedGraphicsMode ? "always" : void 0,
+			children: /* @__PURE__ */ jsx(IconRendererProvider, {
+				value: renderIcon ?? null,
+				children: /* @__PURE__ */ jsx(DiagramFeatures, {
+					features: {
+						enableFitView: fitView,
+						enableEditor: hasEditor,
+						enableAISemanticLayout: hasEditor && !!editor.applySemanticLayout,
+						enableReadOnly: readonly,
+						enableFocusMode,
+						enableNavigateTo: !!onNavigateTo,
+						enableElementDetails: enableElementDetails && hasLikeC4Model,
+						enableRelationshipDetails: enableRelationshipDetails && hasLikeC4Model,
+						enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
+						enableSearch: enableSearch && hasLikeC4Model,
+						enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+						enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough && hasLikeC4Model,
+						enableNotations,
+						enableVscode: !!onOpenSource,
+						enableControls: controls,
+						enableElementTags: enableElementTags && hasLikeC4Model,
+						enableCompareWithLatest,
+						enableNotes
+					},
+					children: /* @__PURE__ */ jsxs(DiagramEventHandlers, {
+						handlers: {
+							onCanvasClick,
+							onCanvasContextMenu,
+							onCanvasDblClick,
+							onEdgeClick,
+							onEdgeContextMenu,
+							onNavigateTo,
+							onNodeClick,
+							onNodeContextMenu,
+							onOpenSource,
+							onLogoClick,
+							onInitialized,
+							onLayoutTypeChange,
+							onRelationshipBrowserScopeChange
+						},
+						children: [/* @__PURE__ */ jsx(LikeC4Styles, { rootSelector: `#${id}` }), /* @__PURE__ */ jsx(TagStylesProvider, {
+							rootSelector: `#${id}`,
+							children: /* @__PURE__ */ jsx(RootContainer, {
+								id,
+								className,
+								reduceGraphics: isReducedGraphicsMode,
+								children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+									fitView: initialFitView,
+									...initialRef.current,
+									children: /* @__PURE__ */ jsx(DiagramActorProvider, {
+										id,
+										view,
+										zoomable,
+										pannable,
+										fitView,
+										initialZoom,
+										fitViewPadding,
+										nodesDraggable: true,
+										nodesSelectable,
+										where: where ?? null,
+										dynamicViewVariant,
+										relationshipBrowserScope,
+										children: /* @__PURE__ */ jsxs(CurrentViewModelProvider, { children: [/* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {
+											background,
+											reactFlowProps,
+											renderNodes,
+											children
+										}), /* @__PURE__ */ jsx(LikeC4DiagramUI, {})] })
+									})
+								})
+							})
+						})]
+					})
+				})
+			})
+		}) })
+	});
+}
+const toLiteralPaddingWithUnit = (value) => {
+	if (typeof value === "number") return `${value}px`;
+	return value;
+};
+/**
+* Converts number values to px and keep referential integrity
+*/
+function useNormalizedViewPadding(raw) {
+	return useCustomCompareMemo(() => {
+		if (isPlainObject(raw)) return mapValues(raw, toLiteralPaddingWithUnit);
+		const v = toLiteralPaddingWithUnit(raw);
+		return {
+			x: v,
+			y: v
+		};
+	}, [raw], deepEqual);
+}
+
+//#endregion
+export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.mts

@@ -0,0 +1,297 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { Types } from "./likec4diagram/types.mjs";
+import { XYFlowInstance } from "./hooks/useXYFlow.mjs";
+import { DiagramApi } from "./likec4diagram/state/diagram-api.mjs";
+import "./hooks/useDiagram.mjs";
+import { MouseEvent, ReactNode } from "react";
+import { ReactFlowProps } from "@xyflow/react";
+import * as t from "@likec4/core/types";
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutType, LayoutedView, WhereOperator as WhereOperator$1 } from "@likec4/core/types";
+import { CamelCasedProperties, SetRequired } from "type-fest";
+//#region src/LikeC4Diagram.props.d.ts
+type Any$1 = t.aux.Any;
+type Unknown = t.aux.UnknownLayouted;
+type ViewId$1<A> = t.aux.ViewId<A>;
+type Fqn$1<A> = t.aux.Fqn<A>;
+type RelationId$1 = t.aux.RelationId;
+type DeploymentFqn$1<A> = t.aux.DeploymentFqn<A>;
+type StrictViewId<A> = t.aux.StrictViewId<A>;
+export type NodeRenderers = Partial<CamelCasedProperties<Types.NodeRenderers>>;
+export type DiagramNodeWithNavigate<A extends Any$1 = Unknown> = SetRequired<DiagramNode<A>, 'navigateTo'>;
+export type ElementIconRendererProps = {
+  node: {
+    id: string;
+    title: string;
+    icon?: string | null | undefined;
+  };
+  className?: string;
+};
+export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+export type LikeC4ColorScheme = 'light' | 'dark';
+export type RelationshipBrowserScope = 'global' | 'view';
+export type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold' | 'edgesFocusable'>;
+export type PaddingUnit = 'px' | '%';
+export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
+export type ViewPaddings = {
+  top?: PaddingWithUnit;
+  right?: PaddingWithUnit;
+  bottom?: PaddingWithUnit;
+  left?: PaddingWithUnit;
+  x?: PaddingWithUnit;
+  y?: PaddingWithUnit;
+};
+/**
+ * Padding around the diagram
+ *
+ * @example
+ * {
+ *   top: '8px',
+ *   right: '8px',
+ *   bottom: '8px',
+ *   left: '8px',
+ * }
+ *
+ * {
+ *   x: '16px',
+ *   y: '16px',
+ * }
+ */
+export type ViewPadding = PaddingWithUnit | ViewPaddings;
+export interface LikeC4DiagramProperties<A extends Any$1 = Unknown> {
+  view: LayoutedView<A>;
+  className?: string | undefined;
+  /**
+   * Enable/disable panning
+   * @default true
+   */
+  pannable?: boolean | undefined;
+  /**
+   * Enable/disable zooming
+   * @default true
+   */
+  zoomable?: boolean | undefined;
+  /**
+   * Show/hide panel with top left controls
+   *
+   * @default true
+   */
+  controls?: boolean | undefined;
+  /**
+   * If set, initial viewport will show all nodes & edges
+   * @default true
+   */
+  fitView?: boolean | undefined;
+  /**
+   * Initial centered zoom level. When set, it overrides automatic fit-to-view.
+   */
+  initialZoom?: number | undefined;
+  /**
+   * Padding around the diagram (number - pixels)
+   * @default 16 - 16px
+   *
+   * @see {@link ViewPadding}
+   *
+   * @example
+   * ```tsx
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     x: '16px',
+   *     y: 16,
+   *   }}
+   * />
+   *
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     top: 8,
+   *     right: '8px',
+   *     bottom: '1px',
+   *     left: '8px',
+   *   }}
+   * />
+   * ```
+   */
+  fitViewPadding?: ViewPadding | undefined;
+  /**
+   * If not readonly, or `enableFocusMode`, `onNavigateTo` or  `onNodeClick` are set - nodes will be selectable
+   *
+   * @default false
+   */
+  nodesSelectable?: boolean | undefined;
+  /**
+   * Initial width of the diagram
+   * (supposed to be used during SSR)
+   */
+  initialWidth?: number | undefined;
+  /**
+   * Initial height of the diagram
+   * (supposed to be used during SSR)
+   */
+  initialHeight?: number | undefined;
+  /**
+   * Background pattern
+   * @default 'dots'
+   */
+  background?: 'transparent' | 'solid' | 'dots' | 'lines' | 'cross' | undefined;
+  /**
+   * Show back/forward history navigation buttons
+   * @default true if `onNavigateTo` is set
+   */
+  showNavigationButtons?: undefined | boolean;
+  /**
+   * Display notations in the bottom right corner
+   * (Active if only notations are present)
+   *
+   * @default false
+   */
+  enableNotations?: boolean | undefined;
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default false
+   */
+  enableRelationshipDetails?: boolean | undefined;
+  /**
+   * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+   * @default false
+   */
+  enableFocusMode?: boolean | undefined;
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined;
+  /**
+   * Enable modal with element details
+   * @default false
+   */
+  enableElementDetails?: boolean | undefined;
+  /**
+   * Experimental feature to browse relationships
+   *
+   * @default false
+   */
+  enableRelationshipBrowser?: boolean | undefined;
+  /**
+   * Initial scope for the relationship browser
+   *
+   * @default 'view'
+   */
+  relationshipBrowserScope?: RelationshipBrowserScope | undefined;
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default false
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined;
+  /**
+   * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+   * @default true if `onLayoutTypeChange` is set, false otherwise
+   */
+  enableCompareWithLatest?: boolean | undefined;
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+  /**
+   * Display element tags in the bottom left corner
+   * @default false
+   */
+  enableElementTags?: 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)
+   * Enable it if you have a large or static view
+   * - `auto` - will be `true` if view has more then 3000 * 2000 pixels
+   *
+   * @default 'auto'
+   */
+  reduceGraphics?: 'auto' | boolean | undefined;
+  /**
+   * Render icon for an element, bundled or remote
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   *
+   * Consider using `IconRendererProvider`
+   */
+  renderIcon?: ElementIconRenderer | undefined;
+  /**
+   * Override node renderers
+   */
+  renderNodes?: NodeRenderers | undefined;
+  /**
+   * Dynamic filter, applies both to nodes and edges
+   */
+  where?: WhereOperator$1<A> | undefined;
+  /**
+   * Override ReactFlow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined;
+  /**
+   * Minimum zoom level
+   * @default 0.05
+   */
+  minZoom?: number | undefined;
+  /**
+   * Maximum zoom level
+   * @default 3
+   */
+  maxZoom?: number | undefined;
+}
+export type OpenSourceParams<A extends Any$1 = Unknown> = {
+  element: Fqn$1<A>;
+  property?: string;
+} | {
+  relation: RelationId$1;
+} | {
+  deployment: DeploymentFqn$1<A>;
+  property?: string;
+} | {
+  view: StrictViewId<A>;
+} | {
+  view: StrictViewId<A>;
+  astPath: string;
+};
+/**
+ * "Go to source" action
+ */
+export type OnOpenSource<A extends Any$1 = Unknown> = (params: OpenSourceParams<A>) => void;
+export type OnNavigateTo<A extends Any$1 = Unknown> = (to: ViewId$1<A>, event?: MouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNodeClick<A extends Any$1 = Unknown> = (node: DiagramNode<A>, event: MouseEvent) => void;
+export type OnEdgeClick<A extends Any$1 = Unknown> = (edge: DiagramEdge<A>, event: MouseEvent) => void;
+/**
+ * On pane/canvas click (not on any node or edge)
+ */
+export type OnCanvasClick = (event: MouseEvent) => void;
+export type OnCanvasContextMenu = (event: MouseEvent) => void;
+export type OnInitialized = (params: {
+  diagram: DiagramApi;
+  xyflow: XYFlowInstance;
+}) => void;
+export type OnLayoutTypeChange = (layoutType: LayoutType) => void;
+export type OnRelationshipBrowserScopeChange = (scope: RelationshipBrowserScope) => void;
+export interface LikeC4DiagramEventHandlers<A extends Any$1 = Unknown> {
+  onNavigateTo?: OnNavigateTo<A> | null | undefined;
+  onNodeClick?: OnNodeClick<A> | null | undefined;
+  onNodeContextMenu?: OnNodeClick<A> | null | undefined;
+  onCanvasContextMenu?: OnCanvasContextMenu | null | undefined;
+  onEdgeClick?: OnEdgeClick<A> | null | undefined;
+  onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
+  onCanvasClick?: OnCanvasClick | null | undefined;
+  onCanvasDblClick?: OnCanvasClick | null | undefined;
+  onLogoClick?: null | undefined | (() => void);
+  onOpenSource?: OnOpenSource<A> | null | undefined;
+  onInitialized?: OnInitialized | null | undefined;
+  /**
+   * Triggered when user changes layout type (e.g. from 'manual' to 'auto')
+   * Expected another `view` to be passed to the diagram
+   *
+   * @param layoutType new layout type
+   */
+  onLayoutTypeChange?: OnLayoutTypeChange | null | undefined;
+  onRelationshipBrowserScopeChange?: OnRelationshipBrowserScopeChange | null | undefined;
+}
+//#endregion
+export type { WhereOperator$1 as WhereOperator };

package/dist/LikeC4MantineProvider.d.mts

@@ -0,0 +1,26 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { JSX } from "react";
+import { DefaultMantineColor, MantineColorsTuple, MantineProviderProps } from "@mantine/core";
+//#region src/LikeC4MantineProvider.d.ts
+type LikeC4MantineProviderProps = MantineProviderProps;
+/**
+ * LikeC4 Mantine provider with custom theme and CSS variables resolver
+ */
+export declare function LikeC4MantineProvider({ children, defaultColorScheme, theme, ...props }: LikeC4MantineProviderProps): JSX.Element;
+/**
+ * This is a deprecated alias for LikeC4MantineProvider.
+ * @deprecated Use LikeC4MantineProvider instead
+ */
+export declare const DefaultMantineProvider: typeof LikeC4MantineProvider;
+type ExtendedCustomColors = 'likec4' | DefaultMantineColor;
+type ExtendedSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare module '@mantine/core' {
+  interface MantineThemeSizesOverride {
+    fontSizes: Record<ExtendedSizes, string>;
+    spacing: Record<ExtendedSizes, string>;
+  }
+  interface MantineThemeColorsOverride {
+    colors: Record<ExtendedCustomColors, MantineColorsTuple>;
+  }
+}
+//#endregion

package/dist/LikeC4MantineProvider.mjs

@@ -0,0 +1,158 @@
+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 { Card, Code, MantineProvider, Menu, Paper, Popover, SegmentedControl, Table, Title, Tooltip, createTheme, mergeThemeOverrides } from "@mantine/core";
+import { token } from "@likec4/styles/tokens";
+
+//#region 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
+		} }),
+		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"
+		} })
+	}
+});
+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;
+
+//#endregion
+export { DefaultMantineProvider, LikeC4MantineProvider };

package/dist/LikeC4ModelProvider.d.mts

@@ -0,0 +1,13 @@
+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";
+//#region src/LikeC4ModelProvider.d.ts
+export interface LikeC4ModelProviderProps {
+  likec4model: LikeC4Model<any>;
+}
+/**
+ * Ensures LikeC4Model context
+ */
+export declare function LikeC4ModelProvider({ children, likec4model }: PropsWithChildren<LikeC4ModelProviderProps>): JSX$1.Element;
+//#endregion