@likec4/diagram 1.41.0 → 1.42.0

package/dist/LikeC4View.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { Box, ActionIcon } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { useState } from 'react';
+import { isBoolean } from 'remeda';
+import { FitViewPaddings } from './base/const.js';
+import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
+import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import { LikeC4Diagram } from './LikeC4Diagram.js';
+import { Overlay } from './overlays/overlay/Overlay.js';
+import { ShadowRoot } from './shadowroot/ShadowRoot.js';
+import { getViewBounds } from './utils/get-view-bounds.js';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+
+const cssInteractive = css({
+  cursor: "pointer",
+  ["--mantine-cursor-pointer"]: "pointer",
+  "& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": {
+    cursor: "pointer"
+  }
+});
+function LikeC4View({
+  viewId,
+  className,
+  pannable = false,
+  zoomable = false,
+  keepAspectRatio = true,
+  colorScheme,
+  injectFontCss = true,
+  controls = false,
+  background = "transparent",
+  browser = true,
+  showNavigationButtons = false,
+  showNotations,
+  enableFocusMode = false,
+  enableDynamicViewWalkthrough = false,
+  enableElementDetails = false,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = enableRelationshipDetails,
+  reduceGraphics = "auto",
+  mantineTheme,
+  styleNonce,
+  style,
+  reactFlowProps,
+  renderNodes,
+  children,
+  ...props
+}) {
+  const likec4model = useOptionalLikeC4Model();
+  const [browserViewId, onNavigateTo] = useState(null);
+  const onNavigateToThisView = useCallbackRef(() => {
+    onNavigateTo(viewId);
+  });
+  if (!likec4model) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+  }
+  const view = likec4model.findView(viewId)?.$view;
+  if (!view) {
+    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+  }
+  if (view._stage !== "layouted") {
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
+  }
+  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
+  const notations = view.notation?.nodes ?? [];
+  const hasNotations = notations.length > 0;
+  showNotations ??= hasNotations;
+  const isBrowserEnabled = browser !== false;
+  const browserProps = isBoolean(browser) ? {} : browser;
+  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  return /* @__PURE__ */ jsx(
+    ShadowRoot,
+    {
+      injectFontCss,
+      theme: mantineTheme,
+      colorScheme,
+      styleNonce,
+      keepAspectRatio: keepAspectRatio ? bounds : false,
+      className: cx(
+        "likec4-view",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+        /* @__PURE__ */ jsx(
+          LikeC4Diagram,
+          {
+            view,
+            readonly: true,
+            pannable,
+            zoomable,
+            background,
+            fitView: true,
+            fitViewPadding: FitViewPaddings.default,
+            showNotations,
+            enableDynamicViewWalkthrough,
+            showNavigationButtons,
+            experimentalEdgeEditing: false,
+            enableFocusMode,
+            enableRelationshipDetails,
+            enableElementDetails,
+            enableRelationshipBrowser,
+            enableElementTags: false,
+            controls,
+            nodesDraggable: false,
+            reduceGraphics,
+            className: cx(
+              "likec4-static-view",
+              isBrowserEnabled && cssInteractive
+            ),
+            enableSearch: false,
+            ...isBrowserEnabled && {
+              onCanvasClick: onNavigateToThisView,
+              onNodeClick: onNavigateToThisView
+            },
+            reactFlowProps,
+            renderNodes,
+            children,
+            ...props
+          }
+        ),
+        browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
+          /* @__PURE__ */ jsx(
+            LikeC4Diagram,
+            {
+              view: browserView,
+              pannable: true,
+              zoomable: true,
+              background: "dots",
+              onNavigateTo,
+              showNavigationButtons: true,
+              enableDynamicViewWalkthrough: true,
+              enableFocusMode: true,
+              enableRelationshipBrowser: true,
+              enableElementDetails: true,
+              enableRelationshipDetails: true,
+              enableSearch: true,
+              enableElementTags: true,
+              controls: true,
+              readonly: true,
+              fitView: true,
+              ...props,
+              fitViewPadding: FitViewPaddings.withControls,
+              ...browserProps,
+              showNotations: browserProps.showNotations ?? showNotations,
+              renderNodes
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              color: "gray",
+              onClick: (e) => {
+                e.stopPropagation();
+                onNavigateTo(null);
+              },
+              children: /* @__PURE__ */ jsx(IconX, {})
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { LikeC4View };

package/dist/{bundle/ReactLikeC4.d.ts → ReactLikeC4.d.ts}

@@ -1,13 +1,13 @@
 import { CSSProperties } from 'react';
-import { LikeC4DiagramProps } from '../LikeC4Diagram';
+import { Except } from 'type-fest';
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
-export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     viewId: t.aux.ViewId<A>;
     /**
      * Keep aspect ratio of the diagram
-     * Disable if you need to manage the viewport (use className)
      *
-     * @default true
+     * @default false
      */
     keepAspectRatio?: boolean | undefined;
     /**
@@ -26,8 +26,14 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = Omit
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
-};
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ReactLikeC4 {
-    var displayName: string;
-}
+    children?: React.ReactNode | undefined;
+} & Except<LikeC4DiagramProperties<A>, 'view', {
+    requireExactProps: true;
+}> & LikeC4DiagramEventHandlers<A>;
+/**
+ * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
+ * But provides more control over the diagram
+ *
+ * Component is wrapped in ShadowRoot to isolate styles.
+ */
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, keepAspectRatio, showNotations, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactLikeC4.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
+import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import { LikeC4Diagram } from './LikeC4Diagram.js';
+import { ShadowRoot } from './shadowroot/ShadowRoot.js';
+import { getViewBounds } from './utils/get-view-bounds.js';
+
+function ReactLikeC4({
+  viewId,
+  className,
+  colorScheme,
+  injectFontCss = true,
+  keepAspectRatio,
+  showNotations,
+  style,
+  mantineTheme,
+  styleNonce,
+  ...props
+}) {
+  const likec4model = useOptionalLikeC4Model();
+  if (!likec4model) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+  }
+  const view = likec4model.findView(viewId)?.$view;
+  if (!view) {
+    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+  }
+  if (view._stage !== "layouted") {
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
+  }
+  const notations = view.notation?.nodes ?? [];
+  const hasNotations = notations.length > 0;
+  showNotations ??= hasNotations;
+  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  return /* @__PURE__ */ jsx(
+    ShadowRoot,
+    {
+      injectFontCss,
+      theme: mantineTheme,
+      colorScheme,
+      styleNonce,
+      keepAspectRatio: keepAspectRatio ? bounds : false,
+      className: cx(
+        "likec4-view",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsx(
+        LikeC4Diagram,
+        {
+          view,
+          showNotations,
+          ...props
+        }
+      )
+    }
+  );
+}
+
+export { ReactLikeC4 };

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,10 @@
 import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
+export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
+/**
+ * StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
+ * (Export/Embed)
+ *
+ * @internal
+ */
 export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -24,7 +24,6 @@ function StaticLikeC4Diagram({
       zoomable: false,
       controls: false,
       background,
-      showDiagramTitle: false,
       showNotations: false,
       enableElementDetails: false,
       enableRelationshipDetails,

package/dist/base/BaseXYFlow.d.ts

@@ -2,8 +2,8 @@ import { ReactFlowProps } from '@xyflow/react';
 import { SetRequired, Simplify } from 'type-fest';
 import { ViewPadding } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
-import { Base } from './types';
-export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
+import { BaseEdge, BaseNode } from './types';
+export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge> = Simplify<{
     pannable?: boolean;
     zoomable?: boolean;
     nodesSelectable?: boolean;
@@ -12,4 +12,4 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;
+export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
+import { useMantineColorScheme } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
-import { Fragment } from 'react';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { roundDpr } from '../utils/roundDpr.js';
@@ -11,7 +11,7 @@ import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
 import { Base } from './types.js';
 
-const BaseXYFlow = ({
+function BaseXYFlow({
   nodes,
   edges,
   onEdgesChange,
@@ -23,7 +23,7 @@ const BaseXYFlow = ({
   nodesDraggable = false,
   background = "dots",
   children,
-  colorMode = "system",
+  colorMode,
   fitViewPadding = 0,
   fitView = true,
   zoomOnDoubleClick = false,
@@ -34,10 +34,14 @@ const BaseXYFlow = ({
   onEdgeMouseEnter,
   onEdgeMouseLeave,
   ...props
-}) => {
+}) {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
   const xystore = useXYStoreApi();
+  const { colorScheme } = useMantineColorScheme();
+  if (!colorMode) {
+    colorMode = colorScheme === "auto" ? "system" : colorScheme;
+  }
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -151,15 +155,13 @@ const BaseXYFlow = ({
       onEdgeDoubleClick: stopPropagation,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(Fragment, { children: [
-          isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
-          onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize })
-        ] }, "_internals"),
+        isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
+        onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
         children
       ]
     }
   );
-};
+}
 const selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
 const ViewportResizeHanlder = ({
   onViewportResize

package/dist/base/index.d.ts

@@ -1,3 +1,3 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
+export * from './types';
 export * from './const';

package/dist/base/types.d.ts

@@ -1,62 +1,72 @@
+import { Edge, EdgeProps, Node, NodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
-import type * as RF from '@xyflow/react';
-type RFNode<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.Node<NodeData, NodeType>;
-type RFEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.Edge<EdgeData, EdgeType>;
-type ReactFlowNodeProps<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.NodeProps<RF.Node<NodeData, NodeType>>;
-type ReactFlowEdgeProps<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.EdgeProps<RF.Edge<EdgeData, EdgeType>>;
-export declare namespace Base {
-    export type Dimmed = 'immediate' | boolean;
-    export type NodeData = {
-        /**
-         * Whether the cursor is hovering over the node
-         */
-        hovered?: boolean;
-        /**
-         * Whether the node is dimmed
-         * 'immediate' means that the node is dimmed without delay
-         */
-        dimmed?: Dimmed;
+export type BaseNodeData = {
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean;
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: Base.Dimmed;
+};
+export type BaseEdgeData = {
+    /**
+     * Whether the cursor is hovering over the edge
+     */
+    hovered?: boolean;
+    /**
+     * Whether the edge is active (animated and highlighted)
+     */
+    active?: boolean;
+    /**
+     * Whether the edge is dimmed
+     * 'immediate' means that the edge is dimmed without delay
+     */
+    dimmed?: Base.Dimmed;
+};
+export type BaseNode<Data extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = SetRequired<Node<Data & BaseNodeData, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
+export interface BaseEdge<Data extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string = string> extends SetRequired<Edge<Data & BaseEdgeData, EdgeType>, 'type' | 'data'> {
+}
+/**
+ * ReactFlow Base Node properties with BaseNodeData at least
+ */
+export interface BaseNodeProps<N extends BaseNode = BaseNode> extends NodeProps<N> {
+}
+export type BaseNodePropsWithData<Data extends Record<string, unknown>> = BaseNodeProps<BaseNode<Data>>;
+/**
+ * ReactFlow Base Edge properties with BaseEdgeData at least
+ */
+export interface BaseEdgeProps<E extends BaseEdge = BaseEdge> extends EdgeProps<E> {
+}
+export type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEdgeProps<BaseEdge<Data>>;
+type WithDimmed = {
+    data: {
+        dimmed?: Base.Dimmed;
     };
-    export type Node = RFNode<NodeData>;
-    export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>;
-    export type EdgeData = {
-        /**
-         * Whether the cursor is hovering over the edge
-         */
+};
+type WithHovered = {
+    data: {
         hovered?: boolean;
-        /**
-         * Whether the edge is active (animated and highlighted)
-         */
-        active?: boolean;
-        /**
-         * Whether the edge is dimmed
-         * 'immediate' means that the edge is dimmed without delay
-         */
-        dimmed?: Dimmed;
     };
-    export type Edge = Simplify<Omit<RFEdge, 'data'> & {
-        data: EdgeData;
-    }>;
-    type WithDimmed = {
-        data: {
-            dimmed?: Dimmed;
-        };
-    };
-    type WithHovered = {
-        data: {
-            hovered?: boolean;
-        };
-    };
-    export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
-    export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
-    export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
-    export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
-    type WithData<D> = {
-        data: D;
-    };
-    export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
-    export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
-    export {};
+};
+declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+    data: D;
+};
+declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+export declare const Base: {
+    setDimmed: typeof setDimmed;
+    setHovered: typeof setHovered;
+    setData: typeof setData;
+};
+export declare namespace Base {
+    type Dimmed = 'immediate' | boolean;
 }
 /**
  * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
@@ -80,14 +90,4 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 } & {
     [P in Keys]-?: T[P] | undefined;
 }>;
-/**
- * ReactFlow Custom Node properties with BaseNodeData at least
- */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<Base.NodeData & T, NodeType>>;
-/**
- * ReactFlow Custom Edge properties with BaseEdgeData at least
- */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = Simplify<SetRequired<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>, 'data'>>;
-export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
-export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
 export {};

package/dist/base/types.js

@@ -1,54 +1,53 @@
 import { hasSubObject } from 'remeda';
 
-var Base;
-((Base2) => {
-  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
-    ...v,
-    data: {
-      ...v.data,
-      dimmed
-    }
-  };
-  function setDimmed(arg1, arg2) {
-    if (arg2 !== void 0) {
-      return _setDimmed(arg1, arg2);
-    }
-    return (v) => _setDimmed(v, arg1);
+const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
+  ...v,
+  data: {
+    ...v.data,
+    dimmed
   }
-  Base2.setDimmed = setDimmed;
-  const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
-    ...v,
-    data: {
-      ...v.data,
-      hovered
-    }
-  };
-  function setHovered(arg1, arg2) {
-    if (arg2 !== void 0) {
-      return _setHovered(arg1, arg2);
-    }
-    return (v) => _setHovered(v, arg1);
+};
+function setDimmed(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setDimmed(arg1, arg2);
   }
-  Base2.setHovered = setHovered;
-  function _setData(value, state) {
-    if (hasSubObject(value.data, state)) {
-      return value;
-    }
-    return {
-      ...value,
-      data: {
-        ...value.data,
-        ...state
-      }
-    };
+  return (v) => _setDimmed(v, arg1);
+}
+const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
+  ...v,
+  data: {
+    ...v.data,
+    hovered
+  }
+};
+function setHovered(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setHovered(arg1, arg2);
   }
-  function setData(arg1, arg2) {
-    if (arg2 !== void 0) {
-      return _setData(arg1, arg2);
+  return (v) => _setHovered(v, arg1);
+}
+function _setData(value, state) {
+  if (hasSubObject(value.data, state)) {
+    return value;
+  }
+  return {
+    ...value,
+    data: {
+      ...value.data,
+      ...state
     }
-    return (edge) => _setData(edge, arg1);
+  };
+}
+function setData(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setData(arg1, arg2);
   }
-  Base2.setData = setData;
-})(Base || (Base = {}));
+  return (edge) => _setData(edge, arg1);
+}
+const Base = {
+  setDimmed,
+  setHovered,
+  setData
+};
 
 export { Base };

package/dist/base/updateEdges.d.ts

@@ -1,3 +1,3 @@
-import { Base } from './types';
-export declare function updateEdges<E extends Base.Edge>(current: E[], update: E[]): E[];
-export declare function updateEdges<E extends Base.Edge>(update: E[]): (current: E[]) => E[];
+import { BaseEdge } from './types';
+export declare function updateEdges<E extends BaseEdge>(current: E[], update: E[]): E[];
+export declare function updateEdges<E extends BaseEdge>(update: E[]): (current: E[]) => E[];

package/dist/base/updateNodes.d.ts

@@ -1,3 +1,3 @@
-import { Base } from './types';
-export declare function updateNodes<N extends Base.Node>(current: N[], update: N[]): N[];
-export declare function updateNodes<N extends Base.Node>(update: N[]): (current: N[]) => N[];
+import { BaseNode } from './types';
+export declare function updateNodes<N extends BaseNode>(current: N[], update: N[]): N[];
+export declare function updateNodes<N extends BaseNode>(update: N[]): (current: N[]) => N[];