@likec4/diagram 1.46.4 → 1.48.0

package/dist/adhoc-editor/actor.types.js

@@ -0,0 +1,22 @@
+import { setup } from 'xstate';
+
+function ruleToPredicate(rule) {
+  return rule.type === "include" ? { include: [rule.expr] } : { exclude: [rule.expr] };
+}
+const machine = setup({
+  types: {
+    context: {},
+    tags: "",
+    // input: {} as Input,
+    events: {},
+    emitted: {}
+  },
+  actors: {
+    service: {}
+  },
+  guards: {
+    hasView: ({ context }) => context.view !== null
+  }
+});
+
+export { machine, ruleToPredicate };

package/dist/adhoc-editor/hooks.d.ts

@@ -0,0 +1,14 @@
+import { LayoutedElementView, Any } from '@likec4/core';
+import { ElementModel } from '@likec4/core/model';
+import { AdhocEditorSnapshot, AdhocEditorActorRef } from './actor';
+export declare function useAdhocEditorActor(): AdhocEditorActorRef;
+export declare function useAdhocEditor(): {
+    open: () => void;
+    close: () => void;
+    toggleRule: (ruleId: string) => void;
+    include: (element: ElementModel) => void;
+};
+export declare function useAdhocEditorSnapshot<T = unknown>(selector: (state: AdhocEditorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+export declare function useAdhocView(): LayoutedElementView< Any>;
+export declare function selectFromSnapshot<T = unknown>(selector: (state: AdhocEditorSnapshot) => T): (state: AdhocEditorSnapshot) => T;
+export declare function selectFromContext<T = unknown>(selector: (state: AdhocEditorSnapshot['context']) => T): (state: AdhocEditorSnapshot) => T;

package/dist/adhoc-editor/hooks.js

@@ -0,0 +1,47 @@
+import { nonNullable } from '@likec4/core';
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { useContext, useMemo } from 'react';
+import { AdhocEditorActorContext } from './ActorProvider.js';
+
+function useAdhocEditorActor() {
+  return nonNullable(useContext(AdhocEditorActorContext), "No AdhocEditorActorContext");
+}
+function useAdhocEditor() {
+  const actorRef = useAdhocEditorActor();
+  return useMemo(() => ({
+    open: () => actorRef.send({ type: "select.open" }),
+    close: () => actorRef.send({ type: "select.close" }),
+    toggleRule: (ruleId) => actorRef.send({ type: "toggle.rule", ruleId }),
+    include: (element) => actorRef.send({ type: "include.element", model: element.id })
+  }), [actorRef]);
+}
+function useAdhocEditorSnapshot(selector, compare = shallowEqual) {
+  const actorRef = useAdhocEditorActor();
+  return useSelector(actorRef, selector, compare);
+}
+const EMPTY_VIEW = {
+  id: "adhoc",
+  ["_type"]: "element",
+  autoLayout: { direction: "LR" },
+  nodes: [],
+  edges: [],
+  bounds: { x: 0, y: 0, width: 0, height: 0 },
+  ["_stage"]: "layouted",
+  title: null,
+  description: null,
+  hash: ""
+};
+const selectView = ({ context }) => context.view ?? EMPTY_VIEW;
+function useAdhocView() {
+  const actorRef = useAdhocEditorActor();
+  return useSelector(actorRef, selectView);
+}
+function selectFromSnapshot(selector) {
+  return selector;
+}
+function selectFromContext(selector) {
+  return (state) => selector(state.context);
+}
+
+export { selectFromContext, selectFromSnapshot, useAdhocEditor, useAdhocEditorActor, useAdhocEditorSnapshot, useAdhocView };

package/dist/adhoc-editor/index.d.ts

@@ -0,0 +1,2 @@
+export type { AdhocViewService } from './actor.types';
+export { LikeC4AdHocViewEditor } from './LikeC4AdHocViewEditor';

package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts

@@ -0,0 +1,6 @@
+import { AdhocRule } from '../actor.types';
+export declare function ViewRulesPanel({ rules, onToggle, onDelete, }: {
+    rules: AdhocRule[];
+    onToggle: (rule: AdhocRule) => void;
+    onDelete: (rule: AdhocRule) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/viewrules/ViewRulesPanel.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { Box, styled } from '@likec4/styles/jsx';
+import { vstack, hstack, txt } from '@likec4/styles/patterns';
+import { ActionIcon } from '@mantine/core';
+import { AnimatePresence, LayoutGroup, m } from 'motion/react';
+import IconCirclePlus from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCirclePlus.js';
+import IconTrash from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
+
+function ViewRulesPanel({
+  rules,
+  onToggle,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs(Box, { p: "1", children: [
+    /* @__PURE__ */ jsx(styled.h4, { mt: "0", fontSize: "md", fontWeight: "normal", children: "View Rules" }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", propagate: true, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(m.div, { layout: true, layoutRoot: true, className: vstack({ gap: "1" }), children: rules.map((rule) => /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: "position",
+        onClick: () => {
+          return onToggle(rule);
+        },
+        initial: {
+          opacity: 0,
+          y: -50
+        },
+        animate: {
+          opacity: rule.enabled ? 1 : 0.5,
+          scale: rule.enabled ? 1 : 0.98,
+          y: 0
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.95,
+          y: -50
+        },
+        className: cx(
+          hstack({
+            p: "1",
+            px: "2",
+            flexWrap: "nowrap",
+            rounded: "sm",
+            colorPalette: "teal",
+            // colorPalette: rule.type === 'include' ? 'green' : 'red',
+            gap: "2",
+            border: "default"
+            // opacity: rule.enabled ? 1 : 0.5,
+          })
+          // rule.type !== 'include' && css({ colorPalette: 'red' }),
+        ),
+        children: /* @__PURE__ */ jsx(
+          ViewRule,
+          {
+            rule,
+            onToggle: () => onToggle(rule),
+            onDelete: () => onDelete(rule)
+          },
+          rule.id
+        )
+      },
+      rule.id
+    )) }) }) })
+  ] });
+}
+function ViewRule({ rule, onToggle, onDelete }) {
+  rule.type === "include";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PredicatIcon, { children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 14 }) }),
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        animate: {
+          originX: 0,
+          scale: rule.enabled ? 1 : 0.9
+        },
+        className: txt({ flex: 1, truncate: true }),
+        children: JSON.stringify(rule.expr)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        variant: "subtle",
+        color: "red",
+        children: /* @__PURE__ */ jsx(IconTrash, {})
+      }
+    )
+  ] });
+}
+const PredicatIcon = styled("div", {
+  base: {
+    display: "contents",
+    color: "colorPalette.9"
+  }
+});
+
+export { ViewRulesPanel };

package/dist/base/const.d.ts

@@ -15,3 +15,4 @@ export declare const FitViewPaddings: {
         bottom: "16px";
     };
 };
+export declare const MAX_COMPOUND_DEPTH = 5;

package/dist/base/const.js

@@ -16,5 +16,6 @@ const FitViewPaddings = {
     bottom: "16px"
   }
 };
+const MAX_COMPOUND_DEPTH = 5;
 
-export { FitViewPaddings, MaxZoom, MinZoom, ZIndexes };
+export { FitViewPaddings, MAX_COMPOUND_DEPTH, MaxZoom, MinZoom, ZIndexes };

package/dist/base/updateEdges.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, pickBy, isShallowEqual } from 'remeda';
+import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -13,8 +13,31 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
-    const isSameData = deepEqual(existing.data, update.data);
-    const data = isSameData ? existing.data : update.data;
+    if (existing === update) {
+      return existing;
+    }
+    const isSameData = hasSubObject(existing.data, update.data);
+    let data = isSameData ? existing.data : update.data;
+    if (!isSameData) {
+      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
+        data = {
+          ...data,
+          hovered: existing.data.hovered
+        };
+      }
+      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
+        data = {
+          ...data,
+          dimmed: existing.data.dimmed
+        };
+      }
+      if (isDefined(existing.data.active) && !isDefined(update.data.active)) {
+        data = {
+          ...data,
+          active: existing.data.active
+        };
+      }
+    }
     if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
       return existing;
     }

package/dist/base/updateNodes.js

@@ -1,6 +1,6 @@
 import { getNodeDimensions } from '@xyflow/system';
-import { deepEqual } from 'fast-equals';
-import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
+import { deepEqual, shallowEqual } from 'fast-equals';
+import { isDefined, hasSubObject, pickBy } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -12,6 +12,9 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
+    if (existing === update) {
+      return existing;
+    }
     const isSameData = hasSubObject(existing.data, update.data);
     let data = isSameData ? existing.data : update.data;
     if (!isSameData) {
@@ -36,8 +39,8 @@ function _update(current, updated) {
     }
     const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
     return {
-      // Retain existing properties that are defined, except parentId
-      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId"),
+      // Retain existing properties that are defined, except parentId and handles
+      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
       // Retain measured dimensions from existing if present
       ..."measured" in existing && {
         measured: {
@@ -54,7 +57,7 @@ function _update(current, updated) {
       data
     };
   });
-  return isShallowEqual(current, updated) ? current : updated;
+  return shallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
   if (isDefined(update)) {

package/dist/base-primitives/Markdown.js

@@ -23,8 +23,8 @@ const Markdown = forwardRef(({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ref,
       ...props,
+      ref,
       className: cx(
         markdownBlock({
           uselikec4palette,

package/dist/base-primitives/NodeHandles.d.ts

@@ -1,5 +1,7 @@
-import { MemoExoticComponent } from 'react';
+import { AutoLayoutDirection } from '@likec4/core/types';
 /**
  * XYFlow requires handles to be defined on nodes.
  */
-export declare const DefaultHandles: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function DefaultHandles({ direction }: {
+    direction?: AutoLayoutDirection | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/base-primitives/NodeHandles.js

@@ -1,25 +1,52 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
 import { Position, Handle } from '@xyflow/react';
-import { memo, Fragment as Fragment$1 } from 'react';
 
-const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
-const DefaultHandles = memo(() => /* @__PURE__ */ jsx(Fragment, { children: positions.map((position) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(
-    Handle,
-    {
-      type: "source",
-      position,
-      className: "likec4-node-handle-center"
+function DefaultHandles({ direction = "TB" }) {
+  let sourcePosition, targetPosition;
+  switch (direction) {
+    case "TB": {
+      sourcePosition = Position.Bottom;
+      targetPosition = Position.Top;
+      break;
     }
-  ),
-  /* @__PURE__ */ jsx(
-    Handle,
-    {
-      type: "target",
-      position,
-      className: "likec4-node-handle-center"
+    case "BT": {
+      sourcePosition = Position.Top;
+      targetPosition = Position.Bottom;
+      break;
     }
-  )
-] }, position)) }));
+    case "LR": {
+      sourcePosition = Position.Right;
+      targetPosition = Position.Left;
+      break;
+    }
+    case "RL": {
+      sourcePosition = Position.Left;
+      targetPosition = Position.Right;
+      break;
+    }
+    default: {
+      nonexhaustive(direction);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: sourcePosition,
+        className: "likec4-node-handle-center"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: targetPosition,
+        className: "likec4-node-handle-center"
+      }
+    )
+  ] });
+}
 
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {
@@ -34,6 +34,7 @@ function CompoundActionButton({
       className: "likec4-compound-navigation compound-action",
       whileTap: { scale: 1 },
       onClick: stopPropagation,
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -44,6 +45,7 @@ function CompoundActionButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {
@@ -30,6 +30,7 @@ function CompoundDetailsButton({
       },
       whileTap: { scale: 1 },
       className: "likec4-compound-details details-button",
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -40,6 +41,7 @@ function CompoundDetailsButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })

package/dist/base-primitives/compound/CompoundNodeContainer.d.ts

@@ -1,13 +1,14 @@
 import { Color, ElementStyle } from '@likec4/core/types';
-import { HTMLMotionProps } from 'motion/react';
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { BaseNode, BaseNodeProps } from '../../base/types';
 export type RequiredData = {
     color: Color;
     depth: number;
     style: ElementStyle;
 };
-type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
+type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+    layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+    layoutId?: string | undefined;
     nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
 export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -3,6 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { compoundNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { clamp } from 'remeda';
+import { MAX_COMPOUND_DEPTH } from '../../base/const.js';
 
 function CompoundNodeContainer({
   nodeProps: {
@@ -21,20 +22,20 @@ function CompoundNodeContainer({
     min: 0,
     max: 100
   });
-  const isTransparent = opacity < 99;
-  const MIN_OPACITY = 65;
+  const isTransparent = opacity < 98;
+  const MIN_OPACITY = 50;
   const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
   });
   const compoundClass = compoundNode({
     isTransparent,
-    inverseColor: opacity < 60,
+    inverseColor: opacity < 70,
     borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
   });
   const depth = clamp(data.depth ?? 1, {
     min: 1,
-    max: 5
+    max: MAX_COMPOUND_DEPTH
   });
   return /* @__PURE__ */ jsx(
     m.div,
@@ -50,6 +51,7 @@ function CompoundNodeContainer({
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
+      tabIndex: -1,
       style: {
         ...style,
         // @ts-expect-error

package/dist/base-primitives/compound/CompoundTitle.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Text } from '@mantine/core';
 import { IconRenderer } from '../../context/IconRenderer.js';
 
 function CompoundTitle({ data }) {
@@ -9,7 +8,7 @@ function CompoundTitle({ data }) {
   });
   return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
     elementIcon,
-    /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
+    /* @__PURE__ */ jsx("div", { className: "likec4-compound-title", children: data.title })
   ] });
 }
 

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base-primitives/edge/EdgeContainer.js

@@ -14,10 +14,11 @@ function EdgeContainer({
     dimmed: isDimmed = false,
     ...data
   },
-  animated,
+  animated = false,
   children,
   style
 }) {
+  animated = animated || isActive;
   const props = {
     className: cx(
       className,
@@ -28,8 +29,10 @@ function EdgeContainer({
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",
     "data-edge-active": isActive,
-    "data-edge-animated": animated || isActive,
     "data-likec4-hovered": isHovered,
+    ...animated && {
+      "data-likec4-animated": animated
+    },
     ...selected && {
       "data-likec4-selected": selected
     },

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -7,7 +7,7 @@ import { ZIndexes } from '../../base/const.js';
 import { useXYStore } from '../../hooks/useXYFlow.js';
 
 const toCssVarValue = (value) => {
-  if (value === void 0) return void 0;
+  if (value === void 0) return "";
   return isNumber(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
@@ -42,6 +42,7 @@ function EdgeLabelContainer({
     return null;
   }
   const translate = labelXY?.translate ?? "";
+  animated = animated || isActive;
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -55,6 +56,9 @@ function EdgeLabelContainer({
       "data-likec4-color": color,
       "data-edge-active": isActive,
       "data-edge-animated": animated || isActive,
+      ...animated && {
+        "data-likec4-animated": animated
+      },
       ...selected !== false && {
         "data-likec4-selected": selected
       },