@byline/host-tanstack-start 3.21.0 → 4.0.0

package/dist/server-fns/collections/tree-mutation.js

@@ -0,0 +1,109 @@
+import { ErrorCodes, TREE_HOOK_COMMITTED_MARKER, TREE_PLACEMENT_STALE_MARKER } from "@byline/core";
+function hasErrorCode(error, code) {
+    return 'object' == typeof error && null != error && 'code' in error && error.code === code;
+}
+function hasMessageMarker(error, marker) {
+    return error instanceof Error && error.message.startsWith(marker);
+}
+function isTreeMutationConflict(error) {
+    if (hasErrorCode(error, ErrorCodes.CONFLICT)) return true;
+    return hasMessageMarker(error, TREE_PLACEMENT_STALE_MARKER);
+}
+function isCommittedTreeHookFailure(error) {
+    if (hasErrorCode(error, ErrorCodes.TREE_HOOK_COMMITTED)) return true;
+    return hasMessageMarker(error, TREE_HOOK_COMMITTED_MARKER);
+}
+function getAdminTreeMoveUiEffects(outcome) {
+    if ('mutation-failed' === outcome.status) return {
+        rollback: true,
+        preserveOptimistic: false,
+        structuralFailure: isTreeMutationConflict(outcome.error) ? 'conflict' : 'generic',
+        committedHookWarning: false,
+        refreshWarning: null != outcome.refreshError
+    };
+    if ('committed-hook-failed' === outcome.status) return {
+        rollback: false,
+        preserveOptimistic: null != outcome.refreshError,
+        structuralFailure: null,
+        committedHookWarning: true,
+        refreshWarning: null != outcome.refreshError
+    };
+    if ('refresh-failed' === outcome.status) return {
+        rollback: false,
+        preserveOptimistic: true,
+        structuralFailure: null,
+        committedHookWarning: false,
+        refreshWarning: true
+    };
+    return {
+        rollback: 'suppressed' === outcome.status,
+        preserveOptimistic: false,
+        structuralFailure: null,
+        committedHookWarning: false,
+        refreshWarning: false
+    };
+}
+function shouldSyncAdminTreeRows(rows, preservedRows, isMoving) {
+    return !isMoving && rows !== preservedRows;
+}
+async function executeAdminTreeMove(mutate, refresh) {
+    try {
+        await mutate();
+    } catch (error) {
+        const status = isCommittedTreeHookFailure(error) ? 'committed-hook-failed' : 'mutation-failed';
+        try {
+            await refresh();
+            return {
+                status,
+                error
+            };
+        } catch (refreshError) {
+            return {
+                status,
+                error,
+                refreshError
+            };
+        }
+    }
+    try {
+        await refresh();
+        return {
+            status: 'ok'
+        };
+    } catch (error) {
+        return {
+            status: 'refresh-failed',
+            error
+        };
+    }
+}
+function createAdminTreeMoveController() {
+    let moving = false;
+    return {
+        isMoving: ()=>moving,
+        execute: async (mutate, refresh)=>{
+            if (moving) return {
+                status: 'suppressed'
+            };
+            moving = true;
+            try {
+                return await executeAdminTreeMove(mutate, refresh);
+            } finally{
+                moving = false;
+            }
+        }
+    };
+}
+function placeAdminTreeNode(handle, documentId, options) {
+    return handle.placeTreeNode(documentId, {
+        ...options,
+        reconcile: options.reconcile ?? true
+    });
+}
+function removeAdminTreeNode(handle, documentId, options = {}) {
+    return handle.removeFromTree(documentId, {
+        ...options,
+        reconcile: options.reconcile ?? true
+    });
+}
+export { createAdminTreeMoveController, executeAdminTreeMove, getAdminTreeMoveUiEffects, isCommittedTreeHookFailure, isTreeMutationConflict, placeAdminTreeNode, removeAdminTreeNode, shouldSyncAdminTreeRows };

package/dist/server-fns/collections/tree-read.d.ts

@@ -0,0 +1,6 @@
+import type { ClientDocument, CollectionHandle, TreeParentResult } from '@byline/client';
+import type { ReadContext } from '@byline/core';
+/** Admin tree placement reads must include drafts. */
+export declare function getAdminTreeParent(handle: Pick<CollectionHandle, 'getTreeParent'>, documentId: string): Promise<TreeParentResult>;
+/** Find unplaced nodes through the same row scope as the structural tree read. */
+export declare function getAdminUnplacedTreeDocuments(handle: Pick<CollectionHandle, 'find'>, placed: ReadonlySet<string>, readContext: ReadContext, locale?: string): Promise<ClientDocument[]>;

package/dist/server-fns/collections/tree-read.js

@@ -0,0 +1,15 @@
+function getAdminTreeParent(handle, documentId) {
+    return handle.getTreeParent(documentId, {
+        status: 'any'
+    });
+}
+async function getAdminUnplacedTreeDocuments(handle, placed, readContext, locale) {
+    const all = await handle.find({
+        status: 'any',
+        locale,
+        pageSize: 1000,
+        _readContext: readContext
+    });
+    return all.docs.filter((doc)=>!placed.has(doc.id));
+}
+export { getAdminTreeParent, getAdminUnplacedTreeDocuments };

package/dist/server-fns/collections/tree.d.ts

@@ -11,12 +11,14 @@ export declare const placeTreeNode: import("@tanstack/react-start").RequiredFetc
     parentDocumentId: string | null;
     beforeDocumentId?: string | null;
     afterDocumentId?: string | null;
+    reconcile?: boolean;
 }) => {
     collection: string;
     documentId: string;
     parentDocumentId: string | null;
     beforeDocumentId?: string | null;
     afterDocumentId?: string | null;
+    reconcile?: boolean;
 }, Promise<{
     status: 'ok';
     orderKey: string;
@@ -24,9 +26,11 @@ export declare const placeTreeNode: import("@tanstack/react-start").RequiredFetc
 export declare const removeFromTree: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
     collection: string;
     documentId: string;
+    reconcile?: boolean;
 }) => {
     collection: string;
     documentId: string;
+    reconcile?: boolean;
 }, Promise<{
     status: 'ok';
 }>>;
@@ -47,10 +51,7 @@ export declare const getTreeParent: import("@tanstack/react-start").RequiredFetc
 }) => {
     collection: string;
     documentId: string;
-}, Promise<{
-    placed: boolean;
-    parentDocumentId: string | null;
-}>>;
+}, Promise<import("@byline/client").TreeParentResult>>;
 export interface CollectionTreeRow {
     id: string;
     /** Parent document id, or `null` for a root or unplaced node. Drives the

package/dist/server-fns/collections/tree.js

@@ -1,7 +1,9 @@
 import { createServerFn } from "@tanstack/react-start";
-import { ERR_NOT_FOUND, getLogger } from "@byline/core";
+import { ERR_NOT_FOUND, createReadContext, getLogger } from "@byline/core";
 import { ensureCollection } from "../../integrations/api-utils.js";
 import { getAdminBylineClient } from "../../integrations/byline-client.js";
+import { placeAdminTreeNode, removeAdminTreeNode } from "./tree-mutation.js";
+import { getAdminTreeParent, getAdminUnplacedTreeDocuments } from "./tree-read.js";
 const placeTreeNode = createServerFn({
     method: 'POST'
 }).validator((input)=>input).handler(async ({ data })=>{
@@ -14,10 +16,11 @@ const placeTreeNode = createServerFn({
         }
     }).log(getLogger());
     const handle = getAdminBylineClient().collection(path);
-    const result = await handle.placeTreeNode(documentId, {
+    const result = await placeAdminTreeNode(handle, documentId, {
         parentDocumentId: data.parentDocumentId,
         beforeDocumentId: data.beforeDocumentId ?? null,
-        afterDocumentId: data.afterDocumentId ?? null
+        afterDocumentId: data.afterDocumentId ?? null,
+        reconcile: data.reconcile
     });
     return {
         status: 'ok',
@@ -35,7 +38,9 @@ const removeFromTree = createServerFn({
             collectionPath: path
         }
     }).log(getLogger());
-    await getAdminBylineClient().collection(path).removeFromTree(documentId);
+    await removeAdminTreeNode(getAdminBylineClient().collection(path), documentId, {
+        reconcile: data.reconcile
+    });
     return {
         status: 'ok'
     };
@@ -76,7 +81,7 @@ const getTreeParent = createServerFn({
             collectionPath: path
         }
     }).log(getLogger());
-    return getAdminBylineClient().collection(path).getTreeParent(documentId);
+    return getAdminTreeParent(getAdminBylineClient().collection(path), documentId);
 });
 const getCollectionTree = createServerFn({
     method: 'GET'
@@ -90,9 +95,11 @@ const getCollectionTree = createServerFn({
         }
     }).log(getLogger());
     const handle = getAdminBylineClient().collection(path);
+    const readContext = createReadContext();
     const forest = await handle.getSubtree({
         status: 'any',
-        locale: data.locale
+        locale: data.locale,
+        _readContext: readContext
     });
     const rows = [];
     const placed = new Set();
@@ -115,12 +122,8 @@ const getCollectionTree = createServerFn({
         }
     };
     walk(forest, 0, null);
-    const all = await handle.find({
-        status: 'any',
-        pageSize: 1000,
-        _bypassBeforeRead: true
-    });
-    for (const doc of all.docs)if (!placed.has(doc.id)) rows.push({
+    const unplaced = await getAdminUnplacedTreeDocuments(handle, placed, readContext, data.locale);
+    for (const doc of unplaced)rows.push({
         id: doc.id,
         parentId: null,
         depth: 0,

package/dist/server-fns/collections/update.js

@@ -65,7 +65,8 @@ const updateCollectionDocumentSystemFields = createServerFn({
         documentId: id,
         locale: locale ?? serverConfig.i18n.content.defaultLocale,
         path: explicitPath,
-        availableLocales
+        availableLocales,
+        reconcile: true
     });
     return {
         status: 'ok'

package/dist/vite/client-hook-boundary.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Production client-bundle guard for server-only Byline lifecycle modules.
+ *
+ * Collection schemas are isomorphic, but registered lifecycle hooks may
+ * import Node APIs, caches, storage SDKs, and other server-only dependencies.
+ * This Vite plugin inspects emitted client chunks and fails the build if a
+ * hook implementation, server hook registry, or shared lifecycle helper
+ * becomes reachable from the browser bundle.
+ */
+import type { Plugin } from 'vite';
+export declare function findServerHookModules(moduleIds: Iterable<string>): string[];
+export declare function bylineClientHookBoundary(): Plugin;

package/dist/vite/client-hook-boundary.js

@@ -0,0 +1,20 @@
+const SERVER_HOOK_MODULE = /\/byline\/collections\/(?:.+\/)?(?:hooks|[^/]+-hooks|[^/]+-lifecycle-hooks|[^/]+-side-effects)\.[cm]?[jt]sx?$/;
+function findServerHookModules(moduleIds) {
+    return [
+        ...moduleIds
+    ].filter((moduleId)=>{
+        const normalized = moduleId.replaceAll('\\', '/').split('?', 1)[0];
+        return SERVER_HOOK_MODULE.test(normalized);
+    });
+}
+function bylineClientHookBoundary() {
+    return {
+        name: 'byline:client-hook-boundary',
+        generateBundle (_options, bundle) {
+            if (this.environment?.name !== 'client') return;
+            const leaked = findServerHookModules(Object.values(bundle).flatMap((output)=>'chunk' === output.type ? Object.keys(output.modules) : []));
+            if (leaked.length > 0) this.error(`server lifecycle modules entered the client bundle:\n${leaked.join('\n')}`);
+        }
+    };
+}
+export { bylineClientHookBoundary, findServerHookModules };

package/dist/vite/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export { bylineClientHookBoundary } from './client-hook-boundary.js';

package/dist/vite/index.js

@@ -0,0 +1 @@
+export { bylineClientHookBoundary } from "./client-hook-boundary.js";

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.21.0",
+  "version": "4.0.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -108,6 +108,10 @@
     "./routes/*": {
       "types": "./dist/routes/*.d.ts",
       "import": "./dist/routes/*.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
     }
   },
   "dependencies": {
@@ -119,19 +123,20 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.1",
     "zod": "^4.4.3",
-    "@byline/admin": "3.21.0",
-    "@byline/ai": "3.21.0",
-    "@byline/client": "3.21.0",
-    "@byline/core": "3.21.0",
-    "@byline/auth": "3.21.0",
-    "@byline/ui": "3.21.0",
-    "@byline/i18n": "3.21.0"
+    "@byline/admin": "4.0.0",
+    "@byline/auth": "4.0.0",
+    "@byline/ui": "4.0.0",
+    "@byline/i18n": "4.0.0",
+    "@byline/ai": "4.0.0",
+    "@byline/client": "4.0.0",
+    "@byline/core": "4.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",
     "@tanstack/react-start": "^1.167.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "vite": "^8.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.2",
@@ -148,6 +153,7 @@
     "rimraf": "^6.1.3",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
+    "vite": "^8.1.3",
     "vitest": "^4.1.10"
   },
   "publishConfig": {

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

@@ -15,6 +15,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Button, Container, Section, Select, Table } from '@byline/ui/react'
 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 styles from './list.module.css'
@@ -33,6 +34,10 @@ const ACTION_KEYS: Record<string, string> = {
   'document.locales.changed': 'activity.actions.localesChanged',
   'document.status.changed': 'activity.actions.statusChanged',
   'document.deleted': 'activity.actions.deleted',
+  'document.tree.placed': 'activity.actions.treePlaced',
+  'document.tree.reparented': 'activity.actions.treeReparented',
+  'document.tree.reordered': 'activity.actions.treeReordered',
+  'document.tree.removed': 'activity.actions.treeRemoved',
 }
 
 /** The selectable action types, in display order. `_all` clears the filter. */
@@ -43,12 +48,17 @@ const ACTION_FILTER_VALUES = [
   'document.path.changed',
   'document.locales.changed',
   'document.deleted',
+  'document.tree.placed',
+  'document.tree.reparented',
+  'document.tree.reordered',
+  'document.tree.removed',
 ] as const
 
 /** 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)
 }
 
@@ -81,7 +91,7 @@ export const ActivitySystemView = ({ data }: { data: SystemActivityResponse }) =
     } else {
       params[key] = value
     }
-    navigate({ to: '/admin/activity' as never, search: params })
+    navigate({ to: getAdminRoutePath('activity'), search: params })
   }
 
   const collectionItems = [
@@ -134,7 +144,7 @@ export const ActivitySystemView = ({ data }: { data: SystemActivityResponse }) =
             <Button
               size="sm"
               variant="text"
-              onClick={() => navigate({ to: '/admin/activity' as never, search: {} })}
+              onClick={() => navigate({ to: getAdminRoutePath('activity'), search: {} })}
             >
               {t('activity.filters.clear')}
             </Button>
@@ -190,7 +200,7 @@ export const ActivitySystemView = ({ data }: { data: SystemActivityResponse }) =
                       <Table.Cell>
                         {col != null && entry.documentId != null ? (
                           <Link
-                            to={'/admin/collections/$collection/$id' as never}
+                            to={getAdminRoutePath('collections', '$collection', '$id')}
                             params={{ collection: col.path, id: entry.documentId }}
                           >
                             {collectionLabel}

package/src/admin-shell/admin-roles/delete.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 { type AdminRoleResponse, deleteAdminRole } from '../../server-fns/admin-roles/index.js'
 import { useNavigate } from '../chrome/loose-router.js'
 import styles from './delete.module.css'
@@ -52,7 +53,7 @@ export function DeleteRole({ role, onClose }: DeleteRoleProps) {
       // forced to re-fetch — without this, TanStack Router can serve
       // the cached pre-delete list.
       await router.invalidate()
-      navigate({ to: '/admin/roles' as never })
+      navigate({ to: getAdminRoutePath('roles') })
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.roles.versionConflict') {

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

@@ -46,6 +46,7 @@ import {
 } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { reorderAdminRoles } from '../../server-fns/admin-roles/reorder.js'
 import { Link } from '../chrome/loose-router.js'
 import { formatNumber } from '../chrome/utils.js'
@@ -97,7 +98,7 @@ const DraggableRow: React.FC<DraggableRowProps> = ({ item, disabled }) => {
         </div>
       </Table.Cell>
       <Table.Cell>
-        <Link to={'/admin/roles/$id' as never} params={{ id: item.id }}>
+        <Link to={getAdminRoutePath('roles', '$id')} params={{ id: item.id }}>
           {item.name}
         </Link>
       </Table.Cell>

package/src/admin-shell/admin-users/delete.tsx

@@ -15,7 +15,7 @@
  * component only lays out the content + action row — the modal header
  * and dismiss button are already drawn by the container.
  *
- * On success we navigate away to `/admin/users`; the record that hosts
+ * On success we navigate back to the configured admin users list; the record that hosts
  * this view no longer exists. The `onSuccess` callback on `PanelProps`
  * is unused here because `delete` produces no updated user.
  */
@@ -27,6 +27,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 { type AdminUserResponse, deleteAdminUser } from '../../server-fns/admin-users/index.js'
 import { useNavigate } from '../chrome/loose-router.js'
 import styles from './delete.module.css'
@@ -62,7 +63,7 @@ export function DeleteUser({ user, onClose }: DeleteUserProps) {
       // forced to re-fetch — without this, TanStack Router can serve
       // the cached pre-delete list.
       await router.invalidate()
-      navigate({ to: '/admin/users' as never })
+      navigate({ to: getAdminRoutePath('users') })
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.users.selfDeleteForbidden') {

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

@@ -28,6 +28,7 @@ import {
 } from '@byline/ui/react'
 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 {
@@ -45,7 +46,7 @@ import type {
 // are fixed at module scope; the `label` field is filled in per-render
 // inside the component so it can flow through `t(...)`. Same pattern the
 // account container's `panels` map uses.
-type ColumnTemplate = Omit<TableHeadingCellSortableProps, 'lng' | 'label'> & {
+type ColumnTemplate = Omit<TableHeadingCellSortableProps, 'lng' | 'label' | 'path'> & {
   labelKey: string
 }
 
@@ -53,7 +54,6 @@ const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'given_name',
     labelKey: 'adminUsers.list.columns.givenName',
-    path: '/admin/users',
     sortable: true,
     scope: 'col',
     align: 'left',
@@ -62,7 +62,6 @@ const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'family_name',
     labelKey: 'adminUsers.list.columns.familyName',
-    path: '/admin/users',
     sortable: true,
     scope: 'col',
     align: 'left',
@@ -71,7 +70,6 @@ const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'email',
     labelKey: 'adminUsers.list.columns.email',
-    path: '/admin/users',
     sortable: true,
     scope: 'col',
     align: 'left',
@@ -80,7 +78,6 @@ const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'updated_at',
     labelKey: 'adminUsers.list.columns.updated',
-    path: '/admin/users',
     sortable: true,
     scope: 'col',
     align: 'right',
@@ -89,7 +86,6 @@ const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'created_at',
     labelKey: 'adminUsers.list.columns.created',
-    path: '/admin/users',
     sortable: true,
     scope: 'col',
     align: 'right',
@@ -136,7 +132,12 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false)
 
   const tableColumnDefs = useMemo(
-    () => columnTemplates.map(({ labelKey, ...rest }) => ({ ...rest, label: t(labelKey) })),
+    () =>
+      columnTemplates.map(({ labelKey, ...rest }) => ({
+        ...rest,
+        label: t(labelKey),
+        path: getAdminRoutePath('users'),
+      })),
     [t]
   )
 
@@ -232,7 +233,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
                   })}
                 >
                   <Table.Cell>
-                    <Link to={'/admin/users/$id' as never} params={{ id: user.id }}>
+                    <Link to={getAdminRoutePath('users', '$id')} params={{ id: user.id }}>
                       {user.given_name ?? (
                         <span
                           className={cx('muted byline-admin-users-list-not-set', styles.notSet)}

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -14,6 +14,7 @@ import { LanguageMenu, useTranslation } from '@byline/i18n/react'
 import { Button } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { getSignInRoutePath } from '../../routes/sign-in-path.js'
 import { adminSignOut, type CurrentAdminUser } from '../../server-fns/auth/index.js'
 import styles from './admin-app-bar.module.css'
 import { AdminDrawerToggle } from './admin-drawer-toggle.js'
@@ -48,7 +49,7 @@ export function AdminAppBar({ user }: AdminAppBarProps) {
       console.warn('sign-out request failed', err)
     }
     // Full-page navigation so the admin guard re-runs with cleared cookies.
-    window.location.assign('/sign-in')
+    window.location.assign(getSignInRoutePath())
   }
 
   return (

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

@@ -27,6 +27,11 @@ import cx from 'classnames'
 import { useSwipeable } from 'react-swipeable'
 
 import { useAbilities } from '../../integrations/abilities.jsx'
+import {
+  getAdminRoutePath,
+  isAdminRoutePathActive,
+  isRoutePathWithin,
+} from '../../routes/admin-path.js'
 import styles from './admin-menu-drawer.module.css'
 import { useAdminMenu } from './admin-menu-provider.jsx'
 import { Link } from './loose-router.js'
@@ -35,8 +40,8 @@ import { PreviewToggle } from './preview-toggle.jsx'
 const isActive = (currentPath: string, linkHref: string): boolean => {
   // Root admin highlights only on exact match so it doesn't stay lit on
   // every admin subpath.
-  if (linkHref === '/admin') return currentPath === '/admin'
-  return currentPath.startsWith(linkHref)
+  if (linkHref === getAdminRoutePath()) return isAdminRoutePathActive(currentPath)
+  return isRoutePathWithin(currentPath, linkHref)
 }
 
 interface MenuItemProps {
@@ -119,7 +124,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
       <nav className={cx('byline-admin-menu-drawer admin-menu-drawer', styles.nav)}>
         <ul>
           <MenuItem
-            to="/admin"
+            to={getAdminRoutePath()}
             label={t('chrome.menu.dashboard')}
             icon={<HomeIcon width="20px" height="20px" />}
             pathname={pathname}
@@ -130,7 +135,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               <li className="menu-separator" />
               {canReadUsers && (
                 <MenuItem
-                  to="/admin/users"
+                  to={getAdminRoutePath('users')}
                   label={t('chrome.menu.adminUsers')}
                   icon={<UsersIcon width="20px" height="20px" />}
                   pathname={pathname}
@@ -139,7 +144,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               )}
               {canReadRoles && (
                 <MenuItem
-                  to="/admin/roles"
+                  to={getAdminRoutePath('roles')}
                   label={t('chrome.menu.adminRoles')}
                   icon={<RolesIcon width="20px" height="20px" />}
                   pathname={pathname}
@@ -148,7 +153,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               )}
               {canReadPermissions && (
                 <MenuItem
-                  to="/admin/permissions"
+                  to={getAdminRoutePath('permissions')}
                   label={t('chrome.menu.permissions')}
                   icon={<SettingsSlidersIcon width="20px" height="20px" />}
                   pathname={pathname}
@@ -157,7 +162,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               )}
               {canReadActivity && (
                 <MenuItem
-                  to="/admin/activity"
+                  to={getAdminRoutePath('activity')}
                   label={t('chrome.menu.activity')}
                   icon={<ActivityIcon width="20px" height="20px" />}
                   pathname={pathname}
@@ -169,7 +174,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
           <li className="menu-separator" />
           <PreviewToggle compact={compact} />
           <MenuItem
-            to="/admin/account"
+            to={getAdminRoutePath('account')}
             label={t('chrome.account')}
             icon={<UserIcon />}
             pathname={pathname}