@rangojs/router 0.0.0-experimental.8 → 0.0.0-experimental.80daa23e

package/dist/types/browser/react/nonce-context.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Context for CSP nonce propagation to client components during SSR.
+ *
+ * The SSR renderer wraps the tree with NonceContext.Provider so that
+ * client components (e.g. MetaTags) can apply nonces to inline scripts.
+ * On the browser side, no provider is needed — the default undefined
+ * is correct since CSP nonces are a server-side HTML concern.
+ */
+import { type Context } from "react";
+export declare const NonceContext: Context<string | undefined>;
+/**
+ * Read the CSP nonce during SSR. Returns undefined on the client.
+ */
+export declare function useNonce(): string | undefined;

package/dist/types/browser/react/shallow-equal.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Shallow equality check for selector results.
+ * Uses Object.is for value comparison (handles NaN and +-0 correctly).
+ */
+export declare function shallowEqual<T>(a: T, b: T): boolean;

package/dist/types/browser/react/use-action.d.ts

@@ -0,0 +1,61 @@
+import type { TrackedActionState } from "../types.js";
+/**
+ * Server action function type
+ * Server actions have a $$id property added by the RSC compiler
+ */
+export type ServerActionFunction = ((...args: any[]) => Promise<any>) & {
+    $$id?: string;
+};
+/**
+ * Hook to track the lifecycle of a specific server action
+ *
+ * Unlike useNavigation which tracks global navigation state, useAction
+ * tracks the state of individual server action invocations.
+ *
+ * Uses the event controller for reactive state management.
+ * State is derived from the inflight actions tracked by the controller.
+ *
+ * Features:
+ * - Tracks action lifecycle: idle → loading → streaming → idle
+ * - Captures result/error locally (React handles cleanup)
+ * - If multiple actions fire, tracks only the last one
+ * - Supports selector pattern like useNavigation
+ *
+ * Matching behavior:
+ * - **Function reference**: Uses full $$id for exact matching. This is precise
+ *   and distinguishes between actions with the same name in different files.
+ * - **String**: Matches by suffix (action name after #). This is convenient
+ *   but may be ambiguous if multiple files export the same action name.
+ *
+ * @param action - Either a server action function or a string action name.
+ *   - **Function**: Must be directly imported in the client component.
+ *     Actions passed as props from server components will throw an error.
+ *   - **String**: The exported function name from your "use server" file.
+ *     Matches any action ending with "#actionName" (suffix match).
+ *
+ * @example
+ * ```tsx
+ * // Option 1: Direct import (precise matching)
+ * import { addToCart } from './actions';
+ * const actionState = useAction(addToCart);
+ *
+ * // Option 2: String-based (suffix matching)
+ * // Matches "hash#addToCart" or "src/actions.ts#addToCart"
+ * const actionState = useAction('addToCart');
+ *
+ * // With selector for specific values
+ * const isLoading = useAction(addToCart, state => state.state === 'loading');
+ * const error = useAction(addToCart, state => state.error);
+ * ```
+ *
+ * @note The selector is expected to be stable for a given hook instance.
+ * This hook tracks one projection of one action. Changing selector semantics
+ * for the same action ID without a new action event is not a supported pattern;
+ * use separate useAction() subscriptions if you need different projections.
+ *
+ * @note Actions passed as props from server components lose their metadata
+ * during RSC serialization. Use a string action name or import directly.
+ */
+export declare function useAction(action: ServerActionFunction | string): TrackedActionState;
+export declare function useAction<T>(action: ServerActionFunction | string, selector: (state: TrackedActionState) => T): T;
+export type { TrackedActionState };

package/dist/types/browser/react/use-handle.d.ts

@@ -0,0 +1,21 @@
+import type { Handle } from "../../handle.js";
+/**
+ * Hook to access collected handle data.
+ *
+ * Returns the collected value from all route segments that pushed to this handle.
+ * Re-renders when handle data changes (navigation, actions).
+ *
+ * @param handle - The handle to read
+ * @param selector - Optional selector for performance (only re-render when selected value changes)
+ *
+ * @example
+ * ```tsx
+ * // Get all breadcrumbs
+ * const breadcrumbs = useHandle(Breadcrumbs);
+ *
+ * // With selector - only re-render when last crumb changes
+ * const lastCrumb = useHandle(Breadcrumbs, (data) => data.at(-1));
+ * ```
+ */
+export declare function useHandle<T, A>(handle: Handle<T, A>): Rango.FlightSerialize<A>;
+export declare function useHandle<T, A, S>(handle: Handle<T, A>, selector: (data: Rango.FlightSerialize<A>) => S): S;

package/dist/types/browser/react/use-href.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Client-side hook for mount-aware URL resolution.
+ *
+ * Returns an href function that automatically prepends the current
+ * include() mount prefix. Inside an include("/shop", ...) scope,
+ * the returned function resolves local paths relative to /shop.
+ *
+ * For absolute paths (outside the current mount), use the bare
+ * href() function directly instead.
+ *
+ * @returns A function that prepends the mount prefix to paths
+ *
+ * @example
+ * ```tsx
+ * "use client";
+ * import { useHref, href } from "@rangojs/router/client";
+ *
+ * // Inside include("/shop", shopPatterns)
+ * function ShopNav() {
+ *   const href = useHref();
+ *
+ *   return (
+ *     <>
+ *       {// Local paths - auto-prefixed with /shop}
+ *       <Link to={href("/cart")}>Cart</Link>
+ *       <Link to={href("/product/widget")}>Widget</Link>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useHref(): (path: `/${string}`) => string;

package/dist/types/browser/react/use-link-status.d.ts

@@ -0,0 +1,36 @@
+import { type Context } from "react";
+/**
+ * Context for Link component to provide its destination URL
+ * Used by useLinkStatus to determine if this specific link is pending
+ */
+export declare const LinkContext: Context<string | null>;
+/**
+ * Link status returned by useLinkStatus hook
+ */
+export interface LinkStatus {
+    /** Whether navigation to this link's destination is in progress */
+    pending: boolean;
+}
+/**
+ * Hook to track the pending state of a Link component
+ *
+ * Must be used inside a Link component. Returns `{ pending: true }`
+ * when navigation to this link's destination is in progress.
+ *
+ * Useful for showing inline loading indicators on individual links.
+ *
+ * @example
+ * ```tsx
+ * function LoadingIndicator() {
+ *   const { pending } = useLinkStatus();
+ *   return pending ? <Spinner /> : null;
+ * }
+ *
+ * // In your component:
+ * <Link to="/dashboard">
+ *   Dashboard
+ *   <LoadingIndicator />
+ * </Link>
+ * ```
+ */
+export declare function useLinkStatus(): LinkStatus;

package/dist/types/browser/react/use-mount.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns the current include() mount path.
+ *
+ * Inside `include("/articles", blogPatterns)`, returns "/articles".
+ * For nested includes, returns the nearest mount path.
+ * At root level (no include), returns "/".
+ *
+ * @example
+ * ```tsx
+ * "use client";
+ * import { useMount, href } from "@rangojs/router/client";
+ *
+ * function BlogNav({ slug }: { slug: string }) {
+ *   const mount = useMount(); // "/articles"
+ *   return (
+ *     <>
+ *       <Link to={href("/", mount)}>Blog Home</Link>
+ *       <Link to={href(`/${slug}`, mount)}>Post</Link>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMount(): string;

package/dist/types/browser/react/use-navigation.d.ts

@@ -0,0 +1,15 @@
+import type { PublicNavigationState } from "../types.js";
+/**
+ * Hook to access reactive navigation state with optional selector for performance.
+ *
+ * Returns state only. For actions (push, replace, refresh, prefetch),
+ * use useRouter() instead.
+ *
+ * @example
+ * ```tsx
+ * const { state, location } = useNavigation();
+ * const isLoading = useNavigation(nav => nav.state === 'loading');
+ * ```
+ */
+export declare function useNavigation(): PublicNavigationState;
+export declare function useNavigation<T>(selector: (state: PublicNavigationState) => T): T;

package/dist/types/browser/react/use-params.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Hook to access the current route params.
+ *
+ * Returns the merged route params from the matched route.
+ * Updates when navigation completes, not during pending navigation.
+ *
+ * @example
+ * ```tsx
+ * // Route: /products/:productId
+ * const params = useParams();
+ * // { productId: "123" }
+ *
+ * // Annotate the expected shape via a generic
+ * const { productId } = useParams<{ productId: string }>();
+ *
+ * // With selector
+ * const productId = useParams(p => p.productId);
+ * ```
+ */
+export declare function useParams<T extends object = Record<string, string | undefined>>(): Readonly<T>;
+export declare function useParams<T>(selector: (params: Record<string, string | undefined>) => T): T;

package/dist/types/browser/react/use-pathname.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Hook to access the current pathname.
+ *
+ * Returns the committed pathname string (excludes search params and hash).
+ * Updates when navigation completes, not during pending navigation.
+ *
+ * @example
+ * ```tsx
+ * const pathname = usePathname();
+ * // "/products/123"
+ * ```
+ */
+export declare function usePathname(): string;

package/dist/types/browser/react/use-reverse.d.ts

@@ -0,0 +1,40 @@
+import type { LocalReverseFunction } from "../../reverse.js";
+type RouteEntry = string | {
+    readonly path: string;
+};
+type LocalRouteMap = Readonly<Record<string, RouteEntry>>;
+/**
+ * Mount-aware reverse function for a locally-imported `routes` map.
+ *
+ * The `routes` map you pass IS the scope: `reverse("name")` looks the name up
+ * in that map (verbatim), prefixes the result with the surrounding `include()`
+ * mount path via `useMount()`, and substitutes params — auto-filling from the
+ * current matched route's params, with explicit params overriding. A module's
+ * components can therefore reverse their own routes without knowing where the
+ * module is mounted: include it under any prefix and the URLs resolve correctly.
+ *
+ * The leading dot is optional and cosmetic: `reverse("post")` and
+ * `reverse(".post")` resolve identically. The dot exists only as a readability
+ * convention and for parity with `ctx.reverse(".name")` on the server; here the
+ * passed map is the scope, so there is no separate global namespace to
+ * disambiguate and the dot carries no meaning.
+ *
+ * @example
+ * ```tsx
+ * "use client";
+ * import { Link, useReverse } from "@rangojs/router/client";
+ * import { routes as blogRoutes } from "../urls/blog.gen.js";
+ *
+ * function BlogNav() {
+ *   const reverse = useReverse(blogRoutes);
+ *   return (
+ *     <>
+ *       <Link to={reverse("index")}>Blog</Link>
+ *       <Link to={reverse("post", { postId: "hello" })}>Post</Link>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useReverse<const TRoutes extends LocalRouteMap>(routes: TRoutes): LocalReverseFunction<TRoutes>;
+export {};

package/dist/types/browser/react/use-router.d.ts

@@ -0,0 +1,30 @@
+import type { RouterInstance } from "../types.js";
+/**
+ * Hook to access router actions (push, replace, refresh, prefetch, back, forward).
+ *
+ * Returns a STABLE reference per component, so components using useRouter()
+ * do not re-render on navigation state changes.
+ * For reactive navigation state, use useNavigation() instead.
+ *
+ * Methods read `basename` from the context on each call. It is set once from
+ * the initial payload and is stable within a session — a cross-app navigation
+ * is a full document load (X-RSC-Reload), so the target app mounts fresh with
+ * its own basename.
+ *
+ * RELATIVE paths (no leading `/`, no scheme/query/hash) resolve against the
+ * current include() mount: `router.push("cart")` inside `include("/shop")`
+ * navigates to `/shop/cart`. Absolute paths stay APP-absolute — unlike
+ * basename, the mount is scoped, and absolute pushes legitimately target
+ * outside it, so they are never auto-prefixed.
+ *
+ * @example
+ * ```tsx
+ * const router = useRouter();
+ * router.push("/products");   // app-absolute
+ * router.push("cart");        // mount-relative
+ * router.replace("/login", { scroll: false });
+ * router.prefetch("/dashboard");
+ * router.back();
+ * ```
+ */
+export declare function useRouter(): RouterInstance;

package/dist/types/browser/react/use-search-params.d.ts

@@ -0,0 +1,66 @@
+import type { ReadonlyURLSearchParams } from "../types.js";
+/**
+ * Accepted shapes for the setter: a full replacement for the search string.
+ * Record values are stringified; array values append one entry per element;
+ * null/undefined values are skipped (ergonomic conditional spreads).
+ */
+export type SearchParamsInit = string | URLSearchParams | ReadonlyURLSearchParams | Record<string, string | number | boolean | readonly (string | number | boolean)[] | null | undefined>;
+export interface SetSearchParamsOptions {
+    /** Replace the current history entry instead of pushing (default false). */
+    replace?: boolean;
+    /** Scroll behavior for the navigation (default: router default, scroll). */
+    scroll?: boolean;
+    /**
+     * Set false to skip the server fetch and only update the URL (default
+     * true). Purely client-derived search state (open accordions, view modes)
+     * needs no loader re-run; all location-aware hooks still update. Same
+     * contract as NavigateOptions.revalidate — it only applies because the
+     * setter never changes the pathname.
+     */
+    revalidate?: boolean;
+}
+export type SetSearchParams = (init: SearchParamsInit | ((prev: URLSearchParams) => SearchParamsInit), options?: SetSearchParamsOptions) => Promise<void>;
+/**
+ * Hook to read and write the current URL search params
+ * (React Router-style tuple).
+ *
+ * The first element is a read-only URLSearchParams from the COMMITTED
+ * location — it updates when navigation completes, not during a pending
+ * navigation. During document SSR it carries the LIVE request's search (the
+ * SSR store is seeded from SSRRenderOptions.search), and the browser's
+ * first render seeds from its own store location (window.location) — the
+ * same URL, so hydration matches. Ppr capture/resume renders seed the SHELL
+ * KEY's search (sorted, cache.searchParams filter applied — search is part
+ * of shell identity like every other ppr key), so static-part reads bake
+ * markup consistent with the shell's own key. Two edges: a param EXCLUDED
+ * by cache.searchParams is absent in shell renders but present in the
+ * browser (exclusion declares "does not affect markup" — reading one
+ * anyway hydration-mismatches), and toString() renders sorted order while
+ * the browser holds the raw URL order.
+ *
+ * The setter REPLACES the whole search string (React Router semantics) and
+ * navigates to the current pathname with the new params — a same-route
+ * navigation, so route loaders re-evaluate per their revalidate() contract
+ * and the commit holds previous content (the same-structure transition
+ * lane). Pass a function to merge with the current params: it receives a
+ * MUTABLE copy read at call time. The hash is dropped, like React Router.
+ *
+ * @example
+ * ```tsx
+ * const [searchParams, setSearchParams] = useSearchParams();
+ * const category = searchParams.get("category");
+ *
+ * // Replace the whole search string
+ * setSearchParams({ category: "electronics" });
+ *
+ * // Merge with what's there now
+ * setSearchParams((prev) => {
+ *   prev.set("page", "2");
+ *   return prev;
+ * });
+ *
+ * // Filter UIs usually want replace + preserved scroll
+ * setSearchParams({ category: "home" }, { replace: true, scroll: false });
+ * ```
+ */
+export declare function useSearchParams(): [ReadonlyURLSearchParams, SetSearchParams];

package/dist/types/browser/react/use-segments.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Segments state returned by useSegments hook
+ */
+export interface SegmentsState {
+    /** URL path segments (e.g., /shop/products/123 → ["shop", "products", "123"]) */
+    path: readonly string[];
+    /** Matched segment IDs in order (layouts and routes only, e.g., ["L0", "L0L1", "L0L1R0"]) */
+    segmentIds: readonly string[];
+    /** Current URL location */
+    location: URL;
+}
+/**
+ * Hook to access current route segments with optional selector for performance
+ *
+ * Provides information about the current URL path and matched route segments.
+ * Uses the event controller for reactive state management.
+ *
+ * @example
+ * ```tsx
+ * // Get full segments state
+ * const { path, segmentIds, location } = useSegments();
+ *
+ * // Use selector for specific values (better performance)
+ * const path = useSegments(s => s.path);
+ * const isShopRoute = useSegments(s => s.path[0] === "shop");
+ * ```
+ */
+export declare function useSegments(): SegmentsState;
+export declare function useSegments<T>(selector: (state: SegmentsState) => T): T;

package/dist/types/browser/response-adapter.d.ts

@@ -0,0 +1,58 @@
+type HeaderResult = {
+    url: string;
+} | "blocked" | null;
+/**
+ * Extract and validate an RSC response header URL (X-RSC-Reload, X-RSC-Redirect).
+ * Returns { url } if valid, "blocked" if present but invalid origin, null if absent.
+ */
+export declare function extractRscHeaderUrl(response: Response, header: string): HeaderResult;
+/**
+ * Empty 200 response that won't choke Flight parsing.
+ * Used when a header URL is blocked by origin validation.
+ */
+export declare function emptyResponse(): Response;
+/**
+ * Whether an RSC content response carries a server-stamped router identity
+ * (`X-RSC-Router-Id`) that DIFFERS from the id this client expects (its own
+ * routerId, also sent as `_rsc_rid`). Pre-decode integrity check: lets a caller
+ * refuse a foreign app's payload before `createFromFetch` imports its chunks.
+ *
+ * True ONLY when both the header and the expected id are present and differ. An
+ * absent header (control-only reload/redirect responses are not stamped) or an
+ * absent expected id (e.g. before the client is seeded) is a pass-through —
+ * never a false reject.
+ */
+export declare function isForeignRouterId(response: Response, expectedId: string | undefined): boolean;
+/**
+ * Handle the X-RSC-Reload control header (server requests a full page reload on
+ * a version mismatch). Returns a short-circuit response when the header is
+ * present -- emptyResponse() if the URL was blocked by origin validation, or a
+ * never-resolving promise while the page reloads -- and null when absent, so
+ * the caller continues processing (e.g. the X-RSC-Redirect check). Scoped to
+ * X-RSC-Reload only; redirect handling differs between callers.
+ */
+export declare function handleReloadHeader(response: Response, opts: {
+    onBlocked: () => void;
+    onReload: (url: string) => void;
+}): Response | Promise<Response> | null;
+/**
+ * Tee a response body for RSC parsing and stream completion tracking.
+ * Returns a new Response with one branch; the other is consumed to detect
+ * end-of-stream, calling onComplete when done.
+ *
+ * `onComplete` receives `endedCleanly`: true only on a normal EOF drain, false
+ * on a read error or an abort (the signal cancelled the reader). Callers that
+ * gate a "fully complete" fast path (e.g. prefetch's `entry.complete`) must
+ * treat a non-clean end as incomplete — a broken stream is not complete data.
+ *
+ * If the response has no body, onComplete fires synchronously with `true`
+ * (an empty body is a clean, complete stream).
+ * If signal is provided, an abort cancels the tracking reader.
+ *
+ * `silent` suppresses the stream-error log. Prefetch passes it: a speculative,
+ * low-priority prefetch that is aborted or never consumed can error its stream
+ * benignly, which is not worth surfacing. The fresh-navigation path keeps the
+ * log (default), where a stream error reflects a real failed navigation.
+ */
+export declare function teeWithCompletion(response: Response, onComplete: (endedCleanly: boolean) => void, signal?: AbortSignal, silent?: boolean): Response;
+export {};

package/dist/types/browser/rsc-router.d.ts

@@ -0,0 +1,146 @@
+import React from "react";
+import type { RscPayload, RscBrowserDependencies, NavigationStore, NavigationBridge } from "./types.js";
+import type { EventController } from "./event-controller.js";
+import type { ResolvedThemeConfig, Theme } from "../theme/types.js";
+/**
+ * Options for initializing the browser app
+ */
+export interface InitBrowserAppOptions {
+    /**
+     * RSC stream containing the initial payload (from rsc-html-stream/client)
+     */
+    rscStream: ReadableStream<Uint8Array>;
+    /**
+     * RSC browser dependencies from @vitejs/plugin-rsc/browser
+     */
+    deps: RscBrowserDependencies;
+    /**
+     * Optional store configuration
+     */
+    storeOptions?: {
+        /**
+         * Maximum number of history entries to cache
+         * @default 10
+         */
+        cacheSize?: number;
+    };
+    /**
+     * Enable global link interception for SPA navigation.
+     * When enabled, clicks on eligible same-origin HTML anchor elements are intercepted
+     * and handled via client-side navigation instead of full page loads. Plain
+     * anchors inside the router basename also follow its default prefetch strategy
+     * after hydration. `data-prefetch="false"`/`"none"` opts out; `"true"` allows
+     * an application route with a common static-resource suffix.
+     *
+     * Links rendered with the Link component handle their own navigation
+     * regardless of this setting.
+     *
+     * Set to false to disable global interception and rely solely on
+     * Link components for SPA navigation.
+     *
+     * @default true
+     */
+    linkInterception?: boolean;
+    /**
+     * Theme configuration from router.
+     * When provided, enables theme support via useTheme hook.
+     * Pass router.themeConfig here to enable theme features.
+     *
+     * @example
+     * ```tsx
+     * import { router } from "./router.js";
+     *
+     * await initBrowserApp({
+     *   rscStream,
+     *   deps: rscBrowser,
+     *   themeConfig: router.themeConfig,
+     *   initialTheme: document.documentElement.className.includes("dark") ? "dark" : "light",
+     * });
+     * ```
+     */
+    themeConfig?: ResolvedThemeConfig | null;
+    /**
+     * Initial theme from server (typically read from cookie).
+     * Only used when themeConfig is provided.
+     */
+    initialTheme?: Theme;
+}
+/**
+ * Result from initializing the browser app
+ */
+export interface BrowserAppContext {
+    store: NavigationStore;
+    eventController: EventController;
+    bridge: NavigationBridge;
+    initialPayload: RscPayload;
+    initialTree: React.ReactNode | Promise<React.ReactNode>;
+    /** Theme configuration (null if theme not enabled) */
+    themeConfig?: ResolvedThemeConfig | null;
+    /** Initial theme from server */
+    initialTheme?: Theme;
+    /** Whether connection warmup is enabled */
+    warmupEnabled?: boolean;
+    /** Whether the hydrated tree should be wrapped in React.StrictMode */
+    strictMode?: boolean;
+    /** Whether plain-anchor click interception and delegated prefetch are enabled */
+    linkInterceptionEnabled?: boolean;
+    /** App version for prefetch version mismatch detection */
+    version?: string;
+    /**
+     * App-shell ref, read through on each render so renderSegments and the
+     * NavigationProvider see rootLayout/basename/version without closing over a
+     * stale snapshot. Set once from the initial payload and not swapped within a
+     * session: a cross-app navigation is a full document load (X-RSC-Reload), so
+     * the target app establishes its own shell on load. Theme, warmup, and
+     * prefetch TTL are document-lifetime too (see AppShell).
+     */
+    appShellRef?: import("./app-shell.js").AppShellRef;
+}
+/**
+ * Initialize the browser app. Must be called before rendering Rango.
+ *
+ * This function:
+ * - Loads the initial RSC payload from the stream
+ * - Creates the navigation store and event controller
+ * - Sets up action and navigation bridges
+ * - Configures HMR support
+ */
+export declare function initBrowserApp(options: InitBrowserAppOptions): Promise<BrowserAppContext>;
+/**
+ * Get the browser app context. Throws if initBrowserApp hasn't been called.
+ */
+export declare function getBrowserAppContext(): BrowserAppContext;
+/**
+ * Reset the browser app context (for testing)
+ */
+export declare function resetBrowserAppContext(): void;
+/**
+ * Props for the Rango component
+ */
+export interface RangoProps {
+}
+/**
+ * Rango component - renders the RSC router with all internal wiring.
+ *
+ * Must be called after initBrowserApp() has completed.
+ *
+ * @example
+ * ```tsx
+ * import { initBrowserApp, Rango } from "rsc-router/browser";
+ * import { rscStream } from "rsc-html-stream/client";
+ * import * as rscBrowser from "@vitejs/plugin-rsc/browser";
+ *
+ * async function main() {
+ *   await initBrowserApp({ rscStream, deps: rscBrowser });
+ *
+ *   hydrateRoot(
+ *     document,
+ *     <React.StrictMode>
+ *       <Rango />
+ *     </React.StrictMode>
+ *   );
+ * }
+ * main();
+ * ```
+ */
+export declare function Rango(_props: RangoProps): React.ReactElement;