@helpwave/hightide 0.12.5 → 0.12.7

package/dist/index.mjs

@@ -6998,6 +6998,125 @@ function Visibility({ children, isVisible }) {
   return /* @__PURE__ */ jsx3(Fragment, { children: isVisible && children });
 }
 
+// src/components/display-and-visualization/Avatar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createElement } from "react";
+var Avatar = ({
+  image: initialImage,
+  name,
+  size = "md",
+  ...props
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [image, setImage] = useState(initialImage);
+  const displayName = useMemo(() => {
+    const maxLetters = size === "sm" ? 1 : 2;
+    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
+  }, [name, size]);
+  const isShowingImage = !!image && (!hasError || !hasLoaded);
+  useEffect(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false);
+      setHasLoaded(false);
+    }
+    setImage(initialImage);
+  }, [image?.avatarUrl, initialImage]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...props,
+      "data-name": "avatar",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ jsx4(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ jsx4(
+          "img",
+          {
+            src: image?.avatarUrl,
+            alt: image?.alt,
+            "data-name": "avatar-image",
+            onLoad: () => setHasLoaded(true),
+            onError: () => setHasError(true),
+            "data-error": hasError ? "" : void 0,
+            "data-loaded": hasLoaded ? "" : void 0
+          },
+          image?.avatarUrl
+        ) }),
+        name ? displayName : /* @__PURE__ */ jsx4(UserIcon, {})
+      ]
+    }
+  );
+};
+var AvatarGroup = ({
+  avatars,
+  showTotalNumber = true,
+  size = "md",
+  ...props
+}) => {
+  const maxShownProfiles = 5;
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const group = /* @__PURE__ */ jsx4("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ createElement(
+    Avatar,
+    {
+      ...avatar,
+      key: index,
+      size,
+      "data-group": ""
+    }
+  )) });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...props,
+      "data-name": props["data-name"] ?? "avatar-group",
+      "data-size": size ?? void 0,
+      children: [
+        group,
+        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-name": "avatar-group-more",
+            "data-size": size,
+            children: `+ ${notDisplayedProfiles}`
+          }
+        )
+      ]
+    }
+  );
+};
+var AvatarWithStatus = ({
+  status = "unknown",
+  className,
+  size = "md",
+  ...avatarProps
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx3(className),
+      "data-name": "avatar-with-status",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ jsx4(Avatar, { ...avatarProps, size }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-name": "avatar-with-status-dot",
+            "data-size": size ?? void 0,
+            "data-status": status
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/display-and-visualization/Card.tsx
+import { forwardRef, useCallback } from "react";
+import clsx4 from "clsx";
+import { ChevronRight, ExternalLink } from "lucide-react";
+
 // src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
@@ -7263,130 +7382,24 @@ var PropsUtil = {
   mergeProps
 };
 
-// src/components/display-and-visualization/Avatar.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-import { createElement } from "react";
-var Avatar = ({
-  image: initialImage,
-  name,
-  size = "md",
-  ...props
-}) => {
-  const [hasError, setHasError] = useState(false);
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const [image, setImage] = useState(initialImage);
-  const displayName = useMemo(() => {
-    const maxLetters = size === "sm" ? 1 : 2;
-    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
-  }, [name, size]);
-  const isShowingImage = !!image && (!hasError || !hasLoaded);
-  useEffect(() => {
-    if (initialImage?.avatarUrl !== image?.avatarUrl) {
-      setHasError(false);
-      setHasLoaded(false);
-    }
-    setImage(initialImage);
-  }, [image?.avatarUrl, initialImage]);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar",
-      "data-size": props["data-size"] ?? size ?? void 0,
-      children: [
-        /* @__PURE__ */ jsx4(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ jsx4(
-          "img",
-          {
-            src: image?.avatarUrl,
-            alt: image?.alt,
-            "data-name": "avatar-image",
-            onLoad: () => setHasLoaded(true),
-            onError: () => setHasError(true),
-            "data-error": hasError ? "" : void 0,
-            "data-loaded": hasLoaded ? "" : void 0
-          },
-          image?.avatarUrl
-        ) }),
-        name ? displayName : /* @__PURE__ */ jsx4(UserIcon, {})
-      ]
-    }
-  );
-};
-var AvatarGroup = ({
-  avatars,
-  showTotalNumber = true,
-  size = "md",
-  ...props
-}) => {
-  const maxShownProfiles = 5;
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
-  const notDisplayedProfiles = avatars.length - maxShownProfiles;
-  const group = /* @__PURE__ */ jsx4("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ createElement(
-    Avatar,
-    {
-      ...avatar,
-      key: index,
-      size,
-      "data-group": ""
-    }
-  )) });
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar-group",
-      "data-size": size ?? void 0,
-      children: [
-        group,
-        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "data-name": "avatar-group-more",
-            "data-size": size,
-            children: `+ ${notDisplayedProfiles}`
-          }
-        )
-      ]
-    }
-  );
-};
-var AvatarWithStatus = ({
-  isOnline,
-  className,
-  size = "md",
-  ...avatarProps
-}) => {
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: clsx3(className),
-      "data-name": "avatar-with-status",
-      "data-size": size ?? void 0,
-      children: [
-        /* @__PURE__ */ jsx4(Avatar, { ...avatarProps, size }),
-        /* @__PURE__ */ jsx4(
-          "div",
-          {
-            "data-name": "avatar-with-status-dot",
-            "data-size": size ?? void 0,
-            "data-online": PropsUtil.dataAttributes.bool(isOnline),
-            "aria-label": isOnline ? "Online" : "Offline"
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/components/display-and-visualization/Card.tsx
-import { forwardRef, useCallback } from "react";
-import clsx4 from "clsx";
-import { ChevronRight, ExternalLink } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CardHeaderContent({ title, description, leading, trailing }) {
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    leading != null && /* @__PURE__ */ jsx5("span", { "data-name": "card-leading", children: leading }),
+    /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
+      /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
+      /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx5("span", { "data-name": "card-trailing", children: trailing })
+  ] });
+}
 var Card = ({
   title,
   description,
   size = "md",
+  leading,
+  trailing,
   children,
   className,
   ...props
@@ -7399,8 +7412,15 @@ var Card = ({
       "data-name": props["data-name"] ?? "card",
       "data-size": size,
       children: [
-        /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-        /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) }),
+        /* @__PURE__ */ jsx5("div", { "data-name": "card-header", children: /* @__PURE__ */ jsx5(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7410,7 +7430,8 @@ var ActionCard = forwardRef(function ActionCard2({
   title,
   description,
   size = "md",
-  action,
+  leading,
+  trailing,
   disabled = false,
   children,
   className,
@@ -7446,13 +7467,15 @@ var ActionCard = forwardRef(function ActionCard2({
       role: onClick ? "button" : void 0,
       tabIndex: onClick && !disabled ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
-          ] }),
-          action != null && /* @__PURE__ */ jsx5("div", { "data-name": "card-action", children: action })
-        ] }),
+        /* @__PURE__ */ jsx5("div", { "data-name": "card-header", children: /* @__PURE__ */ jsx5(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7462,6 +7485,7 @@ var NavigationCard = forwardRef(function NavigationCard2({
   title,
   description,
   size = "md",
+  leading,
   href,
   isExternal = false,
   children,
@@ -7507,10 +7531,14 @@ var NavigationCard = forwardRef(function NavigationCard2({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsxs4("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
-          ] }),
+          /* @__PURE__ */ jsx5(
+            CardHeaderContent,
+            {
+              title,
+              description,
+              leading
+            }
+          ),
           /* @__PURE__ */ jsx5(
             "a",
             {
@@ -8126,7 +8154,7 @@ var ProcessModelTerminalNode = ({
 };
 
 // src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function defaultRenderActivityIcon(node) {
   if (node.activityIcon === "check") {
     return /* @__PURE__ */ jsx13(Check, { size: 15, strokeWidth: 2, className: "process-model-activity-node-icon-svg" });
@@ -8186,7 +8214,7 @@ var ProcessModelCanvas = ({
             "data-base-sw": String(sw)
           }
         ),
-        edge.label ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        edge.label ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
           /* @__PURE__ */ jsx13(
             "rect",
             {
@@ -12944,7 +12972,7 @@ var IconButton = forwardRef13(function IconButton2({
 });
 
 // src/components/layout/Carousel.tsx
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext8(null);
 var useCarouselContext = () => {
   const context = useContext9(CarouselContext);
@@ -13249,7 +13277,7 @@ var Carousel = ({
                   children: children[currentIndex]
                 }
               ),
-              arrows && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+              arrows && /* @__PURE__ */ jsxs17(Fragment4, { children: [
                 /* @__PURE__ */ jsx31(
                   IconButton,
                   {
@@ -13567,7 +13595,7 @@ function InfiniteScroll({
 }
 
 // src/components/layout/MarkdownInterpreter.tsx
-import { Fragment as Fragment4, jsx as jsx36 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36 } from "react/jsx-runtime";
 var astNodeInserterType = ["helpwave", "newline"];
 var ASTNodeInterpreter = ({
   node,
@@ -13588,7 +13616,7 @@ var ASTNodeInterpreter = ({
           node: value
         },
         index
-      )) }) : /* @__PURE__ */ jsx36(Fragment4, { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
+      )) }) : /* @__PURE__ */ jsx36(Fragment5, { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
     case "bold":
       return /* @__PURE__ */ jsx36("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
     case "italic":
@@ -14113,11 +14141,11 @@ var VerticalDivider = ({
 
 // src/components/layout/app/AppPage.tsx
 import clsx15 from "clsx";
-import { useCallback as useCallback28, useMemo as useMemo22, useRef as useRef25, useState as useState22 } from "react";
+import { useCallback as useCallback28, useMemo as useMemo22, useRef as useRef25, useState as useState23 } from "react";
 import { MenuIcon, X } from "lucide-react";
 
 // src/components/layout/navigation/navigation-menus/NavigationContext.tsx
-import { createContext as createContext11, useCallback as useCallback26, useContext as useContext12, useEffect as useEffect28, useMemo as useMemo21, useRef as useRef23 } from "react";
+import { createContext as createContext11, useCallback as useCallback26, useContext as useContext12, useEffect as useEffect28, useMemo as useMemo21, useRef as useRef23, useState as useState22 } from "react";
 
 // src/hooks/useTreeNavigation.ts
 import { useCallback as useCallback25, useEffect as useEffect27, useMemo as useMemo20, useState as useState21 } from "react";
@@ -14139,6 +14167,22 @@ function buildTreeIndex(nodes) {
     roots: [...nodes]
   };
 }
+function resolveTreeNodePath(nodes, id) {
+  if (id == null) return null;
+  const entry = buildTreeIndex(nodes).byId.get(id);
+  return entry?.path ?? null;
+}
+function flattenAllItems(nodes, expandedIds, path = []) {
+  const result = [];
+  for (const node of nodes) {
+    const currentPath = [...path, node.id];
+    const hasChildren = node.items.length > 0;
+    const expanded = hasChildren && expandedIds.has(node.id);
+    result.push({ id: node.id, path: currentPath, expanded });
+    result.push(...flattenAllItems(node.items, expandedIds, currentPath));
+  }
+  return result;
+}
 function flattenVisibleItems(nodes, expandedIds, path = []) {
   const result = [];
   for (const node of nodes) {
@@ -14175,11 +14219,11 @@ function isAncestorOf(ancestorId, descendantPath) {
   const index = descendantPath.indexOf(ancestorId);
   return index >= 0 && index < descendantPath.length - 1;
 }
-function pruneExpandedIds(expandedIds, activePath, onlyOneExpandedTree, index) {
-  if (!onlyOneExpandedTree || activePath == null) {
+function pruneExpandedIds(expandedIds, focusedPath, onlyOneExpandedTree, index) {
+  if (!onlyOneExpandedTree || focusedPath == null) {
     return new Set(expandedIds);
   }
-  const pathSet = new Set(activePath);
+  const pathSet = new Set(focusedPath);
   const pruned = /* @__PURE__ */ new Set();
   for (const id of expandedIds) {
     if (!pathSet.has(id)) continue;
@@ -14190,77 +14234,80 @@ function pruneExpandedIds(expandedIds, activePath, onlyOneExpandedTree, index) {
   }
   return pruned;
 }
-function syncExpansionForActive(expandedIds, activePath, onlyOneExpandedTree, index) {
+function syncExpansionForFocused(expandedIds, focusedPath, onlyOneExpandedTree, index) {
   const next = new Set(expandedIds);
-  for (const id of getExpandableAncestorIds(activePath, index)) {
+  for (const id of getExpandableAncestorIds(focusedPath, index)) {
     next.add(id);
   }
-  return pruneExpandedIds(next, activePath, onlyOneExpandedTree, index);
+  return pruneExpandedIds(next, focusedPath, onlyOneExpandedTree, index);
 }
 function useTreeNavigation({
   nodes,
-  activeId: controlledActiveId,
-  onActiveIdChange,
-  initialActiveId,
+  focusedId: controlledFocusedId,
+  onFocusedIdChange,
+  initialFocusedId,
   onlyOneExpandedTree = false
 }) {
   const index = useMemo20(() => buildTreeIndex(nodes), [nodes]);
-  const [activeId, setActiveId] = useControlledState({
-    value: controlledActiveId,
-    onValueChange: onActiveIdChange,
-    defaultValue: initialActiveId ?? null
+  const [focusedId, setFocusedId] = useControlledState({
+    value: controlledFocusedId,
+    onValueChange: onFocusedIdChange,
+    defaultValue: initialFocusedId ?? null
   });
-  const resolvedActiveId = useMemo20(() => {
-    if (activeId == null) return null;
-    if (index.byId.has(activeId)) return activeId;
+  const resolvedFocusedId = useMemo20(() => {
+    if (focusedId == null) return null;
+    if (index.byId.has(focusedId)) return focusedId;
     return null;
-  }, [activeId, index]);
+  }, [focusedId, index]);
   const [expandedIds, setExpandedIds] = useState21(() => /* @__PURE__ */ new Set());
   useEffect27(() => {
-    if (resolvedActiveId == null) return;
-    const entry = index.byId.get(resolvedActiveId);
+    if (resolvedFocusedId == null) return;
+    const entry = index.byId.get(resolvedFocusedId);
     if (entry == null) return;
-    setExpandedIds((prev) => syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index));
-  }, [resolvedActiveId, onlyOneExpandedTree, index]);
-  const items = useMemo20(() => {
+    setExpandedIds((prev) => syncExpansionForFocused(prev, entry.path, onlyOneExpandedTree, index));
+  }, [resolvedFocusedId, onlyOneExpandedTree, index]);
+  const visibleItems = useMemo20(() => {
     return flattenVisibleItems(nodes, expandedIds);
   }, [nodes, expandedIds]);
-  const activeItem = useMemo20(() => {
-    if (resolvedActiveId == null) return null;
-    return items.find((item) => item.id === resolvedActiveId) ?? null;
-  }, [items, resolvedActiveId]);
+  const allItems = useMemo20(() => {
+    return flattenAllItems(nodes, expandedIds);
+  }, [nodes, expandedIds]);
+  const focusedItem = useMemo20(() => {
+    if (resolvedFocusedId == null) return null;
+    return allItems.find((item) => item.id === resolvedFocusedId) ?? null;
+  }, [allItems, resolvedFocusedId]);
   const navigateTo = useCallback25((id) => {
     const entry = index.byId.get(id);
     if (entry == null) {
       console.warn(`Attempted to navigate to node ${id} that does not exist`);
       return;
     }
-    setActiveId(id);
+    setFocusedId(id);
     setExpandedIds((prev) => {
-      const next2 = syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index);
+      const next2 = syncExpansionForFocused(prev, entry.path, onlyOneExpandedTree, index);
       return next2;
     });
-  }, [index, onlyOneExpandedTree, setActiveId]);
+  }, [index, onlyOneExpandedTree, setFocusedId]);
   const expand = useCallback25((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
     }
     setExpandedIds((prev) => {
       const next2 = new Set(prev);
       next2.add(id);
-      const activePath = options?.isFocusing ? entry.path : resolvedActiveId != null ? index.byId.get(resolvedActiveId)?.path ?? null : null;
-      return pruneExpandedIds(next2, activePath, onlyOneExpandedTree, index);
+      const focusedPath = options?.isFocusing ? entry.path : resolvedFocusedId != null ? index.byId.get(resolvedFocusedId)?.path ?? null : null;
+      return pruneExpandedIds(next2, focusedPath, onlyOneExpandedTree, index);
     });
-  }, [index, onlyOneExpandedTree, resolvedActiveId, setActiveId]);
+  }, [index, onlyOneExpandedTree, resolvedFocusedId, setFocusedId]);
   const collapse = useCallback25((id, options) => {
-    if (!options?.isFocusing && resolvedActiveId != null) {
-      const activeEntry = index.byId.get(resolvedActiveId);
-      if (activeEntry != null && isAncestorOf(id, activeEntry.path)) return;
+    if (!options?.isFocusing && resolvedFocusedId != null) {
+      const focusedEntry = index.byId.get(resolvedFocusedId);
+      if (focusedEntry != null && isAncestorOf(id, focusedEntry.path)) return;
     }
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
     }
     const descendantIds = getDescendantIds(index, id);
     setExpandedIds((prev) => {
@@ -14271,12 +14318,12 @@ function useTreeNavigation({
       }
       return next2;
     });
-  }, [index, resolvedActiveId, setActiveId]);
+  }, [index, resolvedFocusedId, setFocusedId]);
   const toggleExpansion = useCallback25((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
       setExpandedIds((prev) => {
         if (prev.has(id)) {
           const next3 = new Set(prev);
@@ -14301,44 +14348,45 @@ function useTreeNavigation({
     } else {
       expand(id);
     }
-  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setActiveId]);
+  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setFocusedId]);
   const next = useCallback25(() => {
-    if (items.length === 0) return;
-    if (resolvedActiveId == null) {
-      navigateTo(items[0].id);
+    if (visibleItems.length === 0) return;
+    if (resolvedFocusedId == null) {
+      navigateTo(visibleItems[0].id);
       return;
     }
-    const currentIndex = items.findIndex((item) => item.id === resolvedActiveId);
+    const currentIndex = visibleItems.findIndex((item) => item.id === resolvedFocusedId);
     const startIndex = currentIndex < 0 ? 0 : currentIndex;
-    if (startIndex < items.length - 1) {
-      navigateTo(items[startIndex + 1].id);
+    if (startIndex < visibleItems.length - 1) {
+      navigateTo(visibleItems[startIndex + 1].id);
       return;
     }
-  }, [items, resolvedActiveId, navigateTo]);
+  }, [visibleItems, resolvedFocusedId, navigateTo]);
   const previous = useCallback25(() => {
-    if (items.length === 0) return;
-    if (resolvedActiveId == null) {
-      navigateTo(items[items.length - 1].id);
+    if (visibleItems.length === 0) return;
+    if (resolvedFocusedId == null) {
+      navigateTo(visibleItems[visibleItems.length - 1].id);
       return;
     }
-    const currentIndex = items.findIndex((item) => item.id === resolvedActiveId);
-    const startIndex = currentIndex < 0 ? items.length - 1 : currentIndex;
+    const currentIndex = visibleItems.findIndex((item) => item.id === resolvedFocusedId);
+    const startIndex = currentIndex < 0 ? visibleItems.length - 1 : currentIndex;
     if (startIndex > 0) {
-      navigateTo(items[startIndex - 1].id);
+      navigateTo(visibleItems[startIndex - 1].id);
       return;
     }
-  }, [items, resolvedActiveId, navigateTo]);
+  }, [visibleItems, resolvedFocusedId, navigateTo]);
   const first = useCallback25(() => {
-    if (items.length === 0) return;
-    navigateTo(items[0].id);
-  }, [items, navigateTo]);
+    if (visibleItems.length === 0) return;
+    navigateTo(visibleItems[0].id);
+  }, [visibleItems, navigateTo]);
   const last = useCallback25(() => {
-    if (items.length === 0) return;
-    navigateTo(items[items.length - 1].id);
-  }, [items, navigateTo]);
+    if (visibleItems.length === 0) return;
+    navigateTo(visibleItems[visibleItems.length - 1].id);
+  }, [visibleItems, navigateTo]);
   return useMemo20(() => ({
-    items,
-    activeItem,
+    visibleItems,
+    allItems,
+    focusedItem,
     navigateTo,
     expand,
     collapse,
@@ -14347,7 +14395,7 @@ function useTreeNavigation({
     previous,
     first,
     last
-  }), [items, activeItem, navigateTo, expand, collapse, toggleExpansion, next, previous, first, last]);
+  }), [visibleItems, allItems, focusedItem, navigateTo, expand, collapse, toggleExpansion, next, previous, first, last]);
 }
 
 // src/components/layout/navigation/navigation-menus/NavigationContext.tsx
@@ -14355,22 +14403,41 @@ import { jsx as jsx40 } from "react/jsx-runtime";
 var NavigationContext = createContext11(null);
 function NavigationProvider({
   children,
-  ...options
+  activeId = null,
+  ...treeOptions
 }) {
-  const navigation = useTreeNavigation(options);
+  const navigation = useTreeNavigation({
+    ...treeOptions,
+    initialFocusedId: treeOptions.initialFocusedId ?? activeId ?? treeOptions.nodes[0]?.id ?? null
+  });
   const itemRefs = useRef23(/* @__PURE__ */ new Map());
-  const focusedId = navigation.activeItem?.id ?? navigation.items[0]?.id ?? null;
+  const [hasNavigatedToActiveId, setHasNavigatedToActiveId] = useState22(false);
+  useEffect28(() => {
+    if (activeId == null || hasNavigatedToActiveId) return;
+    const navigationItem = navigation.allItems.find((item) => item.id === activeId);
+    if (navigationItem == null) return;
+    navigation.navigateTo(activeId);
+    setHasNavigatedToActiveId(true);
+  }, [activeId, navigation, navigation.navigateTo, navigation.allItems, hasNavigatedToActiveId]);
+  const focusedId = useMemo21(() => {
+    return navigation.focusedItem?.id ?? navigation.visibleItems[0]?.id ?? null;
+  }, [navigation.focusedItem, navigation.visibleItems]);
+  const activePath = useMemo21(() => {
+    return resolveTreeNodePath(treeOptions.nodes, activeId);
+  }, [treeOptions.nodes, activeId]);
   const itemStateById = useMemo21(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of navigation.items) {
+    for (const item of navigation.allItems) {
       map.set(item.id, {
         expanded: item.expanded,
         isFocused: focusedId === item.id,
+        isActive: activeId === item.id,
+        isOnActivePath: activePath?.includes(item.id) ?? false,
         path: item.path
       });
     }
     return map;
-  }, [navigation.items, focusedId]);
+  }, [navigation.allItems, focusedId, activeId, activePath]);
   const getItemState = useCallback26((id) => {
     return itemStateById.get(id) ?? null;
   }, [itemStateById]);
@@ -14386,9 +14453,12 @@ function NavigationProvider({
     itemRefs.current.get(focusedId)?.focus();
   }, [focusedId]);
   const value = useMemo21(() => ({
-    activeItem: navigation.activeItem,
+    focusedItem: navigation.focusedItem,
     focusedId,
-    items: navigation.items,
+    activeId,
+    activePath,
+    visibleItems: navigation.visibleItems,
+    allItems: navigation.allItems,
     getItemState,
     navigateTo: navigation.navigateTo,
     expand: navigation.expand,
@@ -14400,8 +14470,9 @@ function NavigationProvider({
     toggleExpansion: navigation.toggleExpansion,
     registerItemRef
   }), [
-    navigation.activeItem,
-    navigation.items,
+    navigation.focusedItem,
+    navigation.visibleItems,
+    navigation.allItems,
     navigation.navigateTo,
     navigation.expand,
     navigation.collapse,
@@ -14411,6 +14482,8 @@ function NavigationProvider({
     navigation.last,
     navigation.toggleExpansion,
     focusedId,
+    activeId,
+    activePath,
     getItemState,
     registerItemRef
   ]);
@@ -14543,32 +14616,19 @@ function VerticalNavigationItem({
   const handleHeaderActivate = useCallback27(() => {
     toggleExpansion(id, { isFocusing: true });
   }, [id, toggleExpansion]);
-  const handleLeafActivate = useCallback27((event) => {
-    if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
+  const handleLeafActivate = useCallback27(() => {
     navigateTo(id);
-  }, [id, navigateTo]);
-  const labelContent = url == null ? label : external ? /* @__PURE__ */ jsxs23(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: [
-        label,
-        /* @__PURE__ */ jsx41(ExternalLink2, { className: "vertical-navigation-item-link-external-icon" })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx41(
-    "a",
-    {
-      href: url,
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: label
+    if (url == null) return;
+    if (external) {
+      window.open(url, "_blank", "noopener,noreferrer");
+      return;
     }
-  );
+    window.location.assign(url);
+  }, [external, id, navigateTo, url]);
+  const labelContent = url == null ? label : external ? /* @__PURE__ */ jsxs23("span", { "data-name": "vertical-navigation-item-link", children: [
+    label,
+    /* @__PURE__ */ jsx41(ExternalLink2, { className: "vertical-navigation-item-link-external-icon" })
+  ] }) : /* @__PURE__ */ jsx41("span", { "data-name": "vertical-navigation-item-link", children: label });
   if (!hasChildren) {
     return /* @__PURE__ */ jsx41(
       "li",
@@ -14646,12 +14706,12 @@ function VerticalNavigationTree({
 }
 
 // src/components/layout/app/AppPage.tsx
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
   const translation = useHightideTranslation();
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
   const ref = useRef25(null);
-  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
     isOpen && /* @__PURE__ */ jsx43(
       "div",
       {
@@ -14706,22 +14766,49 @@ var AppPageSidebarWithNavigation = ({
   footer,
   navigationItems,
   contentOverwrite,
-  initialActiveId,
+  initialFocusedId,
+  focusedId,
+  onFocusedIdChange,
+  activeId,
   ...props
 }) => {
   return /* @__PURE__ */ jsx43(AppSidebar, { ...props, children: /* @__PURE__ */ jsxs24("div", { className: "app-page-sidebar-with-navigation", children: [
     header && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-header", children: header }),
-    navigationItems && !contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ jsx43(VerticalNavigationTree, { items: navigationItems, initialActiveId }) }),
+    navigationItems && !contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ jsx43(
+      VerticalNavigationTree,
+      {
+        items: navigationItems,
+        initialFocusedId,
+        focusedId,
+        onFocusedIdChange,
+        activeId
+      }
+    ) }),
     contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: contentOverwrite }),
     footer && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-footer", children: footer })
   ] }) });
 };
+function findActiveIdByUrl(items, activeUrl) {
+  for (const item of items) {
+    if (item.url === activeUrl) return item.id;
+    if (item.items != null) {
+      const found = findActiveIdByUrl(item.items, activeUrl);
+      if (found != null) return found;
+    }
+  }
+  return null;
+}
 var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const translation = useHightideTranslation();
-  const [isSidebarOpen, setIsSidebarOpen] = useState22(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState23(false);
+  const resolvedActiveId = useMemo22(() => {
+    if (sidebarProps.activeId !== void 0) return sidebarProps.activeId;
+    if (sidebarProps.activeUrl == null || sidebarProps.items == null) return null;
+    return findActiveIdByUrl(sidebarProps.items, sidebarProps.activeUrl);
+  }, [sidebarProps.activeId, sidebarProps.activeUrl, sidebarProps.items]);
   const toNavigationItems = useCallback28((items) => {
     return items?.map((item) => {
-      const isActive = sidebarProps.activeUrl === item.url && !!sidebarProps.activeUrl || item.id === sidebarProps.initialActiveId;
+      const isActive = item.id === resolvedActiveId;
       return {
         id: item.id,
         label: /* @__PURE__ */ jsxs24("span", { className: "app-page-navigation-item-label", "data-active-page": isActive ? "" : void 0, children: [
@@ -14733,25 +14820,10 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
         items: toNavigationItems(item.items)
       };
     }) ?? void 0;
-  }, [sidebarProps.activeUrl, sidebarProps.initialActiveId]);
+  }, [resolvedActiveId]);
   const navigationItems = useMemo22(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
-  const initialActiveId = useMemo22(() => {
-    if (sidebarProps.initialActiveId) return sidebarProps.initialActiveId;
-    if (!navigationItems) return void 0;
-    const findActiveId = (items) => {
-      for (const item of items) {
-        if (item.url === sidebarProps.activeUrl) return item.id;
-        if (item.items) {
-          const found = findActiveId(item.items);
-          if (found) return found;
-        }
-      }
-      return void 0;
-    };
-    return findActiveId(navigationItems);
-  }, [navigationItems, sidebarProps.activeUrl, sidebarProps.initialActiveId]);
   return /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -14768,7 +14840,10 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
             footer: sidebarProps.footer,
             navigationItems,
             contentOverwrite: sidebarProps.contentOverwrite,
-            initialActiveId
+            initialFocusedId: sidebarProps.initialFocusedId,
+            focusedId: sidebarProps.focusedId,
+            onFocusedIdChange: sidebarProps.onFocusedIdChange,
+            activeId: resolvedActiveId
           }
         ),
         /* @__PURE__ */ jsxs24("div", { "data-name": "app-page-content", children: [
@@ -15107,7 +15182,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx18 from "clsx";
 
 // src/global-contexts/ThemeContext.tsx
-import { createContext as createContext13, useCallback as useCallback30, useContext as useContext15, useEffect as useEffect29, useMemo as useMemo25, useState as useState23 } from "react";
+import { createContext as createContext13, useCallback as useCallback30, useContext as useContext15, useEffect as useEffect29, useMemo as useMemo25, useState as useState24 } from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
@@ -15121,7 +15196,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useStorage({ key: "theme", defaultValue: "system" });
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = useState23("system");
+  const [themePreference, setThemePreference] = useState24("system");
   const resolvedTheme = useMemo25(() => {
     if (theme && theme !== "system") {
       return theme;
@@ -15213,7 +15288,6 @@ var ThemeSelect = ({ ...props }) => {
     {
       value: theme,
       onEditComplete: (value) => {
-        console.log("onEditComplete", value);
         props.onEditComplete?.(value);
         setTheme(value);
       },
@@ -15459,7 +15533,7 @@ var ErrorComponent = ({
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-import { useState as useState24 } from "react";
+import { useState as useState25 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
 import { clsx as clsx20 } from "clsx";
@@ -15470,7 +15544,7 @@ var LoadingContainer = ({ className }) => {
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
 import { clsx as clsx21 } from "clsx";
-import { Fragment as Fragment6, jsx as jsx58 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx58 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -15480,8 +15554,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState24(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState24(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState25(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState25(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -15490,12 +15564,12 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx58(Fragment6, { children: loadingComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className }) });
+    return /* @__PURE__ */ jsx58(Fragment7, { children: loadingComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx58(Fragment6, { children: errorComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className: clsx21("bg-negative", className) }) });
+    return /* @__PURE__ */ jsx58(Fragment7, { children: errorComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className: clsx21("bg-negative", className) }) });
   }
-  return /* @__PURE__ */ jsx58(Fragment6, { children });
+  return /* @__PURE__ */ jsx58(Fragment7, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
@@ -15546,9 +15620,9 @@ var BreadCrumbs = ({ crumbs }) => {
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon2, XIcon } from "lucide-react";
 import { useEffect as useEffect30 } from "react";
-import { useCallback as useCallback31, useId as useId14, useRef as useRef28, useState as useState25 } from "react";
+import { useCallback as useCallback31, useId as useId14, useRef as useRef28, useState as useState26 } from "react";
 import clsx23 from "clsx";
-import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -15558,7 +15632,7 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState25(false);
+  const [isOpen, setOpen] = useState26(false);
   const containerRef = useRef28(null);
   const triggerRef = useRef28(null);
   const id = useId14();
@@ -15576,7 +15650,7 @@ var NavigationItemWithSubItem = ({
     }
   }, []);
   const { zIndex } = useOverlayRegistry();
-  return /* @__PURE__ */ jsxs34(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment8, { children: [
     /* @__PURE__ */ jsxs34(
       "button",
       {
@@ -15635,7 +15709,7 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
-  const [isMobileOpen, setIsMobileOpen] = useState25(false);
+  const [isMobileOpen, setIsMobileOpen] = useState26(false);
   const id = useId14();
   const menuRef = useRef28(null);
   useEffect30(() => {
@@ -15653,7 +15727,7 @@ var Navigation = ({ ...props }) => {
     /* @__PURE__ */ jsx61(
       IconButton,
       {
-        tooltip: translation("openNavigation"),
+        tooltip: translation("menu"),
         coloringStyle: "text",
         color: "neutral",
         onClick: () => setIsMobileOpen(true),
@@ -15706,7 +15780,7 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx24 from "clsx";
-import { useEffect as useEffect31, useState as useState26 } from "react";
+import { useEffect as useEffect31, useState as useState27 } from "react";
 import { jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
@@ -15715,7 +15789,7 @@ var Pagination = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = useState26((pageIndex + 1).toString());
+  const [value, setValue] = useState27((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
@@ -15942,7 +16016,7 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-import { useId as useId15, useMemo as useMemo28, useState as useState27 } from "react";
+import { useId as useId15, useMemo as useMemo28, useState as useState28 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
 function PopUpRoot({
   children,
@@ -15959,7 +16033,7 @@ function PopUpRoot({
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = useState27(null);
+  const [triggerRef, setTriggerRef] = useState28(null);
   const popUpId = useMemo28(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
   const triggerId = useMemo28(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
   const contextValue = useMemo28(() => ({
@@ -16149,7 +16223,7 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-import { useCallback as useCallback33, useEffect as useEffect33, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef30, useState as useState28 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect33, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef30, useState as useState29 } from "react";
 
 // src/components/layout/table/TableContext.tsx
 import { createContext as createContext15, useContext as useContext17 } from "react";
@@ -17236,9 +17310,9 @@ var TableProvider = ({
 }) => {
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
-  const [registeredColumns, setRegisteredColumns] = useState28([]);
+  const [registeredColumns, setRegisteredColumns] = useState29([]);
   const containerRef = useRef30(null);
-  const [, setTableState] = useState28({
+  const [, setTableState] = useState29({
     columnSizing: {},
     columnOrder: [],
     columnFilters: [],
@@ -17263,7 +17337,7 @@ var TableProvider = ({
       pageSize: 10
     }
   });
-  const [targetWidth, setTargetWidth] = useState28(void 0);
+  const [targetWidth, setTargetWidth] = useState29(void 0);
   useLayoutEffect6(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
@@ -17525,15 +17599,15 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect46, useId as useId20, useMemo as useMemo39, useRef as useRef39, useState as useState37 } from "react";
+import { useEffect as useEffect46, useId as useId20, useMemo as useMemo39, useRef as useRef39, useState as useState38 } from "react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 import { Check as Check3, TrashIcon } from "lucide-react";
-import { forwardRef as forwardRef25, useEffect as useEffect45, useId as useId19, useMemo as useMemo38, useState as useState36 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect45, useId as useId19, useMemo as useMemo38, useState as useState37 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle11, useMemo as useMemo34, useRef as useRef35, useState as useState33 } from "react";
+import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle11, useMemo as useMemo34, useRef as useRef35, useState as useState34 } from "react";
 import { CalendarIcon, X as X4 } from "lucide-react";
 import clsx31 from "clsx";
 
@@ -17721,7 +17795,7 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucide-react";
 import clsx29 from "clsx";
 
@@ -17847,7 +17921,7 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback35, useEffect as useEffect36, useMemo as useMemo32, useRef as useRef33, useState as useState29 } from "react";
+import { memo, useCallback as useCallback35, useEffect as useEffect36, useMemo as useMemo32, useRef as useRef33, useState as useState30 } from "react";
 import clsx28 from "clsx";
 import { jsx as jsx73, jsxs as jsxs42 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
@@ -17860,7 +17934,7 @@ var YearRow = memo(function YearRow2({
 }) {
   const ref = useRef33(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = useState29(false);
+  const [isExpanded, setIsExpanded] = useState30(false);
   useEffect36(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
@@ -17990,15 +18064,15 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = useState30(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = useState30(initialDisplay);
+  const [displayedMonth, setDisplayedMonth] = useState31(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = useState31(initialDisplay);
   return /* @__PURE__ */ jsxs43("div", { className: clsx29("flex-col-3", className), children: [
     /* @__PURE__ */ jsxs43("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs43(
         Button,
         {
           size: "sm",
-          coloringStyle: "text",
+          color: "neutral",
           className: clsx29("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
@@ -18153,8 +18227,8 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
-import { useEffect as useEffect37, useState as useState31 } from "react";
-import { Fragment as Fragment8, jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useEffect as useEffect37, useState as useState32 } from "react";
+import { Fragment as Fragment9, jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
 var DateTimePickerDialog = ({
   initialValue = null,
   value,
@@ -18181,11 +18255,11 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [pickerState, setPickerState] = useState31(state ?? /* @__PURE__ */ new Date());
+  const [pickerState, setPickerState] = useState32(state ?? /* @__PURE__ */ new Date());
   useEffect37(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
-  return /* @__PURE__ */ jsxs45(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment9, { children: [
     /* @__PURE__ */ jsx76("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ jsx76(
       "span",
       {
@@ -18256,7 +18330,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/components/user-interaction/input/DateTimeField.tsx
-import { forwardRef as forwardRef19, useEffect as useEffect38, useLayoutEffect as useLayoutEffect7, useMemo as useMemo33, useRef as useRef34, useState as useState32 } from "react";
+import { forwardRef as forwardRef19, useEffect as useEffect38, useLayoutEffect as useLayoutEffect7, useMemo as useMemo33, useRef as useRef34, useState as useState33 } from "react";
 import clsx30 from "clsx";
 
 // src/components/user-interaction/input/dateTimeSegments.ts
@@ -18563,11 +18637,11 @@ var DateTimeField = forwardRef19(function DateTimeField2({
     [locale, mode, precision, is24Hour]
   );
   const editableTypes = useMemo33(() => editableTypesOf(layout), [layout]);
-  const [editState, setEditState] = useState32(() => ({
+  const [editState, setEditState] = useState33(() => ({
     values: value ? decomposeDate(value, layout, is24Hour) : {},
     buffer: null
   }));
-  const [focusedType, setFocusedType] = useState32(null);
+  const [focusedType, setFocusedType] = useState33(null);
   const editStateRef = useRef34(editState);
   editStateRef.current = editState;
   const segmentRefs = useRef34(/* @__PURE__ */ new Map());
@@ -18813,13 +18887,13 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
   const translation = useHightideTranslation();
   const { timeZone: contextTimeZone } = useLocale();
   const timeZone = timeZoneOverride ?? contextTimeZone;
-  const [isOpen, setIsOpen] = useState33(false);
+  const [isOpen, setIsOpen] = useState34(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = useState33(state);
+  const [dialogValue, setDialogValue] = useState34(state);
   const changeOpenWrapper = useCallback36((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
@@ -18848,6 +18922,9 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
   const focusField = () => {
     fieldRef.current?.querySelector('[data-name="date-time-segment"]')?.focus();
   };
+  const hasClear = !required && allowClear && !readOnly && !disabled && state !== null;
+  const hasTimePicker = !readOnly;
+  const hasActions = hasClear || hasTimePicker || actions.length > 0;
   return /* @__PURE__ */ jsxs46("div", { ...containerProps, className: clsx31("relative w-full", containerProps?.className), children: [
     /* @__PURE__ */ jsxs46(
       "div",
@@ -18865,6 +18942,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
         className: clsx31("cursor-text", props.className),
         "data-name": props["data-name"] ?? "date-time-input",
         "data-value": PropsUtil.dataAttributes.bool(!!state),
+        "data-has-actions": PropsUtil.dataAttributes.bool(hasActions),
         ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
         ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
         children: [
@@ -18883,13 +18961,12 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
               onValueChange: (next) => setState(fromZoned(next)),
               onEditComplete: (next) => onEditComplete?.(fromZoned(next)),
               "aria-labelledby": props["aria-labelledby"],
-              "aria-describedby": props["aria-describedby"],
-              className: "grow"
+              "aria-describedby": props["aria-describedby"]
             }
           ),
           /* @__PURE__ */ jsxs46("div", { className: "flex-row-1 items-center", children: [
             actions,
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !required && allowClear && !readOnly && !disabled && state !== null, children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: hasClear, children: /* @__PURE__ */ jsx78(
               IconButton,
               {
                 tooltip: translation("clearValue"),
@@ -18903,7 +18980,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
                 children: /* @__PURE__ */ jsx78(X4, { className: "size-5" })
               }
             ) }),
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: hasTimePicker, children: /* @__PURE__ */ jsx78(
               IconButton,
               {
                 tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -18977,7 +19054,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
 import { forwardRef as forwardRef24 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-import { useCallback as useCallback39, useEffect as useEffect41, useId as useId17, useMemo as useMemo37, useState as useState35 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect41, useId as useId17, useMemo as useMemo37, useState as useState36 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
 import { createContext as createContext16, useContext as useContext18 } from "react";
@@ -18993,7 +19070,7 @@ import {
   useCallback as useCallback38,
   useEffect as useEffect40,
   useMemo as useMemo36,
-  useState as useState34
+  useState as useState35
 } from "react";
 
 // src/hooks/useMultiSelection.ts
@@ -19046,8 +19123,8 @@ function useMultiSelect({
   initialIsOpen = false,
   typeAheadResetMs = 500
 }) {
-  const [isOpen, setIsOpen] = useState34(initialIsOpen);
-  const [searchQuery, setSearchQuery] = useState34("");
+  const [isOpen, setIsOpen] = useState35(initialIsOpen);
+  const [searchQuery, setSearchQuery] = useState35("");
   const selectionOptions = useMemo36(
     () => options.map((o) => ({ id: o.id, disabled: o.disabled })),
     [options]
@@ -19221,10 +19298,10 @@ function MultiSelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = useState35(null);
-  const [options, setOptions] = useState35([]);
+  const [triggerRef, setTriggerRef] = useState36(null);
+  const [options, setOptions] = useState36([]);
   const generatedId = useId17();
-  const [ids, setIds] = useState35({
+  const [ids, setIds] = useState36({
     trigger: "multi-select-" + generatedId,
     content: "multi-select-content-" + generatedId,
     listbox: "multi-select-listbox-" + generatedId,
@@ -19961,8 +20038,8 @@ var DateFilterPopUp = forwardRef25(function DateFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState36(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState36(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState37(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState37(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ jsxs52(
@@ -20103,8 +20180,8 @@ var DatetimeFilterPopUp = forwardRef25(function DatetimeFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState36(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState36(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState37(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState37(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ jsxs52(
@@ -20426,7 +20503,7 @@ var FilterPopUp = forwardRef25(function FilterPopUp2({
 });
 
 // src/components/layout/table/TableFilterButton.tsx
-import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   header
@@ -20434,11 +20511,11 @@ var TableFilterButton = ({
   const translation = useHightideTranslation();
   const column = header.column;
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState37(columnFilterValue);
+  const [filterValue, setFilterValue] = useState38(columnFilterValue);
   const hasFilter = !!filterValue;
   const anchorRef = useRef39(null);
   const containerRef = useRef39(null);
-  const [isOpen, setIsOpen] = useState37(false);
+  const [isOpen, setIsOpen] = useState38(false);
   const id = useId20();
   const ids = useMemo39(() => ({
     button: `table-filter-button-${id}`,
@@ -20453,7 +20530,7 @@ var TableFilterButton = ({
   if (isTagsFilter && !hasTagsMetaData) {
     return null;
   }
-  return /* @__PURE__ */ jsxs53(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment10, { children: [
     /* @__PURE__ */ jsxs53(
       IconButton,
       {
@@ -20567,7 +20644,7 @@ var DataTypeUtils = {
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { Fragment as Fragment10, jsx as jsx87, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs54 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
   const handleResizeMove = useCallback41((e) => {
@@ -20612,7 +20689,7 @@ var TableHeader = ({ isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ jsxs54(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs54(Fragment11, { children: [
     table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx87(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ jsx87("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx87(
       "col",
       {
@@ -20633,7 +20710,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: clsx35("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx87(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs54("div", { className: "flex-row-1 items-center truncate", children: [
+            /* @__PURE__ */ jsx87(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs54("div", { className: "table-header-cell-content", children: [
               /* @__PURE__ */ jsx87(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx87(
                 TableSortButton,
                 {
@@ -20703,7 +20780,7 @@ var TableHeader = ({ isSticky = false }) => {
 };
 
 // src/components/layout/table/VirtualizedTableBody.tsx
-import { useEffect as useEffect48, useRef as useRef40, useState as useState38 } from "react";
+import { useEffect as useEffect48, useRef as useRef40, useState as useState39 } from "react";
 import { flexRender as flexRender4 } from "@tanstack/react-table";
 import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
 import clsx36 from "clsx";
@@ -20717,8 +20794,8 @@ var VirtualizedTableBody = ({
   const { containerRef } = useTableContainerContext();
   const rows = table.getRowModel().rows;
   const bodyRef = useRef40(null);
-  const [isMounted, setIsMounted] = useState38(false);
-  const [scrollMargin, setScrollMargin] = useState38(0);
+  const [isMounted, setIsMounted] = useState39(false);
+  const [scrollMargin, setScrollMargin] = useState39(0);
   useEffect48(() => setIsMounted(true), []);
   useEffect48(() => {
     if (scroll !== "window") return;
@@ -21032,7 +21109,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect49, useMemo as useMemo41, useState as useState39 } from "react";
+import { memo as memo2, useEffect as useEffect49, useMemo as useMemo41, useState as useState40 } from "react";
 import { jsx as jsx94 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -21044,7 +21121,7 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = useState39({
+  const [column] = useState40({
     ...props,
     filterFn
   });
@@ -21070,7 +21147,7 @@ var TableColumn = (props) => {
 // src/components/layout/table/TableColumnSwitcher.tsx
 import { useMemo as useMemo42, useRef as useRef41, useId as useId21 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight6, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx95, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx95, jsxs as jsxs60 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
@@ -21233,7 +21310,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
           const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
           const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
           return /* @__PURE__ */ jsxs60("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ jsx95("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            /* @__PURE__ */ jsx95("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21258,7 +21335,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   children: /* @__PURE__ */ jsx95(ChevronRight6, { className: "size-4" })
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            ] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21285,7 +21362,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
               )
             ] }) }),
             /* @__PURE__ */ jsx95("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
-            /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21346,7 +21423,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 import { forwardRef as forwardRef28 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-import { useCallback as useCallback45, useId as useId22, useMemo as useMemo44, useState as useState40 } from "react";
+import { useCallback as useCallback45, useId as useId22, useMemo as useMemo44, useState as useState41 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
 import { createContext as createContext18, useContext as useContext20 } from "react";
@@ -21432,10 +21509,10 @@ function ComboboxRoot({
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = useState40([]);
-  const [listRef, setListRef] = useState40(null);
+  const [options, setOptions] = useState41([]);
+  const [listRef, setListRef] = useState41(null);
   const generatedId = useId22();
-  const [ids, setIds] = useState40({
+  const [ids, setIds] = useState41({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
@@ -21743,7 +21820,7 @@ var ComboboxOption = forwardRef29(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState41 } from "react";
+import { useState as useState42 } from "react";
 import { clsx as clsx41 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -21766,7 +21843,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState41(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState42(false);
   return /* @__PURE__ */ jsxs63(
     TooltipRoot,
     {
@@ -21815,9 +21892,9 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback47, useRef as useRef44, useState as useState42 } from "react";
+import { useCallback as useCallback47, useRef as useRef44, useState as useState43 } from "react";
 import clsx42 from "clsx";
-import { Fragment as Fragment12, jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
@@ -21842,14 +21919,14 @@ var Menu = ({
   ...props
 }) => {
   const triggerRef = useRef44(null);
-  const [isOpen, setIsOpen] = useState42(false);
+  const [isOpen, setIsOpen] = useState43(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
     toggleOpen: () => setIsOpen((prevState) => !prevState),
     disabled
   };
-  return /* @__PURE__ */ jsxs64(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment13, { children: [
     trigger(bag, useCallback47((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ jsx102(
       PopUp,
@@ -21985,7 +22062,7 @@ var MultiSelectChipDisplay = forwardRef30(
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback48, useEffect as useEffect53, useState as useState43 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect53, useState as useState44 } from "react";
 import clsx43 from "clsx";
 import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
 var up = 1;
@@ -22006,7 +22083,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState43({
+  }, setAnimation] = useState44({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -22327,9 +22404,9 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-import { useMemo as useMemo45, useState as useState44 } from "react";
+import { useMemo as useMemo45, useState as useState45 } from "react";
 import { PlusIcon } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
@@ -22339,7 +22416,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = useState44(void 0);
+  const [editState, setEditState] = useState45(void 0);
   const valueWithEditState = useMemo45(() => {
     let foundEditValue = false;
     for (const item of value) {
@@ -22404,7 +22481,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx107(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx107(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs68(Fragment13, { children: [
+            /* @__PURE__ */ jsx107(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx107(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs68(Fragment14, { children: [
               /* @__PURE__ */ jsx107("span", { className: "font-bold", children: item.label }),
               filterValueToLabel(columnFilter.value, { tags: item.tags })
             ] }) }) }),
@@ -22637,7 +22714,7 @@ var TimeDisplay = ({
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-import { forwardRef as forwardRef32, useState as useState45 } from "react";
+import { forwardRef as forwardRef32, useState as useState46 } from "react";
 import { ClockFading, ClockPlus } from "lucide-react";
 import { jsx as jsx110 } from "react/jsx-runtime";
 var FlexibleDateTimeInput = forwardRef32(function FlexibleDateTimeInput2({
@@ -22662,7 +22739,7 @@ var FlexibleDateTimeInput = forwardRef32(function FlexibleDateTimeInput2({
   const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
   const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
   const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
-  const [mode, setMode] = useState45(() => {
+  const [mode, setMode] = useState46(() => {
     if (value && !hasFixedTime(value)) {
       return "dateTime";
     }
@@ -22708,7 +22785,7 @@ var FlexibleDateTimeInput = forwardRef32(function FlexibleDateTimeInput2({
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId25 } from "react";
-import { forwardRef as forwardRef33, useState as useState46 } from "react";
+import { forwardRef as forwardRef33, useState as useState47 } from "react";
 import clsx46 from "clsx";
 import { jsx as jsx111, jsxs as jsxs70 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef33(function InsideLabelInput2({
@@ -22724,7 +22801,7 @@ var InsideLabelInput = forwardRef33(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState46(false);
+  const [isFocused, setIsFocused] = useState47(false);
   const generatedId = useId25();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs70("div", { className: clsx46("relative"), children: [
@@ -22814,7 +22891,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle15, useRef as useRef46, useState as useState47 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle15, useRef as useRef46, useState as useState48 } from "react";
 import { Pencil } from "lucide-react";
 import clsx48 from "clsx";
 import { jsx as jsx113, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -22831,7 +22908,7 @@ var ToggleableInput = forwardRef34(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState47(initialState !== "display");
+  const [isEditing, setIsEditing] = useState48(initialState !== "display");
   const innerRef = useRef46(null);
   useImperativeHandle15(forwardedRef, () => innerRef.current);
   useEffect54(() => {
@@ -22877,7 +22954,7 @@ import { Check as Check6 } from "lucide-react";
 // src/components/user-interaction/properties/PropertyBase.tsx
 import clsx49 from "clsx";
 import { AlertTriangle, Trash, X as X5 } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -22896,7 +22973,7 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  const renderActionButtons = () => /* @__PURE__ */ jsxs73(Fragment14, { children: [
+  const renderActionButtons = () => /* @__PURE__ */ jsxs73(Fragment15, { children: [
     isClearEnabled && /* @__PURE__ */ jsx114(
       IconButton,
       {
@@ -23057,6 +23134,7 @@ var DateProperty = ({
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
+          className: "flex-row-4 pr-0",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid)
         }
       )
@@ -23282,14 +23360,14 @@ var PolymorphicSlot = forwardRef35(function PolymorphicSlot2({
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect55, useState as useState48 } from "react";
+import { useEffect as useEffect55, useState as useState49 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState48(show);
-  const [isTransitioning, setIsTransitioning] = useState48(!isOpen);
+  const [isOpen, setIsOpen] = useState49(show);
+  const [isTransitioning, setIsTransitioning] = useState49(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
   useEffect55(() => {
     setIsOpen(show);
@@ -23397,11 +23475,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect58, useLayoutEffect as useLayoutEffect8, useState as useState49 } from "react";
+import { useEffect as useEffect58, useLayoutEffect as useLayoutEffect8, useState as useState50 } from "react";
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
 var useIsomorphicEffect = isClient ? useLayoutEffect8 : useEffect58;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState49(false);
+  const [isMounted, setIsMounted] = useState50(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -23453,9 +23531,9 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect60, useState as useState50 } from "react";
+import { useEffect as useEffect60, useState as useState51 } from "react";
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState50(overwriteValue);
+  const [state, setState] = useState51(overwriteValue);
   useEffect60(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
@@ -23539,7 +23617,6 @@ var useSwipeGesture = ({
     const listenTouch = inputMode === "touch" || inputMode === "both";
     const listenMouse = inputMode === "mouse" || inputMode === "both";
     const onGestureStart = (x, y, eventTarget) => {
-      console.log("onGestureStart", x, y);
       if (!isWithinStartRegion(x, y)) return;
       const scrollableParent = findScrollableParent(eventTarget);
       gestureEndRef.current = null;
@@ -23552,7 +23629,6 @@ var useSwipeGesture = ({
       isScrollingRef.current = !!scrollableParent;
     };
     const onGestureMove = (x, y, eventTarget) => {
-      console.log("onGestureMove", x, y);
       const scrollableParent = findScrollableParent(eventTarget);
       const currentScrollY = scrollableParent?.scrollTop ?? window.scrollY;
       gestureEndRef.current = {
@@ -23669,13 +23745,13 @@ var useSwipeGesture = ({
 };
 
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect62, useState as useState51 } from "react";
+import { useEffect as useEffect62, useState as useState52 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
   const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
   const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
   const timeZone = timeZoneOverride ?? contextTimeZone;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = useState51({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState52({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
@@ -24272,6 +24348,7 @@ export {
   processModelLibrary,
   range,
   resolveSetState,
+  resolveTreeNodePath,
   segmentBounds,
   segmentPlaceholder,
   setDayPeriod,