@helpwave/hightide 0.12.5 → 0.12.7

package/dist/index.js

@@ -7129,6 +7129,7 @@ __export(index_exports, {
   processModelLibrary: () => processModelLibrary,
   range: () => range,
   resolveSetState: () => resolveSetState,
+  resolveTreeNodePath: () => resolveTreeNodePath,
   segmentBounds: () => segmentBounds,
   segmentPlaceholder: () => segmentPlaceholder,
   setDayPeriod: () => setDayPeriod,
@@ -7321,6 +7322,125 @@ function Visibility({ children, isVisible }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: isVisible && children });
 }
 
+// src/components/display-and-visualization/Avatar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var Avatar = ({
+  image: initialImage,
+  name,
+  size = "md",
+  ...props
+}) => {
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  const [hasLoaded, setHasLoaded] = (0, import_react.useState)(false);
+  const [image, setImage] = (0, import_react.useState)(initialImage);
+  const displayName = (0, import_react.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);
+  (0, import_react.useEffect)(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false);
+      setHasLoaded(false);
+    }
+    setImage(initialImage);
+  }, [image?.avatarUrl, initialImage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ...props,
+      "data-name": "avatar",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_react2.createElement)(
+    Avatar,
+    {
+      ...avatar,
+      key: index,
+      size,
+      "data-group": ""
+    }
+  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ...props,
+      "data-name": props["data-name"] ?? "avatar-group",
+      "data-size": size ?? void 0,
+      children: [
+        group,
+        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            "data-name": "avatar-group-more",
+            "data-size": size,
+            children: `+ ${notDisplayedProfiles}`
+          }
+        )
+      ]
+    }
+  );
+};
+var AvatarWithStatus = ({
+  status = "unknown",
+  className,
+  size = "md",
+  ...avatarProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx3.default)(className),
+      "data-name": "avatar-with-status",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { ...avatarProps, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            "data-name": "avatar-with-status-dot",
+            "data-size": size ?? void 0,
+            "data-status": status
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/display-and-visualization/Card.tsx
+var import_react3 = require("react");
+var import_clsx4 = __toESM(require("clsx"));
+var import_lucide_react2 = require("lucide-react");
+
 // src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
@@ -7586,130 +7706,24 @@ var PropsUtil = {
   mergeProps
 };
 
-// src/components/display-and-visualization/Avatar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var import_react2 = require("react");
-var Avatar = ({
-  image: initialImage,
-  name,
-  size = "md",
-  ...props
-}) => {
-  const [hasError, setHasError] = (0, import_react.useState)(false);
-  const [hasLoaded, setHasLoaded] = (0, import_react.useState)(false);
-  const [image, setImage] = (0, import_react.useState)(initialImage);
-  const displayName = (0, import_react.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);
-  (0, import_react.useEffect)(() => {
-    if (initialImage?.avatarUrl !== image?.avatarUrl) {
-      setHasError(false);
-      setHasLoaded(false);
-    }
-    setImage(initialImage);
-  }, [image?.avatarUrl, initialImage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar",
-      "data-size": props["data-size"] ?? size ?? void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_react2.createElement)(
-    Avatar,
-    {
-      ...avatar,
-      key: index,
-      size,
-      "data-group": ""
-    }
-  )) });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar-group",
-      "data-size": size ?? void 0,
-      children: [
-        group,
-        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "span",
-          {
-            "data-name": "avatar-group-more",
-            "data-size": size,
-            children: `+ ${notDisplayedProfiles}`
-          }
-        )
-      ]
-    }
-  );
-};
-var AvatarWithStatus = ({
-  isOnline,
-  className,
-  size = "md",
-  ...avatarProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx3.default)(className),
-      "data-name": "avatar-with-status",
-      "data-size": size ?? void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { ...avatarProps, size }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "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
-var import_react3 = require("react");
-var import_clsx4 = __toESM(require("clsx"));
-var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function CardHeaderContent({ title, description, leading, trailing }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    leading != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-leading", children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
+    ] }),
+    trailing != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-trailing", children: trailing })
+  ] });
+}
 var Card = ({
   title,
   description,
   size = "md",
+  leading,
+  trailing,
   children,
   className,
   ...props
@@ -7722,8 +7736,15 @@ var Card = ({
       "data-name": props["data-name"] ?? "card",
       "data-size": size,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7733,7 +7754,8 @@ var ActionCard = (0, import_react3.forwardRef)(function ActionCard2({
   title,
   description,
   size = "md",
-  action,
+  leading,
+  trailing,
   disabled = false,
   children,
   className,
@@ -7769,13 +7791,15 @@ var ActionCard = (0, import_react3.forwardRef)(function ActionCard2({
       role: onClick ? "button" : void 0,
       tabIndex: onClick && !disabled ? 0 : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
-          ] }),
-          action != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-action", children: action })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7785,6 +7809,7 @@ var NavigationCard = (0, import_react3.forwardRef)(function NavigationCard2({
   title,
   description,
   size = "md",
+  leading,
   href,
   isExternal = false,
   children,
@@ -7830,10 +7855,14 @@ var NavigationCard = (0, import_react3.forwardRef)(function NavigationCard2({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            CardHeaderContent,
+            {
+              title,
+              description,
+              leading
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "a",
             {
@@ -14435,6 +14464,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) {
@@ -14471,11 +14516,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;
@@ -14486,77 +14531,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 = (0, import_react57.useMemo)(() => 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 = (0, import_react57.useMemo)(() => {
-    if (activeId == null) return null;
-    if (index.byId.has(activeId)) return activeId;
+  const resolvedFocusedId = (0, import_react57.useMemo)(() => {
+    if (focusedId == null) return null;
+    if (index.byId.has(focusedId)) return focusedId;
     return null;
-  }, [activeId, index]);
+  }, [focusedId, index]);
   const [expandedIds, setExpandedIds] = (0, import_react57.useState)(() => /* @__PURE__ */ new Set());
   (0, import_react57.useEffect)(() => {
-    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 = (0, import_react57.useMemo)(() => {
+    setExpandedIds((prev) => syncExpansionForFocused(prev, entry.path, onlyOneExpandedTree, index));
+  }, [resolvedFocusedId, onlyOneExpandedTree, index]);
+  const visibleItems = (0, import_react57.useMemo)(() => {
     return flattenVisibleItems(nodes, expandedIds);
   }, [nodes, expandedIds]);
-  const activeItem = (0, import_react57.useMemo)(() => {
-    if (resolvedActiveId == null) return null;
-    return items.find((item) => item.id === resolvedActiveId) ?? null;
-  }, [items, resolvedActiveId]);
+  const allItems = (0, import_react57.useMemo)(() => {
+    return flattenAllItems(nodes, expandedIds);
+  }, [nodes, expandedIds]);
+  const focusedItem = (0, import_react57.useMemo)(() => {
+    if (resolvedFocusedId == null) return null;
+    return allItems.find((item) => item.id === resolvedFocusedId) ?? null;
+  }, [allItems, resolvedFocusedId]);
   const navigateTo = (0, import_react57.useCallback)((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 = (0, import_react57.useCallback)((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 = (0, import_react57.useCallback)((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) => {
@@ -14567,12 +14615,12 @@ function useTreeNavigation({
       }
       return next2;
     });
-  }, [index, resolvedActiveId, setActiveId]);
+  }, [index, resolvedFocusedId, setFocusedId]);
   const toggleExpansion = (0, import_react57.useCallback)((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);
@@ -14597,44 +14645,45 @@ function useTreeNavigation({
     } else {
       expand(id);
     }
-  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setActiveId]);
+  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setFocusedId]);
   const next = (0, import_react57.useCallback)(() => {
-    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 = (0, import_react57.useCallback)(() => {
-    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 = (0, import_react57.useCallback)(() => {
-    if (items.length === 0) return;
-    navigateTo(items[0].id);
-  }, [items, navigateTo]);
+    if (visibleItems.length === 0) return;
+    navigateTo(visibleItems[0].id);
+  }, [visibleItems, navigateTo]);
   const last = (0, import_react57.useCallback)(() => {
-    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 (0, import_react57.useMemo)(() => ({
-    items,
-    activeItem,
+    visibleItems,
+    allItems,
+    focusedItem,
     navigateTo,
     expand,
     collapse,
@@ -14643,7 +14692,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
@@ -14651,22 +14700,41 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 var NavigationContext = (0, import_react58.createContext)(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 = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
-  const focusedId = navigation.activeItem?.id ?? navigation.items[0]?.id ?? null;
+  const [hasNavigatedToActiveId, setHasNavigatedToActiveId] = (0, import_react58.useState)(false);
+  (0, import_react58.useEffect)(() => {
+    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 = (0, import_react58.useMemo)(() => {
+    return navigation.focusedItem?.id ?? navigation.visibleItems[0]?.id ?? null;
+  }, [navigation.focusedItem, navigation.visibleItems]);
+  const activePath = (0, import_react58.useMemo)(() => {
+    return resolveTreeNodePath(treeOptions.nodes, activeId);
+  }, [treeOptions.nodes, activeId]);
   const itemStateById = (0, import_react58.useMemo)(() => {
     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 = (0, import_react58.useCallback)((id) => {
     return itemStateById.get(id) ?? null;
   }, [itemStateById]);
@@ -14682,9 +14750,12 @@ function NavigationProvider({
     itemRefs.current.get(focusedId)?.focus();
   }, [focusedId]);
   const value = (0, import_react58.useMemo)(() => ({
-    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,
@@ -14696,8 +14767,9 @@ function NavigationProvider({
     toggleExpansion: navigation.toggleExpansion,
     registerItemRef
   }), [
-    navigation.activeItem,
-    navigation.items,
+    navigation.focusedItem,
+    navigation.visibleItems,
+    navigation.allItems,
     navigation.navigateTo,
     navigation.expand,
     navigation.collapse,
@@ -14707,6 +14779,8 @@ function NavigationProvider({
     navigation.last,
     navigation.toggleExpansion,
     focusedId,
+    activeId,
+    activePath,
     getItemState,
     registerItemRef
   ]);
@@ -14839,32 +14913,19 @@ function VerticalNavigationItem({
   const handleHeaderActivate = (0, import_react59.useCallback)(() => {
     toggleExpansion(id, { isFocusing: true });
   }, [id, toggleExpansion]);
-  const handleLeafActivate = (0, import_react59.useCallback)((event) => {
-    if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
+  const handleLeafActivate = (0, import_react59.useCallback)(() => {
     navigateTo(id);
-  }, [id, navigateTo]);
-  const labelContent = url == null ? label : external ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
-      ]
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    "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__ */ (0, import_jsx_runtime41.jsxs)("span", { "data-name": "vertical-navigation-item-link", children: [
+    label,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-name": "vertical-navigation-item-link", children: label });
   if (!hasChildren) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "li",
@@ -15002,22 +15063,49 @@ var AppPageSidebarWithNavigation = ({
   footer,
   navigationItems,
   contentOverwrite,
-  initialActiveId,
+  initialFocusedId,
+  focusedId,
+  onFocusedIdChange,
+  activeId,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppSidebar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "app-page-sidebar-with-navigation", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-header", children: header }),
-    navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalNavigationTree, { items: navigationItems, initialActiveId }) }),
+    navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      VerticalNavigationTree,
+      {
+        items: navigationItems,
+        initialFocusedId,
+        focusedId,
+        onFocusedIdChange,
+        activeId
+      }
+    ) }),
     contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: contentOverwrite }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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] = (0, import_react60.useState)(false);
+  const resolvedActiveId = (0, import_react60.useMemo)(() => {
+    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 = (0, import_react60.useCallback)((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__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-active-page": isActive ? "" : void 0, children: [
@@ -15029,25 +15117,10 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
         items: toNavigationItems(item.items)
       };
     }) ?? void 0;
-  }, [sidebarProps.activeUrl, sidebarProps.initialActiveId]);
+  }, [resolvedActiveId]);
   const navigationItems = (0, import_react60.useMemo)(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
-  const initialActiveId = (0, import_react60.useMemo)(() => {
-    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__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
@@ -15064,7 +15137,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__ */ (0, import_jsx_runtime43.jsxs)("div", { "data-name": "app-page-content", children: [
@@ -15509,7 +15585,6 @@ var ThemeSelect = ({ ...props }) => {
     {
       value: theme,
       onEditComplete: (value) => {
-        console.log("onEditComplete", value);
         props.onEditComplete?.(value);
         setTheme(value);
       },
@@ -15949,7 +16024,7 @@ var Navigation = ({ ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       IconButton,
       {
-        tooltip: translation("openNavigation"),
+        tooltip: translation("menu"),
         coloringStyle: "text",
         color: "neutral",
         onClick: () => setIsMobileOpen(true),
@@ -18283,7 +18358,7 @@ var DatePicker = ({
         Button,
         {
           size: "sm",
-          coloringStyle: "text",
+          color: "neutral",
           className: (0, import_clsx29.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
@@ -19133,6 +19208,9 @@ var DateTimeInput = (0, import_react84.forwardRef)(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__ */ (0, import_jsx_runtime78.jsxs)("div", { ...containerProps, className: (0, import_clsx31.default)("relative w-full", containerProps?.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
       "div",
@@ -19150,6 +19228,7 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
         className: (0, import_clsx31.default)("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: [
@@ -19168,13 +19247,12 @@ var DateTimeInput = (0, import_react84.forwardRef)(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__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-row-1 items-center", children: [
             actions,
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: !required && allowClear && !readOnly && !disabled && state !== null, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: hasClear, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               IconButton,
               {
                 tooltip: translation("clearValue"),
@@ -19188,7 +19266,7 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
                 children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.X, { className: "size-5" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: hasTimePicker, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               IconButton,
               {
                 tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -20913,7 +20991,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: (0, import_clsx35.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex-row-1 items-center truncate", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "table-header-cell-content", children: [
               /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                 TableSortButton,
                 {
@@ -23337,6 +23415,7 @@ var DateProperty = ({
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
+          className: "flex-row-4 pr-0",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid)
         }
       )
@@ -23819,7 +23898,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;
@@ -23832,7 +23910,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 = {
@@ -24553,6 +24630,7 @@ var PromiseUtils = {
   processModelLibrary,
   range,
   resolveSetState,
+  resolveTreeNodePath,
   segmentBounds,
   segmentPlaceholder,
   setDayPeriod,