@techzyapp/ui-library 1.0.32 → 1.0.34

package/dist/{UserCard-C-q2s2Cw.cjs.map → UserCard-Die7JV4z.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"UserCard-C-q2s2Cw.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + fonts + button). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)\n * tints the avatar. `loading` swaps the avatar + name + email for skeletons. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    loading = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":"0bA+CaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaX,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DY,EAAaZ,IAAS,KAAO,KAAO,KAE1C,OACEa,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOf,CAAI,EAAGK,CAAS,EACpD,MAAAC,EACA,YAAWF,GAAW,OACrB,GAAGG,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAhB,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,EACA,QAAAK,CAAA,CAAA,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KAErB,SAAA,CAAAC,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAd,EAAUY,EAAAA,IAACG,WAAA,CAAS,MAAM,KAAA,CAAM,EAAMxB,GAAQc,EAAE,kBAAkB,EACrE,GACEL,GAAWR,GAAS,OACpBoB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAAd,EAAUY,MAACG,EAAAA,UAAS,MAAM,MAAM,EAAKvB,CAAA,CACxC,CAAA,CAAA,CAEJ,CAAA,EACF,EAECO,EAEAF,EACCe,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMR,EACN,UAAS,GACT,UAAWI,EAAAA,IAACK,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASpB,EAER,SAAAC,GAAeO,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}
+{"version":3,"file":"UserCard-Die7JV4z.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + fonts + button). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign Out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)\n * tints the avatar. `loading` swaps the avatar + name + email for skeletons. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    loading = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":"0bA+CaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaX,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DY,EAAaZ,IAAS,KAAO,KAAO,KAE1C,OACEa,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOf,CAAI,EAAGK,CAAS,EACpD,MAAAC,EACA,YAAWF,GAAW,OACrB,GAAGG,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAhB,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,EACA,QAAAK,CAAA,CAAA,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KAErB,SAAA,CAAAC,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAd,EAAUY,EAAAA,IAACG,WAAA,CAAS,MAAM,KAAA,CAAM,EAAMxB,GAAQc,EAAE,kBAAkB,EACrE,GACEL,GAAWR,GAAS,OACpBoB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAAd,EAAUY,MAACG,EAAAA,UAAS,MAAM,MAAM,EAAKvB,CAAA,CACxC,CAAA,CAAA,CAEJ,CAAA,EACF,EAECO,EAEAF,EACCe,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMR,EACN,UAAS,GACT,UAAWI,EAAAA,IAACK,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASpB,EAER,SAAAC,GAAeO,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/app/AdminRoot.d.cts

@@ -1,5 +1,39 @@
 import type { ReactNode } from 'react';
-import { type ErrorBoundaryProps, type RootLayoutHeader, type RootLayoutProps } from '../components';
+import { type ErrorBoundaryProps, type IconName, type RootLayoutHeader, type RootLayoutProps } from '../components';
+import { type ThemeColor } from '../theme';
+/** Why the session can't be used — see `AdminRootUnavailable.reason`. */
+export type AdminRootUnavailableReason = 'forbidden' | 'unreachable';
+/** The `unavailable` state of `AdminRoot` — the session could not be checked, or may not be used here. */
+export interface AdminRootUnavailable {
+    /** What failed — passed to `QueryError` (message, trace id). */
+    error: unknown;
+    /**
+     * Why. `'forbidden'` = a valid session this panel may not use (no retry, only Sign Out).
+     * `'unreachable'` = the check itself failed (Try Again + Sign Out). Defaults to `'forbidden'` when the
+     * error carries HTTP status 403 (`error.status` or `error.response.status`), else `'unreachable'`.
+     */
+    reason?: AdminRootUnavailableReason;
+    /** Re-runs the session check. Shown as "Try Again" for `'unreachable'` only. */
+    onRetry?: () => void;
+    /**
+     * The `AuthLayout` icon. Default: none — apps differ here (one shows a tinted `CloudCross`, another keeps
+     * every auth page icon-free), so it's the app's choice.
+     */
+    icon?: IconName | false;
+    /** Tint for `icon` (`AuthLayout`'s `color`). Default `'error'`. */
+    color?: ThemeColor;
+}
+/** What an `unavailableFallback` receives. */
+export interface AdminRootUnavailableFallbackProps {
+    /** The `unavailable.error`. */
+    error: unknown;
+    /** The resolved reason (explicit, or inferred from a 403). */
+    reason: AdminRootUnavailableReason;
+    /** `unavailable.onRetry`, when given — whatever the reason (the fallback decides whether to offer it). */
+    retry?: () => void;
+    /** The shell's Sign Out: `onLogout()`, then navigate to `loginPath`. */
+    signOut: () => void;
+}
 /** The minimal user shape `AdminRoot` reads — apps pass their own richer type via the generic. */
 export interface AdminUser {
     name?: string;
@@ -32,9 +66,31 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
     /**
      * Wrap the page content in an `ErrorBoundary` (reset on navigation), so a crashing page shows an
      * `ErrorState` inside the shell instead of a white screen. Default `true`; `false` opts out; an object
-     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`).
+     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`). It only catches what
+     * the router doesn't: TanStack Router catches a route's component / `loader` / `beforeLoad` errors in its own
+     * per-route boundary, so page crashes need `createRouter({ defaultErrorComponent: PageError })`.
      */
     errorBoundary?: boolean | Omit<ErrorBoundaryProps, 'children' | 'resetKeys'>;
+    /**
+     * The app is still finding out who is signed in (e.g. verifying a stored token or refreshing a cookie
+     * session). While `true`, AdminRoot renders only `pendingFallback` — no shell, no public page, no
+     * `AuthGuard`, and `getUser()` isn't read — so a signed-in admin is never redirected to sign-in before the
+     * check resolves. Route `beforeLoad` guards (e.g. `authLayoutRoute`) still run in the router, independent
+     * of this — they must tolerate the unknown state themselves. No minimum display time. Default `false`.
+     */
+    pending?: boolean;
+    /** What to show while `pending`. Default: a `Loader size="lg"` centred in the full viewport. */
+    pendingFallback?: ReactNode;
+    /**
+     * The session could not be checked, or the server will not serve this account here. While set, AdminRoot
+     * renders a standalone `AuthLayout` screen (the app's `logo`, a `QueryError`, Try Again / Sign Out) instead
+     * of the shell or a public page — and never redirects. Sign Out calls `onLogout` then navigates to
+     * `loginPath`, so **`onLogout` must clear whatever set `unavailable`** (or this screen shows again).
+     * `pending` wins when both are set. `null` / `undefined` = not unavailable (the default).
+     */
+    unavailable?: AdminRootUnavailable | null;
+    /** Replaces the whole `unavailable` screen — for an app that needs its own wording or extra actions. */
+    unavailableFallback?: (props: AdminRootUnavailableFallbackProps) => ReactNode;
 }
 /**
  * Root-route component for admin apps — it wires up the whole shell orchestration so an app only has to
@@ -43,6 +99,10 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  * `AuthGuard` (signed-out visitors bounce to `loginPath`). Logout clears the session and navigates to
  * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`),
  * and wraps the page in an `ErrorBoundary` that resets on navigation (`errorBoundary`, default on).
+ * While the app is still checking the session, pass `pending` (a full-screen loader instead of a premature
+ * sign-in redirect); when the check failed or the server refuses this account, pass `unavailable` (a
+ * standalone "Cannot Reach the Server" / "No Access" screen with Try Again / Sign Out). The `Toaster` stays
+ * mounted in both.
  *
  * `loginPath` is a plain string, cast loosely to the router's `to` type (the library can't know the
  * app's typed route tree). The generic `<U>` preserves the app's own user type through `getUser`.
@@ -50,7 +110,18 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  * @example
  * // routes/__root.tsx
  * export const Route = createRootRoute({
- *   component: () => <AdminRoot<AuthUser> logo={<Logo />} getUser={getUser} onLogout={logout} />,
+ *   component: () => {
+ *     const { status, error, retry } = useSession()
+ *     return (
+ *       <AdminRoot<AuthUser>
+ *         pending={status === 'loading'}
+ *         unavailable={status === 'unavailable' ? { error, onRetry: retry } : null}
+ *         logo={<Logo />}
+ *         getUser={getUser}
+ *         onLogout={logout}
+ *       />
+ *     )
+ *   },
  * })
  */
-export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, logoTo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;
+export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, logoTo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, pending, pendingFallback, unavailable, unavailableFallback, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;

package/dist/app/AdminRoot.d.ts

@@ -1,5 +1,39 @@
 import type { ReactNode } from 'react';
-import { type ErrorBoundaryProps, type RootLayoutHeader, type RootLayoutProps } from '../components';
+import { type ErrorBoundaryProps, type IconName, type RootLayoutHeader, type RootLayoutProps } from '../components';
+import { type ThemeColor } from '../theme';
+/** Why the session can't be used — see `AdminRootUnavailable.reason`. */
+export type AdminRootUnavailableReason = 'forbidden' | 'unreachable';
+/** The `unavailable` state of `AdminRoot` — the session could not be checked, or may not be used here. */
+export interface AdminRootUnavailable {
+    /** What failed — passed to `QueryError` (message, trace id). */
+    error: unknown;
+    /**
+     * Why. `'forbidden'` = a valid session this panel may not use (no retry, only Sign Out).
+     * `'unreachable'` = the check itself failed (Try Again + Sign Out). Defaults to `'forbidden'` when the
+     * error carries HTTP status 403 (`error.status` or `error.response.status`), else `'unreachable'`.
+     */
+    reason?: AdminRootUnavailableReason;
+    /** Re-runs the session check. Shown as "Try Again" for `'unreachable'` only. */
+    onRetry?: () => void;
+    /**
+     * The `AuthLayout` icon. Default: none — apps differ here (one shows a tinted `CloudCross`, another keeps
+     * every auth page icon-free), so it's the app's choice.
+     */
+    icon?: IconName | false;
+    /** Tint for `icon` (`AuthLayout`'s `color`). Default `'error'`. */
+    color?: ThemeColor;
+}
+/** What an `unavailableFallback` receives. */
+export interface AdminRootUnavailableFallbackProps {
+    /** The `unavailable.error`. */
+    error: unknown;
+    /** The resolved reason (explicit, or inferred from a 403). */
+    reason: AdminRootUnavailableReason;
+    /** `unavailable.onRetry`, when given — whatever the reason (the fallback decides whether to offer it). */
+    retry?: () => void;
+    /** The shell's Sign Out: `onLogout()`, then navigate to `loginPath`. */
+    signOut: () => void;
+}
 /** The minimal user shape `AdminRoot` reads — apps pass their own richer type via the generic. */
 export interface AdminUser {
     name?: string;
@@ -32,9 +66,31 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
     /**
      * Wrap the page content in an `ErrorBoundary` (reset on navigation), so a crashing page shows an
      * `ErrorState` inside the shell instead of a white screen. Default `true`; `false` opts out; an object
-     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`).
+     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`). It only catches what
+     * the router doesn't: TanStack Router catches a route's component / `loader` / `beforeLoad` errors in its own
+     * per-route boundary, so page crashes need `createRouter({ defaultErrorComponent: PageError })`.
      */
     errorBoundary?: boolean | Omit<ErrorBoundaryProps, 'children' | 'resetKeys'>;
+    /**
+     * The app is still finding out who is signed in (e.g. verifying a stored token or refreshing a cookie
+     * session). While `true`, AdminRoot renders only `pendingFallback` — no shell, no public page, no
+     * `AuthGuard`, and `getUser()` isn't read — so a signed-in admin is never redirected to sign-in before the
+     * check resolves. Route `beforeLoad` guards (e.g. `authLayoutRoute`) still run in the router, independent
+     * of this — they must tolerate the unknown state themselves. No minimum display time. Default `false`.
+     */
+    pending?: boolean;
+    /** What to show while `pending`. Default: a `Loader size="lg"` centred in the full viewport. */
+    pendingFallback?: ReactNode;
+    /**
+     * The session could not be checked, or the server will not serve this account here. While set, AdminRoot
+     * renders a standalone `AuthLayout` screen (the app's `logo`, a `QueryError`, Try Again / Sign Out) instead
+     * of the shell or a public page — and never redirects. Sign Out calls `onLogout` then navigates to
+     * `loginPath`, so **`onLogout` must clear whatever set `unavailable`** (or this screen shows again).
+     * `pending` wins when both are set. `null` / `undefined` = not unavailable (the default).
+     */
+    unavailable?: AdminRootUnavailable | null;
+    /** Replaces the whole `unavailable` screen — for an app that needs its own wording or extra actions. */
+    unavailableFallback?: (props: AdminRootUnavailableFallbackProps) => ReactNode;
 }
 /**
  * Root-route component for admin apps — it wires up the whole shell orchestration so an app only has to
@@ -43,6 +99,10 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  * `AuthGuard` (signed-out visitors bounce to `loginPath`). Logout clears the session and navigates to
  * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`),
  * and wraps the page in an `ErrorBoundary` that resets on navigation (`errorBoundary`, default on).
+ * While the app is still checking the session, pass `pending` (a full-screen loader instead of a premature
+ * sign-in redirect); when the check failed or the server refuses this account, pass `unavailable` (a
+ * standalone "Cannot Reach the Server" / "No Access" screen with Try Again / Sign Out). The `Toaster` stays
+ * mounted in both.
  *
  * `loginPath` is a plain string, cast loosely to the router's `to` type (the library can't know the
  * app's typed route tree). The generic `<U>` preserves the app's own user type through `getUser`.
@@ -50,7 +110,18 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  * @example
  * // routes/__root.tsx
  * export const Route = createRootRoute({
- *   component: () => <AdminRoot<AuthUser> logo={<Logo />} getUser={getUser} onLogout={logout} />,
+ *   component: () => {
+ *     const { status, error, retry } = useSession()
+ *     return (
+ *       <AdminRoot<AuthUser>
+ *         pending={status === 'loading'}
+ *         unavailable={status === 'unavailable' ? { error, onRetry: retry } : null}
+ *         logo={<Logo />}
+ *         getUser={getUser}
+ *         onLogout={logout}
+ *       />
+ *     )
+ *   },
  * })
  */
-export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, logoTo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;
+export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, logoTo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, pending, pendingFallback, unavailable, unavailableFallback, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Alert-B9l1VhIr.cjs");exports.Alert=e.Alert;exports.default=e.Alert;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Alert-CggrNMn5.cjs");exports.Alert=e.Alert;exports.default=e.Alert;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Alert/index.js

@@ -1,4 +1,4 @@
-import { A as r, A as t } from "../../Alert-B7w9xD2p.js";
+import { A as r, A as t } from "../../Alert-BXtQFAVl.js";
 export {
   r as Alert,
   t as default

package/dist/components/AuthLayout/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../AuthLayout-DIcR__vo.cjs");exports.AuthLayout=t.AuthLayout;exports.default=t.AuthLayout;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../AuthLayout-Cl3tb4-E.cjs");exports.AuthLayout=t.AuthLayout;exports.default=t.AuthLayout;
 //# sourceMappingURL=index.cjs.map

package/dist/components/AuthLayout/index.js

@@ -1,4 +1,4 @@
-import { A as o, A as u } from "../../AuthLayout-m1BQ6Ixx.js";
+import { A as o, A as u } from "../../AuthLayout-C47vXKYp.js";
 export {
   o as AuthLayout,
   u as default

package/dist/components/Breadcrumbs/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Breadcrumbs-B1JMwCjO.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.default=e.Breadcrumbs;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Breadcrumbs-Cpa_LSY2.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.default=e.Breadcrumbs;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e, B as s } from "../../Breadcrumbs-Cl1CgKkk.js";
+import { B as e, B as s } from "../../Breadcrumbs-D_QnKw8q.js";
 export {
   e as Breadcrumbs,
   s as default

package/dist/components/Button/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../Button-BZq1mIUH.cjs");exports.Button=t.Button;exports.default=t.Button;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../Button-Cm64ROip.cjs");exports.Button=t.Button;exports.default=t.Button;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Button/index.js

@@ -1,4 +1,4 @@
-import { B as o, B } from "../../Button-BJ5Xd10u.js";
+import { B as o, B } from "../../Button-BQ7jsm5P.js";
 export {
   o as Button,
   B as default

package/dist/components/Card/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Card-KsczbH5c.cjs");exports.Card=e.Card;exports.default=e.Card;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Card-yhly3Xdp.cjs");exports.Card=e.Card;exports.default=e.Card;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Card/index.js

@@ -1,4 +1,4 @@
-import { C, C as d } from "../../Card-Cr3D2bzJ.js";
+import { C, C as d } from "../../Card-kizK1B7N.js";
 export {
   C as Card,
   d as default

package/dist/components/Chip/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-BZ3I4Lbe.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-BPcnO5WI.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Chip/index.js

@@ -1,4 +1,4 @@
-import { C as e, C as f } from "../../Chip-DEp1zWh1.js";
+import { C as e, C as f } from "../../Chip-BzyzLEeX.js";
 export {
   e as Chip,
   f as default

package/dist/components/ChoiceCard/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ChoiceCardGroup-Bg2jtFpe.cjs");exports.ChoiceCard=e.ChoiceCard;exports.ChoiceCardGroup=e.ChoiceCardGroup;exports.default=e.ChoiceCard;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ChoiceCardGroup-BWsG_Vh5.cjs");exports.ChoiceCard=e.ChoiceCard;exports.ChoiceCardGroup=e.ChoiceCardGroup;exports.default=e.ChoiceCard;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ChoiceCard/index.js

@@ -1,4 +1,4 @@
-import { C as o, a as r, C as e } from "../../ChoiceCardGroup-BTbKjJdp.js";
+import { C as o, a as r, C as e } from "../../ChoiceCardGroup-BBD8ai4s.js";
 export {
   o as ChoiceCard,
   r as ChoiceCardGroup,

package/dist/components/CodeBlock/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-DIkyeG4S.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-BgSum_bB.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CodeBlock/index.js

@@ -1,4 +1,4 @@
-import { C as e, C } from "../../CodeBlock-CMHqvoBJ.js";
+import { C as e, C } from "../../CodeBlock-BTt40oh5.js";
 export {
   e as CodeBlock,
   C as default

package/dist/components/ColorPicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-B1riGs1z.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-C33dlkhN.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { C as a, C as e } from "../../ColorPicker-5SMyU5oh.js";
+import { C as a, C as e } from "../../ColorPicker-BNM75F5E.js";
 export {
   a as ColorPicker,
   e as default

package/dist/components/ColorRamp/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorRamp-D_h-hp7n.cjs");exports.ColorRamp=e.ColorRamp;exports.default=e.ColorRamp;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorRamp-BJWNKzoX.cjs");exports.ColorRamp=e.ColorRamp;exports.default=e.ColorRamp;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ColorRamp/index.js

@@ -1,4 +1,4 @@
-import { C as r, C } from "../../ColorRamp-Qc8ZtPDh.js";
+import { C as r, C } from "../../ColorRamp-BnuXrSxa.js";
 export {
   r as ColorRamp,
   C as default

package/dist/components/CopyButton/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-DUtx2-Gi.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-C9oHGs6W.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CopyButton/index.js

@@ -1,4 +1,4 @@
-import { C as a, C } from "../../CopyButton-BNcW9-KU.js";
+import { C as a, C } from "../../CopyButton-hZqLdXJq.js";
 export {
   a as CopyButton,
   C as default

package/dist/components/DatePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-D_PqDvKt.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-DXwJB4MH.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DatePicker-D2PyGdec.js";
+import { D as r, D as t } from "../../DatePicker-B6ZL_T-E.js";
 export {
   r as DatePicker,
   t as default

package/dist/components/DateTimePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-C3Kq5hKE.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-CHi1H2k1.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DateTimePicker-DdXFzqO_.js";
+import { D as r, D as t } from "../../DateTimePicker-BynW1Eeg.js";
 export {
   r as DateTimePicker,
   t as default

package/dist/components/DescriptionList/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DescriptionList-C7AOcw_2.cjs");exports.DescriptionList=e.DescriptionList;exports.default=e.DescriptionList;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DescriptionList-BqYwp08t.cjs");exports.DescriptionList=e.DescriptionList;exports.default=e.DescriptionList;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DescriptionList/index.js

@@ -1,4 +1,4 @@
-import { D as a, D as e } from "../../DescriptionList-DxRgKNEJ.js";
+import { D as a, D as e } from "../../DescriptionList-C6Gfk6I_.js";
 export {
   a as DescriptionList,
   e as default

package/dist/components/EmptyState/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-ECc6e_En.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-CZ6X5-Zy.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
 //# sourceMappingURL=index.cjs.map

package/dist/components/EmptyState/index.js

@@ -1,4 +1,4 @@
-import { E as e, E } from "../../EmptyState-CvpKSYY4.js";
+import { E as e, E } from "../../EmptyState-BvAA5mYO.js";
 export {
   e as EmptyState,
   E as default

package/dist/components/ErrorState/ErrorBoundary.d.cts

@@ -2,12 +2,12 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     /**
      * What to render after a crash — a node, or `(error, reset) => node`. Defaults to an `ErrorState` with
-     * a friendly description, a **Try again** button (`reset`) and the stack in dev.
+     * a friendly description, a **Try Again** button (`reset`) and the stack in dev.
      */
     fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
     /** Report the crash (e.g. `Sentry.captureException`). */
     onError?: (error: Error, info: ErrorInfo) => void;
-    /** Called after the boundary resets (Try again, or a `resetKeys` change). */
+    /** Called after the boundary resets (Try Again, or a `resetKeys` change). */
     onReset?: () => void;
     /** Reset automatically when any of these change (shallow) — e.g. `[location.pathname]` clears on navigation. */
     resetKeys?: unknown[];
@@ -19,7 +19,7 @@ interface ErrorBoundaryState {
 /**
  * Catches render errors in its subtree and shows a fallback instead of unmounting the whole app (a
  * white screen). The one class component in the library — React only offers error boundaries as
- * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try again);
+ * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try Again);
  * `onError` reports the crash (Sentry); `resetKeys` resets it when they change (e.g. the route path, so
  * navigating away recovers); `onReset` runs after any reset. `AdminRoot` mounts one around the page
  * content automatically, so a crashing page keeps the sidebar + header.

package/dist/components/ErrorState/ErrorBoundary.d.ts

@@ -2,12 +2,12 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     /**
      * What to render after a crash — a node, or `(error, reset) => node`. Defaults to an `ErrorState` with
-     * a friendly description, a **Try again** button (`reset`) and the stack in dev.
+     * a friendly description, a **Try Again** button (`reset`) and the stack in dev.
      */
     fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
     /** Report the crash (e.g. `Sentry.captureException`). */
     onError?: (error: Error, info: ErrorInfo) => void;
-    /** Called after the boundary resets (Try again, or a `resetKeys` change). */
+    /** Called after the boundary resets (Try Again, or a `resetKeys` change). */
     onReset?: () => void;
     /** Reset automatically when any of these change (shallow) — e.g. `[location.pathname]` clears on navigation. */
     resetKeys?: unknown[];
@@ -19,7 +19,7 @@ interface ErrorBoundaryState {
 /**
  * Catches render errors in its subtree and shows a fallback instead of unmounting the whole app (a
  * white screen). The one class component in the library — React only offers error boundaries as
- * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try again);
+ * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try Again);
  * `onError` reports the crash (Sentry); `resetKeys` resets it when they change (e.g. the route path, so
  * navigating away recovers); `onReset` runs after any reset. `AdminRoot` mounts one around the page
  * content automatically, so a crashing page keeps the sidebar + header.

package/dist/components/ErrorState/ErrorDetailsModal.d.cts

@@ -0,0 +1,12 @@
+export interface ErrorDetailsModalProps {
+    open: boolean;
+    onClose: () => void;
+    /** The whole report — shown as-is and copied by the Copy button. */
+    report: string;
+}
+/**
+ * Internal to `ErrorState`: the "Details" dialog — the error report (trace id, status, message, then the stack /
+ * raw dump when allowed) in one monospace block, with **Copy** (the whole report, flips to "Copied!") and
+ * **Close** in the footer, so a user can paste it into a support ticket in one go.
+ */
+export declare function ErrorDetailsModal({ open, onClose, report }: ErrorDetailsModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ErrorState/ErrorDetailsModal.d.ts

@@ -0,0 +1,12 @@
+export interface ErrorDetailsModalProps {
+    open: boolean;
+    onClose: () => void;
+    /** The whole report — shown as-is and copied by the Copy button. */
+    report: string;
+}
+/**
+ * Internal to `ErrorState`: the "Details" dialog — the error report (trace id, status, message, then the stack /
+ * raw dump when allowed) in one monospace block, with **Copy** (the whole report, flips to "Copied!") and
+ * **Close** in the footer, so a user can paste it into a support ticket in one go.
+ */
+export declare function ErrorDetailsModal({ open, onClose, report }: ErrorDetailsModalProps): import("react/jsx-runtime").JSX.Element;