@quazardous/qdadm 2.7.3 → 2.9.0

package/README.md

@@ -2,11 +2,11 @@
 
 **Vue 3 admin framework. PrimeVue. Zero boilerplate.**
 
-Quick start: [../../README.md](../../README.md) (5 min tutorial)
+Quick start: [README](https://github.com/quazardous/qdadm/blob/main/README.md) (5 min tutorial)
 
-Concepts & patterns: [QDADM_CREDO.md](QDADM_CREDO.md)
+Concepts & patterns: [QDADM_CREDO](https://github.com/quazardous/qdadm/blob/main/packages/qdadm/QDADM_CREDO.md)
 
-Changelog: [../../CHANGELOG.md](../../CHANGELOG.md)
+Changelog: [CHANGELOG](https://github.com/quazardous/qdadm/blob/main/CHANGELOG.md)
 
 ## Installation
 
@@ -95,20 +95,20 @@ Options: `transformRequest`, `transformResponse`, `responseFormat`, `clientSideP
 
 | Doc | Purpose |
 |-----|---------|
-| [QDADM_CREDO](QDADM_CREDO.md) | Philosophy, patterns, concepts |
-| [Page compositions](../../docs/page-compositions.md) | **Start here** — which composition for which need |
-| [CRUD Pages](../../docs/crud.md) | List / form / show / child pages reference |
-| [Navigation](../../docs/navigation.md) | Breadcrumb, sibling navlinks, View↔Edit toggle |
-| [Architecture](../../docs/architecture.md) | PAC pattern, layers |
-| [Extension](../../docs/extension.md) | Decorators, bundles, multi-storage |
-| [Hooks](../../docs/hooks.md) | Alter / invoke registry |
-| [Signals](../../docs/signals.md) | Event bus, SSE bridge |
-| [Zones](../../docs/zones.md) | Extensible UI blocks |
-| [Security](../../docs/security.md) | Permissions, roles |
-| [i18n](../../docs/i18n.md) | Messages, providers, strategies |
-| [Codegen](../../docs/gen.md) | Generate managers (OpenAPI / manual) |
-| [Deferred](../../docs/deferred.md) | Deferred values & warmup |
-| [AGENT_GUIDE](../../docs/AGENT_GUIDE.md) | Quick index for AI agents |
+| [QDADM_CREDO](https://github.com/quazardous/qdadm/blob/main/packages/qdadm/QDADM_CREDO.md) | Philosophy, patterns, concepts |
+| [Page compositions](https://github.com/quazardous/qdadm/blob/main/docs/page-compositions.md) | **Start here** — which composition for which need |
+| [CRUD Pages](https://github.com/quazardous/qdadm/blob/main/docs/crud.md) | List / form / show / child pages reference |
+| [Navigation](https://github.com/quazardous/qdadm/blob/main/docs/navigation.md) | Breadcrumb, sibling navlinks, View↔Edit toggle |
+| [Architecture](https://github.com/quazardous/qdadm/blob/main/docs/architecture.md) | PAC pattern, layers |
+| [Extension](https://github.com/quazardous/qdadm/blob/main/docs/extension.md) | Decorators, bundles, multi-storage |
+| [Hooks](https://github.com/quazardous/qdadm/blob/main/docs/hooks.md) | Alter / invoke registry |
+| [Signals](https://github.com/quazardous/qdadm/blob/main/docs/signals.md) | Event bus, SSE bridge |
+| [Zones](https://github.com/quazardous/qdadm/blob/main/docs/zones.md) | Extensible UI blocks |
+| [Security](https://github.com/quazardous/qdadm/blob/main/docs/security.md) | Permissions, roles |
+| [i18n](https://github.com/quazardous/qdadm/blob/main/docs/i18n.md) | Messages, providers, strategies |
+| [Codegen](https://github.com/quazardous/qdadm/blob/main/docs/gen.md) | Generate managers (OpenAPI / manual) |
+| [Deferred](https://github.com/quazardous/qdadm/blob/main/docs/deferred.md) | Deferred values & warmup |
+| [AGENT_GUIDE](https://github.com/quazardous/qdadm/blob/main/docs/AGENT_GUIDE.md) | Quick index for AI agents |
 
 ## Peer Dependencies
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "2.7.3",
+  "version": "2.9.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/quazardous/qdadm.git"
+    "url": "git+https://github.com/quazardous/qdadm.git",
+    "directory": "packages/qdadm"
   },
   "homepage": "https://github.com/quazardous/qdadm#readme",
   "bugs": {

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as Breadcrumb } from './layout/Breadcrumb.vue'
 export { default as PageNav } from './layout/PageNav.vue'
 export { default as Zone } from './layout/Zone.vue'
 export { default as SidebarBox } from './layout/SidebarBox.vue'
+export { default as NavlinksGroup } from './layout/NavlinksGroup.vue'
 
 // Default zone components
 export { default as DefaultHeader } from './layout/defaults/DefaultHeader.vue'

package/src/components/layout/AppLayout.vue

@@ -25,6 +25,7 @@ import Breadcrumb from 'primevue/breadcrumb'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import SidebarBox from './SidebarBox.vue'
 import Zone from './Zone.vue'
+import NavlinksGroup from './NavlinksGroup.vue'
 import qdadmLogo from '../../assets/logo.svg'
 import { version as qdadmVersion } from '../../../package.json'
 
@@ -241,7 +242,7 @@ watch(() => route.fullPath, () => {
 
 // Navigation context (breadcrumb + navlinks from route config)
 // Entity data comes from activeStack (populated by useEntityItemPage/useEntityItemFormPage)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeToggle } = useNavContext()
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeLinks } = useNavContext()
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = ref<BreadcrumbItem[] | null>(null)
@@ -261,11 +262,6 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// View↔Edit toggle on the terminal crumb (#1332/#1341) — same opt-in contract
-// as DefaultBreadcrumb; this inline breadcrumb must honor the flag too
-const shownModeToggle = computed(() =>
-  features.breadcrumbModeToggle === true ? modeToggle.value : null
-)
 </script>
 
 <template>
@@ -391,29 +387,8 @@ const shownModeToggle = computed(() =>
         </Breadcrumb>
 
         <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-             toggle (#1332/#1341) — plain navigation; the form page's own
-             route-leave guard covers unsaved changes on edit→show -->
-        <div v-if="navlinks.length > 0 || shownModeToggle" class="layout-navlinks">
-          <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
-            <span v-if="index > 0" class="layout-navlinks-separator">|</span>
-            <RouterLink
-              :to="link.to"
-              class="layout-navlink"
-              :class="{ 'layout-navlink--active': link.active }"
-            >
-              {{ link.label }}
-            </RouterLink>
-          </template>
-          <template v-if="shownModeToggle">
-            <span v-if="navlinks.length > 0" class="layout-navlinks-separator">|</span>
-            <RouterLink
-              :to="shownModeToggle.to"
-              class="layout-navlink breadcrumb-mode-toggle"
-            >
-              {{ shownModeToggle.label }}
-            </RouterLink>
-          </template>
-        </div>
+             links (#1332/#1341/#1353) — shared rendering + dedup (#1357) -->
+        <NavlinksGroup :navlinks="navlinks" :mode-links="modeLinks" variant="layout" />
       </div>
 
       <div class="page-content">
@@ -721,33 +696,7 @@ const shownModeToggle = computed(() =>
   padding-bottom: 0;
 }
 
-.layout-navlinks {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: var(--fad-font-size-sm);
-}
-
-.layout-navlinks-separator {
-  color: var(--p-surface-400, #94a3b8);
-  opacity: 0.5;
-}
-
-.layout-navlink {
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color var(--fad-transition-fast);
-}
-
-.layout-navlink:hover {
-  color: var(--p-primary-600, #2563eb);
-}
-
-.layout-navlink--active {
-  color: var(--p-surface-600, #475569);
-  font-weight: var(--fad-font-weight-medium);
-  pointer-events: none;
-}
+/* Navlinks styles moved to NavlinksGroup.vue (#1357) */
 
 /* Override PrimeVue Breadcrumb styles for flat look */
 .layout-nav-bar :deep(.p-breadcrumb) {

package/src/components/layout/NavlinksGroup.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+/**
+ * NavlinksGroup - the right-side navigation group of a breadcrumb bar (#1357)
+ *
+ * Single rendering of the contract previously copy-pasted between AppLayout's
+ * inline breadcrumb and DefaultBreadcrumb: View↔Edit mode links LEAD the
+ * group (#1332/#1341/#1353, order #j7udkh), sibling navlinks follow, pipe
+ * separators between every pair, plain text (no icons).
+ *
+ * Owns the two behaviors both call sites need:
+ * - the `qdadmFeatures.breadcrumbModeToggle` opt-in gate on mode links
+ * - dedup (#1357): a navlink whose target route is already covered by a
+ *   shown mode link is dropped — e.g. the auto "Details" link resolves to
+ *   the parent's edit route and would render twice ("Details" + "Edit").
+ *   With the feature off, no mode links are shown and every navlink stays
+ *   (back-compat).
+ *
+ * `variant` keeps the historical CSS hooks of each call site so consumer
+ * overrides keep working: 'layout' = AppLayout classes, 'breadcrumb' =
+ * DefaultBreadcrumb classes.
+ */
+import { computed, inject } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { NavLinkItem, BreadcrumbModeToggle } from '../../composables/useNavContext'
+
+interface FeaturesConfig {
+  breadcrumbModeToggle?: boolean
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    navlinks?: NavLinkItem[]
+    modeLinks?: BreadcrumbModeToggle[]
+    variant?: 'layout' | 'breadcrumb'
+  }>(),
+  {
+    navlinks: () => [],
+    modeLinks: () => [],
+    variant: 'breadcrumb',
+  }
+)
+
+const features = inject<FeaturesConfig>('qdadmFeatures', {})
+
+// Opt-in (#1332): mode links render only when the feature flag is on
+const shownModeLinks = computed<BreadcrumbModeToggle[]>(() =>
+  features.breadcrumbModeToggle === true ? props.modeLinks : []
+)
+
+// Dedup (#1357): drop navlinks targeting a route a mode link already covers
+const shownNavlinks = computed<NavLinkItem[]>(() => {
+  if (shownModeLinks.value.length === 0) return props.navlinks
+  const covered = new Set(shownModeLinks.value.map((m) => m.to.name))
+  return props.navlinks.filter((link) => !link.to?.name || !covered.has(link.to.name))
+})
+
+const cls = computed(() =>
+  props.variant === 'layout'
+    ? {
+        container: 'layout-navlinks',
+        separator: 'layout-navlinks-separator',
+        link: 'layout-navlink',
+        active: 'layout-navlink--active',
+      }
+    : {
+        container: 'breadcrumb-navlinks',
+        separator: 'navlinks-separator',
+        link: 'navlink',
+        active: 'navlink--active',
+      }
+)
+</script>
+
+<template>
+  <!-- Plain navigation; the form page's own route-leave guard covers
+       unsaved changes on edit→show -->
+  <div v-if="shownNavlinks.length > 0 || shownModeLinks.length > 0" :class="cls.container">
+    <!-- mode links lead the group (#j7udkh), sibling tabs follow -->
+    <template v-for="(mode, index) in shownModeLinks" :key="`mode-${mode.target}`">
+      <span v-if="index > 0" :class="cls.separator">|</span>
+      <RouterLink :to="mode.to" class="breadcrumb-mode-toggle" :class="cls.link">
+        {{ mode.label }}
+      </RouterLink>
+    </template>
+    <template v-for="(link, index) in shownNavlinks" :key="link.to?.name || index">
+      <span v-if="shownModeLinks.length > 0 || index > 0" :class="cls.separator">|</span>
+      <RouterLink :to="link.to" :class="[cls.link, { [cls.active]: link.active }]">
+        {{ link.label }}
+      </RouterLink>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* Historical styles of each call site, keyed by variant container so the
+   look of both bars is preserved exactly (AppLayout was compact). */
+.layout-navlinks {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--fad-font-size-sm);
+}
+
+.layout-navlinks-separator {
+  color: var(--p-surface-400, #94a3b8);
+  opacity: 0.5;
+}
+
+.layout-navlink {
+  color: var(--p-primary-500, #3b82f6);
+  text-decoration: none;
+  transition: color var(--fad-transition-fast);
+}
+
+.layout-navlink:hover {
+  color: var(--p-primary-600, #2563eb);
+}
+
+.layout-navlink--active {
+  color: var(--p-surface-600, #475569);
+  font-weight: var(--fad-font-weight-medium);
+  pointer-events: none;
+}
+
+.breadcrumb-navlinks {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.navlinks-separator {
+  color: var(--p-surface-400, #94a3b8);
+}
+
+.navlink {
+  color: var(--p-primary-500, #3b82f6);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.navlink:hover {
+  color: var(--p-primary-700, #1d4ed8);
+  text-decoration: underline;
+}
+
+.navlink--active {
+  color: var(--p-surface-700, #334155);
+  font-weight: 500;
+  pointer-events: none;
+}
+</style>

package/src/components/layout/defaults/DefaultBreadcrumb.vue

@@ -12,11 +12,10 @@ import { computed, inject, ref, type Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { useNavContext, type BreadcrumbItem, type NavLinkItem } from '../../../composables/useNavContext'
 import Breadcrumb from 'primevue/breadcrumb'
+import NavlinksGroup from '../NavlinksGroup.vue'
 
 interface FeaturesConfig {
   breadcrumb?: boolean
-  /** Opt-in (#1332): render a View↔Edit toggle next to the terminal crumb */
-  breadcrumbModeToggle?: boolean
   [key: string]: unknown
 }
 
@@ -24,7 +23,7 @@ const route = useRoute()
 const features = inject<FeaturesConfig>('qdadmFeatures', { breadcrumb: true })
 
 // Navigation context (breadcrumb + navlinks from route config)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeToggle } = useNavContext()
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeLinks } = useNavContext()
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = inject<Ref<BreadcrumbItem[] | null>>('qdadmBreadcrumbOverride', ref(null))
@@ -42,11 +41,6 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// View↔Edit toggle on the terminal crumb (#1332) — opt-in, and only when
-// useNavContext resolved a reachable, permitted twin-mode route
-const shownModeToggle = computed(() =>
-  features.breadcrumbModeToggle === true ? modeToggle.value : null
-)
 </script>
 
 <template>
@@ -65,29 +59,8 @@ const shownModeToggle = computed(() =>
     </Breadcrumb>
 
     <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-         toggle (#1332/#1341) — plain navigation; the form page's own
-         route-leave guard covers unsaved changes on edit→show -->
-    <div v-if="navlinks.length > 0 || shownModeToggle" class="breadcrumb-navlinks">
-      <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
-        <span v-if="index > 0" class="navlinks-separator">|</span>
-        <RouterLink
-          :to="link.to"
-          class="navlink"
-          :class="{ 'navlink--active': link.active }"
-        >
-          {{ link.label }}
-        </RouterLink>
-      </template>
-      <template v-if="shownModeToggle">
-        <span v-if="navlinks.length > 0" class="navlinks-separator">|</span>
-        <RouterLink
-          :to="shownModeToggle.to"
-          class="navlink breadcrumb-mode-toggle"
-        >
-          {{ shownModeToggle.label }}
-        </RouterLink>
-      </template>
-    </div>
+         links (#1332/#1341/#1353) — shared rendering + dedup (#1357) -->
+    <NavlinksGroup :navlinks="navlinks" :mode-links="modeLinks" variant="breadcrumb" />
   </div>
 </template>
 
@@ -104,33 +77,7 @@ const shownModeToggle = computed(() =>
   padding-bottom: 0;
 }
 
-.breadcrumb-navlinks {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.navlinks-separator {
-  color: var(--p-surface-400, #94a3b8);
-}
-
-.navlink {
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.navlink:hover {
-  color: var(--p-primary-700, #1d4ed8);
-  text-decoration: underline;
-}
-
-.navlink--active {
-  color: var(--p-surface-700, #334155);
-  font-weight: 500;
-  pointer-events: none;
-}
+/* Navlinks styles moved to NavlinksGroup.vue (#1357) */
 
 /* Override PrimeVue Breadcrumb styles for flat look */
 .default-breadcrumb :deep(.p-breadcrumb) {

package/src/composables/useNavContext.ts

@@ -76,9 +76,10 @@ export interface BreadcrumbItem {
  * permissions are honored once the item is loaded.
  */
 export interface BreadcrumbModeToggle {
-  /** Mode of the current route */
-  current: 'show' | 'edit'
-  /** Mode the toggle navigates to */
+  /** Mode of the current route — absent on child pages (#1353), where the
+   *  page is in neither mode of the parent item */
+  current?: 'show' | 'edit'
+  /** Mode the link navigates to */
   target: 'show' | 'edit'
   /** Twin-route location — a plain router.push; any dirty-form protection
    *  comes from the form page's own onBeforeRouteLeave guard */
@@ -130,6 +131,7 @@ export interface UseNavContextReturn {
   breadcrumb: ComputedRef<BreadcrumbItem[]>
   navlinks: ComputedRef<NavLinkItem[]>
   modeToggle: ComputedRef<BreadcrumbModeToggle | null>
+  modeLinks: ComputedRef<BreadcrumbModeToggle[]>
 
   // Helpers
   parentConfig: ComputedRef<ParentConfig | undefined>
@@ -375,6 +377,8 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
   })
 
   const navlinks = computed(() => {
+    void i18nLocale.value // "Details" label re-resolves on locale change
+
     if (!parentConfig.value) return []
 
     const { entity: parentEntity, param, itemRoute } = parentConfig.value
@@ -389,7 +393,7 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     // Details link - use manager's idField for param name
     const links: NavLinkItem[] = [
       {
-        label: 'Details',
+        label: breadcrumbLabel('details', 'Details'),
         to: {
           name: parentRouteName!,
           params: { [parentManager.idField!]: parentId.value as string },
@@ -443,15 +447,42 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
   })
 
   // ============================================================================
-  // MODE TOGGLE (#1332)
+  // MODE TOGGLE / MODE LINKS (#1332, #1353)
   // ============================================================================
 
-  function toggleLabel(target: 'show' | 'edit'): string {
-    const trace = kernelI18n?.resolve(target === 'edit' ? 'breadcrumb.edit' : 'breadcrumb.view')
+  /** Resolve a `breadcrumb.*` label from the i18n catalog, with fallback. */
+  function breadcrumbLabel(key: string, fallback: string): string {
+    const trace = kernelI18n?.resolve(`breadcrumb.${key}`)
     if (trace?.hit) return trace.result
-    return target === 'edit' ? 'Edit' : 'View'
+    return fallback
+  }
+
+  function toggleLabel(target: 'show' | 'edit'): string {
+    return target === 'edit'
+      ? breadcrumbLabel('edit', 'Edit')
+      : breadcrumbLabel('view', 'View')
   }
 
+  /** Build one mode link if its route exists and (for edit) permission allows. */
+  function buildModeLink(
+    manager: EntityManager,
+    target: 'show' | 'edit',
+    id: unknown,
+    permissionEntity: unknown
+  ): BreadcrumbModeToggle | null {
+    const routeName = `${manager.routePrefix}-${target}`
+    if (!router.hasRoute(routeName)) return null
+    if (target === 'edit' && !manager.canUpdate(permissionEntity ?? undefined)) return null
+    return {
+      target,
+      to: { name: routeName, params: { [manager.idField || 'id']: id as string } },
+      label: toggleLabel(target),
+    }
+  }
+
+  // Item pages (#1332): the terminal is entity-show/entity-edit — offer the
+  // OPPOSITE mode (getDefaultItemRoute's edit-preference is a landing
+  // default, not a toggle).
   const modeToggle = computed<BreadcrumbModeToggle | null>(() => {
     void i18nLocale.value // label re-resolves on locale change
 
@@ -464,20 +495,29 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     if (!manager?.routePrefix) return null
 
     const current = terminal.kind === 'entity-edit' ? 'edit' : 'show'
-    // Target is the OPPOSITE of the current mode — getDefaultItemRoute's
-    // edit-preference is a landing default, not a toggle.
     const target = current === 'edit' ? 'show' : 'edit'
-    const twinRoute = `${manager.routePrefix}-${target}`
-    if (!router.hasRoute(twinRoute)) return null
-
-    if (target === 'edit' && !manager.canUpdate(entityData.value ?? undefined)) return null
+    const link = buildModeLink(manager, target, terminal.id, entityData.value)
+    return link ? { ...link, current } : null
+  })
 
-    return {
-      current,
-      target,
-      to: { name: twinRoute, params: { [manager.idField || 'id']: terminal.id } },
-      label: toggleLabel(target),
-    }
+  // Uniform list for rendering (#1353). Item pages: the single opposite-mode
+  // entry (modeToggle). Child pages (route carries meta.parent): the PARENT
+  // item's applicable pair — the page is in neither mode, so both View and
+  // Edit are offered, each under the same existence/permission rules. On a
+  // child page, `entityData` resolves to the parent item (last item segment
+  // of the chain), so the canUpdate gate is ownership-aware once hydrated.
+  const modeLinks = computed<BreadcrumbModeToggle[]>(() => {
+    const itemToggle = modeToggle.value
+    if (itemToggle) return [itemToggle]
+
+    void i18nLocale.value
+    if (!parentConfig.value || parentId.value == null) return []
+    const manager = getManager(parentConfig.value.entity)
+    if (!manager?.routePrefix) return []
+
+    return (['show', 'edit'] as const)
+      .map((target) => buildModeLink(manager, target, parentId.value, entityData.value))
+      .filter((link): link is BreadcrumbModeToggle => link !== null)
   })
 
   return {
@@ -494,6 +534,7 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     breadcrumb,
     navlinks,
     modeToggle,
+    modeLinks,
 
     // Helpers
     parentConfig,

package/src/composables/useSemanticBreadcrumb.ts

@@ -89,10 +89,15 @@ export function computeSemanticBreadcrumb(
         items.push({ kind: actionKind, entity: lastEntity, id: pendingId })
         pendingId = null
       } else {
-        // No pending ID - update last item's kind (e.g., /books/create)
+        // No pending ID and the last item is an id-less entity level
+        // (e.g. /books/create): append the action as its own item so the
+        // entity-list crumb survives — mutating the list item into
+        // entity-create ate the "Books" level (#1356). When the last item
+        // already carries an id (/books/1/edit) the action was consumed
+        // at the id segment; swallow it as before.
         const lastItem = items[items.length - 1]
         if (lastItem && lastItem.kind.startsWith('entity-') && !lastItem.id) {
-          lastItem.kind = actionKind
+          items.push({ kind: actionKind, entity: lastEntity })
         }
       }
       continue