@likec4/diagram 1.59.4 → 1.61.0

package/README.md

@@ -25,6 +25,7 @@ Contents:
   - [With PandaCSS](#with-pandacss)
   - [Usage](#usage)
 - [Customization](#customization)
+  - [UI slots (experimental)](#ui-slots-experimental)
   - [Node renderer](#custom-node-renderer)
   - [Styles](#custom-styles)
 
@@ -35,6 +36,8 @@ You need to prepare it and wrap your diagram with`LikeC4ModelProvider` component
 
 See [📖 Documentation](https://likec4.dev/tooling/react/#likec4modelprovider) for examples.
 
+## Bundled version
+
 ### LikeC4View
 
 The easiest way to use this package is the `LikeC4View` component.\
@@ -49,7 +52,7 @@ import { likec4model } from './likec4-model.ts'
 
 function App() {
   return (
-    <LikeC4ModelProvider model={likec4model}>
+    <LikeC4ModelProvider likec4model={likec4model}>
       <LikeC4View
         viewId="index1"
         onNodeClick={(nodeId) => console.log(nodeId)}
@@ -66,7 +69,7 @@ See [LikeC4ViewProps](./src/LikeC4View.tsx) for available props.
 You may need to import icons, if you use built-in node renderers.
 
 ```tsx
-import { type ElementIconRenderer, LikeC4, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
+import { type ElementIconRenderer, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
 import { lazy, Suspense } from 'react'
 
 // Better to lazy load icons, bundle is quite large at the moment
@@ -82,7 +85,7 @@ const IconRenderer: ElementIconRenderer = (props) => {
 
 function App() {
   return (
-    <LikeC4ModelProvider model={likec4model}>
+    <LikeC4ModelProvider likec4model={likec4model}>
       <LikeC4View
         viewId="index1"
         renderIcon={IconRenderer}
@@ -103,7 +106,7 @@ import { ReactLikeC4, LikeC4ModelProvider } from '@likec4/diagram'
 function App() {
   const [viewId, setViewId] = useState('index')
   return (
-    <LikeC4ModelProvider model={likec4model}>
+    <LikeC4ModelProvider likec4model={likec4model}>
       <ReactLikeC4
         viewId={viewId}
         pannable
@@ -124,8 +127,8 @@ function App() {
 
 ### `likec4/react`
 
-Package `likec4/react` re-exports everything from Bundled version.\
-It also re-exports `likec4/icons/all`.
+If you already use the [`likec4`](https://www.npmjs.com/package/likec4) package, you do not need to install this one:
+`likec4/react` exports everything from `@likec4/diagram` and `@likec4/diagram/custom`.
 
 ## Library version
 
@@ -172,13 +175,12 @@ Here are the options:
 ### With PandaCSS
 
 ```bash
-pnpm add @likec4/styles
+pnpm add @likec4/styles @likec4/style-preset
 ```
 
 Configure your `panda.config.ts`:
 
 ```ts
-import likec4preset from '@likec4/styles/preset'
 import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
@@ -191,7 +193,7 @@ export default defineConfig({
     '@likec4/styles',
   ],
   presets: [
-    likec4preset,
+    '@likec4/style-preset',
   ],
   theme: {
     extend: {
@@ -327,6 +329,56 @@ actions that modify a saved manual layout.
 
 ## Customization
 
+There are two customization layers:
+
+1. **UI slots** — replace or wrap shell components (`LikeC4Diagram`, logos, …) via `CustomizationProvider`
+2. **Node renderers** — customize how individual diagram nodes are drawn via `renderNodes`
+
+### UI slots (experimental)
+
+> [!WARNING]
+> Experimental API — slot names and helper signatures may change.
+
+Wrap your diagram tree with `CustomizationProvider` and pass overrides from `defineCustomComponents`.
+
+- **replace** — provide a component with the same props as the slot
+- **wrap** — use `wrap` from `defineCustomComponents`; your component receives `{ Original, ...props }`
+
+```tsx
+import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
+import {
+  CustomizationProvider,
+  defineCustomComponents,
+} from '@likec4/diagram/custom'
+
+const components = defineCustomComponents(({ wrap }) => ({
+  // Replace the logo SVG entirely
+  LogoSvg: (props) => (
+    <svg {...props}>
+      <text>Brand</text>
+    </svg>
+  ),
+  // Wrap the diagram to inject default props
+  LikeC4View: wrap(({ Original, ...props }) => <Original {...props} pannable={false} />),
+}))
+
+function App() {
+  return (
+    <CustomizationProvider components={components}>
+      <LikeC4ModelProvider likec4model={likec4model}>
+        <LikeC4View viewId="index" />
+      </LikeC4ModelProvider>
+    </CustomizationProvider>
+  )
+}
+```
+
+Registered slots today: `LikeC4Diagram`, `LikeC4View`, `ReactLikeC4`, `LogoSvg`, `LogoIconSvg`, `NavigationPanelLogo`.
+
+Keep the `components` object referentially stable (module scope) so HMR keeps override identities stable.
+
+When using the bundled React package, import the same helpers from `likec4/react`.
+
 ### Custom node renderer
 
 LikeC4Diagram can use custom node renderers.\
@@ -337,11 +389,11 @@ See [customNodes.tsx](./src/custom/customNodes.tsx) for examples.
 import { LikeC4Diagram } from '@likec4/diagram'
 import {
   ElementActions,
+  ElementData,
   ElementDetailsButtonWithHandler,
   elementNode,
   ElementNodeContainer,
   ElementShape,
-  ElementTitle,
   ElementToolbar,
   IfNotReadOnly,
 } from '@likec4/diagram/custom'
@@ -351,7 +403,7 @@ const renderNodes = {
   element: elementNode(({ nodeProps, nodeModel }) => (
     <ElementNodeContainer nodeProps={nodeProps}>
       <ElementShape {...nodeProps} />
-      <ElementTitle {...nodeProps} />
+      <ElementData {...nodeProps} />
       <ElementActions
         {...nodeProps}
         extraButtons={[

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,13 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "./customization/customization-types.mjs";
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
+import { PropsWithChildren } from "react";
+import * as t from "@likec4/core/types";
+export type LikeC4DiagramProps<A extends t.Any = t.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 const LikeC4Diagram: Customizable<(<A extends t.Any = t.Any>(props: LikeC4DiagramProps<A>) => import("react").JSX.Element), "LikeC4Diagram">;

package/dist/LikeC4Diagram.mjs

@@ -0,0 +1,174 @@
+import { __name } from "./_virtual/_rolldown/runtime.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 { IconRendererProvider } from "./context/IconRenderer.mjs";
+import { CurrentViewModelProvider } from "./context/CurrentViewModelProvider.mjs";
+import { TagStylesProvider } from "./context/TagStylesContext.mjs";
+import { customizable } from "./customization/customizable.mjs";
+import { useOptionalLikeC4Editor } from "./editor/LikeC4EditorProvider.mjs";
+import { useId as useId$1 } from "./hooks/useId.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { convertToXYFlow } from "./likec4diagram/convert-to-xyflow.mjs";
+import { LikeC4DiagramUI } from "./likec4diagram/DiagramUI.mjs";
+import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.mjs";
+import { DiagramActorProvider } from "./likec4diagram/state/DiagramActorProvider.mjs";
+import { LikeC4Styles } from "./LikeC4Styles.mjs";
+import { pickViewBounds } from "./utils/view-bounds.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";
+
+// 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
+*/
+const LikeC4Diagram = customizable("LikeC4Diagram")((props) => {
+	let { 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 } = props;
+	const id = useId$1();
+	const initialRef = useRef(null);
+	const optionalLikeC4Model = useOptionalLikeC4Model();
+	enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
+	const hasLikeC4Model = !!optionalLikeC4Model;
+	const editor = useOptionalLikeC4Editor();
+	const hasEditor = !!editor && hasLikeC4Model;
+	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 ?? (view._type === "dynamic" ? view.variant : "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);
+}
+
+export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.mts

@@ -0,0 +1,295 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import "./hooks/useDiagram.mjs";
+import { XYFlowInstance } from "./hooks/useXYFlow.mjs";
+import { DiagramApi } from "./likec4diagram/state/diagram-api.mjs";
+import { Types } from "./likec4diagram/types.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";
+type Any$1 = t.Any;
+type Unknown = t.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 logical element, deployment node, and deployed instance 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;
+}
+export type { WhereOperator$1 as WhereOperator };

package/dist/LikeC4MantineProvider.d.mts

@@ -0,0 +1,25 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { JSX } from "react";
+import { DefaultMantineColor, MantineColorsTuple, MantineProviderProps } from "@mantine/core";
+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>;
+  }
+}
+export {};