@byline/host-tanstack-start 3.21.0 → 4.0.0

package/src/admin-shell/chrome/admin-menu-provider.tsx

@@ -12,6 +12,7 @@ import type React from 'react'
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
 
+import { isAdminRoutePathActive } from '../../routes/admin-path.js'
 import { useMediaQuery } from './use-media-query.js'
 
 interface AdminMenuContextType {
@@ -37,7 +38,7 @@ interface AdminMenuProviderProps {
  * deliberate open stays open.
  */
 function isWideRoute(pathname: string): boolean {
-  return pathname.startsWith('/admin/collections')
+  return isAdminRoutePathActive(pathname, 'collections')
 }
 
 export function AdminMenuProvider({ children }: AdminMenuProviderProps): React.JSX.Element {

package/src/admin-shell/chrome/dashboard.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Card, Container, Section } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import styles from './dashboard.module.css'
 import { Link } from './loose-router.js'
 import type { CollectionStatusCount } from '../../server-fns/collections/index.js'
@@ -42,7 +43,7 @@ function StatTile({
   const modifier = tileModifier(ws.name)
   return (
     <Link
-      to={'/admin/collections/$collection' as never}
+      to={getAdminRoutePath('collections', '$collection')}
       params={{ collection: collectionPath }}
       search={{ status: ws.name }}
       className={cx('byline-dashboard-stat-tile', styles.statTile, modifier.global, modifier.local)}
@@ -77,7 +78,7 @@ export function AdminDashboard({ statsMap }: AdminDashboardProps) {
             return (
               <Card key={collection.path}>
                 <Link
-                  to={'/admin/collections/$collection' as never}
+                  to={getAdminRoutePath('collections', '$collection')}
                   params={{ collection: collection.path }}
                   className={cx('byline-dashboard-card-link', styles.cardLink)}
                 >
@@ -114,7 +115,7 @@ export function AdminDashboard({ statsMap }: AdminDashboardProps) {
                     </div>
                   ) : (
                     <Link
-                      to={'/admin/collections/$collection' as never}
+                      to={getAdminRoutePath('collections', '$collection')}
                       params={{ collection: collection.path }}
                       className={cx('byline-dashboard-empty-link', styles.emptyLink)}
                     >

package/src/admin-shell/chrome/sign-in-page.tsx

@@ -19,7 +19,7 @@ import { setInterfaceLocaleFn } from '../../server-fns/i18n/index.js'
 import styles from './sign-in-page.module.css'
 
 interface SignInPageProps {
-  callbackUrl?: string
+  redirectTo: string
   activeLocale: LocaleCode
 }
 
@@ -44,7 +44,7 @@ interface SignInPageProps {
  * the form's action row can render a plain "Home" link beside the submit
  * button.
  */
-export function SignInPage({ callbackUrl, activeLocale }: SignInPageProps) {
+export function SignInPage({ redirectTo, activeLocale }: SignInPageProps) {
   const { i18n, serverURL } = getClientConfig()
   const localeDefinitions = buildLocaleDefinitions(
     i18n.interface.locales,
@@ -68,7 +68,7 @@ export function SignInPage({ callbackUrl, activeLocale }: SignInPageProps) {
             <LanguageMenu />
           </div>
           <div className={cx('byline-sign-in-page-inner', styles.inner)}>
-            <SignInForm callbackUrl={callbackUrl} homeUrl={serverURL} />
+            <SignInForm redirectTo={redirectTo} homeUrl={serverURL} />
           </div>
         </main>
       </BylineAdminServicesProvider>

package/src/admin-shell/collections/create.tsx

@@ -13,6 +13,7 @@ import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Container, Section, useToastManager } from '@byline/ui/react'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { createCollectionDocument } from '../../server-fns/collections/index.js'
 import { useNavigate } from '../chrome/loose-router.js'
 import { useTanStackNavigationGuard } from './tanstack-navigation-guard.js'
@@ -66,13 +67,13 @@ export const CreateView = ({
       // doesn't return the new document's id.
       if (result?.documentId) {
         navigate({
-          to: '/admin/collections/$collection/$id' as never,
+          to: getAdminRoutePath('collections', '$collection', '$id'),
           params: { collection: path, id: result.documentId } as never,
           search: { action: 'created' },
         })
       } else {
         navigate({
-          to: '/admin/collections/$collection' as never,
+          to: getAdminRoutePath('collections', '$collection'),
           params: { collection: path },
           search: { action: 'created' },
         })
@@ -117,7 +118,7 @@ export const CreateView = ({
           useNavigationGuard={useTanStackNavigationGuard}
           onCancel={() =>
             navigate({
-              to: '/admin/collections/$collection' as never,
+              to: getAdminRoutePath('collections', '$collection'),
               params: { collection: path },
             })
           }

package/src/admin-shell/collections/document-history.tsx

@@ -52,12 +52,17 @@ const ACTION_KEYS: Record<string, string> = {
   'document.locales.changed': 'collections.documentHistory.actionLocalesChanged',
   'document.status.changed': 'collections.documentHistory.actionStatusChanged',
   'document.deleted': 'collections.documentHistory.actionDeleted',
+  'document.tree.placed': 'collections.documentHistory.actionTreePlaced',
+  'document.tree.reparented': 'collections.documentHistory.actionTreeReparented',
+  'document.tree.reordered': 'collections.documentHistory.actionTreeReordered',
+  'document.tree.removed': 'collections.documentHistory.actionTreeRemoved',
 }
 
 /** Render an audit before/after value inline: arrays comma-join, nullish → em-dash. */
 function formatAuditValue(value: unknown): string {
   if (value == null) return '—'
   if (Array.isArray(value)) return value.length > 0 ? value.join(', ') : '—'
+  if (typeof value === 'object') return JSON.stringify(value)
   return String(value)
 }
 

package/src/admin-shell/collections/edit.tsx

@@ -15,11 +15,13 @@ import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
 import { useTranslation } from '@byline/i18n/react'
 import { Container, Section, useToastManager } from '@byline/ui/react'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import {
   copyDocumentToLocale,
   deleteDocument,
   deleteDocumentLocale,
   duplicateCollectionDocument,
+  hasDeleteSideEffectFailures,
   unpublishDocument,
   updateCollectionDocumentSystemFields,
   updateCollectionDocumentWithPatches,
@@ -73,7 +75,7 @@ export const EditView = ({
 
   const handleLocaleChange = (newLocale: string) => {
     navigate({
-      to: '/admin/collections/$collection/$id' as never,
+      to: getAdminRoutePath('collections', '$collection', '$id'),
       params: { collection: path, id: String(initialData.id) },
       search: { locale: newLocale },
     })
@@ -98,7 +100,7 @@ export const EditView = ({
       setEditState({ status: 'success', message: description })
       // Refresh the page to reflect the new status.
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: String(initialData.id) },
         search: (prev: Record<string, unknown>) => ({ ...prev }),
       })
@@ -149,7 +151,7 @@ export const EditView = ({
       })
       setEditState({ status: 'success', message: description })
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: String(initialData.id) },
         search: (prev: Record<string, unknown>) => ({ ...prev }),
       })
@@ -196,7 +198,7 @@ export const EditView = ({
       })
       // Navigate to the new document's edit view.
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: result.documentId },
       })
     } catch (err) {
@@ -270,7 +272,7 @@ export const EditView = ({
       // Switch the form to the target locale so the editor sees the
       // copied content immediately.
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: String(initialData.id) },
         search: { locale: targetLocale },
       })
@@ -322,7 +324,7 @@ export const EditView = ({
       // The deleted locale may be the one being viewed — land on the default
       // locale (which always survives) so the loader re-fetches a valid view.
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: String(initialData.id) },
         search: { locale: defaultContentLocale },
       })
@@ -347,14 +349,19 @@ export const EditView = ({
 
   const handleDelete = async () => {
     try {
-      await deleteDocument({ data: { collection: path, id: String(initialData.id) } })
-      const description = t('collections.edit.deletedDescription', { label: singular })
+      const result = await deleteDocument({
+        data: { collection: path, id: String(initialData.id) },
+      })
+      const hasSideEffectFailures = hasDeleteSideEffectFailures(result)
+      const description = hasSideEffectFailures
+        ? t('collections.edit.deletedWithWarningsDescription', { label: singular })
+        : t('collections.edit.deletedDescription', { label: singular })
       toastManager.add({
         title: t('collections.edit.deleteTitle', { label: singular }),
         description,
         data: {
-          intent: 'success',
-          iconType: 'success',
+          intent: hasSideEffectFailures ? 'warning' : 'success',
+          iconType: hasSideEffectFailures ? 'warning' : 'success',
           icon: true,
           close: true,
         },
@@ -362,7 +369,7 @@ export const EditView = ({
       setEditState({ status: 'success', message: description })
       // Navigate back to the collection list after deletion.
       navigate({
-        to: '/admin/collections/$collection' as never,
+        to: getAdminRoutePath('collections', '$collection'),
         params: { collection: path },
       })
     } catch (err) {
@@ -457,7 +464,7 @@ export const EditView = ({
       // The new version will have a fresh version ID, draft status, and
       // updated publishedVersion metadata.
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection: path, id: String(initialData.id) },
         search: (prev: Record<string, unknown>) => ({ ...prev }),
       })
@@ -524,7 +531,7 @@ export const EditView = ({
           workflowStatuses={workflowStatuses}
           onCancel={() =>
             navigate({
-              to: '/admin/collections/$collection' as never,
+              to: getAdminRoutePath('collections', '$collection'),
               params: { collection: path },
             })
           }

package/src/admin-shell/collections/history.tsx

@@ -26,6 +26,7 @@ import {
 } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getAdminRouteId, getAdminRoutePath } from '../../routes/admin-path.js'
 import { Link, useNavigate } from '../chrome/loose-router.js'
 import { RouterPager } from '../chrome/router-pager.js'
 import { TableHeadingCellSortable } from '../chrome/th-sortable.js'
@@ -139,8 +140,8 @@ export const HistoryView = ({
   defaultContentLocale: string
 }) => {
   const { id, collection } = useParams({
-    from: '/_byline/admin/collections/$collection/$id/history',
-  })
+    from: getAdminRouteId('collections', '$collection', '$id', 'history') as never,
+  }) as { id: string; collection: string }
   const navigate = useNavigate()
   const { getCollectionDocumentVersion } = useBylineAdminServices()
   const { t } = useTranslation('byline-admin')
@@ -181,7 +182,7 @@ export const HistoryView = ({
       delete params.tab
     }
     navigate({
-      to: '/admin/collections/$collection/$id/history' as never,
+      to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
       params: { collection, id } as never,
       search: params,
     })
@@ -193,7 +194,7 @@ export const HistoryView = ({
     delete params.page
     params.page_size = Number.parseInt(value, 10)
     navigate({
-      to: '/admin/collections/$collection/$id/history' as never,
+      to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
       params: { collection, id } as never,
       search: params,
     })
@@ -382,7 +383,7 @@ export const HistoryView = ({
                                     </button>
                                   ) : (
                                     <Link
-                                      to={'/admin/collections/$collection/$id' as never}
+                                      to={getAdminRoutePath('collections', '$collection', '$id')}
                                       params={{
                                         collection,
                                         id: document.id,

package/src/admin-shell/collections/list.tsx

@@ -43,6 +43,7 @@ import {
 } from '@dnd-kit/sortable'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { Link, useNavigate } from '../chrome/loose-router.js'
 import { RouterPager } from '../chrome/router-pager.js'
 import { SortAscendingIcon } from '../chrome/sort-icons.js'
@@ -274,7 +275,7 @@ export const ListView = ({
       delete params.page
       params.query = query
       navigate({
-        to: '/admin/collections/$collection' as never,
+        to: getAdminRoutePath('collections', '$collection'),
         params: { collection: data.included.collection.path },
         search: params,
       })
@@ -286,7 +287,7 @@ export const ListView = ({
     delete params.page
     delete params.query
     navigate({
-      to: '/admin/collections/$collection' as never,
+      to: getAdminRoutePath('collections', '$collection'),
       params: { collection: data.included.collection.path },
       search: params,
     })
@@ -302,7 +303,7 @@ export const ListView = ({
       params.status = value
     }
     navigate({
-      to: '/admin/collections/$collection' as never,
+      to: getAdminRoutePath('collections', '$collection'),
       params: { collection: data.included.collection.path },
       search: params,
     })
@@ -314,7 +315,7 @@ export const ListView = ({
     delete params.page
     params.page_size = Number.parseInt(value, 10)
     navigate({
-      to: '/admin/collections/$collection' as never,
+      to: getAdminRoutePath('collections', '$collection'),
       params: { collection: data.included.collection.path },
       search: params,
     })
@@ -336,7 +337,7 @@ export const ListView = ({
             aria-label={t('collections.list.createAriaLabel')}
             render={
               <Link
-                to={'/admin/collections/$collection/create' as never}
+                to={getAdminRoutePath('collections', '$collection', 'create')}
                 params={{ collection: data.included.collection.path }}
               />
             }
@@ -454,7 +455,7 @@ export const ListView = ({
                           >
                             {useAsTitle && column.fieldName === useAsTitle ? (
                               <Link
-                                to={'/admin/collections/$collection/$id' as never}
+                                to={getAdminRoutePath('collections', '$collection', '$id')}
                                 params={{
                                   collection: data.included.collection.path,
                                   id: document.id,
@@ -530,7 +531,7 @@ export const ListView = ({
                         >
                           {useAsTitle && column.fieldName === useAsTitle ? (
                             <Link
-                              to={'/admin/collections/$collection/$id' as never}
+                              to={getAdminRoutePath('collections', '$collection', '$id')}
                               params={{
                                 collection: data.included.collection.path,
                                 id: document.id,

package/src/admin-shell/collections/restore-version-modal.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, LoaderEllipsis, Modal } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { restoreDocumentVersion } from '../../server-fns/collections/index.js'
 import { useNavigate } from '../chrome/loose-router.js'
 import styles from './restore-version-modal.module.css'
@@ -62,7 +63,7 @@ export function RestoreVersionModal({
       onClose()
       await router.invalidate()
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection, id: documentId },
       })
     } catch (err) {

package/src/admin-shell/collections/tree-list.tsx

@@ -7,7 +7,7 @@
  */
 
 import type React from 'react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from '@tanstack/react-router'
 
 import { renderFormatted, StatusBadge } from '@byline/admin/react'
@@ -41,6 +41,12 @@ import {
 } from '@dnd-kit/sortable'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
+import {
+  createAdminTreeMoveController,
+  getAdminTreeMoveUiEffects,
+  shouldSyncAdminTreeRows,
+} from '../../server-fns/collections/tree-mutation.js'
 import { Link } from '../chrome/loose-router.js'
 import { TableHeadingCellSortable } from '../chrome/th-sortable.js'
 import { formatNumber } from '../chrome/utils.js'
@@ -59,7 +65,6 @@ export type TreeMoveFn = (params: {
   afterDocumentId: string | null
 }) => Promise<unknown>
 
-// biome-ignore lint/suspicious/noExplicitAny: tree rows carry heterogeneous fields
 function getColumnValue(row: CollectionTreeRow, fieldName: string): any {
   if (row.fields && fieldName in row.fields) return row.fields[fieldName]
   return (row as Record<string, any>)[fieldName]
@@ -73,19 +78,20 @@ function getColumnValue(row: CollectionTreeRow, fieldName: string): any {
  */
 function SortableTreeRow({
   id,
-  depth,
   dragging,
+  disabled,
   dragHandleLabel,
   children,
 }: {
   id: string
-  depth: number
   dragging: boolean
+  disabled: boolean
   dragHandleLabel: string
   children: React.ReactNode
 }) {
   const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id,
+    disabled,
   })
   const style: React.CSSProperties = {
     transform: transform ? `translate3d(0, ${transform.y}px, 0)` : undefined,
@@ -103,6 +109,7 @@ function SortableTreeRow({
       <td className={cx('byline-tree-list-drag-cell', styles.dragCell)}>
         <button
           type="button"
+          disabled={disabled}
           className={cx('byline-tree-list-drag-handle', styles.dragHandle)}
           aria-label={dragHandleLabel}
           {...attributes}
@@ -149,8 +156,12 @@ export const TreeListView = ({
   // back). Mirrors the flat-list reorder pattern.
   const [localPlaced, setLocalPlaced] = useState(() => rows.filter((r) => !r.unplaced))
   const [isMoving, setIsMoving] = useState(false)
+  const [moveController] = useState(() => createAdminTreeMoveController())
+  const preserveOptimisticForRows = useRef<CollectionTreeRow[] | null>(null)
   useEffect(() => {
-    if (!isMoving) setLocalPlaced(rows.filter((r) => !r.unplaced))
+    if (!shouldSyncAdminTreeRows(rows, preserveOptimisticForRows.current, isMoving)) return
+    preserveOptimisticForRows.current = null
+    setLocalPlaced(rows.filter((r) => !r.unplaced))
   }, [rows, isMoving])
 
   const [activeId, setActiveId] = useState<string | null>(null)
@@ -174,11 +185,17 @@ export const TreeListView = ({
     setOffsetLeft(0)
   }
 
-  const handleDragStart = ({ active }: DragStartEvent) => setActiveId(String(active.id))
+  const handleDragStart = ({ active }: DragStartEvent) => {
+    if (!moveController.isMoving()) setActiveId(String(active.id))
+  }
   const handleDragMove = ({ delta }: DragMoveEvent) => setOffsetLeft(delta.x)
   const handleDragOver = ({ over }: DragOverEvent) => setOverId(over ? String(over.id) : null)
 
   const handleDragEnd = async ({ active, over }: DragEndEvent) => {
+    if (moveController.isMoving()) {
+      resetDnd()
+      return
+    }
     const proj =
       over != null
         ? getTreeProjection(localPlaced, String(active.id), String(over.id), offsetLeft, INDENT)
@@ -197,24 +214,60 @@ export const TreeListView = ({
 
     setLocalPlaced(next)
     setIsMoving(true)
-    try {
-      await onMove({
-        documentId,
-        parentDocumentId: proj.parentId,
-        beforeDocumentId: proj.beforeId,
-        afterDocumentId: proj.afterId,
-      })
-      await router.invalidate()
-    } catch {
+    const outcome = await moveController.execute(
+      () =>
+        onMove({
+          documentId,
+          parentDocumentId: proj.parentId,
+          beforeDocumentId: proj.beforeId,
+          afterDocumentId: proj.afterId,
+        }),
+      () => router.invalidate()
+    )
+
+    if (outcome.status === 'suppressed') {
       setLocalPlaced(current)
+      setIsMoving(moveController.isMoving())
+      return
+    }
+
+    const effects = getAdminTreeMoveUiEffects(outcome)
+    if (effects.rollback) setLocalPlaced(current)
+
+    if (effects.structuralFailure != null) {
+      const conflict = effects.structuralFailure === 'conflict'
       toastManager.add({
-        title: t('collections.list.reorderFailedToast'),
-        description: t('collections.list.reorderFailedDescription'),
+        title: t(
+          conflict ? 'collections.list.treeConflictToast' : 'collections.list.reorderFailedToast'
+        ),
+        description: t(
+          conflict
+            ? 'collections.list.treeConflictDescription'
+            : 'collections.list.reorderFailedDescription'
+        ),
         data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
       })
-    } finally {
-      setIsMoving(false)
     }
+
+    if (effects.committedHookWarning) {
+      toastManager.add({
+        title: t('collections.list.treeHookFailedToast'),
+        description: t('collections.list.treeHookFailedDescription'),
+        data: { intent: 'warning', iconType: 'warning', icon: true, close: true },
+      })
+    }
+
+    if (effects.refreshWarning) {
+      toastManager.add({
+        title: t('collections.list.treeRefreshFailedToast'),
+        description: t('collections.list.treeRefreshFailedDescription'),
+        data: { intent: 'warning', iconType: 'warning', icon: true, close: true },
+      })
+    }
+
+    if (effects.preserveOptimistic) preserveOptimisticForRows.current = rows
+
+    setIsMoving(false)
   }
 
   const renderCells = (row: CollectionTreeRow, depth: number) =>
@@ -240,7 +293,7 @@ export const TreeListView = ({
                 </span>
               )}
               <Link
-                to={'/admin/collections/$collection/$id' as never}
+                to={getAdminRoutePath('collections', '$collection', '$id')}
                 params={{ collection, id: row.id }}
               >
                 {column.formatter
@@ -277,7 +330,10 @@ export const TreeListView = ({
           <IconButton
             aria-label={t('collections.list.createAriaLabel')}
             render={
-              <Link to={'/admin/collections/$collection/create' as never} params={{ collection }} />
+              <Link
+                to={getAdminRoutePath('collections', '$collection', 'create')}
+                params={{ collection }}
+              />
             }
           >
             <PlusIcon height="18px" width="18px" svgClassName="stroke-white" />
@@ -323,8 +379,8 @@ export const TreeListView = ({
                       <SortableTreeRow
                         key={row.id}
                         id={row.id}
-                        depth={depth}
                         dragging={row.id === activeId}
+                        disabled={isMoving}
                         dragHandleLabel={t('collections.list.dragHandleAriaLabel')}
                       >
                         {renderCells(row, depth)}

package/src/admin-shell/collections/view-menu.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Button, HistoryIcon, IconButton, Label, Select } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { useNavigate } from '../chrome/loose-router.js'
 import { PreviewLink } from './preview-link.js'
 import styles from './view-menu.module.css'
@@ -86,7 +87,7 @@ export const ViewMenu = ({
   useEffect(() => {
     if (activeView === 'edit' && locale === 'all') {
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection, id: documentId },
         search: (prev: Record<string, unknown>) => ({
           ...prev,
@@ -103,19 +104,19 @@ export const ViewMenu = ({
     const search = (prev: Record<string, unknown>) => ({ ...prev, locale: value })
     if (activeView === 'api') {
       navigate({
-        to: '/admin/collections/$collection/$id/api' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id', 'api'),
         params: { collection, id: documentId },
         search: search as never,
       })
     } else if (activeView === 'history') {
       navigate({
-        to: '/admin/collections/$collection/$id/history' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
         params: { collection, id: documentId },
         search: search as never,
       })
     } else {
       navigate({
-        to: '/admin/collections/$collection/$id' as never,
+        to: getAdminRoutePath('collections', '$collection', '$id'),
         params: { collection, id: documentId },
         search: search as never,
       })
@@ -127,7 +128,7 @@ export const ViewMenu = ({
     const n = Number.parseInt(value, 10)
     const nextDepth = Number.isFinite(n) ? Math.max(0, Math.min(3, n)) : 0
     navigate({
-      to: '/admin/collections/$collection/$id/api' as never,
+      to: getAdminRoutePath('collections', '$collection', '$id', 'api'),
       params: { collection, id: documentId },
       // Store 0 as undefined so the URL stays clean when the user picks
       // "no populate" — avoids `?depth=0` in bookmarks / share links.
@@ -201,7 +202,7 @@ export const ViewMenu = ({
         variant={activeView === 'history' ? 'filled' : 'text'}
         onClick={() =>
           navigate({
-            to: '/admin/collections/$collection/$id/history' as never,
+            to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
             params: { collection, id: documentId },
             search: locale ? { locale } : {},
           })
@@ -215,7 +216,7 @@ export const ViewMenu = ({
         className={cx('byline-view-menu-button', styles.button)}
         onClick={() =>
           navigate({
-            to: '/admin/collections/$collection/$id' as never,
+            to: getAdminRoutePath('collections', '$collection', '$id'),
             params: { collection, id: documentId },
             search: locale ? { locale } : {},
           })
@@ -229,7 +230,7 @@ export const ViewMenu = ({
         className={cx('byline-view-menu-button', styles.button)}
         onClick={() =>
           navigate({
-            to: '/admin/collections/$collection/$id/api' as never,
+            to: getAdminRoutePath('collections', '$collection', '$id', 'api'),
             params: { collection, id: documentId },
             search: locale ? { locale } : {},
           })