@likec4/diagram 1.19.1 → 1.20.0

package/dist/controls/action-button-bar/ActionButtonBar.js

@@ -1,100 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mantine/core";
-import { useId } from "@mantine/hooks";
-import clsx from "clsx";
-import "framer-motion";
-import { container } from "./ActionButtonBar.css.js";
-import { ActionButtonBarContext } from "./useActionButtonBarCtx.js";
-const TRANSLATE_DIFF = 5;
-const elementVariants = (prefix, index, count, shiftX, shiftY) => {
-  const name = `${prefix}${index + 1}`;
-  const translation = count > 1 ? {
-    x: shiftX === "spread" ? 1 - count + index * 2 : shiftX,
-    y: shiftY === "spread" ? 1 - count + index * 2 : shiftY
-  } : {
-    x: 0,
-    y: 1
-  };
-  const variants = {
-    idle: {
-      "--icon-scale": "scale(1)",
-      "--ai-bg": "var(--ai-bg-idle)",
-      scale: 1,
-      opacity: 0.8,
-      translateX: 0,
-      translateY: 0,
-      originX: 0.5,
-      originY: 0.5
-      // translateY: 0,
-      // ...align === 'left' && {
-      //   originX: 0.75,
-      //   translateX: -1
-      // },
-      // ...align === 'right' && {
-      //   originX: 0.25,
-      //   translateX: 1
-      // }
-    },
-    hovered: {
-      "--ai-bg": "var(--ai-bg-hover)",
-      "--icon-scale": "scale(1)",
-      // translateY: 3,
-      scale: 1.28,
-      opacity: 1,
-      translateX: translation.x * TRANSLATE_DIFF,
-      translateY: translation.y * TRANSLATE_DIFF
-      // ...align === 'left' && {
-      //   translateX: -4
-      // },
-      // ...align === 'right' && {
-      //   translateX: 4
-      // }
-    },
-    [`hovered:${name}`]: {
-      "--ai-bg": "var(--ai-hover)",
-      "--icon-scale": "scale(1.08)",
-      scale: 1.45
-    },
-    [`tap:${name}`]: {
-      "--icon-scale": "scale(1)",
-      scale: 1.15
-    },
-    selected: {}
-  };
-  variants["selected"] = variants["hovered"];
-  variants["hovered:details"] = variants["idle"];
-  return {
-    variants,
-    ["data-animate-target"]: name
-  };
-};
-const ActionButtonBar = ({
-  shiftX = "spread",
-  shiftY = "spread",
-  children
-}) => {
-  const id = useId();
-  const childrenArray = Array.isArray(children) ? children : [children];
-  let shiftDiffX = "spread";
-  if (shiftX == "left") {
-    shiftDiffX = -1;
-  } else if (shiftX == "right") {
-    shiftDiffX = 1;
-  }
-  let shiftDiffY = "spread";
-  if (shiftY == "top") {
-    shiftDiffY = -1;
-  } else if (shiftY == "bottom") {
-    shiftDiffY = 1;
-  }
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container), children: childrenArray.map((child, i, all) => /* @__PURE__ */ jsx(
-    ActionButtonBarContext.Provider,
-    {
-      value: elementVariants(id, i, all.length, shiftDiffX, shiftDiffY),
-      children: child
-    }
-  )) });
-};
-export {
-  ActionButtonBar
-};

package/dist/controls/action-button-bar/useActionButtonBarCtx.d.ts

@@ -1,10 +0,0 @@
-import { Variants } from 'framer-motion';
-import { Context } from 'react';
-export declare const ActionButtonBarContext: Context<{
-    variants: Variants;
-    "data-animate-target"?: string;
-} | null>;
-export declare function useActionButtonBarCtx(): {
-    variants: Variants;
-    "data-animate-target"?: string;
-} | null;

package/dist/controls/action-button-bar/useActionButtonBarCtx.js

@@ -1,9 +0,0 @@
-import { createContext, useContext } from "react";
-const ActionButtonBarContext = createContext(null);
-function useActionButtonBarCtx() {
-  return useContext(ActionButtonBarContext);
-}
-export {
-  ActionButtonBarContext,
-  useActionButtonBarCtx
-};

package/dist/controls/action-buttons/ActionButton.css.d.ts

@@ -1 +0,0 @@
-export declare const btn: string;

package/dist/controls/action-buttons/ActionButton.css.js

@@ -1,5 +0,0 @@
-/* empty css                                */
-var btn = "_1jdst3q0";
-export {
-  btn
-};

package/dist/controls/action-buttons/ActionButton.d.ts

@@ -1,9 +0,0 @@
-import { ActionIconProps } from '@mantine/core';
-import { HTMLMotionProps } from 'framer-motion';
-import { PropsWithoutRef } from 'react';
-export type ActionButtonProps = PropsWithoutRef<Omit<ActionIconProps & HTMLMotionProps<'div'>, 'onClick' | 'children'> & {
-    onClick: (e: React.MouseEvent) => void;
-    IconComponent: React.ComponentType<any>;
-    tooltipLabel?: string;
-}>;
-export declare const ActionButton: ({ onClick: action, IconComponent, tooltipLabel, ...props }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/action-buttons/ActionButton.js

@@ -1,66 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Tooltip, ActionIcon } from "@mantine/core";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { stopPropagation } from "../../xyflow/utils.js";
-import { useActionButtonBarCtx } from "../action-button-bar/useActionButtonBarCtx.js";
-import { btn } from "./ActionButton.css.js";
-const variants = {
-  idle: {
-    "--icon-scale": "scale(1)",
-    "--ai-bg": "var(--ai-bg-idle)"
-  },
-  hovered: {
-    "--icon-scale": "scale(1)",
-    "--ai-bg": "var(--ai-bg-hover)"
-  },
-  selected: {}
-};
-variants["selected"] = variants["hovered"];
-const ActionButton = ({
-  onClick: action,
-  IconComponent,
-  tooltipLabel,
-  ...props
-}) => {
-  const ctx = useActionButtonBarCtx() ?? {
-    variants
-  };
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      fz: "xs",
-      color: "dark",
-      label: tooltipLabel ?? "",
-      disabled: !tooltipLabel,
-      withinPortal: false,
-      offset: 2,
-      openDelay: 600,
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          component: m.div,
-          className: clsx("nodrag nopan", btn),
-          radius: "md",
-          role: "button",
-          onClick: action,
-          onDoubleClick: stopPropagation,
-          ...ctx,
-          ...props,
-          children: /* @__PURE__ */ jsx(
-            IconComponent,
-            {
-              style: {
-                width: "70%",
-                transform: "var(--icon-scale)"
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  ActionButton
-};

package/dist/controls/action-buttons/ActionButtons.d.ts

@@ -1,12 +0,0 @@
-import { Fqn } from '@likec4/core';
-import { ActionButtonProps } from './ActionButton';
-export type NodeActionButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
-    fqn: Fqn;
-};
-export declare const BrowseRelationshipsButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;
-export type NavigateToButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
-    xynodeId: string;
-};
-export declare const NavigateToButton: ({ xynodeId, ...props }: NavigateToButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const OpenDetailsButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const OpenSourceButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/action-buttons/ActionButtons.js

@@ -1,99 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { IconTransform, IconZoomScan, IconId } from "@tabler/icons-react";
-import { useCallback } from "react";
-import { ActionButton } from "./ActionButton.js";
-import { useDiagramState, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
-const BrowseRelationshipsButton = ({
-  fqn,
-  ...props
-}) => {
-  const {
-    openOverlay
-  } = useDiagramState((s) => ({
-    openOverlay: s.openOverlay
-  }));
-  const onBrowseRelationships = useCallback((e) => {
-    e.stopPropagation();
-    openOverlay({ relationshipsOf: fqn });
-  }, [openOverlay, fqn]);
-  return /* @__PURE__ */ jsx(
-    ActionButton,
-    {
-      ...props,
-      onClick: onBrowseRelationships,
-      IconComponent: IconTransform,
-      tooltipLabel: "Browse relationships"
-    }
-  );
-};
-const NavigateToButton = ({
-  xynodeId,
-  ...props
-}) => {
-  const store = useDiagramStoreApi();
-  const onNavigateTo = useCallback((e) => {
-    e.stopPropagation();
-    store.getState().triggerOnNavigateTo(xynodeId, e);
-  }, [store, xynodeId]);
-  return /* @__PURE__ */ jsx(
-    ActionButton,
-    {
-      ...props,
-      onClick: onNavigateTo,
-      IconComponent: IconZoomScan,
-      tooltipLabel: "Open scoped view"
-    }
-  );
-};
-const VariantsDetailsBtn = {
-  idle: {
-    "--ai-bg": "var(--ai-bg-idle)",
-    scale: 1,
-    opacity: 0.5,
-    originX: 0.45,
-    originY: 0.55
-  },
-  selected: {},
-  hovered: {
-    scale: 1.2,
-    opacity: 0.7
-  },
-  "hovered:details": {
-    scale: 1.44,
-    opacity: 1
-  },
-  "tap:details": {
-    scale: 1.15
-  }
-};
-VariantsDetailsBtn["selected"] = VariantsDetailsBtn["hovered"];
-const OpenDetailsButton = ({
-  fqn,
-  ...props
-}) => {
-  const {
-    openOverlay
-  } = useDiagramState((s) => ({
-    openOverlay: s.openOverlay
-  }));
-  const onOpenDetails = useCallback((e) => {
-    e.stopPropagation();
-    openOverlay({ elementDetails: fqn });
-  }, [openOverlay, fqn]);
-  return /* @__PURE__ */ jsx(
-    ActionButton,
-    {
-      variants: VariantsDetailsBtn,
-      onClick: onOpenDetails,
-      IconComponent: IconId,
-      tooltipLabel: "Open details",
-      "data-animate-target": "details",
-      ...props
-    }
-  );
-};
-export {
-  BrowseRelationshipsButton,
-  NavigateToButton,
-  OpenDetailsButton
-};

package/dist/hooks/useDiagramState.d.ts

@@ -1,6 +0,0 @@
-import { ViewId } from '@likec4/core';
-import { DiagramState, DiagramStoreApi } from '../state/diagramStore';
-export declare function useCurrentViewId(): ViewId;
-export declare function useDiagramState<StateSlice = unknown>(selector: (state: DiagramState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
-export declare function useDiagramStoreApi(): DiagramStoreApi;
-export type { DiagramState, DiagramStoreApi };

package/dist/hooks/useDiagramState.js

@@ -1,27 +0,0 @@
-import { shallowEqual } from "fast-equals";
-import { useContext } from "react";
-import { useStoreWithEqualityFn } from "zustand/traditional";
-import { DiagramContext } from "../state/DiagramContext.js";
-const selectViewId = (state) => state.view.id;
-function useCurrentViewId() {
-  return useDiagramState(selectViewId);
-}
-function useDiagramState(selector, equalityFn) {
-  const store = useContext(DiagramContext);
-  if (store === null) {
-    throw new Error("useDiagramStore could be used only inside DiagramContext");
-  }
-  return useStoreWithEqualityFn(store, selector, equalityFn ?? shallowEqual);
-}
-function useDiagramStoreApi() {
-  const store = useContext(DiagramContext);
-  if (store === null) {
-    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  }
-  return store;
-}
-export {
-  useCurrentViewId,
-  useDiagramState,
-  useDiagramStoreApi
-};

package/dist/overlays/OverlayContext.d.ts

@@ -1,10 +0,0 @@
-import { DiagramState } from '../hooks';
-import { Context } from 'react';
-export declare const OverlayContext: Context<{
-    openOverlay: DiagramState["openOverlay"];
-    close: (onClosed?: () => void) => void;
-}>;
-export declare function useOverlayDialog(): {
-    openOverlay: DiagramState["openOverlay"];
-    close: (onClosed?: () => void) => void;
-};

package/dist/overlays/OverlayContext.js

@@ -1,9 +0,0 @@
-import { createContext, useContext } from "react";
-const OverlayContext = createContext({});
-function useOverlayDialog() {
-  return useContext(OverlayContext);
-}
-export {
-  OverlayContext,
-  useOverlayDialog
-};

package/dist/overlays/Overlays.css.d.ts

@@ -1,3 +0,0 @@
-export declare const mixColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const container: string;
-export declare const cssReactflowMarker: string;

package/dist/overlays/Overlays.css.js

@@ -1,7 +0,0 @@
-/* empty css                            */
-var container = "_1u47gxi1";
-var cssReactflowMarker = "_1u47gxi2";
-export {
-  container,
-  cssReactflowMarker
-};

package/dist/overlays/edge-details/EdgeDetailsXYFlow.d.ts

@@ -1,5 +0,0 @@
-import { EdgeId } from '@likec4/core';
-import { NamedExoticComponent } from 'react';
-export declare const EdgeDetailsXYFlow: NamedExoticComponent<{
-    edgeId: EdgeId;
-}>;

package/dist/overlays/edge-details/EdgeDetailsXYFlow.js

@@ -1,185 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { Group, Box, Text } from "@mantine/core";
-import { useSyncedRef, useDebouncedCallback, useUpdateEffect } from "@react-hookz/web";
-import { useReactFlow, useStoreApi, getViewportForBounds, ReactFlow, Panel, ViewportPortal } from "@xyflow/react";
-import { memo, useEffect } from "react";
-import { only } from "remeda";
-import { useDiagramStoreApi } from "../../hooks/useDiagramState.js";
-import { SelectEdge } from "./SelectEdge.js";
-import { edgeDataGrid } from "./SelectEdge.css.js";
-import { useLayoutedEdgeDetails, ZIndexes } from "./use-layouted-edge-details.js";
-import { CompoundNode } from "./xyflow/CompoundNode.js";
-import { ElementNode } from "./xyflow/ElementNode.js";
-import { RelationshipEdge } from "./xyflow/RelationshipEdge.js";
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode
-};
-const edgeTypes = {
-  relation: RelationshipEdge
-};
-const resetDimmedAndHovered = (xyflow) => {
-  xyflow.setEdges(
-    (edges) => edges.map((edge) => ({
-      ...edge,
-      data: {
-        ...edge.data,
-        dimmed: false,
-        hovered: false
-      },
-      animated: false
-    }))
-  );
-  xyflow.setNodes(
-    (nodes) => nodes.map(
-      (n) => ({
-        ...n,
-        data: {
-          ...n.data,
-          dimmed: false,
-          hovered: false
-        }
-      })
-    )
-  );
-};
-const EdgeDetailsXYFlow = memo(function EdgeDetailsXYFlow2({ edgeId }) {
-  const diagramStore = useDiagramStoreApi();
-  const {
-    view,
-    edge,
-    edges,
-    nodes,
-    bounds
-  } = useLayoutedEdgeDetails(edgeId);
-  const boundsRef = useSyncedRef(bounds);
-  const xyflow = useReactFlow();
-  const xystore = useStoreApi();
-  const fitview = useDebouncedCallback(
-    () => {
-      const {
-        width,
-        height
-      } = xystore.getState();
-      const viewport = getViewportForBounds(
-        {
-          ...boundsRef.current,
-          height: Math.max(boundsRef.current.height + 100, height - 200)
-          // Add some padding to the bottom
-        },
-        width,
-        height,
-        0.2,
-        1,
-        0.2
-      );
-      xyflow.setViewport(viewport, { duration: 350 });
-    },
-    [xyflow],
-    150
-  );
-  useEffect(() => {
-    xyflow.setNodes(nodes);
-    xyflow.setEdges(edges);
-  }, [nodes, edges]);
-  const zoomable = true;
-  useUpdateEffect(() => fitview(), [edge.id]);
-  return /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      defaultEdges: [],
-      defaultNodes: [],
-      nodeTypes,
-      edgeTypes,
-      defaultMarkerColor: "var(--xy-edge-stroke)",
-      zoomOnPinch: zoomable,
-      zoomOnScroll: false,
-      zoomOnDoubleClick: false,
-      maxZoom: 1.5,
-      minZoom: 0.1,
-      fitView: true,
-      fitViewOptions: {
-        padding: 0.2,
-        maxZoom: 1,
-        minZoom: 0.1,
-        includeHiddenNodes: true
-      },
-      preventScrolling: true,
-      noDragClassName: "nodrag",
-      noPanClassName: "nopan",
-      panOnScroll: true,
-      panOnDrag: true,
-      elementsSelectable: true,
-      nodesFocusable: false,
-      edgesFocusable: false,
-      nodesDraggable: false,
-      onEdgeMouseEnter: (_, edge2) => {
-        xyflow.setEdges(
-          (edges2) => edges2.map((e) => ({
-            ...e,
-            data: {
-              ...e.data,
-              dimmed: e.id !== edge2.id,
-              hovered: e.id === edge2.id
-            },
-            zIndex: e.id === edge2.id ? ZIndexes.max : ZIndexes.edge,
-            animated: e.id === edge2.id
-          }))
-        );
-        xyflow.setNodes(
-          (nodes2) => nodes2.map((n) => ({
-            ...n,
-            data: {
-              ...n.data,
-              dimmed: n.id !== edge2.source && n.id !== edge2.target
-            }
-          }))
-        );
-      },
-      onEdgeMouseLeave: () => {
-        resetDimmedAndHovered(xyflow);
-      },
-      onEdgeClick: (e, edge2) => {
-        var _a, _b, _c;
-        e.stopPropagation();
-        let relationId = (_a = only(edge2.data.relations)) == null ? void 0 : _a.id;
-        if (relationId) {
-          (_c = (_b = diagramStore.getState()).onOpenSource) == null ? void 0 : _c.call(_b, {
-            relation: relationId
-          });
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx(Panel, { position: "top-center", children: /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsx(
-          SelectEdge,
-          {
-            view,
-            edge
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx(EdgeData, { edge, top: bounds.height, width: bounds.width })
-      ]
-    }
-  );
-});
-const EdgeData = ({ edge, top, width }) => {
-  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      maw: width,
-      style: {
-        transform: `translate(100px, ${top + 32}px)`
-      },
-      children: /* @__PURE__ */ jsxs(Box, { className: edgeDataGrid, children: [
-        /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", children: "technology" }),
-        /* @__PURE__ */ jsx(Text, { children: edge.technology || "unknown" }),
-        /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", children: "description" }),
-        /* @__PURE__ */ jsx(Text, { children: edge.description || "no description" })
-      ] })
-    }
-  ) });
-};
-export {
-  EdgeDetailsXYFlow
-};

package/dist/overlays/edge-details/SelectEdge.css.js

@@ -1,17 +0,0 @@
-/* empty css                              */
-var edgeSource = "_1n45dyn1 _1n45dyn0";
-var edgeArrow = "_1n45dyn2 _1n45dyn0";
-var edgeTarget = "_1n45dyn3 _1n45dyn0";
-var edgeLabel = "_1n45dyn4";
-var edgeRow = "_1n45dyn5";
-var edgeGrid = "_1n45dyn6";
-var edgeDataGrid = "_1n45dyn7";
-export {
-  edgeArrow,
-  edgeDataGrid,
-  edgeGrid,
-  edgeLabel,
-  edgeRow,
-  edgeSource,
-  edgeTarget
-};

package/dist/overlays/edge-details/_types.d.ts

@@ -1,14 +0,0 @@
-import { AddEdgeData } from '../../utils/types';
-import { SharedFlowTypes } from '../shared/xyflow/_types';
-export declare namespace EdgeDetailsFlowTypes {
-    /**
-     * Data that is exclusive to the edge-details overlay. It will be merged into the edge types
-     * provided by SharedFlowTypes.
-     */
-    type EdgeDetailsEdgeData = {
-        technology: string | null;
-        description: string | null;
-    };
-    export type Edge = AddEdgeData<SharedFlowTypes.Edge, EdgeDetailsEdgeData>;
-    export {};
-}

package/dist/overlays/edge-details/xyflow/CompoundNode.d.ts

@@ -1,5 +0,0 @@
-import { NodeProps } from '@xyflow/react';
-import { SharedFlowTypes } from '../../shared/xyflow/_types';
-type CompoundNodeProps = NodeProps<SharedFlowTypes.CompoundNode>;
-export declare function CompoundNode({ data: { element, ports, ...data }, width, selectable }: CompoundNodeProps): import("react/jsx-runtime").JSX.Element;
-export {};