@likec4/diagram 1.46.4 → 1.48.0

package/dist/adhoc-editor/LikeC4AdHocViewEditor.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ReactFlowProvider } from '@xyflow/react';
+import { Profiler } from 'react';
+import { FitViewPaddings } from '../base/const.js';
+import { RootContainer } from '../components/RootContainer.js';
+import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { EnsureMantine } from '../context/EnsureMantine.js';
+import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+import { TagStylesProvider } from '../context/TagStylesContext.js';
+import { useId } from '../hooks/useId.js';
+import { LikeC4DiagramXYFlow } from '../likec4diagram/DiagramXYFlow.js';
+import { DiagramActorProvider } from '../likec4diagram/state/DiagramActorProvider.js';
+import { LikeC4Styles } from '../LikeC4Styles.js';
+import { AdhocEditorActorProvider } from './ActorProvider.js';
+import { EditorNavigationPanel } from './EditorNavigationPanel.js';
+import { useAdhocView } from './hooks.js';
+import { SelectElementOverlay } from './SelectElementOverlay.js';
+
+function LikeC4AdHocViewEditor({ service }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(Profiler, { id: "LikeC4AdHocViewEditor", onRender: () => {
+  }, children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsxs(
+    DiagramFeatures,
+    {
+      features: {
+        enableFitView: true,
+        enableEditor: false,
+        enableReadOnly: true,
+        enableFocusMode: false,
+        enableNavigateTo: false,
+        enableElementDetails: false,
+        enableRelationshipDetails: false,
+        enableRelationshipBrowser: false,
+        enableSearch: false,
+        enableNavigationButtons: false,
+        enableDynamicViewWalkthrough: false,
+        enableNotations: false,
+        enableVscode: false,
+        enableControls: false,
+        enableElementTags: false,
+        enableCompareWithLatest: false
+      },
+      children: [
+        /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+        /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, children: /* @__PURE__ */ jsxs(AdhocEditorActorProvider, { service, children: [
+          /* @__PURE__ */ jsx(LikeC4AdHocView, { id }),
+          /* @__PURE__ */ jsx(EditorNavigationPanel, {}),
+          /* @__PURE__ */ jsx(SelectElementOverlay, {})
+        ] }) }) })
+      ]
+    }
+  ) }) }) });
+}
+function LikeC4AdHocView({ id }) {
+  const view = useAdhocView();
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { fitView: true, initialNodes: [], initialEdges: [], children: /* @__PURE__ */ jsx(
+    DiagramActorProvider,
+    {
+      id,
+      view,
+      zoomable: true,
+      pannable: true,
+      fitViewPadding: FitViewPaddings.withControls,
+      nodesDraggable: false,
+      nodesSelectable: true,
+      children: /* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {})
+    }
+  ) });
+}
+
+export { LikeC4AdHocViewEditor };

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

@@ -0,0 +1 @@
+export declare function SelectElementOverlay(): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/SelectElementOverlay.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { VStack, styled } from '@likec4/styles/jsx';
+import { flex, center, vstack } from '@likec4/styles/patterns';
+import { Button, Input, ScrollAreaAutosize } from '@mantine/core';
+import { useInputState } from '@mantine/hooks';
+import { AnimatePresence, m } from 'motion/react';
+import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
+import { Overlay } from '../overlays/overlay/Overlay.js';
+import { useAdhocEditor, useAdhocEditorSnapshot, selectFromSnapshot, selectFromContext } from './hooks.js';
+
+const selectIfEmpty = selectFromContext((c) => !c.view || c.view.nodes.length === 0);
+function SelectElementsButton({ onClick }) {
+  const isEmpty = useAdhocEditorSnapshot(selectIfEmpty);
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: "position",
+      layoutId: "select-button-container",
+      className: cx(
+        flex({
+          pointerEvents: "none",
+          position: "absolute",
+          justifyContent: "center"
+        }),
+        isEmpty && center({ inset: "0" }),
+        !isEmpty && css({
+          top: "3",
+          width: "100%"
+        })
+      ),
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          component: m.button,
+          layout: "position",
+          layoutId: "select-button",
+          className: css({
+            pointerEvents: "all"
+          }),
+          size: isEmpty ? "xl" : "lg",
+          variant: "default",
+          radius: isEmpty ? "xl" : "lg",
+          onClick,
+          children: "Add elements"
+        }
+      )
+    }
+  );
+}
+const isSelecting = selectFromSnapshot((s) => s.value.editor === "selecting");
+function SelectElementOverlay() {
+  const editor = useAdhocEditor();
+  const isOpened = useAdhocEditorSnapshot(isSelecting);
+  return /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+    /* @__PURE__ */ jsx(SelectElementsButton, { onClick: () => editor.open() }, "select-button"),
+    isOpened && /* @__PURE__ */ jsx(Overlay, { onClose: () => editor.close(), children: /* @__PURE__ */ jsx(SelectElementOverlayBody, {}) }, "select-overlay")
+  ] });
+}
+function SelectElementOverlayBody() {
+  const editor = useAdhocEditor();
+  const [input, setInput] = useInputState("");
+  const elements = useLikeC4Model().elements().toArray();
+  return /* @__PURE__ */ jsxs(VStack, { h: "100%", flex: "1", alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "lg",
+        variant: "unstyled",
+        placeholder: "Search by title, description or start with # or kind:",
+        autoFocus: true,
+        "data-autofocus": true,
+        value: input,
+        onChange: setInput,
+        "data-likec4-search-input": true,
+        onKeyDownCapture: (e) => {
+          switch (e.key) {
+            case "Escape": {
+              e.stopPropagation();
+              e.preventDefault();
+              editor.close();
+              break;
+            }
+            case "Enter": {
+              e.stopPropagation();
+              e.preventDefault();
+              editor.close();
+              break;
+            }
+            default: {
+              return;
+            }
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollAreaAutosize,
+      {
+        scrollbars: "y",
+        type: "scroll",
+        classNames: {
+          content: vstack({
+            alignItems: "stretch"
+          })
+        },
+        children: elements.map((el) => /* @__PURE__ */ jsx(
+          styled.button,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              editor.include(el);
+              editor.close();
+            },
+            children: el.title
+          },
+          el.id
+        ))
+      }
+    )
+  ] });
+}
+
+export { SelectElementOverlay };

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

@@ -0,0 +1,131 @@
+import { ActorRef, SnapshotFrom, StateMachine, ActorRefFromLogic, NonReducibleUnknown, MetaObject, LogAction, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, DoneActorEvent, ErrorActorEvent } from 'xstate';
+import { EmittedEvents, Events, Context, AdhocViewServiceActor } from './actor.types';
+import { AdhocViewPredicate } from '@likec4/core/compute-view';
+import { LayoutedElementView } from '@likec4/core';
+declare const _adhocEditorLogic: StateMachine<Context, Events, {
+    [x: string]: ActorRefFromLogic<AdhocViewServiceActor> | undefined;
+}, {
+    src: "service";
+    logic: AdhocViewServiceActor;
+    id: string | undefined;
+}, never, {
+    type: "hasView";
+    params: unknown;
+}, never, {
+    editor: "idle" | "selecting" | "layouting";
+    layouter: "idle" | "call";
+}, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject, {
+    readonly id: "adhoc-editor";
+    readonly context: () => {
+        view: null;
+        error: undefined;
+        rules: never[];
+    };
+    readonly type: "parallel";
+    readonly states: {
+        readonly 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>;
+                        };
+                        onError: {
+                            target: "#layouter-idle";
+                            actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
+                        };
+                    };
+                };
+            };
+        };
+        readonly editor: {
+            initial: string;
+            states: {
+                idle: {
+                    id: string;
+                    on: {
+                        'select.open': {
+                            target: "#selecting";
+                        };
+                        'toggle.rule': {
+                            target: "#layouting";
+                            actions: ActionFunction<Context, Events, Events, undefined, {
+                                src: "service";
+                                logic: AdhocViewServiceActor;
+                                id: string | undefined;
+                            }, never, never, never, never>;
+                        };
+                        'delete.rule': {
+                            target: "#layouting";
+                            actions: ActionFunction<Context, Events, Events, undefined, {
+                                src: "service";
+                                logic: AdhocViewServiceActor;
+                                id: string | undefined;
+                            }, never, never, never, never>;
+                        };
+                    };
+                };
+                selecting: {
+                    id: string;
+                    on: {
+                        'include.element': {
+                            target: "#layouting";
+                            actions: ActionFunction<Context, Events, Events, undefined, {
+                                src: "service";
+                                logic: AdhocViewServiceActor;
+                                id: string | undefined;
+                            }, never, never, never, never>;
+                        };
+                        'select.close': {
+                            target: "#idle";
+                        };
+                    };
+                };
+                layouting: {
+                    id: string;
+                    always: {
+                        target: "#idle";
+                        actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+                    };
+                };
+            };
+        };
+    };
+}>;
+type Infer = typeof _adhocEditorLogic;
+export interface AdhocEditorLogic extends Infer {
+}
+export declare const adhocEditorLogic: AdhocEditorLogic;
+export type AdhocEditorSnapshot = SnapshotFrom<AdhocEditorLogic>;
+export interface AdhocEditorActorRef extends ActorRef<AdhocEditorSnapshot, Events, EmittedEvents> {
+}
+export {};

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

@@ -0,0 +1,54 @@
+import { ActionFunction } from 'xstate';
+import { Context, Events, AdhocViewServiceActor } from './actor.types';
+export declare const editor: {
+    initial: string;
+    states: {
+        idle: {
+            id: string;
+            on: {
+                'select.open': {
+                    target: "#selecting";
+                };
+                'toggle.rule': {
+                    target: "#layouting";
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "service";
+                        logic: AdhocViewServiceActor;
+                        id: string | undefined;
+                    }, never, never, never, never>;
+                };
+                'delete.rule': {
+                    target: "#layouting";
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "service";
+                        logic: AdhocViewServiceActor;
+                        id: string | undefined;
+                    }, never, never, never, never>;
+                };
+            };
+        };
+        selecting: {
+            id: string;
+            on: {
+                'include.element': {
+                    target: "#layouting";
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "service";
+                        logic: AdhocViewServiceActor;
+                        id: string | undefined;
+                    }, never, never, never, never>;
+                };
+                'select.close': {
+                    target: "#idle";
+                };
+            };
+        };
+        layouting: {
+            id: string;
+            always: {
+                target: "#idle";
+                actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,96 @@
+import { stringHash } from '@likec4/core/utils';
+import { assertEvent } from 'xstate';
+import { machine } from './actor.types.js';
+
+const to = {
+  idle: { target: "#idle" },
+  selecting: { target: "#selecting" },
+  layouting: { target: "#layouting" }
+};
+const includePredicate = () => machine.assign(({ context, event }) => {
+  const id = stringHash((context.rules.at(-1)?.id ?? (/* @__PURE__ */ new Date()).toISOString()) + event.type);
+  switch (event.type) {
+    case "include.element": {
+      return {
+        rules: [
+          ...context.rules,
+          {
+            id,
+            expr: { ref: { model: event.model } },
+            enabled: true,
+            type: "include"
+          }
+        ]
+      };
+    }
+    default: {
+      throw new Error(`Unexpected event ${event.type}}`);
+    }
+  }
+});
+const toggleRule = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "toggle.rule");
+  return {
+    rules: context.rules.map((rule) => {
+      if (rule.id === event.ruleId) {
+        return {
+          ...rule,
+          enabled: !rule.enabled
+        };
+      }
+      return rule;
+    })
+  };
+});
+const deleteRule = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "delete.rule");
+  return {
+    rules: context.rules.filter((rule) => rule.id !== event.ruleId)
+  };
+});
+const scheduleLayout = () => machine.raise({ type: "layout" });
+const idle = machine.createStateConfig({
+  id: "idle",
+  on: {
+    "select.open": {
+      ...to.selecting
+    },
+    "toggle.rule": {
+      actions: toggleRule(),
+      ...to.layouting
+    },
+    "delete.rule": {
+      actions: deleteRule(),
+      ...to.layouting
+    }
+  }
+});
+const selecting = machine.createStateConfig({
+  id: "selecting",
+  on: {
+    "include.element": {
+      actions: includePredicate(),
+      ...to.layouting
+    },
+    "select.close": {
+      ...to.idle
+    }
+  }
+});
+const layouting = machine.createStateConfig({
+  id: "layouting",
+  always: {
+    actions: scheduleLayout(),
+    ...to.idle
+  }
+});
+const editor = machine.createStateConfig({
+  initial: "idle",
+  states: {
+    idle,
+    selecting,
+    layouting
+  }
+});
+
+export { editor };

package/dist/adhoc-editor/actor.js

@@ -0,0 +1,20 @@
+import { editor } from './actor.editor.js';
+import { layouter } from './actor.layouter.js';
+import { machine } from './actor.types.js';
+
+const _adhocEditorLogic = machine.createMachine({
+  id: "adhoc-editor",
+  context: () => ({
+    view: null,
+    error: void 0,
+    rules: []
+  }),
+  type: "parallel",
+  states: {
+    layouter,
+    editor
+  }
+});
+const adhocEditorLogic = _adhocEditorLogic;
+
+export { adhocEditorLogic };

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

@@ -0,0 +1,48 @@
+import { LogAction, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, DoneActorEvent, ErrorActorEvent } from 'xstate';
+import { Context, Events, AdhocViewServiceActor } from './actor.types';
+import { AdhocViewPredicate } from '@likec4/core/compute-view';
+import { LayoutedElementView } from '@likec4/core';
+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>;
+                };
+                onError: {
+                    target: "#layouter-idle";
+                    actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,66 @@
+import { objectHash } from '@likec4/core/utils';
+import { piped, filter, map } from 'remeda';
+import { log, assign } 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 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
+      }),
+      ...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 { layouter };

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

@@ -0,0 +1,57 @@
+import { AdhocViewPredicate } from '@likec4/core/compute-view';
+import { Fqn, LayoutedElementView, ModelExpression } 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: ModelExpression;
+    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';
+};
+export type Events = {
+    type: 'include.element';
+    model: Fqn;
+} | {
+    type: 'exclude.element';
+    model: 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 {};