@likec4/diagram 1.48.0 → 1.49.0

package/dist/adhoc-editor/{actor.layouter.d.ts → state/actor.layouter.d.ts}

@@ -1,7 +1,8 @@
-import { LogAction, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, DoneActorEvent, ErrorActorEvent } from 'xstate';
-import { Context, Events, AdhocViewServiceActor } from './actor.types';
+import { ActionFunction, LogAction, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, DoneActorEvent, ErrorActorEvent } from 'xstate';
+import { Context, Events, EmittedEvents, AdhocViewServiceActor } from './actor.types';
 import { AdhocViewPredicate } from '@likec4/core/compute-view';
 import { LayoutedElementView } from '@likec4/core';
+export declare const emitViewUpdate: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
 export declare const layouter: {
     initial: string;
     states: {
@@ -30,13 +31,15 @@ export declare const layouter: {
                 };
                 onDone: {
                     target: "#layouter-idle";
-                    actions: ActionFunction<Context, DoneActorEvent<{
+                    actions: ( ActionFunction<Context, DoneActorEvent<{
                         view: LayoutedElementView;
                     }, string>, Events, undefined, {
                         src: "service";
                         logic: AdhocViewServiceActor;
                         id: string | undefined;
-                    }, never, never, never, never>;
+                    }, never, never, never, never> | ActionFunction<Context, DoneActorEvent<{
+                        view: LayoutedElementView;
+                    }, string>, Events, undefined, never, never, never, never, EmittedEvents>)[];
                 };
                 onError: {
                     target: "#layouter-idle";

package/dist/adhoc-editor/{actor.layouter.js → state/actor.layouter.js}

@@ -1,6 +1,6 @@
 import { objectHash } from '@likec4/core/utils';
 import { piped, filter, map } from 'remeda';
-import { log, assign } from 'xstate';
+import { log, assign, emit } from 'xstate';
 import { machine, ruleToPredicate } from './actor.types.js';
 
 const to = {
@@ -17,6 +17,7 @@ const idle = machine.createStateConfig({
     }
   }
 });
+const emitViewUpdate = () => machine.emit({ type: "view.update" });
 const selectEnabled = piped(
   filter((rule) => rule.enabled),
   map(ruleToPredicate)
@@ -31,17 +32,20 @@ const call = machine.createStateConfig({
       predicates: selectEnabled(context.rules)
     }),
     onDone: {
-      actions: assign({
-        view: ({ context, event }) => {
-          const id = objectHash(selectEnabled(context.rules));
-          return {
-            ...event.output.view,
-            hash: id,
-            id
-          };
-        },
-        error: void 0
-      }),
+      actions: [
+        assign({
+          view: ({ context, event }) => {
+            const id = objectHash(selectEnabled(context.rules));
+            return {
+              ...event.output.view,
+              hash: id,
+              id
+            };
+          },
+          error: void 0
+        }),
+        emit({ type: "view.update" })
+      ],
       ...to.idle
     },
     onError: {
@@ -63,4 +67,4 @@ const layouter = machine.createStateConfig({
   }
 });
 
-export { layouter };
+export { emitViewUpdate, layouter };

package/dist/adhoc-editor/{actor.types.d.ts → state/actor.types.d.ts}

@@ -1,5 +1,5 @@
 import { AdhocViewPredicate } from '@likec4/core/compute-view';
-import { Fqn, LayoutedElementView, ModelExpression } from '@likec4/core/types';
+import { Fqn, LayoutedElementView, ModelFqnExpr } from '@likec4/core/types';
 import { PromiseActorLogic } from 'xstate/actors';
 import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
 type CalcAdhocViewInput = {
@@ -15,7 +15,7 @@ export type AdhocViewServiceActor = PromiseActorLogic<CalcAdhocViewOutput, CalcA
 export type Input = {};
 export type AdhocRule = {
     id: string;
-    expr: ModelExpression;
+    expr: ModelFqnExpr.Ref;
     enabled: boolean;
     type: 'include' | 'exclude';
 };
@@ -27,13 +27,18 @@ export interface Context {
 }
 export type EmittedEvents = {
     type: 'navigate.to';
+} | {
+    type: 'view.update';
+} | {
+    type: 'click.element';
+    id: Fqn;
 };
 export type Events = {
-    type: 'include.element';
-    model: Fqn;
+    type: 'toggle.element';
+    id: Fqn;
 } | {
-    type: 'exclude.element';
-    model: Fqn;
+    type: 'click.element';
+    id: Fqn;
 } | {
     type: 'toggle.rule';
     ruleId: string;
@@ -54,4 +59,5 @@ export declare const machine: SetupReturn<Context, Events, {
 }, {}, {}, {
     hasView: unknown;
 }, never, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject>;
+export declare function createContext(): Context;
 export {};

package/dist/adhoc-editor/{actor.types.js → state/actor.types.js}

@@ -18,5 +18,12 @@ const machine = setup({
     hasView: ({ context }) => context.view !== null
   }
 });
+function createContext() {
+  return {
+    view: null,
+    error: void 0,
+    rules: []
+  };
+}
 
-export { machine, ruleToPredicate };
+export { createContext, machine, ruleToPredicate };

package/dist/adhoc-editor/state/panel.d.ts

@@ -0,0 +1,95 @@
+import { Fqn } from '@likec4/core';
+import { StoreSnapshot, Store } from '@xstate/store';
+import { TreeCollection } from '@zag-js/collection';
+import { PropsWithChildren } from 'react';
+import { TreeNodeData } from '../useElementsTree';
+type EditorPanelState = {
+    searchInput: string;
+    expandedValue: string[];
+    collection: TreeCollection<TreeNodeData>;
+};
+declare const createEditorPanelStore: ({ initial, sideEffects, }: {
+    initial: TreeCollection<TreeNodeData>;
+    sideEffects: {
+        onElementStateClick: (payload: {
+            id: Fqn;
+        }) => void;
+    };
+}) => Store<EditorPanelState, {
+    inputChange: {
+        value: string;
+    };
+    inputKeyDown: {};
+    modelUpdate: {
+        collection: TreeCollection<TreeNodeData>;
+    };
+    elementClick: {
+        id: Fqn;
+    };
+}, {
+    type: "inputKeyDown";
+}>;
+export type EditorPanelStore = ReturnType<typeof createEditorPanelStore>;
+export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T): [
+    selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
+    compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
+];
+export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T, compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): [
+    selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
+    compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
+];
+export declare function useEditorPanelStore(): Store<EditorPanelState, {
+    inputChange: {
+        value: string;
+    };
+    inputKeyDown: {};
+    modelUpdate: {
+        collection: TreeCollection<TreeNodeData>;
+    };
+    elementClick: {
+        id: Fqn;
+    };
+}, {
+    type: "inputKeyDown";
+}>;
+export declare function useEditorPanelState<T>(arg1: readonly [
+    (snapshot: StoreSnapshot<EditorPanelState>) => T,
+    (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
+]): T;
+export declare function useEditorPanelState<T>(selector: (snapshot: StoreSnapshot<EditorPanelState>) => T, compare?: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): T;
+/**
+ * Hook to subscribe to editor panel events
+ * @param args - The event name and handler function
+ * @example
+ * useOnEditorPanelEvent('inputKeyDown', () => {
+ *   console.log('Input key down event')
+ * })
+ */
+export declare function useOnEditorPanelEvent(...args: Parameters<EditorPanelStore['on']>): void;
+/**
+ * Hook to access the editor panel store trigger or create a wrapped trigger function
+ *
+ * @overload
+ * @returns The store trigger object
+ *
+ * @overload
+ * @template T - The parameter types for the wrapped trigger function
+ * @param trigger - A function that receives the store trigger as the first parameter
+ * @returns A wrapped function that calls the trigger with the store trigger prepended
+ *
+ * @example
+ * // Get the trigger object directly
+ * const trigger = useEditorPanelTrigger()
+ * trigger.inputChange({ value: 'search' })
+ *
+ * @example
+ * // Create a wrapped trigger function
+ * const handleInputChange = useEditorPanelTrigger((trigger, value: string) => {
+ *   trigger.inputChange({ value })
+ * })
+ * handleInputChange('search')
+ */
+export declare function useEditorPanelTrigger(): EditorPanelStore['trigger'];
+export declare function useEditorPanelTrigger<T extends any[]>(trigger: (...params: [trigger: EditorPanelStore['trigger'], ...T]) => void): (...args: T) => void;
+export {};

package/dist/adhoc-editor/state/panel.js

@@ -0,0 +1,139 @@
+import { jsx } from 'react/jsx-runtime';
+import { createStore, shallowEqual } from '@xstate/store';
+import { useRef, useMemo, useEffect, createContext, useContext } from 'react';
+import { hasAtLeast } from 'remeda';
+import { useAdhocEditorActor } from '../hooks.js';
+import { createTreeCollection } from '../useElementsTree.js';
+import { deriveElementStates } from './utils.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
+import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
+import { x as xstateStoreReact_cjsExports } from '../../_virtual/xstate-store-react.cjs.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
+
+const createEditorPanelStore = ({
+  initial,
+  sideEffects
+}) => createStore({
+  context: {
+    searchInput: "",
+    expandedValue: [],
+    collection: initial
+  },
+  emits: {
+    inputKeyDown: (payload) => {
+    }
+  },
+  on: {
+    "inputChange": (context, event) => {
+      return {
+        ...context,
+        searchInput: event.value
+      };
+    },
+    "inputKeyDown": (context, event, enqueue) => {
+      enqueue.emit.inputKeyDown();
+    },
+    "modelUpdate": (context, event) => {
+      return {
+        ...context,
+        collection: event.collection
+      };
+    },
+    "elementClick": (context, event, enqueue) => {
+      const current = context.collection.findNode(event.id);
+      const path = context.collection.getIndexPath(event.id);
+      if (!current || !path) {
+        return context;
+      }
+      enqueue.effect(() => {
+        sideEffects.onElementStateClick({ id: event.id });
+      });
+      return context;
+    }
+  }
+});
+const EditorPanelStoreContext = createContext(null);
+const EditorPanelStoreProvider = (props) => {
+  const likec4model = useLikeC4Model();
+  const likec4modelRef = useRef(likec4model);
+  likec4modelRef.current = likec4model;
+  const actorRef = useAdhocEditorActor();
+  const store = useMemo(() => createEditorPanelStore({
+    initial: createTreeCollection(likec4model),
+    sideEffects: {
+      onElementStateClick({ id }) {
+        actorRef.send({ type: "toggle.element", id });
+      }
+    }
+  }), [actorRef]);
+  useUpdateEffect(() => {
+    store.trigger.modelUpdate({
+      collection: createTreeCollection(
+        likec4model,
+        deriveElementStates(actorRef.getSnapshot().context)
+      )
+    });
+  }, [likec4model]);
+  useEffect(() => {
+    const subscription = actorRef.on("view.update", () => {
+      store.trigger.modelUpdate({
+        collection: createTreeCollection(
+          likec4modelRef.current,
+          deriveElementStates(actorRef.getSnapshot().context)
+        )
+      });
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [actorRef]);
+  return /* @__PURE__ */ jsx(EditorPanelStoreContext.Provider, { value: store, children: props.children });
+};
+function selectEditorPanelState(selector, compare) {
+  return [
+    (snapshot) => selector(snapshot.context),
+    compare ?? shallowEqual
+  ];
+}
+function useEditorPanelStore() {
+  return useContext(EditorPanelStoreContext);
+}
+function useEditorPanelState(...args) {
+  const store = useEditorPanelStore();
+  let selector, compare;
+  if (args.length === 2) {
+    [selector, compare] = args;
+  } else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 2)) {
+    [selector, compare] = args[0];
+  } else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 1)) {
+    [selector, compare] = [args[0], shallowEqual];
+  } else if (args.length === 1 && typeof args[0] === "function") {
+    [selector, compare] = [args[0], shallowEqual];
+  } else {
+    throw new Error("Invalid arguments for useEditorPanelState");
+  }
+  return xstateStoreReact_cjsExports.useSelector(store, selector, compare);
+}
+function useOnEditorPanelEvent(...args) {
+  const store = useEditorPanelStore();
+  const event = args[0];
+  const handler = useCallbackRef(args[1]);
+  useEffect(() => {
+    const subscription = store.on(event, handler);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [event, store]);
+}
+function useEditorPanelTrigger(...args) {
+  const store = useEditorPanelStore();
+  if (args.length === 0) {
+    return store.trigger;
+  }
+  const trigger = args[0];
+  return useCallbackRef((...args2) => {
+    trigger(...[store.trigger, ...args2]);
+  });
+}
+
+export { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelStore, useEditorPanelTrigger, useOnEditorPanelEvent };

package/dist/adhoc-editor/state/utils.d.ts

@@ -0,0 +1,17 @@
+import { Fqn } from '@likec4/core/types';
+import { Context } from './actor.types';
+/**
+ * Derives the state of elements in the view based on the active rules.
+ *
+ * Categorizes elements into:
+ * - Explicitly included: Elements that are both in the view and have an enabled include rule
+ * - Implicitly included: Elements in the view without an explicit include rule
+ * - Excluded: Elements with an enabled exclude rule that are not in the view
+ */
+export declare function deriveElementStates({ rules, view }: Pick<Context, 'rules' | 'view'>): {
+    includedExplicit: Set<Fqn>;
+    includedImplicit: Set<Fqn>;
+    excluded: Set<Fqn>;
+    disabled: Set<Fqn>;
+};
+export type ElementStates = ReturnType<typeof deriveElementStates>;

package/dist/adhoc-editor/state/utils.js

@@ -0,0 +1,32 @@
+import { toSet, difference } from '@likec4/core/utils';
+import { isNonNullish, pipe, filter, map } from 'remeda';
+
+function deriveElementStates({ rules, view }) {
+  const includedInView = new Set(view ? view.nodes.map((node) => node.modelRef ?? null).filter(isNonNullish) : []);
+  const explicits = pipe(
+    rules,
+    filter((r) => r.type === "include" && r.enabled),
+    map((r) => r.expr.ref.model),
+    toSet()
+  );
+  const excluded = pipe(
+    rules,
+    filter((r) => r.type === "exclude" && r.enabled),
+    map((r) => r.expr.ref.model),
+    toSet()
+  );
+  const disabled = pipe(
+    rules,
+    filter((r) => !r.enabled),
+    map((r) => r.expr.ref.model),
+    toSet()
+  );
+  return {
+    disabled,
+    includedExplicit: explicits,
+    includedImplicit: difference(includedInView, explicits),
+    excluded: difference(excluded, includedInView)
+  };
+}
+
+export { deriveElementStates };

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

@@ -0,0 +1,18 @@
+import { LikeC4Model } from '@likec4/core/model';
+import { ElementShape, Fqn } from '@likec4/core/types';
+import { TreeCollection } from '@zag-js/collection';
+import { ElementStates } from './state/utils';
+import * as tree from '@zag-js/tree-view';
+export interface TreeNodeData {
+    id: Fqn;
+    title: string;
+    icon?: string | undefined;
+    shape: ElementShape;
+    children: TreeNodeData[];
+    state: 'include-explicit' | 'include-implicit' | 'exclude' | 'disabled' | 'not-present';
+}
+export interface ElementsTreeProps extends tree.Props<TreeNodeData> {
+}
+export declare function createTreeCollection(model: LikeC4Model, states?: ElementStates): TreeCollection<TreeNodeData>;
+export type TreeApi = tree.Api<any, TreeNodeData>;
+export declare function useElementsTree(): TreeApi;

package/dist/adhoc-editor/useElementsTree.js

@@ -0,0 +1,130 @@
+import { compareNaturalHierarchically, toArray } from '@likec4/core/utils';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as tree from '@zag-js/tree-view';
+import { useDeferredValue, useMemo, useState, useEffect } from 'react';
+import { difference, hasAtLeast, sort } from 'remeda';
+import { useId } from '../hooks/useId.js';
+import { useEditorPanelState, useOnEditorPanelEvent, selectEditorPanelState } from './state/panel.js';
+
+function getElementState(id, states) {
+  if (!states) {
+    return "not-present";
+  }
+  if (states.disabled.has(id)) {
+    return "disabled";
+  }
+  if (states.includedExplicit.has(id)) {
+    return "include-explicit";
+  }
+  if (states.includedImplicit.has(id)) {
+    return "include-implicit";
+  }
+  if (states.excluded.has(id)) {
+    return "exclude";
+  }
+  return "not-present";
+}
+function mapToTreeNodes(elements, states) {
+  return toArray(elements).map((el) => ({
+    id: el.id,
+    title: el.title,
+    shape: el.shape,
+    icon: el.icon ?? void 0,
+    children: mapToTreeNodes(el.children(), states),
+    state: getElementState(el.id, states)
+  }));
+}
+function createTreeCollection(model, states) {
+  return tree.collection({
+    rootNode: {
+      id: "@ROOT",
+      title: "",
+      shape: "rectangle",
+      icon: void 0,
+      children: mapToTreeNodes(model.roots(), states),
+      state: "not-present"
+    },
+    nodeToValue(node) {
+      return node.id;
+    },
+    nodeToString(node) {
+      return node.title;
+    },
+    nodeToChildren(node) {
+      return node.children;
+    },
+    isNodeDisabled() {
+      return false;
+    }
+  });
+}
+const select = selectEditorPanelState(
+  (s) => ({
+    searchInput: s.searchInput.length > 2 ? s.searchInput.toLowerCase() : "",
+    collection: s.collection
+  }),
+  (a, b) => a?.searchInput === b.searchInput && a?.collection.isEqual(b.collection)
+);
+function useElementsTree() {
+  const { searchInput, collection } = useEditorPanelState(select);
+  const lowerCaseInput = useDeferredValue(searchInput);
+  const filteredCollection = useMemo(() => {
+    if (!lowerCaseInput) return collection;
+    return collection.filter((c) => c.title.toLowerCase().includes(lowerCaseInput));
+  }, [collection, lowerCaseInput]);
+  const [expandedValue, setExpandedValue] = useState([]);
+  useEffect(() => {
+    if (filteredCollection === collection) {
+      return;
+    }
+    setExpandedValue((current) => {
+      const newBranches = difference(filteredCollection.getBranchValues(), current);
+      if (hasAtLeast(newBranches, 1)) {
+        return sort([...current, ...newBranches], compareNaturalHierarchically());
+      }
+      return current;
+    });
+  }, [filteredCollection]);
+  const service = useMachine(tree.machine, {
+    id: useId(),
+    collection: filteredCollection,
+    defaultCheckedValue: [],
+    defaultSelectedValue: [],
+    expandedValue,
+    onExpandedChange({ expandedValue: expandedValue2 }) {
+      setExpandedValue(expandedValue2);
+    },
+    // checkedValue,
+    // defaultExpandedValue: [],
+    // defaultFocusedValue: null,
+    // onCheckedChange({ checkedValue }) {
+    //   console.log({ checkedValue })
+    // },
+    onFocusChange(details) {
+      console.log("Focus change", details);
+    },
+    onSelectionChange(details) {
+      console.log("Selection change", details);
+    }
+    // expandOnClick,
+    // onSelectionChange({ focusedValue, selectedNodes }) {
+    //   console.log({ focusedValue, selectedNodes })
+    //   if (selectedNodes.length === 0) {
+    //     return
+    //   }
+    //   api.deselect(selectedNodes.map(n => n.id))
+    // },
+  });
+  service.context.get("focusedValue")?.slice;
+  const api = tree.connect(service, normalizeProps);
+  api.select;
+  useOnEditorPanelEvent("inputKeyDown", () => {
+    const first = api.collection.getFirstNode()?.id;
+    if (first) {
+      api.focus(first);
+    }
+  });
+  return api;
+}
+
+export { createTreeCollection, useElementsTree };

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

@@ -1,4 +1,4 @@
-import { AdhocRule } from '../actor.types';
+import { AdhocRule } from '../state/actor.types';
 export declare function ViewRulesPanel({ rules, onToggle, onDelete, }: {
     rules: AdhocRule[];
     onToggle: (rule: AdhocRule) => void;

package/dist/base/const.d.ts

@@ -1,6 +1,7 @@
 export declare const ZIndexes: {
     readonly Compound: 1;
     readonly Edge: 20;
+    readonly EdgeLabel: 25;
     readonly Element: 20;
     readonly Max: 30;
 };

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

@@ -6,8 +6,28 @@ 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.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
+const variants = {
+  normal: {
+    scale: 1,
+    x: 0,
+    y: 0
+  },
+  hovered: {
+    scale: 1.2,
+    x: -1,
+    y: -1
+  },
+  whileHover: {
+    scale: 1.4,
+    x: -3,
+    y: -1
+  },
+  whileTap: {
+    scale: 1
+  }
+};
 function CompoundActionButton({
   data: {
     hovered: isHovered = false
@@ -17,22 +37,16 @@ function CompoundActionButton({
 }) {
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
   const isHoverDebounced = debounced[0] && isHovered;
+  let variant = isHoverDebounced ? "hovered" : "normal";
   return /* @__PURE__ */ jsx(
     m.div,
     {
       initial: false,
-      animate: {
-        scale: isHoverDebounced ? 1.2 : 1,
-        x: isHoverDebounced ? -1 : 0,
-        y: isHoverDebounced ? -1 : 0
-      },
-      whileHover: {
-        scale: 1.4,
-        x: -3,
-        y: -1
-      },
+      variants,
+      animate: variant,
+      whileHover: "whileHover",
+      whileTap: "whileTap",
       className: "likec4-compound-navigation compound-action",
-      whileTap: { scale: 1 },
       onClick: stopPropagation,
       tabIndex: -1,
       children: /* @__PURE__ */ jsx(