@likec4/diagram 1.47.0 → 1.49.0

package/dist/adhoc-editor/components/Tree.js

@@ -0,0 +1,296 @@
+import { jsx } from 'react/jsx-runtime';
+import { sva, cx, css, cva } from '@likec4/styles/css';
+import { createStyleContext } from '@likec4/styles/jsx';
+import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+
+const statebtn = cva({
+  base: {
+    border: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    justifySelf: "flex-end",
+    fontSize: "[8px]",
+    fontFamily: "mono",
+    fontWeight: "bold",
+    letterSpacing: "[0.5px]",
+    marginLeft: "2",
+    // marginRight: '[calc((var(--depth, 1) - 1) * {spacing.4.5} + {spacing.2})]',
+    py: "1",
+    px: "1.5",
+    lineHeight: "1",
+    rounded: "sm",
+    minWidth: 32,
+    transition: "normal",
+    _hover: {
+      color: "text.bright"
+    }
+  },
+  variants: {
+    state: {
+      // 'include-explicit' | 'include-implicit' | 'exclude' | 'disabled' | 'not-present'
+      ["include-explicit"]: {
+        backgroundColor: "grass.6",
+        color: "text"
+        // color: 'grass.0',
+      },
+      ["include-implicit"]: {
+        backgroundColor: "grass.6",
+        color: "text"
+        // color: 'grass.0',
+      },
+      exclude: {
+        backgroundColor: "red.6",
+        color: "text"
+      },
+      ["disabled"]: {
+        // backgroundColor: 'default.disabled',
+        color: "text.dimmed"
+      },
+      "not-present": {
+        color: "text.dimmed",
+        backgroundColor: "default.hover/50"
+      }
+    }
+  },
+  defaultVariants: {
+    state: "not-present"
+  }
+});
+const icon = css.raw({
+  flex: 0,
+  display: "flex",
+  alignItems: "center",
+  color: "text.dimmed",
+  //   _groupFocus: 'inherit',
+  //   _groupHover: 'inherit',
+  // },
+  _groupHover: {
+    color: "text"
+  },
+  _groupFocusWithin: {
+    color: "mantine.colors.primary.lightColor!"
+  },
+  _groupFocusVisible: {
+    color: "mantine.colors.primary.lightColor!"
+  },
+  "& :where(.likec4-shape-icon, .likec4-element-icon)": {
+    display: "contents"
+  },
+  "& :where(svg, img)": {
+    width: "10px",
+    height: "10px"
+  },
+  "@/md": {
+    "& :where(svg, img)": {
+      width: "14px",
+      height: "14px"
+    }
+  },
+  "@/lg": {
+    "& :where(svg, img)": {
+      width: "16px",
+      height: "16px"
+    }
+  },
+  opacity: {
+    base: 0.8,
+    _groupFocusVisible: 1,
+    _groupHover: 1
+  }
+});
+const control = css.raw({
+  paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.1})]",
+  px: "1",
+  py: "1",
+  mb: "0",
+  columnGap: "1",
+  "@/md": {
+    paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.2})]",
+    px: "2",
+    py: "1.5",
+    mb: "0.5",
+    columnGap: "2"
+  },
+  "@/lg": {
+    paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.3} + {spacing.2.5})]",
+    py: "2.5"
+  },
+  cursor: "pointer",
+  border: "none",
+  appearance: "none",
+  width: "full",
+  alignItems: "center",
+  display: "grid",
+  gridTemplateColumns: "auto 1fr auto",
+  gridTemplateRows: "auto auto",
+  rounded: "sm",
+  backgroundColor: {
+    base: "transparent",
+    _hover: {
+      base: "mantine.colors.gray[1]",
+      _dark: "mantine.colors.dark[5]"
+    },
+    _focusWithin: "mantine.colors.primary.lightHover!",
+    _focusVisible: "mantine.colors.primary.lightHover!"
+  },
+  color: {
+    base: "text",
+    _hover: "text.bright",
+    _focusWithin: "mantine.colors.primary.lightColor!",
+    _focusVisible: "mantine.colors.primary.lightColor!"
+  },
+  // _hover: {
+  //   backgroundColor: {
+  //     base: 'mantine.colors.gray[1]',
+  //     _dark: 'mantine.colors.dark[5]',
+  //   },
+  // },
+  _focusVisible: {
+    outline: "none"
+    // backgroundColor: 'mantine.colors.primary.lightHover!',
+  }
+});
+const tree = sva({
+  slots: [
+    "branch",
+    "item",
+    // leaf
+    "control",
+    // branch control
+    "state",
+    // chip
+    "icon",
+    "label",
+    "content",
+    // branch content
+    "indicator"
+    // branch indicator
+  ],
+  base: {
+    branch: {},
+    item: {
+      ...control
+    },
+    control: {
+      ...control
+    },
+    state: {
+      border: "none",
+      display: "inline-flex",
+      alignItems: "center",
+      justifySelf: "flex-end",
+      marginLeft: "2",
+      // marginRight: '[calc((var(--depth, 1) - 1) * {spacing.4.5} + {spacing.2})]',
+      "--chip-fz": "9px",
+      "--chip-checked-padding": "{spacing.1}",
+      "--chip-padding": "{spacing.1}",
+      "--chip-spacing": "0",
+      "--chip-size": "16px",
+      // '& label': {
+      //   color: 'text',
+      //   _groupFocusVisible: {
+      //     backgroundColor: 'mantine.colors.primary.lightHover!',
+      //   },
+      //   // backgroundColor: 'transparent',
+      // },
+      transition: "opacity 150ms ease-out"
+      // opacity: {
+      //   base: 0.4,
+      //   _checked: 1,
+      //   _groupFocusVisible: 1,
+      //   _groupHover: 1,
+      // },
+    },
+    icon: {
+      ...icon
+    },
+    label: {
+      cursor: "inherit",
+      color: "inherit",
+      userSelect: "none",
+      textStyle: "xxs",
+      truncate: "ellipsis",
+      "@/sm": {
+        textStyle: "xs"
+      },
+      "@/md": {
+        textStyle: "sm"
+      },
+      fontWeight: "[450]",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    indicator: {
+      color: "inherit",
+      transition: "transform 150ms ease-out",
+      width: "12px",
+      opacity: 0.75,
+      "@/md": {
+        width: "14px"
+      },
+      _open: {
+        transform: "rotate(90deg)"
+      }
+    },
+    content: {}
+  },
+  variants: {},
+  defaultVariants: {}
+});
+const { withRootProvider, withContext } = createStyleContext(tree);
+const Root = withRootProvider("div");
+const Branch = withContext("div", "branch");
+const Item = withContext("div", "item", {
+  forwardProps: [],
+  defaultProps: {
+    className: "group"
+  }
+});
+const Control = withContext("div", "control", {
+  forwardProps: [],
+  defaultProps: {
+    className: "group"
+  }
+});
+const ElementState = ({ node, state, onClick, className, ...props }) => {
+  const cls = cx(
+    className,
+    "mantine-active",
+    statebtn({ state })
+  );
+  return /* @__PURE__ */ jsx("div", { ...props, onClick, className: cls, children: state });
+};
+const State = withContext(ElementState, "state", {
+  forwardProps: ["node", "state", "onClick", "className"]
+});
+const Icon = withContext(IconOrShapeRenderer, "icon", {
+  forwardProps: ["element", "className"]
+});
+const Label = withContext("div", "label", {
+  forwardProps: []
+});
+const Content = withContext("div", "content", {
+  forwardProps: []
+});
+const Indicator = withContext(IconChevronRight, "indicator", {
+  forwardProps: [],
+  defaultProps: {
+    size: 14
+  }
+});
+const Tree = {
+  Root,
+  Branch,
+  Item,
+  Control,
+  State,
+  Icon,
+  Label,
+  Content,
+  Indicator
+};
+
+export { Tree };

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

@@ -0,0 +1,14 @@
+import { LayoutedElementView, Any } from '@likec4/core';
+import { AdhocEditorActorRef, AdhocEditorSnapshot } from './state/actor';
+import { Provider } from 'react';
+export declare const AdhocEditorActorContextProvider: Provider<AdhocEditorActorRef | null>;
+export declare function useAdhocEditorActor(): AdhocEditorActorRef;
+export declare function useAdhocEditor(): {
+    open: () => void;
+    close: () => void;
+    toggleRule: (ruleId: string) => 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,29 @@
+import { nonNullable } from '@likec4/core';
+import { useSelector } from '@xstate/react';
+import 'fast-equals';
+import { createContext, useContext } from 'react';
+
+const AdhocEditorActorContext = createContext(null);
+const AdhocEditorActorContextProvider = AdhocEditorActorContext.Provider;
+function useAdhocEditorActor() {
+  return nonNullable(useContext(AdhocEditorActorContext), "No AdhocEditorActorContext");
+}
+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);
+}
+
+export { AdhocEditorActorContextProvider, useAdhocEditorActor, useAdhocView };

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

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

package/dist/adhoc-editor/index.js

@@ -0,0 +1 @@
+export { LikeC4AdHocViewEditor } from './LikeC4AdHocViewEditor.js';

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { AdhocViewService } from './actor.types';
+export declare function AdhocEditorActorProvider({ children, service }: PropsWithChildren<{
+    service: AdhocViewService;
+}>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useActorRef } from '@xstate/react';
+import { useRef, useMemo, useEffect } from 'react';
+import { fromPromise } from 'xstate';
+import { AdhocEditorActorContextProvider } from '../hooks.js';
+import { adhocEditorLogic } from './actor.js';
+
+const State = {
+  read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
+  write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
+};
+function AdhocEditorActorProvider({ children, service }) {
+  const serviceRef = useRef(service);
+  serviceRef.current = service;
+  const provided = useMemo(() => ({
+    actors: {
+      service: fromPromise(({ input }) => serviceRef.current.process(input))
+    }
+  }), []);
+  const actorRef = useActorRef(
+    adhocEditorLogic.provide(provided),
+    {
+      id: "adhoc-editor",
+      snapshot: State.read(),
+      systemId: "adhoc-editor",
+      inspect: (event) => {
+        console.log("[AdhocEditorActor]", event);
+      }
+    }
+  );
+  useEffect(() => {
+    const subscription = actorRef.subscribe((state) => {
+      State.write(state);
+    });
+    return () => subscription.unsubscribe();
+  }, [actorRef]);
+  return /* @__PURE__ */ jsx(AdhocEditorActorContextProvider, { value: actorRef, children });
+}
+
+export { AdhocEditorActorProvider };

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

@@ -0,0 +1,13 @@
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
+import { editor } from './actor.editor';
+import { layouter } from './actor.layouter';
+import { Context, EmittedEvents, Events } from './actor.types';
+export interface AdhocEditorLogic extends StateMachine<Context, Events, any, any, any, any, any, {
+    layouter: keyof typeof layouter['states'];
+    editor: keyof typeof editor['states'];
+}, any, any, EmittedEvents, any, any, any> {
+}
+export declare const adhocEditorLogic: AdhocEditorLogic;
+export type AdhocEditorSnapshot = SnapshotFrom<AdhocEditorLogic>;
+export interface AdhocEditorActorRef extends ActorRef<AdhocEditorSnapshot, Events, EmittedEvents> {
+}

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

@@ -0,0 +1,56 @@
+import { Context, Events, AdhocViewServiceActor, EmittedEvents } from './actor.types';
+import { ActionFunction } from 'xstate';
+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: {
+                'toggle.element': {
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "service";
+                        logic: AdhocViewServiceActor;
+                        id: string | undefined;
+                    }, never, {
+                        type: "hasView";
+                        params: unknown;
+                    }, never, EmittedEvents>[];
+                };
+                '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/state/actor.editor.js

@@ -0,0 +1,205 @@
+import { ModelFqnExpr } from '@likec4/core';
+import { nonexhaustive, invariant, stringHash } from '@likec4/core/utils';
+import { last } from 'remeda';
+import { assertEvent } from 'xstate';
+import { emitViewUpdate } from './actor.layouter.js';
+import { machine } from './actor.types.js';
+
+const to = {
+  idle: { target: "#idle" },
+  selecting: { target: "#selecting" },
+  layouting: { target: "#layouting" }
+};
+function nextId({ rules }, salt = "") {
+  return stringHash((rules.at(-1)?.id ?? (/* @__PURE__ */ new Date()).toISOString()) + salt);
+}
+const isRuleOf = (fqn) => (rule) => {
+  return ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
+};
+const isIncludeOf = (fqn) => (rule) => {
+  return rule.type === "include" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
+};
+const isExcludeOf = (fqn) => (rule) => {
+  return rule.type === "exclude" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
+};
+function deriveElementState(id, { rules, view }) {
+  const ruleOf = rules.find(isRuleOf(id));
+  if (ruleOf && !ruleOf.enabled) {
+    return {
+      state: "disabled",
+      ruleId: ruleOf.id
+    };
+  }
+  const isIncludedInView = view ? view.nodes.some((node) => node.modelRef === id) : false;
+  const includeRule = rules.find(isIncludeOf(id));
+  const excludeRule = rules.find(isExcludeOf(id));
+  switch (true) {
+    case (includeRule && isIncludedInView):
+      return {
+        state: "include-explicit",
+        ruleId: includeRule.id
+      };
+    case (!includeRule && isIncludedInView):
+      return {
+        state: "include-implicit",
+        ruleId: void 0
+      };
+    case (includeRule && !isIncludedInView):
+      return {
+        state: "not-present",
+        ruleId: includeRule.id
+      };
+    case !!excludeRule:
+      return {
+        state: "exclude",
+        ruleId: excludeRule.id
+      };
+    default: {
+      invariant(isIncludedInView === false, "Element not in view should not be included or excluded by any rule");
+      return {
+        state: "not-present",
+        ruleId: void 0
+      };
+    }
+  }
+}
+const enableRule = (ruleId) => machine.assign(({ context }) => {
+  return {
+    rules: context.rules.map((rule) => {
+      if (rule.id === ruleId && !rule.enabled) {
+        return {
+          ...rule,
+          enabled: true
+        };
+      }
+      return rule;
+    })
+  };
+});
+const addElementRules = (fqn, type) => machine.assign(({ context }) => {
+  return {
+    rules: [
+      ...context.rules,
+      {
+        id: nextId(context, type + fqn),
+        expr: { ref: { model: fqn } },
+        enabled: true,
+        type
+      }
+    ]
+  };
+});
+const removeElementRules = (fqn) => machine.assign(({ context }) => {
+  const isRule = isRuleOf(fqn);
+  return {
+    rules: context.rules.filter((rule) => {
+      return !isRule(rule);
+    })
+  };
+});
+const toggleElement = () => machine.enqueueActions(({ context, event, enqueue }) => {
+  assertEvent(event, "toggle.element");
+  const isRuleOfTheElement = isRuleOf(event.id);
+  const lastRule = last(context.rules);
+  if (lastRule && isRuleOfTheElement(lastRule)) {
+    enqueue.assign({
+      rules: context.rules.slice(0, -1)
+    });
+    return;
+  }
+  const state = deriveElementState(event.id, context);
+  switch (state.state) {
+    case "disabled": {
+      enqueue(enableRule(state.ruleId));
+      break;
+    }
+    // Include element if it is not in view and not included/excluded by any rule
+    case "not-present": {
+      enqueue(removeElementRules(event.id));
+      enqueue(addElementRules(event.id, "include"));
+      break;
+    }
+    case "include-implicit": {
+      enqueue(removeElementRules(event.id));
+      enqueue(addElementRules(event.id, "exclude"));
+      break;
+    }
+    case "include-explicit":
+    case "exclude": {
+      enqueue(removeElementRules(event.id));
+      break;
+    }
+    default:
+      nonexhaustive(state);
+  }
+});
+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: {
+    "toggle.element": {
+      actions: [
+        toggleElement(),
+        emitViewUpdate(),
+        scheduleLayout()
+      ]
+      // ...to.layouting,
+    },
+    "select.close": {
+      ...to.idle
+    }
+  }
+});
+const layouting = machine.createStateConfig({
+  id: "layouting",
+  always: {
+    actions: scheduleLayout(),
+    ...to.idle
+  }
+});
+const editor = machine.createStateConfig({
+  initial: "selecting",
+  states: {
+    idle,
+    selecting,
+    layouting
+  }
+});
+
+export { editor };

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

@@ -0,0 +1,16 @@
+import { editor } from './actor.editor.js';
+import { layouter } from './actor.layouter.js';
+import { machine, createContext } from './actor.types.js';
+
+const _adhocEditorLogic = machine.createMachine({
+  id: "adhoc-editor",
+  context: createContext,
+  type: "parallel",
+  states: {
+    layouter,
+    editor
+  }
+});
+const adhocEditorLogic = _adhocEditorLogic;
+
+export { adhocEditorLogic };