@likec4/diagram 1.60.0 → 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/dist/LikeC4Diagram.d.mts

@@ -1,15 +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 { 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>>;
+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 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
+export declare const LikeC4Diagram: Customizable<(<A extends t.Any = t.Any>(props: LikeC4DiagramProps<A>) => import("react").JSX.Element), "LikeC4Diagram">;

package/dist/LikeC4Diagram.mjs

@@ -1,22 +1,23 @@
 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 { 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 } from "./hooks/useId.mjs";
-import { pickViewBounds } from "./utils/view-bounds.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 { LikeC4Styles } from "./LikeC4Styles.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";
@@ -24,7 +25,7 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { deepEqual } from "fast-equals";
 import { isEmptyish, isPlainObject, mapValues } from "remeda";
 
-//#region src/LikeC4Diagram.tsx
+// src/LikeC4Diagram.tsx
 const noop = () => {};
 /**
 * Low-level component to display LikeC4 view
@@ -32,14 +33,15 @@ const noop = () => {};
 *
 * 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 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;
+	const hasEditor = !!editor && hasLikeC4Model;
 	const readonly = !hasEditor;
 	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
 	const bounds = pickViewBounds(view, dynamicViewVariant);
@@ -48,7 +50,7 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 	if (initialRef.current == null) {
 		const { xynodes, xyedges } = convertToXYFlow({
 			view,
-			dynamicViewVariant: dynamicViewVariant ?? "diagram",
+			dynamicViewVariant: dynamicViewVariant ?? (view._type === "dynamic" ? view.variant : "diagram"),
 			elementViewVariant: "diagram",
 			where: where ?? null,
 			currentViewId: view.id,
@@ -150,7 +152,7 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 			})
 		}) })
 	});
-}
+});
 const toLiteralPaddingWithUnit = (value) => {
 	if (typeof value === "number") return `${value}px`;
 	return value;
@@ -169,5 +171,4 @@ function useNormalizedViewPadding(raw) {
 	}, [raw], deepEqual);
 }
 
-//#endregion
 export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.mts

@@ -1,16 +1,15 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
-import { Types } from "./likec4diagram/types.mjs";
+import "./hooks/useDiagram.mjs";
 import { XYFlowInstance } from "./hooks/useXYFlow.mjs";
 import { DiagramApi } from "./likec4diagram/state/diagram-api.mjs";
-import "./hooks/useDiagram.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";
-//#region src/LikeC4Diagram.props.d.ts
-type Any$1 = t.aux.Any;
-type Unknown = t.aux.UnknownLayouted;
+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;
@@ -160,7 +159,7 @@ export interface LikeC4DiagramProperties<A extends Any$1 = Unknown> {
    */
   enableSearch?: boolean | undefined;
   /**
-   * Enable modal with element details
+   * Enable modal with logical element, deployment node, and deployed instance details.
    * @default false
    */
   enableElementDetails?: boolean | undefined;
@@ -293,5 +292,4 @@ export interface LikeC4DiagramEventHandlers<A extends Any$1 = Unknown> {
   onLayoutTypeChange?: OnLayoutTypeChange | null | undefined;
   onRelationshipBrowserScopeChange?: OnRelationshipBrowserScopeChange | null | undefined;
 }
-//#endregion
 export type { WhereOperator$1 as WhereOperator };

package/dist/LikeC4MantineProvider.d.mts

@@ -1,7 +1,6 @@
 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
@@ -23,4 +22,4 @@ declare module '@mantine/core' {
     colors: Record<ExtendedCustomColors, MantineColorsTuple>;
   }
 }
-//#endregion
+export {};

package/dist/LikeC4MantineProvider.mjs

@@ -3,10 +3,10 @@ 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 { ActionBar, 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
+// src/LikeC4MantineProvider.tsx
 function t(name) {
 	return token.var(name);
 }
@@ -94,14 +94,26 @@ const likec4Theme = createTheme({
 			textTransform: "uppercase",
 			letterSpacing: "caps.sm"
 		}) } }),
-		Tooltip: Tooltip.extend({ defaultProps: {
-			color: "dark",
-			fz: "xs",
-			withArrow: false,
-			openDelay: 600,
-			closeDelay: 120,
-			offset: 8
-		} }),
+		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,
@@ -111,6 +123,10 @@ const likec4Theme = createTheme({
 		Menu: Menu.extend({ defaultProps: {
 			radius: "sm",
 			shadow: "lg"
+		} }),
+		ActionBar: ActionBar.extend({ defaultProps: {
+			radius: "sm",
+			shadow: "lg"
 		} })
 	}
 });
@@ -154,5 +170,4 @@ function LikeC4MantineProvider({ children, defaultColorScheme = "auto", theme, .
 */
 const DefaultMantineProvider = LikeC4MantineProvider;
 
-//#endregion
 export { DefaultMantineProvider, LikeC4MantineProvider };

package/dist/LikeC4ModelProvider.d.mts

@@ -2,12 +2,10 @@ 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
+export declare function LikeC4ModelProvider({ children, likec4model }: PropsWithChildren<LikeC4ModelProviderProps>): JSX$1.Element;

package/dist/LikeC4ModelProvider.mjs

@@ -2,7 +2,7 @@ import { __name } from "./_virtual/_rolldown/runtime.mjs";
 import { LikeC4ModelContextProvider } from "./context/LikeC4ModelContext.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/LikeC4ModelProvider.tsx
+// src/LikeC4ModelProvider.tsx
 /**
 * Ensures LikeC4Model context
 */
@@ -13,5 +13,4 @@ function LikeC4ModelProvider({ children, likec4model }) {
 	});
 }
 
-//#endregion
 export { LikeC4ModelProvider };

package/dist/LikeC4ProjectsOverview.d.mts

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

package/dist/LikeC4ProjectsOverview.mjs

@@ -8,7 +8,7 @@ import { LikeC4Styles } from "./LikeC4Styles.mjs";
 import { ProjectsOverview } from "./projects-overview/ProjectsOverview.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/LikeC4ProjectsOverview.tsx
+// src/LikeC4ProjectsOverview.tsx
 function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }) {
 	const onChangeLikeC4Project = useChangeLikeC4Project();
 	const id = useId();
@@ -24,5 +24,4 @@ function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props
 	})] }) });
 }
 
-//#endregion
 export { LikeC4ProjectsOverview };

package/dist/LikeC4ProjectsProvider.d.mts

@@ -2,7 +2,6 @@ import { __name } from "./_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
 import { JSX as JSX$1 } from "react/jsx-runtime";
 import { ProjectId } from "@likec4/core/types";
-//#region src/LikeC4ProjectsProvider.d.ts
 type LandingPageConfig = {
   redirect: true;
 } | {
@@ -32,4 +31,4 @@ export interface LikeC4ProjectsProviderProps {
  * Ensures LikeC4Projects context
  */
 export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange }: PropsWithChildren<LikeC4ProjectsProviderProps>): JSX$1.Element;
-//#endregion
+export {};

package/dist/LikeC4ProjectsProvider.mjs

@@ -1,11 +1,11 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "./hooks/useCallbackRef.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";
 
-//#region src/LikeC4ProjectsProvider.tsx
+// src/LikeC4ProjectsProvider.tsx
 /**
 * Ensures LikeC4Projects context
 */
@@ -33,5 +33,4 @@ function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjec
 	});
 }
 
-//#endregion
 export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
 import { JSX } from "react/jsx-runtime";
-//#region src/LikeC4Styles.d.ts
 interface LikeC4StylesProps {
   /**
    * Root element selector to scope the styles to (e.g., "#diagram-root")
@@ -13,4 +12,4 @@ interface LikeC4StylesProps {
  * scoped to the provided root selector
  */
 export declare function LikeC4Styles({ rootSelector }: LikeC4StylesProps): JSX.Element;
-//#endregion
+export {};

package/dist/LikeC4Styles.mjs

@@ -1,11 +1,11 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
 import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
 import { memo, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { entries, join, map, pipe } from "remeda";
 import { useMantineStyleNonce } from "@mantine/core";
 
-//#region src/LikeC4Styles.tsx
+// src/LikeC4Styles.tsx
 const scheme = (scheme) => `[data-mantine-color-scheme="${scheme}"]`;
 const whenDark = scheme("dark");
 const generateCompoundColors = (rootSelector, name, colors, depth) => {
@@ -55,19 +55,24 @@ function LikeC4Styles({ rootSelector }) {
 	return /* @__PURE__ */ jsx(MemoizedStyle, {
 		id: $styles.fingerprint,
 		nonce,
-		colorsStyles
+		colorsStyles,
+		customCss: $styles.customCssContent
 	});
 }
 /**
 * @internal Memoized styles gives a performance boost during development
 */
-const MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx("style", {
+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";
 
-//#endregion
 export { LikeC4Styles };

package/dist/LikeC4View.d.mts

@@ -1,10 +1,9 @@
 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 { JSX as JSX$1 } from "react/jsx-runtime";
 import * as t from "@likec4/core/types";
-//#region src/LikeC4View.d.ts
-export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
+export interface LikeC4ViewProps<A extends t.Any = t.Any> {
   /**
    * View to display.
    */
@@ -283,5 +282,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, layoutType: initialLayoutType, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableNotes, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): JSX$1.Element;
-//#endregion
+export declare const LikeC4View: Customizable<(<A extends t.Any = t.Any>(properties: LikeC4ViewProps<A>) => import("react").JSX.Element), "LikeC4View">;

package/dist/LikeC4View.mjs

@@ -1,13 +1,14 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
-import IconX from "./node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import IconX from "./node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
 import { FitViewPaddings } from "./base/const.mjs";
-import { stopPropagation } from "./utils/xyflow.mjs";
+import { ErrorMessage } from "./components/ViewNotFound.mjs";
+import { customizable } from "./customization/customizable.mjs";
 import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
-import { pickViewBounds } from "./utils/view-bounds.mjs";
-import { Overlay } from "./overlays/overlay/Overlay.mjs";
 import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
-import { ErrorMessage } from "./components/ViewNotFound.mjs";
+import { Overlay } from "./overlays/overlay/Overlay.mjs";
 import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { stopPropagation } from "./utils/xyflow.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +16,7 @@ import { isBoolean } from "remeda";
 import { ActionIcon } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 
-//#region src/LikeC4View.tsx
+// src/LikeC4View.tsx
 const cssInteractive = css({
 	cursor: "pointer",
 	["--mantine-cursor-pointer"]: "pointer",
@@ -29,7 +30,8 @@ const cssInteractive = css({
 *
 * 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 LikeC4View = customizable("LikeC4View")((properties) => {
+	let { 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 } = properties;
 	const likec4model = useOptionalLikeC4Model();
 	const [layoutType, setLayoutType] = useState(initialLayoutType);
 	const [browserViewId, _onNavigateTo] = useState(null);
@@ -60,9 +62,9 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 		/* @__PURE__ */ jsx("br", {}),
 		"Make sure you have LikeC4ModelProvider with layouted model."
 	] });
-	const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
+	const view = initialLayoutType !== "auto" ? viewModel.$layouted : viewModel.$view;
 	const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
-	const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
+	const browserView = layoutType !== "auto" ? 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;
@@ -147,7 +149,6 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 			})]
 		})]
 	});
-}
+});
 
-//#endregion
 export { LikeC4View };

package/dist/ReactLikeC4.d.mts

@@ -1,10 +1,9 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "./customization/customization-types.mjs";
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
 import { CSSProperties, ReactNode } from "react";
-import { JSX as JSX$1 } from "react/jsx-runtime";
 import * as t from "@likec4/core/types";
-//#region src/ReactLikeC4.d.ts
-export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
+export type ReactLikeC4Props<A extends t.Any = t.Any> = {
   viewId: t.aux.ViewId<A>;
   /**
    * Layout to display
@@ -46,5 +45,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * 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$1.Element;
-//#endregion
+export declare const ReactLikeC4: Customizable<(<A extends t.Any = t.Any>(properties: ReactLikeC4Props<A>) => import("react").JSX.Element), "ReactLikeC4">;