@gravitee/graphene-core 2.33.1 → 2.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-core",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "type": "module",
   "description": "Gravitee's Graphene design system: accessible React components, design tokens, icons, and shared ESLint/TypeScript configs. Built on shadcn/ui and Tailwind.",
   "keywords": [

package/snippets/context-sidebar-detail-page.tsx

@@ -25,6 +25,9 @@ const resourceNavGroups: NavGroup[] = [
 ];
 
 // 2. Build your detail page component.
+//    The host provides <AppContextBar /> in ContentHeader's appContext slot.
+//    Do NOT include the application/module name as the first breadcrumb —
+//    it is already shown by AppContextBar. Start at the page level.
 export function ResourceDetailPage({
   resource,
   onBack,
@@ -41,7 +44,7 @@ export function ResourceDetailPage({
     <AppLayout
       viewMode="context"
       contextExpanded={contextExpanded}
-      sidebar={null /* replace with your <AppSidebar /> */}
+      sidebar={null /* replace with your <AppSidebar renderNavigation={...} /> */}
       contextSidebar={
         <ContextSidebar
           header={
@@ -58,6 +61,7 @@ export function ResourceDetailPage({
       subheader={
         <ContentHeader
           leading={<ContextToggleButton expanded={contextExpanded} onToggle={() => setContextExpanded((v) => !v)} />}
+          appContext={null /* replace with <AppContextBar apps={...} activeAppKey={...} ... /> */}
           breadcrumbs={[
             { label: '{LIST_PAGE_LABEL}', onClick: onBack },
             { label: resource.name },
@@ -75,8 +79,10 @@ export function ResourceDetailPage({
 
 // 3. With LayoutSlots (module federation):
 //    If using useLayoutConfig instead of direct props, push the sidebar from
-//    inside your module component:
+//    inside your module component. The host owns appContext in ContentHeader;
+//    modules only set breadcrumbs, leading, and contextSidebar.
 //
+//    // appContext lives in the host shell's ContentHeader — modules do not set it.
 //    useLayoutConfig(
 //      {
 //        viewMode: 'context',