@byline/host-tanstack-start 2.5.2 → 2.6.1

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

@@ -2,6 +2,7 @@
 
 import type React from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import cx from 'classnames'
 
 import styles from './hamburger.module.css'
@@ -21,6 +22,7 @@ export function Hamburger({
   ...other
 }: HamburgerProps): React.JSX.Element {
   const { toggleDrawer } = useAdminMenu()
+  const { t } = useTranslation('byline-admin')
 
   // Hard code the drawer hamburger to always closed
   // to prevent the 'X' pattern from being the default
@@ -43,7 +45,7 @@ export function Hamburger({
         className
       )}
       tabIndex={0}
-      aria-label="Open admin menu"
+      aria-label={t('chrome.menu.openAriaLabel')}
       aria-controls="admin-menu"
       aria-haspopup="true"
       {...other}

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

@@ -12,6 +12,7 @@ import { useRouterState } from '@tanstack/react-router'
 import { ADMIN_PERMISSIONS_ABILITIES } from '@byline/admin/admin-permissions'
 import { ADMIN_ROLES_ABILITIES } from '@byline/admin/admin-roles'
 import { ADMIN_USERS_ABILITIES } from '@byline/admin/admin-users'
+import { useTranslation } from '@byline/i18n/react'
 import { HomeIcon, RolesIcon, SettingsSlidersIcon, UserIcon, UsersIcon } from '@byline/ui/react'
 import cx from 'classnames'
 import { useSwipeable } from 'react-swipeable'
@@ -51,6 +52,7 @@ function MenuItem({ to, label, icon, pathname, compact }: MenuItemProps) {
 export function AdminMenuDrawer(): React.JSX.Element | null {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const { mobile, drawerOpen, closeDrawer } = useAdminMenu()
+  const { t } = useTranslation('byline-admin')
 
   // Cosmetic ability cues — hide the admin-management section entirely
   // when the user holds none of its read abilities. Server-side
@@ -96,7 +98,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
         <ul>
           <MenuItem
             to="/admin"
-            label="Dashboard"
+            label={t('chrome.menu.dashboard')}
             icon={<HomeIcon width="20px" height="20px" />}
             pathname={pathname}
             compact={compact}
@@ -107,7 +109,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               {canReadUsers && (
                 <MenuItem
                   to="/admin/users"
-                  label="Admin Users"
+                  label={t('chrome.menu.adminUsers')}
                   icon={<UsersIcon width="20px" height="20px" />}
                   pathname={pathname}
                   compact={compact}
@@ -116,7 +118,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               {canReadRoles && (
                 <MenuItem
                   to="/admin/roles"
-                  label="Admin Roles"
+                  label={t('chrome.menu.adminRoles')}
                   icon={<RolesIcon width="20px" height="20px" />}
                   pathname={pathname}
                   compact={compact}
@@ -125,7 +127,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
               {canReadPermissions && (
                 <MenuItem
                   to="/admin/permissions"
-                  label="Permissions"
+                  label={t('chrome.menu.permissions')}
                   icon={<SettingsSlidersIcon width="20px" height="20px" />}
                   pathname={pathname}
                   compact={compact}
@@ -137,7 +139,7 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
           <PreviewToggle compact={compact} />
           <MenuItem
             to="/admin/account"
-            label="Account"
+            label={t('chrome.account')}
             icon={<UserIcon />}
             pathname={pathname}
             compact={compact}

package/src/admin-shell/chrome/preview-toggle.tsx

@@ -23,6 +23,7 @@
 
 import { useEffect, useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { EyeClosedIcon, EyeOpenIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -37,6 +38,7 @@ interface PreviewToggleProps {
 }
 
 export function PreviewToggle({ compact }: PreviewToggleProps) {
+  const { t } = useTranslation('byline-admin')
   const [preview, setPreview] = useState<boolean | null>(null)
   const [busy, setBusy] = useState(false)
 
@@ -81,7 +83,7 @@ export function PreviewToggle({ compact }: PreviewToggleProps) {
   // Hide entirely until first read resolves so the label doesn't flicker.
   if (preview == null) return null
 
-  const label = preview ? 'Preview ON' : 'Preview OFF'
+  const label = preview ? t('chrome.preview.on') : t('chrome.preview.off')
   const icon = preview ? (
     <EyeOpenIcon width="20px" height="20px" />
   ) : (
@@ -94,10 +96,10 @@ export function PreviewToggle({ compact }: PreviewToggleProps) {
         type="button"
         onClick={handleToggle}
         disabled={busy}
-        aria-label={preview ? 'Disable preview mode' : 'Enable preview mode'}
-        title={
-          preview ? 'Drafts are visible on the public site' : 'Public site shows published only'
+        aria-label={
+          preview ? t('chrome.preview.disableAriaLabel') : t('chrome.preview.enableAriaLabel')
         }
+        title={preview ? t('chrome.preview.onTitle') : t('chrome.preview.offTitle')}
       >
         <span className="icon">{icon}</span>
         <span className="label">{label}</span>

package/src/admin-shell/chrome/route-error.tsx

@@ -16,48 +16,56 @@ import type { ErrorComponentProps, NotFoundRouteProps } from '@tanstack/react-ro
 import { useRouter } from '@tanstack/react-router'
 
 import { BylineError, ErrorCodes } from '@byline/core'
+import type { UseTranslationReturn } from '@byline/i18n/react'
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Container, Section } from '@byline/ui/react'
 import cx from 'classnames'
 
 import styles from './route-error.module.css'
 
-const ERROR_TITLES: Record<string, string> = {
-  [ErrorCodes.NOT_FOUND]: 'Not Found',
-  [ErrorCodes.VALIDATION]: 'Validation Error',
-  [ErrorCodes.CONFLICT]: 'Conflict',
-  [ErrorCodes.INVALID_TRANSITION]: 'Invalid Transition',
-  [ErrorCodes.PATCH_FAILED]: 'Update Failed',
-  [ErrorCodes.DATABASE]: 'Database Error',
-  [ErrorCodes.STORAGE]: 'Storage Error',
-  [ErrorCodes.UNHANDLED]: 'Unexpected Error',
+// Static map from ErrorCode → translation key. Resolved to a localised
+// string at render time via the `t` function below — module-scope
+// strings would otherwise freeze the English copy in.
+const ERROR_TITLE_KEYS: Record<string, string> = {
+  [ErrorCodes.NOT_FOUND]: 'routeError.titles.notFound',
+  [ErrorCodes.VALIDATION]: 'routeError.titles.validation',
+  [ErrorCodes.CONFLICT]: 'routeError.titles.conflict',
+  [ErrorCodes.INVALID_TRANSITION]: 'routeError.titles.invalidTransition',
+  [ErrorCodes.PATCH_FAILED]: 'routeError.titles.patchFailed',
+  [ErrorCodes.DATABASE]: 'routeError.titles.database',
+  [ErrorCodes.STORAGE]: 'routeError.titles.storage',
+  [ErrorCodes.UNHANDLED]: 'routeError.titles.unhandled',
 }
 
-function getErrorTitle(error: unknown): string {
+type Translate = UseTranslationReturn['t']
+
+function getErrorTitle(error: unknown, t: Translate): string {
   if (error instanceof BylineError) {
-    return ERROR_TITLES[error.code] ?? 'Unexpected Error'
+    return t(ERROR_TITLE_KEYS[error.code] ?? 'routeError.titles.unhandled')
   }
-  return 'Unexpected Error'
+  return t('routeError.titles.unhandled')
 }
 
-function getErrorMessage(error: unknown): string {
+function getErrorMessage(error: unknown, t: Translate): string {
   if (error instanceof BylineError) {
     return error.message
   }
   if (error instanceof Error) {
     return error.message
   }
-  return 'An unexpected error occurred. Please try again.'
+  return t('routeError.defaultMessage')
 }
 
 export function RouteError({ error, reset }: ErrorComponentProps) {
   const router = useRouter()
+  const { t } = useTranslation('byline-admin')
 
   return (
     <Section className={cx('byline-route-error', styles.section)}>
       <Container className={cx('byline-route-error-container', styles.container)}>
-        <Alert intent="danger" icon close={false} title={getErrorTitle(error)}>
+        <Alert intent="danger" icon close={false} title={getErrorTitle(error, t)}>
           <p className={cx('byline-route-error-message', styles.message)}>
-            {getErrorMessage(error)}
+            {getErrorMessage(error, t)}
           </p>
           <div className={cx('byline-route-error-actions', styles.actions)}>
             <Button
@@ -69,10 +77,10 @@ export function RouteError({ error, reset }: ErrorComponentProps) {
                 router.invalidate()
               }}
             >
-              Try again
+              {t('common.actions.tryAgain')}
             </Button>
             <a href="/" className={cx('byline-route-error-link', styles.link)}>
-              Go to homepage
+              {t('common.actions.goToHomepage')}
             </a>
           </div>
         </Alert>
@@ -82,16 +90,17 @@ export function RouteError({ error, reset }: ErrorComponentProps) {
 }
 
 export function RouteNotFound(_props: NotFoundRouteProps) {
+  const { t } = useTranslation('byline-admin')
   return (
     <Section className={cx('byline-route-error', styles.section)}>
       <Container className={cx('byline-route-error-container', styles.container)}>
-        <Alert intent="warning" icon close={false} title="Page Not Found">
+        <Alert intent="warning" icon close={false} title={t('routeError.notFound.title')}>
           <p className={cx('byline-route-error-message', styles.message)}>
-            The page you are looking for does not exist or has been moved.
+            {t('routeError.notFound.message')}
           </p>
           <div className={cx('byline-route-error-actions', styles.actions)}>
             <a href="/" className={cx('byline-route-error-link', styles.link)}>
-              Go to homepage
+              {t('common.actions.goToHomepage')}
             </a>
           </div>
         </Alert>
@@ -101,17 +110,21 @@ export function RouteNotFound(_props: NotFoundRouteProps) {
 }
 
 /**
- * Minimal fallback for when providers may be broken. Used at the root
- * route, where wrapping in Container/Section may itself be unsafe.
+ * Minimal fallback for when providers may be broken — used at the root
+ * route where the i18n provider itself may not be mounted. Stays in
+ * English on purpose.
  */
 export function RootError({ error, reset }: ErrorComponentProps) {
+  function rootMessage(err: unknown): string {
+    if (err instanceof Error) return err.message
+    return 'An unexpected error occurred. Please try again.'
+  }
+
   return (
     <div className={cx('byline-root-error', styles.rootRoot)}>
       <div className={cx('byline-root-error-inner', styles.rootInner)}>
         <h1 className={cx('byline-root-error-title', styles.rootTitle)}>Something went wrong</h1>
-        <p className={cx('byline-root-error-detail', styles.rootDetail)}>
-          {getErrorMessage(error)}
-        </p>
+        <p className={cx('byline-root-error-detail', styles.rootDetail)}>{rootMessage(error)}</p>
         <button
           type="button"
           onClick={reset}

package/src/admin-shell/chrome/sign-in-page.module.css

@@ -3,6 +3,7 @@
  *
  * Override handles:
  *   .byline-sign-in-page       — outer <main>
+ *   .byline-sign-in-page-bar   — top bar carrying the LanguageMenu
  *   .byline-sign-in-page-inner — vertically-centred card container
  *
  * The Home link itself lives inside `SignInForm`'s action row — see
@@ -14,10 +15,18 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
-  align-items: center;
+  align-items: stretch;
   padding: 1.5rem;
 }
 
+.bar,
+:global(.byline-sign-in-page-bar) {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 1.75rem;
+}
+
 .inner,
 :global(.byline-sign-in-page-inner) {
   display: flex;

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

@@ -9,35 +9,69 @@
 import { SignInForm } from '@byline/admin/auth/components/sign-in-form'
 import { BylineAdminServicesProvider } from '@byline/admin/services'
 import { getClientConfig } from '@byline/core'
+import type { LocaleCode } from '@byline/i18n'
+import { I18nProvider, LanguageMenu } from '@byline/i18n/react'
 import cx from 'classnames'
 
+import { buildLocaleDefinitions } from '../../i18n/locale-definitions.js'
 import { bylineAdminServices } from '../../integrations/byline-admin-services.js'
+import { setInterfaceLocaleFn } from '../../server-fns/i18n/index.js'
 import styles from './sign-in-page.module.css'
 
 interface SignInPageProps {
   callbackUrl?: string
+  activeLocale: LocaleCode
 }
 
 /**
  * Sign-in page chrome — rendered outside the authenticated admin
  * layout (no app bar, breadcrumbs, or menu drawer). Wraps the
- * `SignInForm` from `@byline/ui` in the admin services provider so
+ * `SignInForm` from `@byline/admin` in the admin services provider so
  * the form can call `signIn` via the typed contract.
  *
+ * Mounts its own `<I18nProvider>` because the layout-level provider
+ * (the one that wraps the authenticated admin) doesn't apply here.
+ * `<LanguageMenu>` lights up automatically when two or more interface
+ * locales are configured. On change, the menu calls
+ * `setInterfaceLocaleFn` which writes the cookie unconditionally and
+ * skips the DB write on the pre-auth path (the user has no admin
+ * session yet). After sign-in succeeds, the `adminSignIn` server fn
+ * reconciles the cookie locale into the user's
+ * `admin_users.preferred_locale` so the pre-auth choice becomes
+ * sticky across devices from day one.
+ *
  * Threads the configured `serverURL` into the `SignInForm` as `homeUrl` so
  * the form's action row can render a plain "Home" link beside the submit
- * button. After admin sign-out users land back here; the link is what lets
- * them get back to the public site without typing the URL.
+ * button.
  */
-export function SignInPage({ callbackUrl }: SignInPageProps) {
-  const { serverURL } = getClientConfig()
+export function SignInPage({ callbackUrl, activeLocale }: SignInPageProps) {
+  const { i18n, serverURL } = getClientConfig()
+  const localeDefinitions = buildLocaleDefinitions(
+    i18n.interface.locales,
+    i18n.interface.localeDefinitions
+  )
+  const handleSetLocale = async (next: LocaleCode) => {
+    await setInterfaceLocaleFn({ data: { locale: next } })
+    window.location.reload()
+  }
   return (
-    <BylineAdminServicesProvider services={bylineAdminServices}>
-      <main className={cx('byline-sign-in-page', styles.main)}>
-        <div className={cx('byline-sign-in-page-inner', styles.inner)}>
-          <SignInForm callbackUrl={callbackUrl} homeUrl={serverURL} />
-        </div>
-      </main>
-    </BylineAdminServicesProvider>
+    <I18nProvider
+      bundle={i18n.translations ?? {}}
+      activeLocale={activeLocale}
+      defaultLocale={i18n.interface.defaultLocale}
+      localeDefinitions={localeDefinitions}
+      setLocale={handleSetLocale}
+    >
+      <BylineAdminServicesProvider services={bylineAdminServices}>
+        <main className={cx('byline-sign-in-page', styles.main)}>
+          <div className={cx('byline-sign-in-page-bar', styles.bar)}>
+            <LanguageMenu />
+          </div>
+          <div className={cx('byline-sign-in-page-inner', styles.inner)}>
+            <SignInForm callbackUrl={callbackUrl} homeUrl={serverURL} />
+          </div>
+        </main>
+      </BylineAdminServicesProvider>
+    </I18nProvider>
   )
 }

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

@@ -8,6 +8,7 @@
 
 import type { CollectionDefinition } from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
+import { useTranslation } from '@byline/i18n/react'
 import { Container, Section } from '@byline/ui/react'
 import cx from 'classnames'
 import { allExpanded, darkStyles, JsonView } from 'react-json-view-lite'
@@ -41,12 +42,15 @@ export const ApiView = ({
   defaultContentLocale: string
 }) => {
   const { labels, path } = collectionDefinition
+  const { t } = useTranslation('byline-admin')
 
   return (
     <Section className={cx('byline-api-section', styles.section)}>
       <Container className={cx('byline-api-container', styles.container)}>
         <div className={cx('byline-api-head', styles.head)}>
-          <h2 className={cx('byline-api-title', styles.title)}>{labels.singular} API</h2>
+          <h2 className={cx('byline-api-title', styles.title)}>
+            {t('collections.api.title', { label: labels.singular })}
+          </h2>
           <ViewMenu
             collection={path}
             documentId={String(initialData.id)}

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

@@ -8,8 +8,10 @@
 
 import { useState } from 'react'
 
+import { FormRenderer } from '@byline/admin/react'
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
-import { Container, FormRenderer, Section, useToastManager } from '@byline/ui/react'
+import { useTranslation } from '@byline/i18n/react'
+import { Container, Section, useToastManager } from '@byline/ui/react'
 
 import { createCollectionDocument } from '../../server-fns/collections/index.js'
 import { useNavigate } from '../chrome/loose-router.js'
@@ -31,6 +33,7 @@ export const CreateView = ({
   initialData?: Record<string, any>
 }) => {
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [_createState, setCreateState] = useState<CreateState>({
     status: 'idle',
     message: '',
@@ -62,9 +65,12 @@ export const CreateView = ({
     } catch (err) {
       console.error(err)
 
+      const description = t('collections.create.errorToastDescription', {
+        label: labels.singular.toLowerCase(),
+      })
       toastManager.add({
-        title: `${labels.singular} Creation`,
-        description: `An error occurred while creating ${labels.singular.toLowerCase()}`,
+        title: t('collections.create.errorToastTitle', { label: labels.singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -75,7 +81,7 @@ export const CreateView = ({
 
       setCreateState({
         status: 'failed',
-        message: `An error occurred while creating ${labels.singular.toLowerCase()}`,
+        message: description,
       })
     }
   }