@inf-monkeys-tech/monkeys-design 2.0.5 → 2.0.7

package/dist/components/navigation-sidebar/index.mjs

@@ -1297,6 +1297,7 @@ function DataExplorerViewTree({
                 onSelectNode?.(node, context);
               },
               onKeyDown: (event) => {
+                if (event.target !== event.currentTarget) return;
                 if (!isSelectable) return;
                 if (event.key !== "Enter" && event.key !== " ") return;
                 event.preventDefault();
@@ -1423,7 +1424,7 @@ function DataExplorerViewTree({
     "div",
     {
       className: cn(theme.slots.treeRoot, classNames?.root, className),
-      role: hasAnyNodes ? "tree" : void 0,
+      role: hasAnyNodes || resolvedGroups.some((group) => !group.hideHeader) ? "tree" : void 0,
       children: resolvedGroups.map((group) => {
         const groupExpanded = group.hideHeader || group.collapsible === false || resolvedExpandedGroupIds.has(group.id);
         const groupNodeCount = group.nodes?.length ?? 0;
@@ -1440,6 +1441,10 @@ function DataExplorerViewTree({
               !group.hideHeader ? /* @__PURE__ */ jsxs(
                 "div",
                 {
+                  role: "treeitem",
+                  "aria-label": typeof group.label === "string" ? group.label : void 0,
+                  "aria-selected": group.selectable ? groupSelected : void 0,
+                  "aria-expanded": groupCollapsible ? groupExpanded : void 0,
                   className: cn(
                     theme.slots.treeGroupHeader,
                     theme.slots.treeGroupHeaderButton,
@@ -1524,6 +1529,7 @@ function DataExplorerViewTree({
               groupExpanded ? /* @__PURE__ */ jsx(
                 "div",
                 {
+                  role: "group",
                   className: cn(
                     theme.slots.treeGroupContent,
                     classNames?.groupContent,
@@ -1552,6 +1558,72 @@ function DataExplorerViewTree({
     }
   );
 }
+
+// src/components/navigation-sidebar/unified-appearance.ts
+var unifiedRow = "gap-2 rounded-[var(--radius)] border border-transparent text-sm font-medium motion-reduce:transition-none";
+var unifiedIcon = "size-[var(--monkeys-component-navigation-sidebar-icon-size,1.125rem)] shrink-0 text-inherit [&_svg]:size-full";
+var unifiedInactive = "text-foreground hover:border-transparent hover:bg-[var(--navigation-internal-hover-background)] hover:text-[var(--navigation-internal-hover-foreground)]";
+var unifiedSelected = "border-[var(--navigation-internal-selected-border)] bg-[var(--navigation-internal-selected-background)] text-[var(--navigation-internal-selected-foreground)] hover:border-[var(--navigation-internal-selected-border)] hover:bg-[var(--navigation-internal-selected-background)] hover:text-[var(--navigation-internal-selected-foreground)]";
+var unifiedThemeDefaults = "[--navigation-internal-theme-selected-background:color-mix(in_srgb,hsl(var(--monkeys-color-primary,var(--primary)))_10%,transparent)] [--navigation-internal-theme-selected-foreground:hsl(var(--monkeys-color-primary,var(--primary)))] dark:[--navigation-internal-theme-selected-background:hsl(var(--monkeys-color-accent,var(--accent)))] dark:[--navigation-internal-theme-selected-foreground:hsl(var(--monkeys-color-foreground,var(--foreground)))]";
+function unifiedStyle(activeVariant) {
+  const background = {
+    muted: "hsl(var(--monkeys-color-accent,var(--accent)))",
+    soft: "color-mix(in srgb,hsl(var(--monkeys-color-primary,var(--primary))) 10%,transparent)",
+    solid: "hsl(var(--monkeys-color-primary,var(--primary)))",
+    outline: "hsl(var(--monkeys-color-background,var(--background)))"
+  }[activeVariant ?? "muted"];
+  const foreground = activeVariant === "solid" ? "hsl(var(--monkeys-color-primary-foreground,var(--primary-foreground)))" : "hsl(var(--monkeys-color-foreground,var(--foreground)))";
+  const border = activeVariant === void 0 || activeVariant === "muted" ? "transparent" : activeVariant === "soft" ? "color-mix(in srgb,hsl(var(--monkeys-color-primary,var(--primary))) 25%,transparent)" : activeVariant === "outline" ? "color-mix(in srgb,hsl(var(--monkeys-color-primary,var(--primary))) 55%,transparent)" : "hsl(var(--monkeys-color-primary,var(--primary)))";
+  return {
+    "--navigation-internal-default-selected-background": activeVariant === void 0 ? "var(--navigation-internal-theme-selected-background)" : background,
+    "--navigation-internal-default-selected-foreground": activeVariant === void 0 ? "var(--navigation-internal-theme-selected-foreground)" : foreground,
+    "--navigation-internal-selected-background": "var(--monkeys-component-navigation-sidebar-row-selected-background,var(--navigation-internal-default-selected-background))",
+    "--navigation-internal-selected-foreground": "var(--monkeys-component-navigation-sidebar-row-selected-foreground,var(--navigation-internal-default-selected-foreground))",
+    "--navigation-internal-selected-border": `var(--monkeys-component-navigation-sidebar-row-selected-border,${border})`,
+    "--navigation-internal-hover-background": "var(--monkeys-component-navigation-sidebar-row-hover-background,color-mix(in srgb,hsl(var(--monkeys-color-accent,var(--accent))) 65%,transparent))",
+    "--navigation-internal-hover-foreground": "var(--monkeys-component-navigation-sidebar-row-hover-foreground,hsl(var(--monkeys-color-foreground,var(--foreground))))"
+  };
+}
+var treeStateVariables = "[--navigation-internal-selected-background:var(--monkeys-component-navigation-sidebar-row-selected-background,var(--monkeys-component-navigation-sidebar-tree-row-selected-background,var(--navigation-internal-default-selected-background)))] [--navigation-internal-selected-foreground:var(--monkeys-component-navigation-sidebar-row-selected-foreground,var(--monkeys-component-navigation-sidebar-tree-row-selected-foreground,var(--navigation-internal-default-selected-foreground)))] [--navigation-internal-hover-background:var(--monkeys-component-navigation-sidebar-row-hover-background,var(--monkeys-component-navigation-sidebar-tree-row-hover-background,color-mix(in_srgb,hsl(var(--monkeys-color-accent,var(--accent)))_65%,transparent)))] [--navigation-internal-hover-foreground:var(--monkeys-component-navigation-sidebar-row-hover-foreground,var(--monkeys-component-navigation-sidebar-tree-row-hover-foreground,hsl(var(--monkeys-color-foreground,var(--foreground)))))]";
+var selectedTreeNode = "aria-selected:border-[var(--navigation-internal-selected-border)] aria-selected:bg-[var(--navigation-internal-selected-background)] aria-selected:text-[var(--navigation-internal-selected-foreground)] aria-selected:hover:border-[var(--navigation-internal-selected-border)] aria-selected:hover:bg-[var(--navigation-internal-selected-background)] aria-selected:hover:text-[var(--navigation-internal-selected-foreground)]";
+var nestedControl = "text-inherit hover:bg-foreground/10 hover:text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none";
+function unifiedTreeClassNames(height, padding, overrides = {}) {
+  const row = cn(unifiedRow, height, padding, unifiedInactive);
+  return {
+    ...overrides,
+    root: cn(treeStateVariables, "space-y-0.5", overrides.root),
+    group: cn(
+      "space-y-0.5",
+      // A visible group header adds a level; headerless groups contain root items.
+      "[&>[role=treeitem]+[role=group]]:pl-[var(--monkeys-component-navigation-sidebar-tree-group-indent,1rem)]",
+      overrides.group
+    ),
+    groupHeaderButton: cn("h-auto", row, overrides.groupHeaderButton),
+    nodeButton: cn(row, selectedTreeNode, overrides.nodeButton),
+    itemSelected: cn(unifiedSelected, overrides.itemSelected),
+    nodeIcon: cn(
+      unifiedIcon,
+      "group-hover/tree-node:text-inherit",
+      overrides.nodeIcon
+    ),
+    nodeLabel: cn("font-medium", overrides.nodeLabel),
+    nodeDescription: cn("text-inherit", overrides.nodeDescription),
+    nodeDisabled: cn("opacity-50", overrides.nodeDisabled),
+    groupActions: cn(
+      nestedControl,
+      "order-2 size-5 p-0 group-focus-within/tree-group:opacity-100",
+      overrides.groupActions
+    ),
+    nodeActions: cn(
+      nestedControl,
+      "order-2 size-5 p-0 group-focus-within/tree-node:opacity-100",
+      overrides.nodeActions
+    ),
+    nodeToggle: cn(nestedControl, "order-1", overrides.nodeToggle),
+    expander: cn(nestedControl, "order-1", overrides.expander),
+    nodeDragHandle: cn(nestedControl, overrides.nodeDragHandle)
+  };
+}
 function CollapseIcon({ collapsed }) {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-4 w-4", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
@@ -1737,22 +1809,34 @@ function activeVariantClassName(activeVariant) {
   return "border-primary/25 bg-primary/10 text-foreground";
 }
 function resolveAppearance(appearance) {
-  const density = appearance?.density ?? "default";
+  if (appearance?.preset !== void 0 && appearance.preset !== "unified") {
+    throw new TypeError(
+      `Unknown NavigationSidebar preset "${appearance.preset}". Supported preset: unified.`
+    );
+  }
+  const unified = appearance?.preset === "unified";
+  const density = appearance?.density ?? (unified ? "compact" : "default");
   const surface = appearance?.surface ?? "panel";
-  const activeVariant = appearance?.activeVariant ?? "soft";
+  const activeVariant = appearance?.activeVariant ?? (unified ? "muted" : "soft");
   return {
+    unified,
     density,
     surface,
     activeVariant,
+    selected: unified ? unifiedSelected : activeVariantClassName(activeVariant),
+    inactive: unified ? unifiedInactive : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
     root: cn(
       surface === "plain" && "border-transparent bg-transparent shadow-none",
       surface === "panel" && "border-border/70 bg-card text-card-foreground shadow-sm",
       surface === "frosted" && "border-border/55 bg-card/80 text-card-foreground shadow-sm backdrop-blur-xl",
-      surface === "outlined" && "border-border bg-background text-foreground shadow-none"
+      surface === "outlined" && "border-border bg-background text-foreground shadow-none",
+      unified && "rounded-[var(--radius)] shadow-none",
+      unified && unifiedThemeDefaults,
+      unified && surface === "panel" && "border-[var(--monkeys-component-navigation-sidebar-border,hsl(var(--monkeys-color-border,var(--border))))] bg-[var(--monkeys-component-navigation-sidebar-background,hsl(var(--monkeys-color-card,var(--card))))] text-foreground"
     ),
-    itemHeight: density === "compact" ? "min-h-9" : density === "comfortable" ? "min-h-14" : "min-h-11",
-    itemPadding: density === "compact" ? "px-2 py-1.5" : density === "comfortable" ? "px-3 py-3" : "px-3 py-2",
-    searchHeight: density === "compact" ? "h-8" : density === "comfortable" ? "h-10" : "h-9"
+    itemHeight: density === "compact" ? unified ? "min-h-[var(--monkeys-component-navigation-sidebar-row-height,2.5rem)]" : "min-h-9" : density === "comfortable" ? "min-h-14" : "min-h-11",
+    itemPadding: density === "compact" ? unified ? "px-2 py-2" : "px-2 py-1.5" : density === "comfortable" ? "px-3 py-3" : "px-3 py-2",
+    searchHeight: density === "compact" ? unified ? "h-[var(--monkeys-component-navigation-sidebar-row-height,2.5rem)]" : "h-8" : density === "comfortable" ? "h-10" : "h-9"
   };
 }
 var navigationTreeRowHoverClassName = "hover:bg-[var(--monkeys-component-navigation-sidebar-tree-row-hover-background,hsl(var(--muted)))] hover:text-[var(--monkeys-component-navigation-sidebar-tree-row-hover-foreground,hsl(var(--foreground)))]";
@@ -1807,7 +1891,8 @@ function entryClassName({
     "group/navigation-item relative flex w-full min-w-0 items-center gap-3 rounded-[var(--radius)] border border-transparent text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
     appearance.itemHeight,
     appearance.itemPadding,
-    embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
+    appearance.unified && unifiedRow,
+    embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? appearance.selected : appearance.inactive,
     collapsed && !mobile && "justify-center px-0",
     item.disabled && "pointer-events-none opacity-50",
     classNames?.item,
@@ -1822,7 +1907,8 @@ function EntryContent({
   collapsed,
   mobile,
   classNames,
-  endIndicator
+  endIndicator,
+  appearance
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     hasRenderableNode(item.icon) ? /* @__PURE__ */ jsx(
@@ -1830,6 +1916,7 @@ function EntryContent({
       {
         className: cn(
           "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
+          appearance.unified && unifiedIcon,
           classNames?.itemIcon
         ),
         "aria-hidden": "true",
@@ -1849,6 +1936,7 @@ function EntryContent({
             {
               className: cn(
                 "min-w-0 truncate font-semibold",
+                appearance.unified && "font-medium",
                 classNames?.itemLabel
               ),
               children: item.label
@@ -1859,6 +1947,7 @@ function EntryContent({
             {
               className: cn(
                 "mt-0.5 truncate text-xs font-normal",
+                appearance.unified && "text-inherit",
                 classNames?.itemDescription
               ),
               children: item.description
@@ -1939,6 +2028,7 @@ function EntryButton({
       children: /* @__PURE__ */ jsx(
         EntryContent,
         {
+          appearance,
           item,
           collapsed,
           mobile,
@@ -1975,6 +2065,7 @@ function EntryPresentation({
       children: /* @__PURE__ */ jsx(
         EntryContent,
         {
+          appearance,
           item,
           collapsed: false,
           mobile: true,
@@ -1991,7 +2082,8 @@ function routeRowClassName({
   return cn(
     "flex w-full min-w-0 items-center gap-0.5 rounded-[var(--radius)] border border-transparent pr-1 text-sm transition-[background-color,border-color,color,box-shadow] motion-reduce:transition-none",
     appearance.itemHeight,
-    active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground"
+    appearance.unified && unifiedRow,
+    active ? appearance.selected : appearance.inactive
   );
 }
 function filterCatalogItems(items, activeFilterId) {
@@ -2145,7 +2237,8 @@ function ChildEntry({
         "flex w-full min-w-0 flex-1 items-center gap-3 rounded-[var(--radius)] border border-transparent text-left text-sm font-semibold outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
         appearance.itemHeight,
         appearance.itemPadding,
-        embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
+        appearance.unified && unifiedRow,
+        embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? appearance.selected : appearance.inactive,
         child.disabled && "pointer-events-none opacity-50",
         classNames?.childItem,
         active && classNames?.childItemActive,
@@ -2157,7 +2250,10 @@ function ChildEntry({
         hasRenderableNode(child.icon) ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
+              appearance.unified && unifiedIcon
+            ),
             "aria-hidden": "true",
             children: child.icon
           }
@@ -2306,6 +2402,7 @@ function CollapsedChildMenu({
         children: /* @__PURE__ */ jsx(
           EntryContent,
           {
+            appearance,
             item,
             collapsed: !mobile,
             mobile,
@@ -2419,137 +2516,148 @@ function RouteContent({
       onExpandedItemIdsChange
     ]
   );
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: cn("grid list-none gap-2 p-0", classNames?.list), children: routeItems.map((item, itemIndex) => {
-    const disclosure = isDisclosureRouteItem(item);
-    const active = !disclosure && item.id === activeItemId;
-    const hasChildren = Boolean(item.children?.length);
-    const childrenCollapsible = collapsibleItemIds.has(item.id);
-    const childrenExpanded = !childrenCollapsible || expandedItemIdSet.has(item.id);
-    const showItemActions = !collapsed && hasRenderableNode(item.actions);
-    const compoundItemRow = collapsed && hasChildren && Boolean(onChildSelect) || !collapsed && childrenCollapsible && !disclosure || showItemActions;
-    const childListId = `${disclosureId}-route-children-${itemIndex}`;
-    return /* @__PURE__ */ jsxs("li", { className: "grid min-w-0 gap-1", children: [
-      collapsed && disclosure ? /* @__PURE__ */ jsx(
-        CollapsedChildMenu,
-        {
-          item,
-          activeChildId,
-          label: collapsedChildMenuLabel,
-          onChildSelect,
-          classNames,
-          appearance,
-          triggerVariant: "item"
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-navigation-sidebar-item-row": compoundItemRow ? item.id : void 0,
-          "data-active": compoundItemRow ? String(active) : void 0,
-          className: compoundItemRow ? routeRowClassName({ active, appearance }) : void 0,
-          children: [
-            /* @__PURE__ */ jsx(
-              EntryButton,
-              {
-                item,
-                active,
-                collapsed,
-                embedded: compoundItemRow,
-                itemAs: disclosure ? "button" : itemAs,
-                appearance,
-                classNames,
-                onSelect: disclosure ? () => toggleItemExpanded(item) : onItemSelect ? () => onItemSelect(item) : void 0,
-                ariaControls: !collapsed && childrenCollapsible && disclosure ? childListId : void 0,
-                ariaExpanded: !collapsed && childrenCollapsible && disclosure ? childrenExpanded : void 0,
-                endIndicator: !collapsed && disclosure && !showItemActions ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: childrenExpanded }) : void 0
-              }
-            ),
-            showItemActions ? /* @__PURE__ */ jsx(
-              RouteActions,
-              {
-                itemId: item.id,
-                actions: item.actions,
-                kind: "item",
-                className: classNames?.itemActions
-              }
-            ) : null,
-            collapsed && onChildSelect ? /* @__PURE__ */ jsx(
-              CollapsedChildMenu,
-              {
-                item,
-                activeChildId,
-                label: collapsedChildMenuLabel,
-                onChildSelect,
-                classNames
-              }
-            ) : null,
-            !collapsed && childrenCollapsible && (!disclosure || showItemActions) ? /* @__PURE__ */ jsx(
-              RouteChildrenToggle,
-              {
-                item,
-                expanded: childrenExpanded,
-                controls: childListId,
-                label: disclosureLabel,
-                onToggle: () => toggleItemExpanded(item),
-                classNames
-              }
-            ) : null
-          ]
-        }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "grid list-none gap-2 p-0",
+        appearance.unified && "gap-0.5",
+        classNames?.list
       ),
-      !collapsed && hasChildren ? /* @__PURE__ */ jsx(
-        "ul",
-        {
-          id: childListId,
-          hidden: !childrenExpanded,
-          style: childrenExpanded ? void 0 : { display: "none" },
-          className: cn(
-            "ml-5 grid list-none gap-0.5 border-l border-border/70 py-1 pl-3",
-            classNames?.childList
+      children: routeItems.map((item, itemIndex) => {
+        const disclosure = isDisclosureRouteItem(item);
+        const active = !disclosure && item.id === activeItemId;
+        const hasChildren = Boolean(item.children?.length);
+        const childrenCollapsible = collapsibleItemIds.has(item.id);
+        const childrenExpanded = !childrenCollapsible || expandedItemIdSet.has(item.id);
+        const showItemActions = !collapsed && hasRenderableNode(item.actions);
+        const compoundItemRow = collapsed && hasChildren && Boolean(onChildSelect) || !collapsed && childrenCollapsible && !disclosure || showItemActions;
+        const childListId = `${disclosureId}-route-children-${itemIndex}`;
+        return /* @__PURE__ */ jsxs("li", { className: "grid min-w-0 gap-1", children: [
+          collapsed && disclosure ? /* @__PURE__ */ jsx(
+            CollapsedChildMenu,
+            {
+              item,
+              activeChildId,
+              label: collapsedChildMenuLabel,
+              onChildSelect,
+              classNames,
+              appearance,
+              triggerVariant: "item"
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-navigation-sidebar-item-row": compoundItemRow ? item.id : void 0,
+              "data-active": compoundItemRow ? String(active) : void 0,
+              className: compoundItemRow ? routeRowClassName({ active, appearance }) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  EntryButton,
+                  {
+                    item,
+                    active,
+                    collapsed,
+                    embedded: compoundItemRow,
+                    itemAs: disclosure ? "button" : itemAs,
+                    appearance,
+                    classNames,
+                    onSelect: disclosure ? () => toggleItemExpanded(item) : onItemSelect ? () => onItemSelect(item) : void 0,
+                    ariaControls: !collapsed && childrenCollapsible && disclosure ? childListId : void 0,
+                    ariaExpanded: !collapsed && childrenCollapsible && disclosure ? childrenExpanded : void 0,
+                    endIndicator: !collapsed && disclosure && !showItemActions ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: childrenExpanded }) : void 0
+                  }
+                ),
+                showItemActions ? /* @__PURE__ */ jsx(
+                  RouteActions,
+                  {
+                    itemId: item.id,
+                    actions: item.actions,
+                    kind: "item",
+                    className: classNames?.itemActions
+                  }
+                ) : null,
+                collapsed && onChildSelect ? /* @__PURE__ */ jsx(
+                  CollapsedChildMenu,
+                  {
+                    item,
+                    activeChildId,
+                    label: collapsedChildMenuLabel,
+                    onChildSelect,
+                    classNames
+                  }
+                ) : null,
+                !collapsed && childrenCollapsible && (!disclosure || showItemActions) ? /* @__PURE__ */ jsx(
+                  RouteChildrenToggle,
+                  {
+                    item,
+                    expanded: childrenExpanded,
+                    controls: childListId,
+                    label: disclosureLabel,
+                    onToggle: () => toggleItemExpanded(item),
+                    classNames
+                  }
+                ) : null
+              ]
+            }
           ),
-          children: item.children?.map((child) => {
-            const hasChildActions = hasRenderableNode(child.actions);
-            const childActive = child.id === activeChildId;
-            const childEntry = /* @__PURE__ */ jsx(
-              ChildEntry,
-              {
-                child,
-                parent: item,
-                active: childActive,
-                interactive: Boolean(onChildSelect),
-                onSelect: onChildSelect,
-                appearance,
-                classNames,
-                embedded: hasChildActions
-              }
-            );
-            return /* @__PURE__ */ jsx("li", { children: hasChildActions ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-navigation-sidebar-child-row": child.id,
-                "data-active": String(childActive),
-                className: routeRowClassName({
-                  active: childActive,
-                  appearance
-                }),
-                children: [
-                  childEntry,
-                  /* @__PURE__ */ jsx(
-                    RouteActions,
-                    {
-                      itemId: child.id,
-                      actions: child.actions,
-                      kind: "child",
-                      className: classNames?.childActions
-                    }
-                  )
-                ]
-              }
-            ) : childEntry }, child.id);
-          })
-        }
-      ) : null
-    ] }, item.id);
-  }) }) });
+          !collapsed && hasChildren ? /* @__PURE__ */ jsx(
+            "ul",
+            {
+              id: childListId,
+              hidden: !childrenExpanded,
+              style: childrenExpanded ? void 0 : { display: "none" },
+              className: cn(
+                "ml-5 grid list-none gap-0.5 border-l border-border/70 py-1 pl-3",
+                appearance.unified && "border-border",
+                classNames?.childList
+              ),
+              children: item.children?.map((child) => {
+                const hasChildActions = hasRenderableNode(child.actions);
+                const childActive = child.id === activeChildId;
+                const childEntry = /* @__PURE__ */ jsx(
+                  ChildEntry,
+                  {
+                    child,
+                    parent: item,
+                    active: childActive,
+                    interactive: Boolean(onChildSelect),
+                    onSelect: onChildSelect,
+                    appearance,
+                    classNames,
+                    embedded: hasChildActions
+                  }
+                );
+                return /* @__PURE__ */ jsx("li", { children: hasChildActions ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-navigation-sidebar-child-row": child.id,
+                    "data-active": String(childActive),
+                    className: routeRowClassName({
+                      active: childActive,
+                      appearance
+                    }),
+                    children: [
+                      childEntry,
+                      /* @__PURE__ */ jsx(
+                        RouteActions,
+                        {
+                          itemId: child.id,
+                          actions: child.actions,
+                          kind: "child",
+                          className: classNames?.childActions
+                        }
+                      )
+                    ]
+                  }
+                ) : childEntry }, child.id);
+              })
+            }
+          ) : null
+        ] }, item.id);
+      })
+    }
+  ) });
 }
 function flattenCatalogItems(items, sections, activeFilterId) {
   return [
@@ -2859,7 +2967,11 @@ function NavigationSidebarInner(props, ref) {
       DataExplorerViewTree,
       {
         ...treeProps,
-        classNames: resolveNavigationTreeClassNames(treeProps.classNames)
+        classNames: appearance.unified ? unifiedTreeClassNames(
+          appearance.itemHeight,
+          appearance.itemPadding,
+          treeProps.classNames
+        ) : resolveNavigationTreeClassNames(treeProps.classNames)
       }
     );
   };
@@ -2872,6 +2984,7 @@ function NavigationSidebarInner(props, ref) {
         "aria-label": props.ariaLabel,
         "data-monkeys-component": props.dataComponent ?? "navigation-sidebar",
         "data-navigation-sidebar-kind": props.kind,
+        "data-navigation-sidebar-preset": props.appearance?.preset,
         "data-collapsed": resolvedCollapsed ? "true" : "false",
         className: cn(
           "relative flex h-full min-h-0 shrink-0 flex-col overflow-visible rounded-[calc(var(--radius)+0.25rem)] border transition-[width,opacity] duration-300 motion-reduce:transition-none",
@@ -2882,6 +2995,7 @@ function NavigationSidebarInner(props, ref) {
           props.className
         ),
         style: {
+          ...appearance.unified ? unifiedStyle(props.appearance?.activeVariant) : {},
           ...props.style,
           width: props.widthMode === "fill" ? void 0 : resolvedCollapsed ? bounds.collapsedWidth : resolvedWidth,
           transition: isResizing ? "none" : props.style?.transition
@@ -2919,6 +3033,7 @@ function NavigationSidebarInner(props, ref) {
               {
                 className: cn(
                   "flex min-h-12 min-w-0 items-center gap-2 border-b border-border/60 px-3",
+                  appearance.unified && "min-h-14 border-border px-[var(--monkeys-component-navigation-sidebar-content-inline-padding,var(--global-spacing,0.75rem))]",
                   resolvedCollapsed && "justify-center px-1",
                   props.classNames?.header
                 ),
@@ -2962,6 +3077,7 @@ function NavigationSidebarInner(props, ref) {
               {
                 className: cn(
                   "px-[var(--monkeys-component-navigation-sidebar-content-inline-padding,var(--global-spacing,0.75rem))] pb-2 pt-3",
+                  appearance.unified && "pb-1",
                   props.classNames?.search
                 ),
                 children: /* @__PURE__ */ jsxs(
@@ -2969,7 +3085,8 @@ function NavigationSidebarInner(props, ref) {
                   {
                     className: cn(
                       "flex items-center gap-2 rounded-md border border-input bg-[var(--monkeys-component-navigation-sidebar-search-background,hsl(var(--monkeys-color-control-surface)))] px-3 text-muted-foreground ring-offset-control-surface focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-                      appearance.searchHeight
+                      appearance.searchHeight,
+                      appearance.unified && "rounded-[var(--radius)] border-border bg-[var(--monkeys-component-navigation-sidebar-search-background,transparent)] px-2"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(
@@ -2977,6 +3094,7 @@ function NavigationSidebarInner(props, ref) {
                         {
                           className: cn(
                             "flex shrink-0",
+                            appearance.unified && unifiedIcon,
                             props.classNames?.searchIcon
                           ),
                           "aria-hidden": "true",
@@ -3030,6 +3148,7 @@ function NavigationSidebarInner(props, ref) {
               {
                 className: cn(
                   "min-h-0 flex-1 overflow-y-auto px-[var(--monkeys-component-navigation-sidebar-content-inline-padding,var(--global-spacing,0.75rem))] py-3",
+                  appearance.unified && props.search && "pt-1",
                   resolvedCollapsed && "px-1.5",
                   props.classNames?.content
                 ),
@@ -3041,6 +3160,7 @@ function NavigationSidebarInner(props, ref) {
               {
                 className: cn(
                   "flex shrink-0 items-center gap-2 border-t border-border/70 p-3",
+                  appearance.unified && "border-border",
                   resolvedCollapsed && "justify-center px-1",
                   props.classNames?.footer
                 ),