@likec4/diagram 1.30.0 → 1.32.0

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,12 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo, useState } from 'react';
 import { ceil, isNonNullish } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
@@ -20,7 +18,7 @@ const ElementNotation = ({ value }) => {
     color = "primary",
     shape = "rectangle"
   } = value;
-  const [onlyKind, setOnlyKind] = reactExports.useState(null);
+  const [onlyKind, setOnlyKind] = useState(null);
   const diagram = useDiagram();
   const w = 300;
   const h = 200;
@@ -115,11 +113,11 @@ const ElementNotation = ({ value }) => {
 };
 const selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.elements ?? [],
+  notations: s.view.notation?.nodes ?? [],
   isVisible: true
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 });
-const NotationPanel = reactExports.memo(() => {
+const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
@@ -142,7 +140,7 @@ const NotationPanel = reactExports.memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
@@ -165,7 +163,7 @@ const NotationPanel = reactExports.memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         children: /* @__PURE__ */ jsx(Tooltip, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
@@ -193,7 +191,7 @@ const NotationPanel = reactExports.memo(() => {
           opacity: 0,
           scale: 0.25
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         style: {
           transformOrigin: "bottom right"
         },

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
 import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
@@ -36,14 +36,14 @@ function DynamicViewWalkthrough() {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        className: clsx("react-flow__panel", parallelStateFrame)
+        className: cx("react-flow__panel", parallelStateFrame)
       },
       "parallel-frame"
     ),
     /* @__PURE__ */ jsxs(
       Box,
       {
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         onClick: (e) => e.stopPropagation(),
         onDoubleClick: (e) => e.stopPropagation(),
         children: [
@@ -51,7 +51,7 @@ function DynamicViewWalkthrough() {
             Button,
             {
               ...buttonProps,
-              className: clsx(buttons, btn),
+              className: cx(buttons, btn),
               rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
               onClick: () => diagram.startWalkthrough(),
               px: "xl",

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,7 +1,6 @@
 import { nonNullable } from '@likec4/core';
-import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useMemo } from 'react';
 import { pipe, filter, hasAtLeast, map } from 'remeda';
 import { useDiagram } from '../hooks/useDiagram.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
@@ -186,8 +185,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
 function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
-  const solverRef = reactExports.useRef(void 0);
-  return reactExports.useMemo(() => {
+  const solverRef = useRef(void 0);
+  return useMemo(() => {
     let wasPending = false;
     const initial = { x: 0, y: 0 };
     let moved = false;

package/dist/likec4diagram/useViewToNodesEdges.d.ts

@@ -1,10 +1,12 @@
 import { DiagramView, WhereOperator } from '@likec4/core';
 import { Types } from './types';
-export declare function useViewToNodesEdges({ view: { id, nodes, edges, __, }, ...opts }: {
+type ViewToNodesEdgeInput = {
     view: DiagramView;
-    where: WhereOperator<string, string> | undefined;
+    where: WhereOperator | null;
     nodesSelectable: boolean;
-}): {
+};
+export declare function useViewToNodesEdges(params: ViewToNodesEdgeInput): {
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
 };
+export {};

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -1,5 +1,6 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from '@likec4/core';
-import { useDeepCompareMemo } from '@react-hookz/web';
+import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, invariant } from '@likec4/core';
+import { useCustomCompareMemo } from '@react-hookz/web';
+import { shallowEqual, deepEqual } from 'fast-equals';
 import { pick, hasAtLeast } from 'remeda';
 import { ZIndexes } from '../base/const.js';
 
@@ -8,7 +9,7 @@ function viewToNodesEdge(opts) {
     view,
     nodesSelectable: selectable
   } = opts;
-  view.__ === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  view._type === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -37,7 +38,7 @@ function viewToNodesEdge(opts) {
   let next;
   while (next = queue.dequeue()) {
     const { node, parent } = next;
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node });
@@ -54,8 +55,8 @@ function viewToNodesEdge(opts) {
     const id = ns + node.id;
     const base = {
       id,
-      selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && node.kind !== ElementKind.Group,
+      selectable: selectable && node.kind !== GroupElementKind,
+      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -65,12 +66,13 @@ function viewToNodesEdge(opts) {
       },
       initialWidth: node.width,
       initialHeight: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
       ...parent && {
         parentId: ns + parent.id
       }
     };
     const compoundData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       color: node.color,
@@ -78,9 +80,11 @@ function viewToNodesEdge(opts) {
       style: node.style,
       depth: node.depth ?? 0,
       icon: node.icon ?? "none",
+      tags: node.tags ?? null,
       position: node.position
     };
     const leafNodeData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       technology: node.technology,
@@ -92,10 +96,11 @@ function viewToNodesEdge(opts) {
       shape: node.shape,
       style: node.style,
       icon: node.icon ?? null,
+      tags: node.tags,
       position: node.position,
       isMultiple: node.style?.multiple ?? false
     };
-    if (node.kind === ElementKind.Group) {
+    if (node.kind === GroupElementKind) {
       xynodes.push({
         ...base,
         type: "view-group",
@@ -107,8 +112,8 @@ function viewToNodesEdge(opts) {
       });
       continue;
     }
-    const modelFqn = DiagramNode.modelRef(node);
-    const deploymentFqn = DiagramNode.deploymentRef(node);
+    const modelFqn = node.modelRef ?? null;
+    const deploymentFqn = node.deploymentRef ?? null;
     if (!modelFqn && !deploymentFqn) {
       console.error("Invalid node", node);
       throw new Error("Element should have either modelRef or deploymentRef");
@@ -219,26 +224,13 @@ function viewToNodesEdge(opts) {
     xyedges
   };
 }
-function useViewToNodesEdges({
-  view: {
-    id,
-    nodes,
-    edges,
-    __ = "element"
-  },
-  ...opts
-}) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      view: {
-        id,
-        nodes,
-        edges,
-        __
-      },
-      ...opts
-    });
-  }, [id, __, nodes, edges, opts]);
+const viewToNodesEdgeEqual = (a, b) => a.view.id === b.view.id && a.view._type === b.view._type && a.nodesSelectable === b.nodesSelectable && shallowEqual(a.view.nodes, b.view.nodes) && shallowEqual(a.view.edges, b.view.edges) && deepEqual(a.where, b.where);
+function useViewToNodesEdges(params) {
+  return useCustomCompareMemo(
+    () => viewToNodesEdge(params),
+    [params],
+    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b)
+  );
 }
 
 export { useViewToNodesEdges };

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,3 +1,3 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
 import { Context } from 'react';
-export declare const LikeC4ModelContext: Context<LikeC4Model<LikeC4Model.Any> | null>;
+export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,5 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { createContext } from 'react';
 
-const LikeC4ModelContext = reactExports.createContext(null);
+const LikeC4ModelContext = createContext(null);
 
 export { LikeC4ModelContext };

package/dist/likec4model/useLikeC4ElementsTree.d.ts

@@ -1,4 +1,4 @@
-import { Fqn, ViewId } from '@likec4/core';
+import { Fqn, ViewId } from '@likec4/core/types';
 interface LikeC4ModelTreeNodeData {
     label: string;
     value: Fqn;

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,5 +1,5 @@
-import { compareNatural } from '@likec4/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { compareNatural } from '@likec4/core/utils';
+import { useMemo } from 'react';
 import { useLikeC4Model } from './useLikeC4Model.js';
 
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
@@ -11,8 +11,8 @@ function buildNode(element) {
   };
 }
 function useLikeC4ElementsTree(viewId) {
-  const model = useLikeC4Model(true);
-  return reactExports.useMemo(() => {
+  const model = useLikeC4Model();
+  return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId);
       return [...view.roots()].map(buildNode).sort(sortByLabel);

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,10 +1,22 @@
-import { LikeC4Model } from '@likec4/core';
-export declare function useLikeC4Model(): LikeC4Model | null;
-export declare function useLikeC4Model(strict: true): LikeC4Model;
-export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;
-export declare function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted;
-export declare function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed;
-export declare function useLikeC4Model(strict: true, type: 'layouted' | 'computed' | undefined): LikeC4Model;
-export declare function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null;
-export declare function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null;
-export declare function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null;
+import { aux, LikeC4Model } from '@likec4/core/model';
+import { TagSpecification, ElementSpecification, RelationshipSpecification, CustomColorDefinitions } from '@likec4/core';
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>;
+export declare function useLikeC4Specification(): {
+    tags: {
+        [x: string]: TagSpecification;
+    };
+    elements: {
+        [x: string]: Partial< ElementSpecification>;
+    };
+    deployments: {
+        [x: string]: Partial< ElementSpecification>;
+    };
+    relationships: {
+        [x: string]: Partial< RelationshipSpecification>;
+    };
+    metadataKeys?: string[];
+    customColors?: CustomColorDefinitions;
+};

package/dist/likec4model/useLikeC4Model.js

@@ -1,16 +1,20 @@
-import { r as reactExports } from '../_virtual/index.js';
-import { isString, isNonNullish, isDefined } from 'remeda';
+import { useContext } from 'react';
+import { isString } from 'remeda';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
-function useLikeC4Model(strict, type) {
-  const model = reactExports.useContext(LikeC4ModelContext);
-  if (isString(type) && isNonNullish(model) && model.type !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`);
-  }
-  if (isDefined(strict) && strict === true && !model) {
+function useLikeC4Model(type) {
+  const model = useContext(LikeC4ModelContext);
+  if (!model) {
     throw new Error("No LikeC4Model found in context");
   }
+  if (isString(type) && model.stage !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
+  }
   return model;
 }
+function useLikeC4Specification() {
+  const model = useLikeC4Model();
+  return model.$data.specification;
+}
 
-export { useLikeC4Model };
+export { useLikeC4Model, useLikeC4Specification };

package/dist/overlays/Overlays.d.ts

@@ -1,5 +1,4 @@
 import { OverlaysActorRef } from './overlaysActor';
-import { MemoExoticComponent } from 'react';
-export declare const Overlays: MemoExoticComponent<({ overlaysActorRef }: {
+export declare function Overlays({ overlaysActorRef }: {
     overlaysActorRef: OverlaysActorRef;
-}) => import("react/jsx-runtime").JSX.Element>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/overlays/Overlays.js

@@ -1,13 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { animate } from 'motion';
 import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'motion/react';
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { isNonNullish } from 'remeda';
+import { ErrorFallback } from '../components/ErrorFallback.js';
 import { ElementDetails } from './element-details/ElementDetails.js';
 import { Overlay } from './overlay/Overlay.js';
 import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
@@ -15,28 +14,6 @@ import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrows
 import { useXYStore } from '../hooks/useXYFlow.js';
 import { DiagramFeatures } from '../context/DiagramFeatures.js';
 
-function Fallback({ error, resetErrorBoundary }) {
-  const errorString = error instanceof Error ? error.message : "Unknown error";
-  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
-    Notification,
-    {
-      icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
-      styles: {
-        icon: {
-          alignSelf: "flex-start"
-        }
-      },
-      color: "red",
-      title: "Oops, something went wrong",
-      p: "xl",
-      withCloseButton: false,
-      children: [
-        /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, children: /* @__PURE__ */ jsx(Code, { block: true, children: errorString }) }),
-        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
-      ]
-    }
-  ) });
-}
 const selectOverlays = (s) => {
   return s.context.overlays.map((overlay) => {
     switch (overlay.type) {
@@ -65,15 +42,15 @@ const compareSelectOverlays = (a, b) => {
     return overlay.actorRef === b[i].actorRef;
   });
 };
-const Overlays = reactExports.memo(({ overlaysActorRef }) => {
+function Overlays({ overlaysActorRef }) {
   const xyflowDomNode = useXYStore((s) => s.domNode);
-  const xyflowRendererDom = reactExports.useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
+  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
     xyflowDomNode
   ]);
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotionConfig() ?? false;
-  const isActiveOverlay = overlays.length > 0;
-  reactExports.useEffect(() => {
+  const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
+  useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
@@ -121,8 +98,7 @@ const Overlays = reactExports.memo(({ overlaysActorRef }) => {
         nonexhaustive(overlay);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
-});
-Overlays.displayName = "Overlays";
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+}
 
 export { Overlays };

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -26,16 +26,20 @@ const card = css({
   pointerEvents: "all",
   gap: "lg",
   justifyContent: "stretch",
-  backgroundColor: "mantine.colors.body",
-  backgroundImage: `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
-  borderTopColor: "likec4.palette.fill",
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]`,
-    backgroundImage: `
-          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
-          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
-        `
+  backgroundColor: {
+    base: "mantine.colors.body",
+    _dark: "mantine.colors.dark[6]"
   },
+  border: `none`,
+  backgroundImage: `
+    linear-gradient(180deg,
+      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
+      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
+      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      transparent 80px
+    ),
+    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+  `,
   "& .react-flow__attribution": {
     display: "none"
   }

package/dist/overlays/element-details/ElementDetailsCard.d.ts

@@ -1,4 +1,4 @@
-import { Fqn, NodeId, ViewId } from '@likec4/core';
+import { Fqn, NodeId, ViewId } from '@likec4/core/types';
 import { Rect } from '@xyflow/system';
 type ElementDetailsCardProps = {
     viewId: ViewId;