@likec4/diagram 1.55.1 → 1.57.0

package/dist/adhoc-editor/EditorPanel.js

@@ -1,105 +1,106 @@
-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.40.0_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, {}) })
-      ]
-    }
-  ) }) });
+import "../_virtual/_rolldown/runtime.js";
+import { Logo } from "../components/Logo.js";
+import { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelTrigger } from "./state/panel.js";
+import { ElementsTree } from "./ElementsTree.js";
+import { IconTrash } from "@tabler/icons-react";
+import { Suspense } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { prop } from "remeda";
+import { ActionIcon, CloseButton, Input } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { Box as Box$1, HStack, Txt, VStack } from "@likec4/styles/jsx";
+//#region src/adhoc-editor/EditorPanel.tsx
+var 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$1, { children: /* @__PURE__ */ jsx(SearchInput, {}) }),
+				/* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsTree, {}) })
+			]
+		})
+	}) });
 };
-const selectInput = selectEditorPanelState(prop("searchInput"));
+var 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;
-          }
-        }
-      }
-    }
-  ) });
+	const input = useEditorPanelState(selectInput);
+	const trigger = useEditorPanelTrigger();
+	const onChange = useEditorPanelTrigger((trigger, event) => {
+		trigger.inputChange({ value: event.currentTarget.value });
+	});
+	const clear = useEditorPanelTrigger((trigger) => {
+		trigger.inputChange({ value: "" });
+	});
+	return /* @__PURE__ */ jsx(Box$1, { 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;
+			}
+		}
+	}) });
 }
-
+//#endregion
 export { EditorPanel };

package/dist/adhoc-editor/ElementsTree.js

@@ -1,142 +1,112 @@
-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"
-          }
-        )
-      ] })
-    }
-  );
+import "../_virtual/_rolldown/runtime.js";
+import { Tree as Tree$1 } from "./components/Tree.js";
+import { useElementsTree } from "./useElementsTree.js";
+import { useEditorPanelTrigger } from "./state/panel.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@mantine/core";
+import { invariant } from "@likec4/core/utils";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { mergeProps } from "@zag-js/react";
+//#region src/adhoc-editor/ElementsTree.tsx
+var 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);
+		}
+	});
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		flex: "1 1 100%",
+		scrollbars: "y",
+		type: "scroll",
+		scrollbarSize: "4px",
+		...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": break;
+				default: return;
+			}
+		} }),
+		children: /* @__PURE__ */ jsxs(Tree$1.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$1, {
+				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 })
-  ] });
+var 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$1.Branch, {
+		...api.getBranchProps(nodeProps),
+		children: [/* @__PURE__ */ jsxs(Tree$1.Control, {
+			...api.getBranchControlProps(nodeProps),
+			children: [
+				/* @__PURE__ */ jsx(Tree$1.Icon, { element: node }),
+				/* @__PURE__ */ jsxs(Tree$1.Label, {
+					...api.getBranchTextProps(nodeProps),
+					children: [node.title, /* @__PURE__ */ jsx(Tree$1.Indicator, { ...api.getBranchIndicatorProps(nodeProps) })]
+				}),
+				/* @__PURE__ */ jsx(Tree$1.State, {
+					node,
+					state: node.state,
+					onClick
+				})
+			]
+		}), /* @__PURE__ */ jsx(Tree$1.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$1.Item, {
+		...api.getItemProps(nodeProps),
+		children: [
+			/* @__PURE__ */ jsx(Tree$1.Icon, { element: node }),
+			/* @__PURE__ */ jsx(Tree$1.Label, {
+				...api.getItemTextProps(nodeProps),
+				children: node.title
+			}),
+			/* @__PURE__ */ jsx(Tree$1.State, {
+				node,
+				state: node.state,
+				onClick
+			})
+		]
+	});
 };
-
+//#endregion
 export { ElementsTree };

package/dist/adhoc-editor/LikeC4AdHocViewEditor.js

@@ -1,76 +1,83 @@
-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';
-import '@xstate/react';
-import 'fast-equals';
-
-const noop = () => {
-};
-const defaultFeatures = {
-  ...mapValues(DefaultFeatures, () => false),
-  enableFitView: true,
-  enableReadOnly: true
+import "../_virtual/_rolldown/runtime.js";
+import { IconRendererProvider } from "../context/IconRenderer.js";
+import { FitViewPaddings } from "../base/const.js";
+import { RootContainer } from "../components/RootContainer.js";
+import { DefaultFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
+import { EnsureMantine } from "../context/EnsureMantine.js";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
+import { useDiagram } from "../hooks/safeContext.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 { useAdhocEditorActor, useAdhocView } from "./hooks.js";
+import { EditorPanel } from "./EditorPanel.js";
+import { AdhocEditorActorProvider } from "./state/ActorProvider.js";
+import { Profiler, memo, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactFlowProvider } from "@xyflow/react";
+import { mapValues } from "remeda";
+//#region src/adhoc-editor/LikeC4AdHocViewEditor.tsx
+var noop = () => {};
+var 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 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, {})
-      ]
-    }
-  );
+var LikeC4AdHocView = memo(({ id }) => {
+	return /* @__PURE__ */ jsxs(DiagramActorProvider, {
+		id,
+		view: useAdhocView(),
+		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;
+var 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;
 });
-
+//#endregion
 export { LikeC4AdHocViewEditor };

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

@@ -28,10 +28,10 @@ declare const statebtn: RecipeRuntimeFn<{
         };
     };
 }>;
-declare const tree: SlotRecipeRuntimeFn<"icon" | "label" | "content" | "item" | "indicator" | "branch" | "control" | "state", {}>;
+declare const tree: SlotRecipeRuntimeFn<"content" | "icon" | "label" | "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", {}>>;
+    Root: StyleContextRootProvider<"div", SlotRecipeRuntimeFn<"content" | "icon" | "label" | "item" | "indicator" | "branch" | "control" | "state", {}>>;
     Branch: StyleContextConsumer<"div">;
     Item: StyleContextConsumer<"div">;
     Control: StyleContextConsumer<"div">;