@likec4/diagram 1.41.0 → 1.42.1

package/bundle/package.json

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

package/custom/package.json

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

package/dist/LikeC4Diagram.d.ts

@@ -2,4 +2,10 @@ import { Any } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, readonly, controls, fitView, fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,19 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCustomCompareMemo } from '@react-hookz/web';
 import { ReactFlowProvider } from '@xyflow/react';
+import { deepEqual } from 'fast-equals';
 import { useRef } from 'react';
-import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
-import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
+import { isPlainObject, mapValues } from 'remeda';
+import { RootContainer } from './components/RootContainer.js';
+import { TagStylesProvider } from './context/TagStylesContext.js';
 import { useId } from './hooks/useId.js';
+import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
+import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
-import { DiagramActorProvider } from './state/DiagramActorProvider.js';
+import { getViewBounds } from './utils/get-view-bounds.js';
+import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
 import { IconRendererProvider } from './context/IconRenderer.js';
 import { DiagramFeatures } from './context/DiagramFeatures.js';
 import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
-import { RootContainer } from './context/RootContainer.js';
-import { FitViewPaddings } from './base/const.js';
 
 function LikeC4Diagram({
   onCanvasClick,
@@ -27,34 +31,33 @@ function LikeC4Diagram({
   onNodeContextMenu,
   onOpenSource,
   onBurgerMenuClick,
+  onInitialized,
   view,
   className,
   readonly = true,
   controls = !readonly,
   fitView = true,
-  fitViewPadding = controls === "next" ? FitViewPaddings.withControls : FitViewPaddings.default,
+  fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
   zoomable = true,
   background = "dots",
   enableElementTags = false,
   enableFocusMode = false,
   enableElementDetails = false,
-  enableRelationshipDetails = enableElementDetails,
-  enableRelationshipBrowser = enableRelationshipDetails,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = false,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showDiagramTitle = true,
   showNotations = true,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
-  enableSearch = true,
+  enableSearch = false,
   initialWidth,
   initialHeight,
   experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
-  renderControls,
   where,
   reactFlowProps,
   renderNodes,
@@ -62,15 +65,24 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
+  const bounds = getViewBounds(view, dynamicViewVariant);
+  const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
       defaultNodes: [],
-      initialWidth: initialWidth ?? view.bounds.width,
-      initialHeight: initialHeight ?? view.bounds.height
+      initialWidth: initialWidth ?? bounds.width,
+      initialHeight: initialHeight ?? bounds.height,
+      initialFitViewOptions: {
+        maxZoom: MaxZoom,
+        minZoom: MinZoom,
+        padding: fitViewPadding
+      },
+      initialMaxZoom: MaxZoom,
+      initialMinZoom: MinZoom
     };
   }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (view.bounds?.width ?? 1) * (view.bounds?.height ?? 1) > 6e6 : reduceGraphics;
+  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
   return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
     FramerMotionConfig,
     {
@@ -93,10 +105,9 @@ function LikeC4Diagram({
             enableNotations: showNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
-            enableViewTitle: showDiagramTitle,
             enableElementTags
           },
-          children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(
             DiagramEventHandlers,
             {
               handlers: {
@@ -110,16 +121,17 @@ function LikeC4Diagram({
                 onNodeClick,
                 onNodeContextMenu,
                 onOpenSource,
-                onBurgerMenuClick
+                onBurgerMenuClick,
+                onInitialized
               },
-              children: /* @__PURE__ */ jsxs(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: [
+              children: [
                 /* @__PURE__ */ jsx(LikeC4Styles, { id }),
-                /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
                     ...initialRef.current,
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs(
                       DiagramActorProvider,
                       {
                         view,
@@ -129,22 +141,25 @@ function LikeC4Diagram({
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
-                        children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
-                          LikeC4DiagramXYFlow,
-                          {
-                            nodesDraggable,
-                            nodesSelectable,
-                            background,
-                            reactFlowProps,
-                            renderNodes,
-                            children
-                          }
-                        ) })
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            LikeC4DiagramXYFlow,
+                            {
+                              nodesDraggable,
+                              nodesSelectable,
+                              background,
+                              reactFlowProps,
+                              renderNodes,
+                              children
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
+                        ]
                       }
                     )
                   }
-                ) })
-              ] })
+                ) }) })
+              ]
             }
           )
         }
@@ -152,5 +167,23 @@ function LikeC4Diagram({
     }
   ) });
 }
+const toLiteralPaddingWithUnit = (value) => {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+};
+function useNormalizedViewPadding(raw) {
+  return useCustomCompareMemo(
+    () => {
+      if (isPlainObject(raw)) {
+        return mapValues(raw, toLiteralPaddingWithUnit);
+      }
+      return toLiteralPaddingWithUnit(raw);
+    },
+    [raw],
+    deepEqual
+  );
+}
 
 export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.ts

@@ -1,18 +1,21 @@
 import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
-import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
+import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { SetRequired } from 'type-fest';
-import { ControlsCustomLayout } from './context/ControlsCustomLayout';
-import { CustomNodes } from './custom/customNodes';
+import { CamelCasedProperties, SetRequired } from 'type-fest';
+import { DiagramApi } from './hooks/useDiagram';
+import { XYFlowInstance } from './hooks/useXYFlow';
+import { Types } from './likec4diagram/types';
 import type * as t from '@likec4/core/types';
 type Any = t.aux.Any;
+type Unknown = t.aux.UnknownLayouted;
 type ViewId<A> = t.aux.ViewId<A>;
 type Fqn<A> = t.aux.Fqn<A>;
 type RelationId = t.aux.RelationId;
 type DeploymentFqn<A> = t.aux.DeploymentFqn<A>;
 type StrictViewId<A> = t.aux.StrictViewId<A>;
-export type { CustomNodes, WhereOperator };
-export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
+export type NodeRenderers = Partial<CamelCasedProperties<Types.NodeRenderers>>;
+export type { WhereOperator };
+export type DiagramNodeWithNavigate<A extends Any = Unknown> = SetRequired<DiagramNode<A>, 'navigateTo'>;
 export type ElementIconRendererProps = {
     node: {
         id: string;
@@ -22,19 +25,8 @@ export type ElementIconRendererProps = {
     className?: string;
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-export type OnNavigateTo<A extends Any = Any> = (to: ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
-export type OnNodeClick<A extends Any = Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
-export type OnEdgeClick<A extends Any = Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
-/**
- * On pane/canvas click (not on any node or edge)
- */
-export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export type ChangeEvent = {
-    change: ViewChange;
-};
-export type OnChange = (event: ChangeEvent) => void;
 export type LikeC4ColorScheme = 'light' | 'dark';
-export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
+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'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
 /**
@@ -56,7 +48,7 @@ export type ViewPadding = PaddingWithUnit | {
     x?: PaddingWithUnit;
     y?: PaddingWithUnit;
 };
-export interface LikeC4DiagramProperties<A extends Any = Any> {
+export interface LikeC4DiagramProperties<A extends Any = Unknown> {
     view: LayoutedView<A>;
     className?: string | undefined;
     /**
@@ -75,12 +67,11 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      */
     readonly?: boolean | undefined;
     /**
-     * Show/hide panel with top left controls,
-     * - `next` - Experimental navigation panel
+     * Show/hide panel with top left controls
      *
      * @default true if not readonly
      */
-    controls?: boolean | 'next' | undefined;
+    controls?: boolean | undefined;
     /**
      * If set, initial viewport will show all nodes & edges
      * @default true
@@ -135,11 +126,6 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      * @default 'dots'
      */
     background?: 'transparent' | 'solid' | 'dots' | 'lines' | 'cross' | undefined;
-    /**
-     * Display webview with diagram title / description
-     * @default true
-     */
-    showDiagramTitle?: boolean | undefined;
     /**
      * Show back/forward history navigation buttons
      * @default true if `onNavigateTo` is set
@@ -211,19 +197,10 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      * By default, if icon is http:// or https://, it will be rendered as an image
      */
     renderIcon?: ElementIconRenderer | undefined;
-    /**
-     * Customize layout of the controls on the top left
-     *
-     * @note
-     * Ignored if `controls="next"`
-     *
-     * @see {@link controls}
-     */
-    renderControls?: ControlsCustomLayout | undefined;
     /**
      * Override node renderers
      */
-    renderNodes?: CustomNodes | undefined;
+    renderNodes?: NodeRenderers | undefined;
     /**
      * Dynamic filter, applies both to nodes and edges
      */
@@ -233,7 +210,7 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
 }
-export type OpenSourceParams<A extends Any = Any> = {
+export type OpenSourceParams<A extends Any = Unknown> = {
     element: Fqn<A>;
     property?: string;
 } | {
@@ -243,8 +220,30 @@ export type OpenSourceParams<A extends Any = Any> = {
     property?: string;
 } | {
     view: StrictViewId<A>;
+} | {
+    view: StrictViewId<A>;
+    astPath: string;
 };
-export interface LikeC4DiagramEventHandlers<A extends Any = Any> {
+/**
+ * "Go to source" action
+ */
+export type OnOpenSource<A extends Any = Unknown> = (params: OpenSourceParams<A>) => void;
+export type OnNavigateTo<A extends Any = Unknown> = (to: ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNodeClick<A extends Any = Unknown> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
+export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
+/**
+ * On pane/canvas click (not on any node or edge)
+ */
+export type OnCanvasClick = (event: ReactMouseEvent) => void;
+export type ChangeEvent = {
+    change: ViewChange;
+};
+export type OnChange = (event: ChangeEvent) => void;
+export type OnInitialized = (params: {
+    diagram: DiagramApi;
+    xyflow: XYFlowInstance;
+}) => void;
+export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;
@@ -255,5 +254,6 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Any> {
     onCanvasClick?: OnCanvasClick | null | undefined;
     onCanvasDblClick?: OnCanvasClick | null | undefined;
     onBurgerMenuClick?: null | undefined | (() => void);
-    onOpenSource?: null | undefined | ((params: OpenSourceParams<A>) => void);
+    onOpenSource?: OnOpenSource<A> | null | undefined;
+    onInitialized?: OnInitialized | null | undefined;
 }

package/dist/LikeC4ModelProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext.js';
+import { LikeC4ModelContext } from './context/LikeC4ModelContext.js';
 
 function LikeC4ModelProvider({
   children,

package/dist/LikeC4ProjectsProvider.js

@@ -3,7 +3,7 @@ import { useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
 import { useContext } from 'react';
-import { LikeC4ProjectsContext } from './likec4model/LikeC4ProjectsContext.js';
+import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
 
 function LikeC4ProjectsProvider({
   children,

package/dist/LikeC4Styles.d.ts

@@ -1,3 +1,7 @@
-export declare function LikeC4Styles({ id }: {
+import { NamedExoticComponent } from 'react';
+export declare const LikeC4Styles: NamedExoticComponent<{
     id: string;
-}): import("react/jsx-runtime").JSX.Element;
+}>;
+/**
+ * @internal Memoized styles gives a performance boost during development
+ */

package/dist/LikeC4Styles.js

@@ -1,10 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ThemeColors, defaultTheme } from '@likec4/core';
+import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
 import { toRgba, mix, toHex, scale } from 'khroma';
 import { memo } from 'react';
 import { pipe, entries, map, join, range } from 'remeda';
-import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
+import { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 
 const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
 const whenDark = scheme("dark");
@@ -36,83 +35,52 @@ ${whenDark} ${selector} {
   `.trim();
 };
 function toStyle(rootSelector, name, colors) {
+  const { elements, relationships } = colors;
   const selector = `:where(${rootSelector} [data-likec4-color=${name}])`;
   return [
     `
 ${selector} {
-  --likec4-palette-fill: ${colors.elements.fill};
-  --likec4-palette-stroke: ${colors.elements.stroke};
-  --likec4-palette-hiContrast: ${colors.elements.hiContrast};
-  --likec4-palette-loContrast: ${colors.elements.loContrast};
-  --likec4-palette-relation-stroke: ${colors.relationships.lineColor};
-  --likec4-palette-relation-label: ${colors.relationships.labelColor};
-  --likec4-palette-relation-label-bg: ${colors.relationships.labelBgColor};
+  --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};
 }
 ${whenLight} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, "black", 85))};
+  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "black", 85))};
 }
 ${whenDark} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, "white", 70))};
+  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "white", 70))};
 }
 
   `.trim(),
     ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors, depth))
   ].join("\n");
 }
-function generateCustomColorStyles(customColors, rootSelector) {
+function generateBuiltInColorStyles(rootSelector, theme) {
   return pipe(
-    entries(customColors),
-    map(([name, color]) => toStyle(rootSelector, name, color)),
+    theme.colors,
+    entries(),
+    map(([color, values]) => toStyle(rootSelector, color, values)),
     join("\n")
   );
 }
-function generateBuiltInColorStyles(rootSelector) {
-  return pipe(
-    ThemeColors,
-    map(
-      (color) => toStyle(rootSelector, color, {
-        elements: defaultTheme.elements[color],
-        relationships: defaultTheme.relationships[color]
-      })
-    ),
-    join("\n")
-  );
-}
-function LikeC4Styles({ id }) {
+const LikeC4Styles = memo(({ id }) => {
   const rootSelector = `#${id}`;
   const nonce = useMantineStyleNonce()?.();
-  const { customColors } = useLikeC4Specification();
-  const customColorsStyles = customColors ? generateCustomColorStyles(customColors, rootSelector) : "";
-  const builtInColors = generateBuiltInColorStyles(rootSelector);
+  const { theme } = useLikeC4Styles();
+  const colorsStyles = generateBuiltInColorStyles(rootSelector, theme);
   return /* @__PURE__ */ jsx(
-    MemoizedStyles,
-    {
-      id,
-      nonce,
-      customColorsStyles,
-      builtInColors
-    }
-  );
-}
-const MemoizedStyles = memo(({ id, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(
     "style",
     {
       type: "text/css",
       "data-likec4-colors": id,
-      dangerouslySetInnerHTML: { __html: builtInColors },
+      dangerouslySetInnerHTML: { __html: colorsStyles },
       nonce
     }
-  ),
-  customColorsStyles && /* @__PURE__ */ jsx(
-    "style",
-    {
-      type: "text/css",
-      "data-likec4-custom-colors": id,
-      dangerouslySetInnerHTML: { __html: customColorsStyles },
-      nonce
-    }
-  )
-] }));
+  );
+});
 
 export { LikeC4Styles };

package/dist/{bundle/LikeC4View.props.d.ts → LikeC4View.d.ts}

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
+import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     /**
@@ -62,13 +62,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
-     * Display diagram title / description
-     *
-     * @default false
-     */
-    showDiagramTitle?: boolean | undefined;
-    /**
-     * Show back/forward navigation buttons
+     * Show back/forward navigation buttons in controls panel
      * @default false
      */
     showNavigationButtons?: undefined | boolean;
@@ -104,17 +98,17 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * @default false
      */
     enableElementTags?: boolean | undefined;
-    /**
-     * Experimental feature to browse relationships
-     *
-     * @default enableElementDetails
-     */
-    enableRelationshipBrowser?: boolean | undefined;
     /**
      * Display dropdown with details on relationship's label click
-     * @default enableRelationshipBrowser
+     * @default false
      */
     enableRelationshipDetails?: boolean | undefined;
+    /**
+     * Allow popup to browse relationships
+     *
+     * @default enableRelationshipDetails
+     */
+    enableRelationshipBrowser?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -137,12 +131,16 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     /**
      * Override node renderers
      */
-    renderNodes?: CustomNodes | undefined;
+    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?: React.ReactNode | undefined;
 }
 export interface LikeC4BrowserProps {
     /**
@@ -157,17 +155,10 @@ export interface LikeC4BrowserProps {
     fitViewPadding?: PaddingWithUnit | undefined;
     /**
      * Show/hide panel with top left controls,
-     * - `next` - show navigation panel (Experimental)
-     *
-     * @default `next`
-     */
-    controls?: boolean | 'next' | undefined;
-    /**
-     * Display diagram title / description
      *
      * @default true
      */
-    showDiagramTitle?: boolean | undefined;
+    controls?: boolean | undefined;
     /**
      * Show back/forward navigation buttons
      * @default true
@@ -202,7 +193,7 @@ export interface LikeC4BrowserProps {
     /**
      * Experimental feature to browse relationships
      *
-     * @default enableElementDetails
+     * @default true
      */
     enableRelationshipBrowser?: boolean | undefined;
     /**
@@ -232,4 +223,17 @@ export interface LikeC4BrowserProps {
      * Override some react flow props
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
+    /**
+     * Children to render inside the browser overlay
+     */
+    children?: React.ReactNode | undefined;
 }
+/**
+ * Ready-to-use component to display embedded LikeC4 view,
+ * OnClick allows to browse the model.
+ *
+ * {@link ReactLikeC4} gives you more control.
+ *
+ * Component is wrapped in ShadowRoot to isolate styles.
+ */
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, showNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;