@likec4/diagram 1.47.0 → 1.49.0

package/dist/LikeC4View.js

@@ -6,15 +6,16 @@ import { AnimatePresence } from 'motion/react';
 import { useRef, useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FitViewPaddings } from './base/const.js';
-import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
-import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { ErrorMessage } from './components/ViewNotFound.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
-import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import 'fast-equals';
+import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.js';
-import IconX from './node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import { stopPropagation } from './utils/xyflow.js';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -32,6 +33,7 @@ function LikeC4View({
   colorScheme,
   injectFontCss = true,
   controls = false,
+  layoutType: initialLayoutType = "manual",
   background = "transparent",
   browser = true,
   showNavigationButtons = false,
@@ -41,6 +43,7 @@ function LikeC4View({
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
+  enableNotes = false,
   reduceGraphics = "auto",
   mantineTheme,
   styleNonce,
@@ -52,31 +55,44 @@ function LikeC4View({
 }) {
   const rootRef = useRef(null);
   const likec4model = useOptionalLikeC4Model();
-  const [layoutType, setLayoutType] = useState("manual");
+  const [layoutType, setLayoutType] = useState(initialLayoutType);
   const [browserViewId, _onNavigateTo] = useState(null);
   const onNavigateTo = useCallbackRef((viewId2) => {
     if (viewId2 && viewId2 !== browserViewId) {
-      setLayoutType("manual");
+      setLayoutType(initialLayoutType);
     }
     _onNavigateTo(viewId2);
   });
   const onNavigateToThisView = useCallbackRef(() => {
     onNavigateTo(viewId);
   });
+  const closeBrowser = useCallbackRef(() => {
+    onNavigateTo(null);
+  });
   if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
   }
-  const view = likec4model.findView(viewId)?.$layouted;
-  if (!view) {
-    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+  const viewModel = likec4model.findView(viewId);
+  if (!viewModel) {
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      "LikeC4 View ",
+      /* @__PURE__ */ jsx("code", { children: viewId }),
+      " not found in LikeC4Model.",
+      /* @__PURE__ */ jsx("br", {}),
+      "Available views: ",
+      [...likec4model.views()].map((v) => v.id).join(", ")
+    ] });
   }
-  if (view._stage !== "layouted") {
+  if (!viewModel.isLayouted()) {
     return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      'LikeC4 View "$',
-      viewId,
-      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+      "LikeC4 View ",
+      /* @__PURE__ */ jsx("code", { children: viewId }),
+      " is not layouted.",
+      /* @__PURE__ */ jsx("br", {}),
+      "Make sure you have LikeC4ModelProvider with layouted model."
     ] });
   }
+  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
   const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
   const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
@@ -85,7 +101,7 @@ function LikeC4View({
   const browserProps = isBoolean(browser) ? {} : browser;
   const bounds = pickViewBounds(view, props.dynamicViewVariant);
   const root = rootRef.current ? { root: rootRef.current } : void 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ShadowRoot,
     {
       ref: rootRef,
@@ -99,7 +115,7 @@ function LikeC4View({
         className
       ),
       style,
-      children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+      children: [
         /* @__PURE__ */ jsx(
           LikeC4Diagram,
           {
@@ -118,6 +134,7 @@ function LikeC4View({
             enableElementDetails,
             enableRelationshipBrowser,
             enableElementTags: false,
+            enableNotes,
             controls,
             reduceGraphics,
             className: cx(
@@ -131,11 +148,11 @@ function LikeC4View({
             },
             reactFlowProps,
             renderNodes,
-            children,
-            ...props
+            ...props,
+            children
           }
         ),
-        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: closeBrowser, children: [
           /* @__PURE__ */ jsx(
             LikeC4Diagram,
             {
@@ -152,6 +169,7 @@ function LikeC4View({
               enableRelationshipDetails: true,
               enableSearch: true,
               enableElementTags: true,
+              enableNotes: true,
               enableCompareWithLatest: true,
               controls: true,
               fitView: true,
@@ -163,20 +181,17 @@ function LikeC4View({
               onLayoutTypeChange: setLayoutType
             }
           ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", onClick: stopPropagation, children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
               variant: "default",
               color: "gray",
-              onClick: (e) => {
-                e.stopPropagation();
-                onNavigateTo(null);
-              },
+              onClick: closeBrowser,
               children: /* @__PURE__ */ jsx(IconX, {})
             }
           ) })
         ] }) })
-      ] })
+      ]
     }
   );
 }

package/dist/ReactLikeC4.d.ts

@@ -1,8 +1,19 @@
 import { CSSProperties, ReactNode } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     viewId: t.aux.ViewId<A>;
+    /**
+     * Layout to display
+     * - `auto`: auto-layouted from the current sources
+     * - `manual`: manually layouted (if available, falls back to `auto`)
+     *
+     * Uncontrolled initial value, use `onLayoutTypeChange` to control it.
+     *
+     * @default 'manual'
+     */
+    layoutType?: t.LayoutType | undefined;
     /**
      * Keep aspect ratio of the diagram
      *
@@ -14,7 +25,7 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
      */
     colorScheme?: 'light' | 'dark' | undefined;
     /**
-     * LikeC4 views are using 'IBM Plex Sans' font.
+     * LikeC4 views are using 'IBM Plex Sans Variable' font.
      * By default, component injects the CSS to document head.
      * Set to false if you want to handle the font yourself.
      *
@@ -33,4 +44,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, layoutType: initialLayoutType, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): JSX.Element;

package/dist/ReactLikeC4.js

@@ -1,13 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
-import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import 'fast-equals';
+import 'react';
+import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.js';
 
 function ReactLikeC4({
   viewId,
+  layoutType: initialLayoutType = "manual",
   className,
   colorScheme,
   injectFontCss = true,
@@ -22,17 +25,18 @@ function ReactLikeC4({
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
   }
-  const view = likec4model.findView(viewId)?.$view;
-  if (!view) {
+  const viewModel = likec4model.findView(viewId);
+  if (!viewModel) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
-  if (view._stage !== "layouted") {
+  if (!viewModel.isLayouted()) {
     return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
       'LikeC4 View "$',
       viewId,
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
+  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
   const bounds = pickViewBounds(view, props.dynamicViewVariant);
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,5 @@
 import { Any, UnknownLayouted } from '@likec4/core/types';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
 /**
@@ -7,4 +8,4 @@ export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperti
  *
  * @internal
  */
-export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -34,6 +34,7 @@ function StaticLikeC4Diagram({
       enableSearch: false,
       nodesSelectable: false,
       enableElementTags: false,
+      enableNotes: false,
       ...rest
     }
   );

package/dist/_virtual/store-1b2fbb72.cjs.js

@@ -0,0 +1,3 @@
+var store1b2fbb72_cjs = {};
+
+export { store1b2fbb72_cjs as __exports };

package/dist/_virtual/xstate-store-react.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateStoreReact_cjs } from '../node_modules/.pnpm/@xstate_store@3.14.0_react@19.2.4/node_modules/@xstate/store/react/dist/xstate-store-react.cjs.js';
+
+var xstateStoreReact_cjsExports = requireXstateStoreReact_cjs();
+
+export { xstateStoreReact_cjsExports as x };

package/dist/_virtual/xstate-store-react.cjs2.js

@@ -0,0 +1,3 @@
+var xstateStoreReact_cjs = {};
+
+export { xstateStoreReact_cjs as __exports };

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

@@ -0,0 +1 @@
+export declare const EditorPanel: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ReactFlowProvider } from '@xyflow/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, 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 { 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();
+  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, {})
+    ] }) }) })
+  ] }) }) }) }) }) });
+}
+const LikeC4AdHocView = memo(({ id }) => {
+  const view = useAdhocView();
+  return /* @__PURE__ */ jsxs(
+    DiagramActorProvider,
+    {
+      id,
+      view,
+      zoomable: true,
+      pannable: true,
+      fitViewPadding: FitViewPaddings.withControls,
+      nodesDraggable: false,
+      nodesSelectable: true,
+      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 {};