@likec4/diagram 1.47.0 → 1.49.0

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

@@ -0,0 +1,51 @@
+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: {
+        idle: {
+            id: string;
+            entry: LogAction<Context, Events, undefined, Events>;
+            exit: LogAction<Context, Events, undefined, Events>;
+            on: {
+                layout: {
+                    target: "#layouter-call";
+                };
+            };
+        };
+        call: {
+            id: string;
+            entry: LogAction<Context, Events, undefined, Events>;
+            exit: LogAction<Context, Events, undefined, Events>;
+            invoke: {
+                src: "service";
+                input: ({ context }: {
+                    context: Context;
+                    event: Events;
+                    self: ActorRef<MachineSnapshot<Context, Events, Record<string, AnyActorRef>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
+                }) => {
+                    predicates: AdhocViewPredicate[];
+                };
+                onDone: {
+                    target: "#layouter-idle";
+                    actions: ( ActionFunction<Context, DoneActorEvent<{
+                        view: LayoutedElementView;
+                    }, string>, Events, undefined, {
+                        src: "service";
+                        logic: AdhocViewServiceActor;
+                        id: string | undefined;
+                    }, never, never, never, never> | ActionFunction<Context, DoneActorEvent<{
+                        view: LayoutedElementView;
+                    }, string>, Events, undefined, never, never, never, never, EmittedEvents>)[];
+                };
+                onError: {
+                    target: "#layouter-idle";
+                    actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
+                };
+            };
+        };
+    };
+};

package/dist/adhoc-editor/state/actor.layouter.js

@@ -0,0 +1,70 @@
+import { objectHash } from '@likec4/core/utils';
+import { piped, filter, map } from 'remeda';
+import { log, assign, emit } from 'xstate';
+import { machine, ruleToPredicate } from './actor.types.js';
+
+const to = {
+  idle: { target: "#layouter-idle" },
+  call: { target: "#layouter-call" }
+};
+const idle = machine.createStateConfig({
+  id: to.idle.target.substring(1),
+  entry: log("entry idle ->"),
+  exit: log(" -> idle exit "),
+  on: {
+    "layout": {
+      ...to.call
+    }
+  }
+});
+const emitViewUpdate = () => machine.emit({ type: "view.update" });
+const selectEnabled = piped(
+  filter((rule) => rule.enabled),
+  map(ruleToPredicate)
+);
+const call = machine.createStateConfig({
+  id: to.call.target.substring(1),
+  entry: log("entry call ->"),
+  exit: log(" -> call exit "),
+  invoke: {
+    src: "service",
+    input: ({ context }) => ({
+      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
+        }),
+        emit({ type: "view.update" })
+      ],
+      ...to.idle
+    },
+    onError: {
+      actions: [
+        log(({ event }) => `error: ${event.error}`),
+        assign({
+          error: ({ event }) => `${event.error}`
+        })
+      ],
+      ...to.idle
+    }
+  }
+});
+const layouter = machine.createStateConfig({
+  initial: "idle",
+  states: {
+    idle,
+    call
+  }
+});
+
+export { emitViewUpdate, layouter };

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

@@ -0,0 +1,63 @@
+import { AdhocViewPredicate } from '@likec4/core/compute-view';
+import { Fqn, LayoutedElementView, ModelFqnExpr } from '@likec4/core/types';
+import { PromiseActorLogic } from 'xstate/actors';
+import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
+type CalcAdhocViewInput = {
+    predicates: AdhocViewPredicate[];
+};
+type CalcAdhocViewOutput = {
+    view: LayoutedElementView;
+};
+export type AdhocViewService = {
+    process: (input: CalcAdhocViewInput) => Promise<CalcAdhocViewOutput>;
+};
+export type AdhocViewServiceActor = PromiseActorLogic<CalcAdhocViewOutput, CalcAdhocViewInput>;
+export type Input = {};
+export type AdhocRule = {
+    id: string;
+    expr: ModelFqnExpr.Ref;
+    enabled: boolean;
+    type: 'include' | 'exclude';
+};
+export declare function ruleToPredicate(rule: AdhocRule): AdhocViewPredicate;
+export interface Context {
+    view: LayoutedElementView | null;
+    error: string | undefined;
+    rules: AdhocRule[];
+}
+export type EmittedEvents = {
+    type: 'navigate.to';
+} | {
+    type: 'view.update';
+} | {
+    type: 'click.element';
+    id: Fqn;
+};
+export type Events = {
+    type: 'toggle.element';
+    id: Fqn;
+} | {
+    type: 'click.element';
+    id: Fqn;
+} | {
+    type: 'toggle.rule';
+    ruleId: string;
+} | {
+    type: 'delete.rule';
+    ruleId: string;
+} | {
+    type: 'select.open';
+} | {
+    type: 'select.close';
+} | {
+    type: 'layout';
+} | {
+    type: 'dispose';
+};
+export declare const machine: SetupReturn<Context, Events, {
+    service: AdhocViewServiceActor;
+}, {}, {}, {
+    hasView: unknown;
+}, never, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject>;
+export declare function createContext(): Context;
+export {};

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

@@ -0,0 +1,29 @@
+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
+  }
+});
+function createContext() {
+  return {
+    view: null,
+    error: void 0,
+    rules: []
+  };
+}
+
+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

@@ -0,0 +1,6 @@
+import { AdhocRule } from '../state/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/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;
 };
@@ -15,3 +16,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 };