@tailor-platform/app-shell 0.17.0 → 0.18.0

package/dist/index.d.ts

@@ -1,407 +1,572 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, PropsWithChildren } from 'react';
-export { Link, useLocation, useNavigate, useParams, useRouteError, useSearchParams } from 'react-router';
-
-/**
- * Error boundary element type for route error handling.
- *
- * Pass a JSX element that will render when an error occurs.
- * Use the `useRouteError` hook from react-router to access the error.
- *
- * @example
- * ```tsx
- * import { useRouteError } from "@tailor-platform/app-shell";
- *
- * const MyErrorBoundary = () => {
- *   const error = useRouteError() as Error;
- *   return <div>Error: {error.message}</div>;
- * };
- *
- * // In config:
- * errorBoundary: <MyErrorBoundary />
- * // Or with props:
- * errorBoundary: <MyErrorBoundary theme="dark" onReport={handleReport} />
- * ```
- */
-type ErrorBoundaryComponent = ReactNode;
-/**
- * Redirect configuration for module or root component
- */
-type RedirectConfig = {
-    /**
-     * Path to redirect to (under /resources/)
-     */
-    redirectTo: string;
-};
-/**
- * Helper function to define a redirect to a resource path
- *
- * @param path - Path under `/resources/` (e.g., "dashboard/overview")
- *
- * @example
- * ```tsx
- * defineModule({
- *   path: "dashboard",
- *   component: redirectToResource("dashboard/overview"),
- *   resources: [overviewResource],
- * });
- * ```
- */
-declare function redirectToResource(path: string): RedirectConfig;
-type CommonPageResource = {
-    path: string;
-    type: "component";
-    component: () => ReactNode;
-    meta: {
-        title: string;
-        icon?: ReactNode;
-    };
-};
-/**
- * A resource that can be included in the root-level content in the navigation.
- */
-type Module = Omit<CommonPageResource, "meta"> & {
-    _type: "module";
-    meta: CommonPageResource["meta"] & {
-        icon?: ReactNode;
-        menuItemClickable: boolean;
-    };
-    resources: Array<Resource>;
-    loader?: () => Response;
-    errorBoundary?: ErrorBoundaryComponent;
-};
-/**
- * A resource that can be included in the sub-content in the root resource.
- *
- * This resource does not have `category` metadata.
- */
-type Resource = CommonPageResource & {
-    _type: "resource";
-    subResources?: Array<Resource>;
-    errorBoundary?: ErrorBoundaryComponent;
-};
-type Modules = Array<Module>;
-type ResourceMetaProps = {
-    /**
-     * Title of the resource used in navigation.
-     *
-     * If not provided, the title will be generated from the path.
-     */
-    title?: string;
-    icon?: ReactNode;
-    /**
-     * Custom breadcrumb segment title for this resource. Can be a string or a function.
-     */
-    breadcrumbTitle?: string | ((segment: string) => string);
-};
-type CommonProps = {
-    /**
-     * Path of the resource.
-     *
-     * The path will be used to generate the URL for the resource.
-     * This also supports dynamic parameters using the syntax `:paramName`.
-     */
-    path: string;
-    /**
-     * Metadata for the resource.
-     */
-    meta?: ResourceMetaProps;
-};
-type ResourceComponentProps = {
-    title: string;
-    icon?: ReactNode;
-    resources?: Array<Resource>;
-};
-type ReactResourceProps = {
-    /**
-     * React component to render.
-     */
-    component: (props: ResourceComponentProps) => ReactNode;
-};
-type CommonModuleProps = {
-    /**
-     * Resource associated to the module.
-     */
-    resources: Array<Resource>;
-    meta: CommonProps["meta"] & {
-        icon?: ReactNode;
-    };
-};
-type DefineModuleProps = CommonProps & CommonModuleProps & {
-    /**
-     * React component to render or redirect configuration
-     *
-     * @example
-     * ```tsx
-     * // Render a component
-     * component: (props) => <div>{props.title}</div>
-     *
-     * // Redirect to a resource
-     * component: redirectToResource("dashboard/overview")
-     * ```
-     */
-    component: ((props: ResourceComponentProps) => ReactNode) | RedirectConfig;
-    /**
-     * Error boundary component for this module and its child resources.
-     * When an error occurs in this module or its resources, this component will render.
-     * Use the `useRouteError` hook to access error details within the component.
-     */
-    errorBoundary?: ErrorBoundaryComponent;
-};
-/**
- * Define a root-level resource that renders a React component.
- *
- * @example
- * ```
- * // Define a minimal resource
- * defineReactResource({
- *   path: "custom-page",
- *   component: () => {
- *     return (
- *       <div>
- *         <p>This is a custom page.</p>
- *       </div>
- *     );
- *   },
- * });
- * ```
- */
-declare function defineModule(props: DefineModuleProps): Module;
-type DefineResourceProps = CommonProps & ReactResourceProps & {
-    /**
-     * Sub-resources of the resource.
-     */
-    subResources?: Array<Resource>;
-    /**
-     * Error boundary component for this resource and its sub-resources.
-     * When an error occurs in this resource, this component will render.
-     * Overrides module-level or global error boundaries.
-     * Use the `useRouteError` hook to access error details within the component.
-     */
-    errorBoundary?: ErrorBoundaryComponent;
-};
-/**
- * Define a resource that renders a React component.
- *
- * This resource can be used as a sub-resource of a module or as a root-level resource.
- *
- * @example
- * ```
- * // Define a minimal resource
- * defineResource({
- *   path: "custom-page",
- *   component: () => {
- *     return (
- *       <div>
- *         <p>This is a custom page.</p>
- *       </div>
- *     );
- *   },
- *   subResources: [
- *     defineResource({
- *       path: "sub-page",
- *       component: () => {
- *         return (
- *           <div>
- *             <p>This is a sub page.</p>
- *           </div>
- *         );
- *       },
- *     }),
- *   ]
- * });
- * ```
- *
- */
-declare function defineResource(props: DefineResourceProps): Resource;
-
-type AppShellProps = React.PropsWithChildren<{
-    /**
-     * App shell title
-     */
-    title?: string;
-    /**
-     * App shell icon
-     */
-    icon?: React.ReactNode;
-    /**
-     * Base path for the app shell
-     */
-    basePath?: string;
-    /**
-     * A component to be rendered at the root level of AppShell,
-     * or a redirect configuration
-     *
-     * @example
-     * ```tsx
-     * // Render a component
-     * rootComponent: () => <DashboardHome />
-     *
-     * // Redirect to a resource
-     * rootComponent: redirectToResource("dashboard/overview")
-     * ```
-     */
-    rootComponent?: (() => React.ReactNode) | RedirectConfig;
-    /**
-     * Navigation configuration
-     */
-    modules: Modules;
-    /**
-     * Settings resources to be included in the settings menu
-     */
-    settingsResources?: Array<Resource>;
-    /**
-     * Global error boundary component applied to all routes.
-     * When an error occurs in any route component, this component will render.
-     * Module and resource-level error boundaries take precedence over this.
-     * Use the `useRouteError` hook to access error details within the component.
-     *
-     * @example
-     * ```tsx
-     * import { useRouteError } from "@tailor-platform/app-shell";
-     *
-     * const GlobalErrorBoundary = () => {
-     *   const error = useRouteError() as Error;
-     *   return (
-     *     <div>
-     *       <h1>Something went wrong</h1>
-     *       <p>{error.message}</p>
-     *     </div>
-     *   );
-     * };
-     *
-     * <AppShell
-     *   modules: [...],
-     *   errorBoundary: <GlobalErrorBoundary />,
-     * />
-     * ```
-     */
-    errorBoundary?: ErrorBoundaryComponent;
-}>;
-declare const AppShell: (props: AppShellProps) => react_jsx_runtime.JSX.Element | null;
-
-type SidebarLayoutProps = {
-    children?: (props: {
-        Outlet: () => React.ReactNode;
-    }) => React.ReactNode;
-    sidebar?: React.ReactNode;
-};
-declare const SidebarLayout: (props: SidebarLayoutProps) => react_jsx_runtime.JSX.Element;
-type DefaultSidebarProps = {
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-};
-declare const DefaultSidebar: (props: DefaultSidebarProps) => react_jsx_runtime.JSX.Element;
-
-type RootConfiguration = {
-    modules: Modules;
-    settingsResources: Resource[];
-    basePath?: string;
-    errorBoundary?: ErrorBoundaryComponent;
-};
-type NavChildItem = {
-    title: string;
-    url: string;
-};
-type NavItem = {
-    title: string;
-    url: string | undefined;
-    icon: ReactNode;
-    isActive?: boolean;
-    items?: Array<NavChildItem>;
-};
-type AppShellContextType = {
-    title?: string;
-    icon?: ReactNode;
-    configurations: RootConfiguration;
-    navItems: Array<NavItem>;
-};
-declare const useAppShell: () => AppShellContextType;
-
-type Theme = "dark" | "light" | "system";
-type ThemeProviderState = {
-    theme: Theme;
-    resolvedTheme: Omit<Theme, "system">;
-    setTheme: (theme: Theme) => void;
-};
-declare const useTheme: () => ThemeProviderState;
-
-interface BuiltinIdPAuthContextType {
-    /**
-     * Initiates the login process by redirecting to the OAuth2 authorization endpoint.
-     */
-    login: () => Promise<void>;
-    /**
-     * Logs out the user by revoking the token and clearing session data.
-     */
-    logout: () => Promise<void>;
-}
-declare const useBuiltinIdpAuth: () => BuiltinIdPAuthContextType;
-type Props = {
-    /**
-     * API endpoint of your Tailor Platform application. No `/query` suffix needed.
-     *
-     * @example https://xyz.erp.dev
-     */
-    apiEndpoint: string;
-    /**
-     * OAuth2 Client ID of your Tailor Platform application.
-     */
-    clientId: string;
-    /**
-     * Redirect URI after login is successful.
-     *
-     * @defaults `window.location.origin`
-     */
-    redirectUri?: string;
-};
-declare const BuiltinIdPAuthProvider: ({ apiEndpoint, clientId, redirectUri, children, }: PropsWithChildren<Props>) => react_jsx_runtime.JSX.Element;
-
-declare const PKCE_VERIFIER_KEY = "oauth_pkce_verifier";
-declare const OAUTH_STATE_KEY = "oauth_state";
-interface BuildAuthorizationUrlParams {
-    apiEndpoint: string;
-    clientId: string;
-    state: string;
-    codeChallenge: string;
-    redirectUri?: string;
-}
-/**
- * We need to build a Login URL with the correct parameters to redirect
- * to our OAuth endpoint login page
- */
-declare const buildAuthorizationUrl: ({ apiEndpoint, clientId, state, codeChallenge, redirectUri, }: BuildAuthorizationUrlParams) => string;
-interface ExchangeCodeForTokenParams {
-    apiEndpoint: string;
-    clientId: string;
-    returnedState: string | null;
-    code: string | null;
-    redirectUri?: string;
-    silent?: boolean;
-}
-/**
- * We need to exchange the code and state we received from the OAuth endpoint
- * for an actual authorization token, in Browser Client case, we get the token
- * inside of a cookie so there is nothing else to do beyond that point
- */
-declare const exchangeCodeForToken: ({ code, returnedState, apiEndpoint, clientId, redirectUri, }: ExchangeCodeForTokenParams) => Promise<string>;
-/**
- * We need to generate a challenge and state key for OAuth login
- * and stores them in sessionStorage for verification on callback redirect
- */
-declare const prepareLogin: () => Promise<{
-    codeChallenge: string;
-    state: string;
-}>;
-/**
- * When redirected from our IdP Provider, we need to exchange code and state
- * for a token and clean up the URL params
- */
-declare const handleOAuthCallback: ({ currentUrl, apiEndpoint, clientId, redirectUri, }: {
-    currentUrl: URL;
-    apiEndpoint: string;
-    clientId: string;
-    redirectUri: string;
-}) => Promise<void>;
-
-export { AppShell, type AppShellProps, BuiltinIdPAuthProvider, DefaultSidebar, type ErrorBoundaryComponent, OAUTH_STATE_KEY, PKCE_VERIFIER_KEY, type ResourceComponentProps, SidebarLayout, buildAuthorizationUrl, defineModule, defineResource, exchangeCodeForToken, handleOAuthCallback, prepareLogin, redirectToResource, useAppShell, useBuiltinIdpAuth, useTheme };
+import { JSX } from 'react/jsx-runtime';
+import { Link } from 'react-router';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { useLocation } from 'react-router';
+import { useNavigate } from 'react-router';
+import { useParams } from 'react-router';
+import { useRouteError } from 'react-router';
+import { useSearchParams } from 'react-router';
+
+export declare const AppShell: (props: AppShellProps) => JSX.Element | null;
+
+declare type AppShellContextType = {
+    title?: string;
+    icon?: ReactNode;
+    configurations: RootConfiguration;
+    navItems: Array<NavItem>;
+};
+
+export declare type AppShellProps = React.PropsWithChildren<{
+    /**
+     * App shell title
+     */
+    title?: string;
+    /**
+     * App shell icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Base path for the app shell
+     */
+    basePath?: string;
+    /**
+     * A component to be rendered at the root level of AppShell,
+     * or a redirect configuration
+     *
+     * @example
+     * ```tsx
+     * // Render a component
+     * rootComponent: () => <DashboardHome />
+     *
+     * // Redirect to a resource
+     * rootComponent: redirectToResource("dashboard/overview")
+     * ```
+     */
+    rootComponent?: (() => React.ReactNode) | RedirectConfig;
+    /**
+     * Navigation configuration
+     */
+    modules: Modules;
+    /**
+     * Settings resources to be included in the settings menu
+     */
+    settingsResources?: Array<Resource>;
+    /**
+     * Locale code used for built-in UI strings.
+     *
+     * If not provided, auto-detects from browser preferences.
+     * No browser locale information avilable, "en" used as default.
+     */
+    locale?: string;
+    /**
+     * Global error boundary component applied to all routes.
+     *
+     * When an error occurs in any route component, this component will render.
+     * Module and resource-level error boundaries take precedence over this.
+     * Use the `useRouteError` hook to access error details within the component.
+     *
+     * @example
+     * ```tsx
+     * import { useRouteError } from "@tailor-platform/app-shell";
+     *
+     * const GlobalErrorBoundary = () => {
+     *   const error = useRouteError() as Error;
+     *   return (
+     *     <div>
+     *       <h1>Something went wrong</h1>
+     *       <p>{error.message}</p>
+     *     </div>
+     *   );
+     * };
+     *
+     * <AppShell
+     *   modules: [...],
+     *   errorBoundary: <GlobalErrorBoundary />,
+     * />
+     * ```
+     */
+    errorBoundary?: ErrorBoundaryComponent;
+}>;
+
+/**
+ * We need to build a Login URL with the correct parameters to redirect
+ * to our OAuth endpoint login page
+ */
+export declare const buildAuthorizationUrl: ({ apiEndpoint, clientId, state, codeChallenge, redirectUri, }: BuildAuthorizationUrlParams) => string;
+
+declare interface BuildAuthorizationUrlParams {
+    apiEndpoint: string;
+    clientId: string;
+    state: string;
+    codeChallenge: string;
+    redirectUri?: string;
+}
+
+declare interface BuiltinIdPAuthContextType {
+    /**
+     * Initiates the login process by redirecting to the OAuth2 authorization endpoint.
+     */
+    login: () => Promise<void>;
+    /**
+     * Logs out the user by revoking the token and clearing session data.
+     */
+    logout: () => Promise<void>;
+}
+
+export declare const BuiltinIdPAuthProvider: ({ apiEndpoint, clientId, redirectUri, children, }: PropsWithChildren<Props>) => JSX.Element;
+
+declare type CommonModuleProps = {
+    /**
+     * Resource associated to the module.
+     */
+    resources: Array<Resource>;
+    meta: CommonProps["meta"] & {
+        icon?: ReactNode;
+    };
+};
+
+declare type CommonPageResource = {
+    path: string;
+    type: "component";
+    component: () => ReactNode;
+    meta: {
+        title: LocalizedString;
+        icon?: ReactNode;
+    };
+};
+
+declare type CommonProps = {
+    /**
+     * Path of the resource.
+     *
+     * The path will be used to generate the URL for the resource.
+     * This also supports dynamic parameters using the syntax `:paramName`.
+     */
+    path: string;
+    /**
+     * Metadata for the resource.
+     */
+    meta?: ResourceMetaProps;
+};
+
+export declare const DefaultSidebar: (props: DefaultSidebarProps) => JSX.Element;
+
+declare type DefaultSidebarProps = {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+
+/**
+ * Defines internationalization labels for multiple locales.
+ *
+ * `en` locale is required as the default locale.
+ * Labels can be either static strings or dynamic functions that take props.
+ *
+ * @example
+ * ```tsx
+ * import { defineI18nLabels } from "@tailor-platform/app-shell";
+ *
+ * export const labels = defineI18nLabels({
+ *   en: {
+ *     hello: "Hello",
+ *     welcome: (props: { name: string }) => `Welcome, ${props.name}!`,
+ *   },
+ *   ja: {
+ *     hello: "こんにちは",
+ *     welcome: (props: { name: string }) => `ようこそ、${props.name}さん！`,
+ *   },
+ * });
+ *
+ * // Hook to get the translated label resolver function
+ * export const useT = labels.useT;
+ *
+ * // Usage in component
+ * const t = useT();
+ * t("hello");                        // "Hello"
+ * t("welcome", { name: "John" });    // "Welcome, John!"
+ * ```
+ */
+export declare const defineI18nLabels: <const L extends Exclude<string, "en">, const Def extends Record<string, LabelValue>>(labels: {
+    en: Def;
+} & { [K in L]: LabelDefinition<Def>; } & DynamicLocales<Def>) => {
+    /**
+     * Hook to get the translated label resolver function.
+     *
+     * @example
+     * ```tsx
+     * import { useT } from "./i18n-labels";
+     *
+     * const YourComponent = () => {
+     *   const t = useT();
+     *
+     *   return (
+     *     <div>
+     *       {t("staticLabel")}
+     *       {t("dynamicLabel", { name: "John" })}
+     *     </div>
+     *   );
+     * }
+     * ```
+     */
+    useT: () => <K extends keyof Def & string>(key: K, ...args: Def[K] extends (props: infer P) => string ? [props: P] : []) => string;
+    /**
+     * A function to get the translater for a specific label key.
+     * This is expected to be used in `meta.title` in module/resource definitions.
+     *
+     * Note: When using dynamic labels with props in meta.title, the props are
+     * bound at definition time (when calling labels.t), not at render time.
+     *
+     * @example
+     * ```tsx
+     * import { labels } from "./i18n-labels";
+     *
+     * const resource = defineResource({
+     *   path: "example",
+     *   meta: {
+     *     title: labels.t("someLabelKey"),
+     *     // or with props for dynamic labels
+     *     title: labels.t("dynamicKey", { id: "123" }),
+     *   },
+     *   component: ExampleComponent,
+     * });
+     * ```
+     */
+    t: <K extends keyof Def & string>(key: K, ...args: Def[K] extends (props: infer P) => string ? [props: P] : []) => LocalizedString;
+};
+
+/**
+ * Define a root-level resource that renders a React component.
+ *
+ * @example
+ * ```
+ * // Define a minimal resource
+ * defineReactResource({
+ *   path: "custom-page",
+ *   component: () => {
+ *     return (
+ *       <div>
+ *         <p>This is a custom page.</p>
+ *       </div>
+ *     );
+ *   },
+ * });
+ * ```
+ */
+export declare function defineModule(props: DefineModuleProps): Module;
+
+declare type DefineModuleProps = CommonProps & CommonModuleProps & {
+    /**
+     * React component to render or redirect configuration
+     *
+     * @example
+     * ```tsx
+     * // Render a component
+     * component: (props) => <div>{props.title}</div>
+     *
+     * // Redirect to a resource
+     * component: redirectToResource("dashboard/overview")
+     * ```
+     */
+    component: ((props: ResourceComponentProps) => ReactNode) | RedirectConfig;
+    /**
+     * Error boundary component for this module and its child resources.
+     * When an error occurs in this module or its resources, this component will render.
+     * Use the `useRouteError` hook to access error details within the component.
+     */
+    errorBoundary?: ErrorBoundaryComponent;
+};
+
+/**
+ * Define a resource that renders a React component.
+ *
+ * This resource can be used as a sub-resource of a module or as a root-level resource.
+ *
+ * @example
+ * ```
+ * // Define a minimal resource
+ * defineResource({
+ *   path: "custom-page",
+ *   component: () => {
+ *     return (
+ *       <div>
+ *         <p>This is a custom page.</p>
+ *       </div>
+ *     );
+ *   },
+ *   subResources: [
+ *     defineResource({
+ *       path: "sub-page",
+ *       component: () => {
+ *         return (
+ *           <div>
+ *             <p>This is a sub page.</p>
+ *           </div>
+ *         );
+ *       },
+ *     }),
+ *   ]
+ * });
+ * ```
+ *
+ */
+export declare function defineResource(props: DefineResourceProps): Resource;
+
+declare type DefineResourceProps = CommonProps & ReactResourceProps & {
+    /**
+     * Sub-resources of the resource.
+     */
+    subResources?: Array<Resource>;
+    /**
+     * Error boundary component for this resource and its sub-resources.
+     * When an error occurs in this resource, this component will render.
+     * Overrides module-level or global error boundaries.
+     * Use the `useRouteError` hook to access error details within the component.
+     */
+    errorBoundary?: ErrorBoundaryComponent;
+};
+
+declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
+    [locale: string]: Partial<LabelDefinition<Def>> | undefined;
+};
+
+/**
+ * Error boundary element type for route error handling.
+ *
+ * Pass a JSX element that will render when an error occurs.
+ * Use the `useRouteError` hook from react-router to access the error.
+ *
+ * @example
+ * ```tsx
+ * import { useRouteError } from "@tailor-platform/app-shell";
+ *
+ * const MyErrorBoundary = () => {
+ *   const error = useRouteError() as Error;
+ *   return <div>Error: {error.message}</div>;
+ * };
+ *
+ * // In config:
+ * errorBoundary: <MyErrorBoundary />
+ * // Or with props:
+ * errorBoundary: <MyErrorBoundary theme="dark" onReport={handleReport} />
+ * ```
+ */
+export declare type ErrorBoundaryComponent = ReactNode;
+
+/**
+ * We need to exchange the code and state we received from the OAuth endpoint
+ * for an actual authorization token, in Browser Client case, we get the token
+ * inside of a cookie so there is nothing else to do beyond that point
+ */
+export declare const exchangeCodeForToken: ({ code, returnedState, apiEndpoint, clientId, redirectUri, }: ExchangeCodeForTokenParams) => Promise<string>;
+
+declare interface ExchangeCodeForTokenParams {
+    apiEndpoint: string;
+    clientId: string;
+    returnedState: string | null;
+    code: string | null;
+    redirectUri?: string;
+    silent?: boolean;
+}
+
+/**
+ * When redirected from our IdP Provider, we need to exchange code and state
+ * for a token and clean up the URL params
+ */
+export declare const handleOAuthCallback: ({ currentUrl, apiEndpoint, clientId, redirectUri, }: {
+    currentUrl: URL;
+    apiEndpoint: string;
+    clientId: string;
+    redirectUri: string;
+}) => Promise<void>;
+
+export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<string, LabelValue>, L extends string = never> = {
+    en: Def;
+} & {
+    [K in L]: LabelDefinition<Def>;
+} & DynamicLocales<Def>;
+
+/**
+ * Ensures that other locales have the same label structure as the base definition.
+ * For dynamic labels (functions), the props type must match.
+ */
+declare type LabelDefinition<Def extends Record<string, LabelValue>> = {
+    [K in keyof Def]: Def[K] extends (props: infer P) => string ? (props: P) => string : string;
+};
+
+/**
+ * Label value can be either a static string or a dynamic function that takes props.
+ */
+declare type LabelValue = string | ((props: any) => string);
+
+export { Link }
+
+declare type LocalizedString = string | ((locale: string) => string);
+
+/**
+ * A resource that can be included in the root-level content in the navigation.
+ */
+declare type Module = Omit<CommonPageResource, "meta"> & {
+    _type: "module";
+    meta: CommonPageResource["meta"] & {
+        icon?: ReactNode;
+        menuItemClickable: boolean;
+    };
+    resources: Array<Resource>;
+    loader?: () => Response;
+    errorBoundary: ErrorBoundaryComponent;
+};
+
+declare type Modules = Array<Module>;
+
+declare type NavChildItem = {
+    title: string;
+    url: string;
+};
+
+declare type NavItem = {
+    title: string;
+    url: string | undefined;
+    icon: ReactNode;
+    isActive?: boolean;
+    items?: Array<NavChildItem>;
+};
+
+export declare const OAUTH_STATE_KEY = "oauth_state";
+
+export declare const PKCE_VERIFIER_KEY = "oauth_pkce_verifier";
+
+/**
+ * We need to generate a challenge and state key for OAuth login
+ * and stores them in sessionStorage for verification on callback redirect
+ */
+export declare const prepareLogin: () => Promise<{
+    codeChallenge: string;
+    state: string;
+}>;
+
+declare type Props = {
+    /**
+     * API endpoint of your Tailor Platform application. No `/query` suffix needed.
+     *
+     * @example https://xyz.erp.dev
+     */
+    apiEndpoint: string;
+    /**
+     * OAuth2 Client ID of your Tailor Platform application.
+     */
+    clientId: string;
+    /**
+     * Redirect URI after login is successful.
+     *
+     * @defaults `window.location.origin`
+     */
+    redirectUri?: string;
+};
+
+declare type ReactResourceProps = {
+    /**
+     * React component to render.
+     */
+    component: (props: ResourceComponentProps) => ReactNode;
+};
+
+/**
+ * Redirect configuration for module or root component
+ */
+declare type RedirectConfig = {
+    /**
+     * Path to redirect to (under /resources/)
+     */
+    redirectTo: string;
+};
+
+/**
+ * Helper function to define a redirect to a resource path
+ *
+ * @param path - Path under `/resources/` (e.g., "dashboard/overview")
+ *
+ * @example
+ * ```tsx
+ * defineModule({
+ *   path: "dashboard",
+ *   component: redirectToResource("dashboard/overview"),
+ *   resources: [overviewResource],
+ * });
+ * ```
+ */
+export declare function redirectToResource(path: string): RedirectConfig;
+
+/**
+ * A resource that can be included in the sub-content in the root resource.
+ *
+ * This resource does not have `category` metadata.
+ */
+declare type Resource = CommonPageResource & {
+    _type: "resource";
+    subResources?: Array<Resource>;
+    errorBoundary: ErrorBoundaryComponent;
+};
+
+export declare type ResourceComponentProps = {
+    title: string;
+    icon?: ReactNode;
+    resources?: Array<Resource>;
+};
+
+declare type ResourceMetaProps = {
+    /**
+     * Title of the resource used in navigation.
+     *
+     * If not provided, the title will be generated from the path.
+     */
+    title?: LocalizedString;
+    icon?: ReactNode;
+    /**
+     * Custom breadcrumb segment title for this resource. Can be a string or a function.
+     */
+    breadcrumbTitle?: string | ((segment: string) => string);
+};
+
+declare type RootConfiguration = {
+    modules: Modules;
+    settingsResources: Resource[];
+    basePath?: string;
+    errorBoundary: ErrorBoundaryComponent;
+    locale: string;
+};
+
+export declare const SidebarLayout: (props: SidebarLayoutProps) => JSX.Element;
+
+declare type SidebarLayoutProps = {
+    children?: (props: {
+        Outlet: () => React.ReactNode;
+    }) => React.ReactNode;
+    sidebar?: React.ReactNode;
+};
+
+declare type Theme = "dark" | "light" | "system";
+
+declare type ThemeProviderState = {
+    theme: Theme;
+    resolvedTheme: Omit<Theme, "system">;
+    setTheme: (theme: Theme) => void;
+};
+
+export declare const useAppShell: () => AppShellContextType;
+
+export declare const useBuiltinIdpAuth: () => BuiltinIdPAuthContextType;
+
+export { useLocation }
+
+export { useNavigate }
+
+export { useParams }
+
+export { useRouteError }
+
+export { useSearchParams }
+
+export declare const useTheme: () => ThemeProviderState;
+
+export { }