@likec4/diagram 1.48.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

@@ -1,12 +1,12 @@
 import { LayoutedElementView, Any } from '@likec4/core';
-import { ElementModel } from '@likec4/core/model';
-import { AdhocEditorSnapshot, AdhocEditorActorRef } from './actor';
+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;
-    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>;

package/dist/adhoc-editor/hooks.js

@@ -1,25 +1,13 @@
 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';
+import 'fast-equals';
+import { createContext, useContext } from 'react';
 
+const AdhocEditorActorContext = createContext(null);
+const AdhocEditorActorContextProvider = AdhocEditorActorContext.Provider;
 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",
@@ -37,11 +25,5 @@ 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 };
+export { AdhocEditorActorContextProvider, useAdhocEditorActor, useAdhocView };

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

@@ -1,2 +1,2 @@
-export type { AdhocViewService } from './actor.types';
 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/{ActorProvider.d.ts → state/ActorProvider.d.ts}

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

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

@@ -1,11 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { useLogger } from '@mantine/hooks';
 import { useActorRef } from '@xstate/react';
-import { useRef, useEffect, createContext } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 import { fromPromise } from 'xstate';
+import { AdhocEditorActorContextProvider } from '../hooks.js';
 import { adhocEditorLogic } from './actor.js';
 
-const AdhocEditorActorContext = createContext(null);
 const State = {
   read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
   write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
@@ -13,12 +12,13 @@ const 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({
-      actors: {
-        service: fromPromise(({ input }) => serviceRef.current.process(input))
-      }
-    }),
+    adhocEditorLogic.provide(provided),
     {
       id: "adhoc-editor",
       snapshot: State.read(),
@@ -28,14 +28,13 @@ function AdhocEditorActorProvider({ children, service }) {
       }
     }
   );
-  useLogger("AdhocEditorActor", [actorRef]);
   useEffect(() => {
     const subscription = actorRef.subscribe((state) => {
       State.write(state);
     });
     return () => subscription.unsubscribe();
   }, [actorRef]);
-  return /* @__PURE__ */ jsx(AdhocEditorActorContext.Provider, { value: actorRef, children });
+  return /* @__PURE__ */ jsx(AdhocEditorActorContextProvider, { value: actorRef, children });
 }
 
-export { AdhocEditorActorContext, AdhocEditorActorProvider };
+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/{actor.editor.d.ts → state/actor.editor.d.ts}

@@ -1,5 +1,5 @@
+import { Context, Events, AdhocViewServiceActor, EmittedEvents } from './actor.types';
 import { ActionFunction } from 'xstate';
-import { Context, Events, AdhocViewServiceActor } from './actor.types';
 export declare const editor: {
     initial: string;
     states: {
@@ -30,13 +30,15 @@ export declare const editor: {
         selecting: {
             id: string;
             on: {
-                'include.element': {
-                    target: "#layouting";
+                'toggle.element': {
                     actions: ActionFunction<Context, Events, Events, undefined, {
                         src: "service";
                         logic: AdhocViewServiceActor;
                         id: string | undefined;
-                    }, never, never, never, never>;
+                    }, never, {
+                        type: "hasView";
+                        params: unknown;
+                    }, never, EmittedEvents>[];
                 };
                 'select.close': {
                     target: "#idle";

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/{actor.js → state/actor.js}

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