@likec4/diagram 1.41.0 → 1.42.0

package/bundle/custom.js

@@ -1,82 +0,0 @@
-import { dA as customNode, em as useLikeC4ViewModel } from "./chunk-FGcODVxo.js";
-import { eq, es, co, et, df, eu, cp, ev, dd, de, er, ew, ex, cq, db, cj, dh, ck, cr, cg, ch, cR, dg, ci, ey, dG, dt, ee, dx, eA, eB, eC, cS, dC, ez, cn, cK, d6, c9, d5, cx, cw, ca, en, d2, cZ, eo, cY, dY, cF, cQ, ep, bc, c8, cb, c4, b6 } from "./chunk-FGcODVxo.js";
-import { jsx } from "react/jsx-runtime";
-function customDiagramNode(Node) {
-  return customNode((props) => {
-    const viewId = props.data.viewId, viewModel = useLikeC4ViewModel(viewId);
-    if (!viewModel)
-      return console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props }), null;
-    const model = viewModel.findNode(props.data.id);
-    return model ? jsx(Node, { nodeProps: props, nodeModel: model }) : (console.error(
-      `Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`,
-      { props }
-    ), null);
-  });
-}
-const elementNode = customDiagramNode, deploymentNode = customDiagramNode, compoundElementNode = customDiagramNode, compoundDeploymentNode = customDiagramNode, viewGroupNode = customDiagramNode, sequenceActorNode = customDiagramNode;
-export {
-  eq as CompoundActionButton,
-  es as CompoundActions,
-  co as CompoundDeploymentNode,
-  et as CompoundDeploymentToolbar,
-  df as CompoundDetailsButton,
-  eu as CompoundDetailsButtonWithHandler,
-  cp as CompoundElementNode,
-  ev as CompoundElementToolbar,
-  dd as CompoundNodeContainer,
-  de as CompoundTitle,
-  er as DefaultHandles,
-  ew as DeploymentElementActions,
-  ex as DeploymentElementToolbar,
-  cq as DeploymentNode,
-  db as ElementActionButtons,
-  cj as ElementActions,
-  dh as ElementDetailsButton,
-  ck as ElementDetailsButtonWithHandler,
-  cr as ElementNode,
-  cg as ElementNodeContainer,
-  ch as ElementShape,
-  cR as ElementTag,
-  dg as ElementTags,
-  ci as ElementTitle,
-  ey as ElementToolbar,
-  dG as IconOrShapeRenderer,
-  dt as IconRenderer,
-  ee as IconRendererProvider,
-  dx as IfEnabled,
-  eA as IfNotEnabled,
-  eB as IfNotReadOnly,
-  eC as IfReadOnly,
-  cS as MarkdownBlock,
-  dC as Overlay,
-  ez as Toolbar,
-  cn as ViewGroupNode,
-  compoundDeploymentNode,
-  compoundElementNode,
-  deploymentNode,
-  elementNode,
-  sequenceActorNode,
-  cK as useCurrentViewId,
-  d6 as useCurrentViewModel,
-  c9 as useDiagram,
-  d5 as useDiagramActorRef,
-  cx as useDiagramContext,
-  cw as useDiagramEventHandlers,
-  ca as useEnabledFeatures,
-  en as useHasProjects,
-  d2 as useLikeC4Model,
-  cZ as useLikeC4ProjectId,
-  eo as useLikeC4Projects,
-  cY as useLikeC4ProjectsContext,
-  dY as useLikeC4Specification,
-  useLikeC4ViewModel,
-  cF as useMantinePortalProps,
-  cQ as useOnDiagramEvent,
-  ep as useSetState,
-  bc as useUpdateEffect,
-  c8 as useXYFlow,
-  cb as useXYInternalNode,
-  c4 as useXYStore,
-  b6 as useXYStoreApi,
-  viewGroupNode
-};

package/dist/base/primitives/compound/CompoundTitle.d.ts

@@ -1,6 +0,0 @@
-import { DiagramNode } from '@likec4/core/types';
-import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'color' | 'title' | 'icon' | 'style'>;
-type CompoundTitleProps = NodeProps<Data>;
-export declare function CompoundTitle({ id, data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/base/primitives/customEdge.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { EdgeProps } from '../types';
-export declare const edgePropsEqual: <P extends EdgeProps<any>>(prev: P, next: P) => boolean;
-export declare function customEdge<P extends Record<string, unknown> = {}>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;

package/dist/base/primitives/customNode.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { NodeProps } from '../types';
-export declare function nodePropsEqual<P extends NodeProps<any, any>>(prev: P, next: P): boolean;
-export declare function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(Node: FunctionComponent<NodeProps<P, NodeType>>): FunctionComponent<NodeProps<P, NodeType>>;

package/dist/base/primitives/edge/xyvars.d.ts

@@ -1,24 +0,0 @@
-export declare const xyvars: {
-    readonly edge: {
-        readonly stroke: {
-            readonly var: "--xy-edge-stroke";
-            readonly ref: "var(--xy-edge-stroke)";
-        };
-        readonly strokeSelected: {
-            readonly var: "--xy-edge-stroke-selected";
-            readonly ref: "var(--xy-edge-stroke-selected)";
-        };
-        readonly labelColor: {
-            readonly var: "--xy-edge-label-color";
-            readonly ref: "var(--xy-edge-label-color)";
-        };
-        readonly labelBgColor: {
-            readonly var: "--xy-edge-label-background-color";
-            readonly ref: "var(--xy-edge-label-background-color)";
-        };
-        readonly strokeWidth: {
-            readonly var: "--xy-edge-stroke-width";
-            readonly ref: "var(--xy-edge-stroke-width)";
-        };
-    };
-};

package/dist/base/primitives/element/ElementActionButtons.d.ts

@@ -1,13 +0,0 @@
-import { NodeProps } from '../../types';
-type ElementActionButtonsProps = NodeProps & {
-    buttons: ElementActionButtons.Item[];
-};
-export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace ElementActionButtons {
-    type Item = {
-        key?: string;
-        icon: React.ReactNode;
-        onClick: (e: React.MouseEvent) => void;
-    };
-}
-export {};

package/dist/base/primitives/element/ElementActionButtons.js

@@ -1,79 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { css, cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { actionBtn } from '@likec4/styles/recipes';
-import { ActionIcon } from '@mantine/core';
-import { useId } from '@mantine/hooks';
-import * as m from 'motion/react-m';
-import { stopPropagation } from '../../../utils/xyflow.js';
-
-const container = css({
-  position: "absolute",
-  zIndex: 1,
-  top: `[calc(100% - 30px)]`,
-  transform: "translateX(-50%)",
-  left: `[50%]`,
-  width: "auto",
-  minHeight: "30px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  _smallZoom: {
-    display: "none"
-  }
-  // zIndex: 10,
-});
-const actionButtons = css({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-});
-function ElementActionButtons({
-  selected = false,
-  data: {
-    hovered: isHovered = false
-  },
-  buttons
-}) {
-  const id = useId();
-  if (!buttons.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layoutRoot: true,
-      initial: false,
-      style: {
-        originY: 0,
-        gap: 6
-      },
-      animate: {
-        opacity: isHovered || selected ? 1 : 0.75,
-        scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
-        y: isHovered || selected ? 6 : 0
-      },
-      "data-likec4-hovered": isHovered,
-      className: cx("nodrag nopan", actionButtons),
-      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          component: m.button,
-          className: actionBtn({}),
-          initial: false,
-          whileTap: { scale: 1 },
-          whileHover: {
-            scale: 1.3
-          },
-          onClick: button.onClick,
-          onDoubleClick: stopPropagation,
-          children: button.icon
-        },
-        `${id}-${button.key ?? index}`
-      ))
-    },
-    `${id}-action-buttons`
-  ) });
-}
-
-export { ElementActionButtons };

package/dist/base/primitives/element/ElementShape.d.ts

@@ -1,32 +0,0 @@
-import { ElementShape, ElementStyle } from '@likec4/core/types';
-export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
-    path: string;
-    ry: number;
-    rx: number;
-};
-type ElementShapeProps = {
-    shape: ElementShape;
-    w: number;
-    h: number;
-};
-type Data = {
-    shape: ElementShape;
-    width: number;
-    height: number;
-    style?: ElementStyle;
-};
-type ElementShapePrimitiveProps = {
-    data: Data;
-    width?: number;
-    height?: number;
-    /**
-     * @default true
-     */
-    withSelectedIndicator?: boolean | undefined;
-};
-export declare function ElementShape({ data, width, height, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
-/**
- * When element is selected, this component is used to render the indicator
- */
-export declare function SelectedIndicator({ shape, w, h }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/base/primitives/element/ElementTitle.d.ts

@@ -1,12 +0,0 @@
-import { DiagramNode, RichTextOrEmpty } from '@likec4/core/types';
-import { Simplify } from 'type-fest';
-import { NodeProps, NonOptional } from '../../types';
-type Data = Simplify<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'color' | 'style'>> & {
-    description?: RichTextOrEmpty;
-    icon?: string | null;
-}>;
-type ElementTitleProps = NodeProps<Data> & {
-    iconSize?: number;
-};
-export declare function ElementTitle({ id, data, iconSize }: ElementTitleProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/base/primitives/element/ElementTitle.js

@@ -1,76 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ensureSizes } from '@likec4/core/types';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { elementNodeIcon, elementNodeData } from '@likec4/styles/recipes';
-import { Text } from '@mantine/core';
-import { isTruthy, isEmpty, isNumber } from 'remeda';
-import { IconRenderer } from '../../../context/IconRenderer.js';
-import { MarkdownBlock } from '../MarkdownBlock.js';
-
-function ElementTitle({ id, data, iconSize }) {
-  const elementIcon = IconRenderer({
-    element: {
-      id,
-      title: data.title,
-      icon: data.icon
-    },
-    className: elementNodeIcon()
-  });
-  const classes = elementNodeData({
-    hasIcon: isTruthy(elementIcon),
-    hasDescription: !!data.description?.nonEmpty,
-    hasTechnology: !isEmpty(data.technology ?? "")
-  });
-  const { size } = ensureSizes(data.style);
-  const isSm = size === "sm";
-  const isSmOrXs = isSm || size === "xs";
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: cx(
-        classes.root,
-        "likec4-element"
-      ),
-      style: isNumber(iconSize) ? {
-        // @ts-ignore
-        ["--likec4-icon-size"]: `${iconSize}px`
-      } : void 0,
-      children: [
-        elementIcon,
-        /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes.title, "likec4-element-title"),
-              lineClamp: isSmOrXs ? 2 : 3,
-              children: data.title
-            }
-          ),
-          data.technology && /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes.technology, "likec4-element-technology"),
-              children: data.technology
-            }
-          ),
-          data.description?.nonEmpty && /* @__PURE__ */ jsx(
-            MarkdownBlock,
-            {
-              className: cx(classes.description, "likec4-element-description"),
-              value: data.description,
-              uselikec4palette: true,
-              hideIfEmpty: true,
-              maxHeight: data.description.isMarkdown ? "8rem" : void 0,
-              lineClamp: isSmOrXs ? 3 : 5
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-
-export { ElementTitle };

package/dist/bundle/LikeC4ModelProvider.d.ts

@@ -1,9 +0,0 @@
-import { JSX, PropsWithChildren } from 'react';
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-    /**
-     * The LikeC4 model to be provided to the context.
-     * TODO: refer to 'likec4/model'
-     */
-    likec4model: any;
-}>;
-export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element;

package/dist/bundle/LikeC4ModelProvider.js

@@ -1,5 +0,0 @@
-import { LikeC4ModelProvider as LikeC4ModelProvider$1 } from '../LikeC4ModelProvider.js';
-
-const LikeC4ModelProvider = LikeC4ModelProvider$1;
-
-export { LikeC4ModelProvider };

package/dist/bundle/LikeC4View.d.ts

@@ -1,3 +0,0 @@
-import { LikeC4ViewProps } from './LikeC4View.props';
-import type * as t from '@likec4/core/types';
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.js

@@ -1,186 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box, ActionIcon } from '@mantine/core';
-import { useCallbackRef, shallowEqual } from '@mantine/hooks';
-import { memo, useState } from 'react';
-import { isBoolean } from 'remeda';
-import { FitViewPaddings } from '../base/const.js';
-import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
-import { LikeC4Diagram } from '../LikeC4Diagram.js';
-import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
-import { Overlay } from '../overlays/overlay/Overlay.js';
-import { ShadowRoot } from './ShadowRoot.js';
-import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
-import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-
-function LikeC4View({
-  viewId,
-  ...props
-}) {
-  const likec4model = useLikeC4Model();
-  const view = likec4model.findView(viewId);
-  if (!view) {
-    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
-  }
-  if (!view.isDiagram()) {
-    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      'LikeC4 View "$',
-      viewId,
-      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
-    ] });
-  }
-  return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
-}
-const LikeC4ViewInner = memo(({
-  view,
-  className,
-  pannable = false,
-  zoomable = false,
-  keepAspectRatio = true,
-  colorScheme: explicitColorScheme,
-  injectFontCss = true,
-  controls = false,
-  background = "transparent",
-  browser = true,
-  showDiagramTitle = false,
-  showNavigationButtons = false,
-  showNotations = false,
-  enableFocusMode = false,
-  enableDynamicViewWalkthrough = enableFocusMode,
-  enableElementDetails = false,
-  enableRelationshipBrowser = enableElementDetails,
-  enableRelationshipDetails = enableRelationshipBrowser,
-  reduceGraphics = "auto",
-  mantineTheme,
-  styleNonce,
-  style,
-  reactFlowProps = {},
-  renderNodes,
-  ...props
-}) => {
-  const likec4model = useLikeC4Model();
-  const colorScheme = useColorScheme(explicitColorScheme);
-  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const [browserViewId, onNavigateTo] = useState(null);
-  const onNavigateToThisView = useCallbackRef(() => {
-    onNavigateTo(view.id);
-  });
-  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  let nonce;
-  if (typeof styleNonce === "string") {
-    nonce = styleNonce;
-  } else if (typeof styleNonce === "function") {
-    nonce = styleNonce();
-  }
-  const isBrowserEnabled = browser !== false;
-  const browserProps = isBoolean(browser) ? {} : browser;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "style",
-      {
-        type: "text/css",
-        nonce,
-        dangerouslySetInnerHTML: {
-          __html: cssstyle
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ShadowRoot,
-      {
-        ...shadowRootProps,
-        injectFontCss,
-        theme: mantineTheme,
-        colorScheme,
-        styleNonce,
-        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,
-              showDiagramTitle,
-              showNotations: showNotations && hasNotations,
-              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,
-              ...props
-            }
-          ),
-          browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
-            /* @__PURE__ */ jsx(
-              LikeC4Diagram,
-              {
-                view: browserView,
-                background: "dots",
-                onNavigateTo,
-                enableDynamicViewWalkthrough: true,
-                enableFocusMode: true,
-                enableRelationshipBrowser: true,
-                enableElementDetails: true,
-                enableRelationshipDetails: true,
-                enableSearch: true,
-                enableElementTags: true,
-                controls: "next",
-                readonly: true,
-                fitView: true,
-                ...props,
-                fitViewPadding: FitViewPaddings.withControls,
-                ...browserProps,
-                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,
-                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, {})
-              }
-            ) })
-          ] })
-        ] })
-      }
-    )
-  ] });
-}, shallowEqual);
-LikeC4ViewInner.displayName = "LikeC4ViewInner";
-
-export { LikeC4View };

package/dist/bundle/ReactLikeC4.js

@@ -1,91 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { isString, isFunction } from 'remeda';
-import { LikeC4Diagram } from '../LikeC4Diagram.js';
-import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
-import { ShadowRoot } from './ShadowRoot.js';
-import { useColorScheme, useShadowRootStyle } from './styles.css.js';
-import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
-
-function ReactLikeC4({
-  viewId,
-  ...props
-}) {
-  const likec4model = useLikeC4Model();
-  const view = likec4model.findView(viewId);
-  if (!view) {
-    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
-  }
-  if (!view.isDiagram()) {
-    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      'LikeC4 View "$',
-      viewId,
-      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
-    ] });
-  }
-  return /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props });
-}
-function ReactLikeC4Inner({
-  className,
-  view,
-  colorScheme: explicitColorScheme,
-  injectFontCss = true,
-  keepAspectRatio = true,
-  showNotations = true,
-  onNavigateTo,
-  background = "transparent",
-  style,
-  mantineTheme,
-  styleNonce,
-  ...props
-}) {
-  const colorScheme = useColorScheme(explicitColorScheme);
-  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  let nonce;
-  if (isString(styleNonce)) {
-    nonce = styleNonce;
-  } else if (isFunction(styleNonce)) {
-    nonce = styleNonce();
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "style",
-      {
-        type: "text/css",
-        nonce,
-        dangerouslySetInnerHTML: { __html: cssstyle }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ShadowRoot,
-      {
-        ...shadowRootProps,
-        injectFontCss,
-        theme: mantineTheme,
-        colorScheme,
-        styleNonce,
-        className: cx(
-          "likec4-view",
-          className
-        ),
-        style,
-        children: /* @__PURE__ */ jsx(
-          LikeC4Diagram,
-          {
-            view,
-            showNotations: showNotations && hasNotations,
-            onNavigateTo,
-            background,
-            enableElementTags: false,
-            ...props
-          }
-        )
-      }
-    )
-  ] });
-}
-ReactLikeC4.displayName = "ReactLikeC4";
-
-export { ReactLikeC4 };