@likec4/diagram 1.48.0 → 1.49.0

package/dist/adhoc-editor/EditorPanel.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VStack, HStack, Txt, Box } from '@likec4/styles/jsx';
+import { ActionIcon, Input, CloseButton } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import { Suspense } from 'react';
+import { prop } from 'remeda';
+import { Logo } from '../components/Logo.js';
+import { ElementsTree } from './ElementsTree.js';
+import { EditorPanelStoreProvider, useEditorPanelState, useEditorPanelTrigger, selectEditorPanelState } from './state/panel.js';
+import IconTrash from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
+
+const EditorPanel = () => {
+  return /* @__PURE__ */ jsx(EditorPanelStoreProvider, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      css: {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        gap: "1",
+        bottom: "0",
+        height: "auto",
+        overflow: "hidden",
+        layerStyle: "likec4.panel",
+        width: "[300px]",
+        rounded: "0"
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        const input = document.getElementById("search-input");
+        if (input) {
+          input.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { p: "2", gap: "4", justifyItems: "stretch", children: [
+          /* @__PURE__ */ jsx(Logo, { style: { height: 16 } }),
+          /* @__PURE__ */ jsx(Txt, { size: "sm", fontWeight: "medium", flex: "1", children: "Explore" }),
+          /* @__PURE__ */ jsx(HStack, { gap: "1", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconTrash, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(SearchInput, {}) }),
+        /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsTree, {}) })
+      ]
+    }
+  ) }) });
+};
+const selectInput = selectEditorPanelState(prop("searchInput"));
+function SearchInput() {
+  const input = useEditorPanelState(selectInput);
+  const trigger = useEditorPanelTrigger();
+  const onChange = useEditorPanelTrigger((trigger2, event) => {
+    trigger2.inputChange({ value: event.currentTarget.value });
+  });
+  const clear = useEditorPanelTrigger((trigger2) => {
+    trigger2.inputChange({ value: "" });
+  });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: "search-input",
+      size: "xs",
+      variant: "filled",
+      placeholder: "Search by title, description or start with # or kind:",
+      value: input,
+      onChange,
+      "data-likec4-search-input": true,
+      rightSectionPointerEvents: "all",
+      rightSection: /* @__PURE__ */ jsx(
+        CloseButton,
+        {
+          size: "sm",
+          "aria-label": "Clear input",
+          onClick: clear,
+          style: { display: input ? void 0 : "none" }
+        }
+      ),
+      onKeyDownCapture: (e) => {
+        switch (e.key) {
+          case "Escape": {
+            e.stopPropagation();
+            e.preventDefault();
+            clear();
+            break;
+          }
+          case "Enter": {
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+          }
+          case "ArrowDown": {
+            e.stopPropagation();
+            e.preventDefault();
+            trigger.inputKeyDown();
+            break;
+          }
+          default: {
+            return;
+          }
+        }
+      }
+    }
+  ) });
+}
+
+export { EditorPanel };

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

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const ElementsTree: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/adhoc-editor/ElementsTree.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { invariant } from '@likec4/core/utils';
+import { Box } from '@likec4/styles/jsx';
+import { ScrollArea } from '@mantine/core';
+import { mergeProps } from '@zag-js/react';
+import { memo } from 'react';
+import { Tree } from './components/Tree.js';
+import { useEditorPanelTrigger } from './state/panel.js';
+import { useElementsTree } from './useElementsTree.js';
+
+const ElementsTree = memo(() => {
+  const api = useElementsTree();
+  const onClick = useEditorPanelTrigger((trigger, event) => {
+    const id = event.currentTarget.closest("[data-value]")?.getAttribute("data-value");
+    if (!id) {
+      return;
+    }
+    try {
+      event.stopPropagation();
+      event.preventDefault();
+      api.expand([id]);
+      trigger.elementClick({ id });
+    } catch (err) {
+      console.error("Failed to handle element click", err);
+    }
+  });
+  const rootProps = mergeProps(api.getRootProps(), {
+    onKeyDown: (e) => {
+      switch (e.key) {
+        case "Escape": {
+          const input = document.getElementById("search-input");
+          if (input) {
+            e.stopPropagation();
+            e.preventDefault();
+            input.focus();
+          }
+          break;
+        }
+        case "ArrowUp": {
+          console.log("ArrowUp", {
+            selected: api.selectedValue
+          });
+          break;
+        }
+        default: {
+          console.log(e.key);
+          return;
+        }
+      }
+    }
+    // onClick: useCallbackRef((e: MouseEvent) => {
+    //   const lastnd = last(api.getVisibleNodes())
+    //   if (lastnd) {
+    //     e.stopPropagation()
+    //     api.focus(lastnd.node.id)
+    //   }
+    // }),
+  });
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      flex: "1 1 100%",
+      scrollbars: "y",
+      type: "scroll",
+      scrollbarSize: "4px",
+      // className="arsars"
+      // styles={{
+      //   content: {
+      //     height: '100%',
+      //   },
+      // }}
+      // viewportProps={{
+      //   onClick: (e) => {
+      //     const lastnd = api.getVisibleNodes().at(-1)?.node
+      //     if (lastnd) {
+      //       e.preventDefault()
+      //       e.stopPropagation()
+      //       setTimeout(() => {
+      //         api.focus(lastnd.id)
+      //       }, 50)
+      //     }
+      //   },
+      // }}
+      ...rootProps,
+      children: /* @__PURE__ */ jsxs(Tree.Root, { ...api.getTreeProps(), children: [
+        api.collection.rootNode.children.map((node, index) => /* @__PURE__ */ jsx(
+          TreeNode,
+          {
+            node,
+            api,
+            onClick
+          },
+          node.id
+        )),
+        !api.collection.getFirstNode() && /* @__PURE__ */ jsx(
+          Box,
+          {
+            css: {
+              p: "4",
+              textAlign: "center"
+            },
+            children: "Nothing found"
+          }
+        )
+      ] })
+    }
+  );
+});
+const TreeNode = ({ api, node, onClick }) => {
+  const indexPath = api.collection.getIndexPath(node.id);
+  invariant(indexPath, "Node not found in collection");
+  const nodeProps = { indexPath, node };
+  const state = api.getNodeState(nodeProps);
+  if (state.isBranch) {
+    return /* @__PURE__ */ jsxs(Tree.Branch, { ...api.getBranchProps(nodeProps), children: [
+      /* @__PURE__ */ jsxs(Tree.Control, { ...api.getBranchControlProps(nodeProps), children: [
+        /* @__PURE__ */ jsx(Tree.Icon, { element: node }),
+        /* @__PURE__ */ jsxs(Tree.Label, { ...api.getBranchTextProps(nodeProps), children: [
+          node.title,
+          /* @__PURE__ */ jsx(Tree.Indicator, { ...api.getBranchIndicatorProps(nodeProps) })
+        ] }),
+        /* @__PURE__ */ jsx(Tree.State, { node, state: node.state, onClick })
+      ] }),
+      /* @__PURE__ */ jsx(Tree.Content, { ...api.getBranchContentProps(nodeProps), children: state.expanded && node.children.map((childNode, index) => /* @__PURE__ */ jsx(
+        TreeNode,
+        {
+          node: childNode,
+          api,
+          onClick
+        },
+        childNode.id
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Tree.Item, { ...api.getItemProps(nodeProps), children: [
+    /* @__PURE__ */ jsx(Tree.Icon, { element: node }),
+    /* @__PURE__ */ jsx(Tree.Label, { ...api.getItemTextProps(nodeProps), children: node.title }),
+    /* @__PURE__ */ jsx(Tree.State, { node, state: node.state, onClick })
+  ] });
+};
+
+export { ElementsTree };

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

@@ -1,4 +1,4 @@
-import { AdhocViewService } from './actor.types';
+import { AdhocViewService } from './state/actor.types';
 export declare function LikeC4AdHocViewEditor({ service }: {
     service: AdhocViewService;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/LikeC4AdHocViewEditor.js

@@ -1,59 +1,48 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ReactFlowProvider } from '@xyflow/react';
-import { Profiler } from 'react';
+import { useRef, Profiler, memo, useEffect } from 'react';
+import { mapValues } from 'remeda';
 import { FitViewPaddings } from '../base/const.js';
 import { RootContainer } from '../components/RootContainer.js';
-import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { DiagramFeatures, DefaultFeatures } from '../context/DiagramFeatures.js';
 import { EnsureMantine } from '../context/EnsureMantine.js';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+import { IconRendererProvider } from '../context/IconRenderer.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';
+import { EditorPanel } from './EditorPanel.js';
+import { useAdhocView, useAdhocEditorActor } from './hooks.js';
+import { AdhocEditorActorProvider } from './state/ActorProvider.js';
+import { useDiagram } from '../hooks/safeContext.js';
 
+const noop = () => {
+};
+const defaultFeatures = {
+  ...mapValues(DefaultFeatures, () => false),
+  enableFitView: true,
+  enableReadOnly: true
+};
 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, {})
-        ] }) }) })
-      ]
-    }
-  ) }) }) });
+  const initialRef = useRef({
+    fitView: true,
+    defaultNodes: [],
+    defaultEdges: []
+  });
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(Profiler, { id: "LikeC4AdHocViewEditor", onRender: noop, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: null, children: /* @__PURE__ */ jsx(AdhocEditorActorProvider, { service, children: /* @__PURE__ */ jsxs(DiagramFeatures, { features: defaultFeatures, children: [
+    /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+    /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
+      /* @__PURE__ */ jsx(LikeC4AdHocView, { id }),
+      /* @__PURE__ */ jsx(EditorPanel, {})
+    ] }) }) })
+  ] }) }) }) }) }) });
 }
-function LikeC4AdHocView({ id }) {
+const LikeC4AdHocView = memo(({ id }) => {
   const view = useAdhocView();
-  return /* @__PURE__ */ jsx(ReactFlowProvider, { fitView: true, initialNodes: [], initialEdges: [], children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     DiagramActorProvider,
     {
       id,
@@ -63,9 +52,23 @@ function LikeC4AdHocView({ id }) {
       fitViewPadding: FitViewPaddings.withControls,
       nodesDraggable: false,
       nodesSelectable: true,
-      children: /* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {})
+      children: [
+        /* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {}),
+        /* @__PURE__ */ jsx(LikeC4AdHocEditorEvents, {})
+      ]
     }
-  ) });
-}
+  );
+});
+const LikeC4AdHocEditorEvents = memo(() => {
+  const actorRef = useAdhocEditorActor();
+  const diagram = useDiagram();
+  useEffect(() => {
+    const subscription = actorRef.on("click.element", ({ id }) => {
+      diagram.focusOnElement(id);
+    });
+    return () => subscription.unsubscribe();
+  }, [actorRef, diagram]);
+  return null;
+});
 
 export { LikeC4AdHocViewEditor };

package/dist/adhoc-editor/components/Tree.d.ts

@@ -0,0 +1,48 @@
+import { RecipeVariantProps } from '@likec4/styles/css';
+import { MouseEventHandler, PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { IconOrShapeRenderer } from '../../context/IconRenderer';
+import { TreeNodeData } from '../useElementsTree';
+import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '@likec4/styles';
+import { StyleContextRootProvider, StyleContextConsumer } from '@likec4/styles/jsx';
+import { IconProps } from '../../../@tabler/icons-react/dist/esm/icons/index.mjs';
+declare const statebtn: RecipeRuntimeFn<{
+    state: {
+        "include-explicit": {
+            backgroundColor: "grass.6";
+            color: "text";
+        };
+        "include-implicit": {
+            backgroundColor: "grass.6";
+            color: "text";
+        };
+        exclude: {
+            backgroundColor: "red.6";
+            color: "text";
+        };
+        disabled: {
+            color: "text.dimmed";
+        };
+        'not-present': {
+            color: "text.dimmed";
+            backgroundColor: "default.hover/50";
+        };
+    };
+}>;
+declare const tree: SlotRecipeRuntimeFn<"icon" | "label" | "content" | "item" | "indicator" | "branch" | "control" | "state", {}>;
+export type TreeVariants = RecipeVariantProps<typeof tree>;
+export declare const Tree: {
+    Root: StyleContextRootProvider<"div", SlotRecipeRuntimeFn<"icon" | "label" | "content" | "item" | "indicator" | "branch" | "control" | "state", {}>>;
+    Branch: StyleContextConsumer<"div">;
+    Item: StyleContextConsumer<"div">;
+    Control: StyleContextConsumer<"div">;
+    State: ({ node, state, onClick, className, ...props }: PropsWithChildren<RecipeVariantProps<typeof statebtn> & {
+        node: TreeNodeData;
+        className?: string;
+        onClick?: MouseEventHandler<HTMLElement>;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    Icon: typeof IconOrShapeRenderer;
+    Label: StyleContextConsumer<"div">;
+    Content: StyleContextConsumer<"div">;
+    Indicator: StyleContextConsumer<ForwardRefExoticComponent< IconProps & RefAttributes<SVGSVGElement>>>;
+};
+export {};