@elaraai/east-ui 1.0.35 → 1.0.37

package/dist/src/navigation/pages/index.js

@@ -67,8 +67,8 @@ export const Navigation = {
     bind: bindNavigation,
 };
 /**
- * Build a `<Pages>` content-switcher from a bound nav handle + a typed page
- * registry.
+ * Shared switcher builder for `Pages` / `Route` — the two emit the same
+ * payload (`render` + `navKey`) under their own variant case.
  *
  * The nullary `render` reads `current()` on the **passed** handle (no internal
  * re-bind) and `match`es the active route to its page body. The bodies live in
@@ -77,11 +77,8 @@ export const Navigation = {
  * the active page (leaf-only, visible-only). The render closes over `nav`, so
  * its `current()` read subscribes to the same store the app's handle is bound
  * to (#114).
- *
- * @param input - The {@link PagesInput} (`nav` handle + `pages` registry).
- * @returns A `Pages` `UIComponentType` value.
  */
-function createPages({ nav, pages }) {
+function createNavSwitcher(caseName, nav, pages) {
     const handlers = pages;
     // Build the match arms in host TS (outside the East block): one arm per
     // route, forwarding the typed payload + the shared handle to the page body.
@@ -97,7 +94,17 @@ function createPages({ nav, pages }) {
         const cur = $.const(nav.current());
         return cur.match(armsFor(nav));
     });
-    return East.value(variant("Pages", { render, navKey: nav.key }), UIComponentType);
+    return East.value(variant(caseName, { render, navKey: nav.key }), UIComponentType);
+}
+/**
+ * Build a `<Pages>` content-switcher from a bound nav handle + a typed page
+ * registry.
+ *
+ * @param input - The {@link PagesInput} (`nav` handle + `pages` registry).
+ * @returns A `Pages` `UIComponentType` value.
+ */
+function createPages({ nav, pages }) {
+    return createNavSwitcher("Pages", nav, pages);
 }
 /**
  * The `Pages` namespace — the first-class navigation content-switcher.
@@ -112,4 +119,34 @@ export const Pages = {
     /** Build a `<Pages>` content-switcher from `{ nav, pages }`. See {@link createPages}. */
     Root: createPages,
 };
+/**
+ * Build a `<Route>` hosting slot from a bound nav handle + a typed route
+ * registry — `<Pages>` generalized to any slot.
+ *
+ * Renders only the active route's body and remounts it on navigation, but is
+ * placeable anywhere (a header widget, a sidebar, a drawer body). The body
+ * `<Pages>` and any number of `<Route>` slots bind the **same** `nav` handle,
+ * so they stay in lockstep and each remounts *its own* slot on navigation.
+ *
+ * @param input - The {@link RouteInput} (`nav` handle + `routes` registry).
+ * @returns A `Route` `UIComponentType` value.
+ */
+function createRoute({ nav, routes }) {
+    return createNavSwitcher("Route", nav, routes);
+}
+/**
+ * The `Route` namespace — the nav-typed hosting slot.
+ *
+ * @remarks
+ * Authored as the `<Route nav={…} routes={{…}} />` tag; `Route.Root({ nav,
+ * routes })` is the underlying factory. Use it to swap a **stateful**
+ * component (its own `<Reactive>` / binds) in any slot by route: each case is
+ * a self-contained component built with the existing binds, torn down and
+ * rebuilt fresh when the route changes. For a non-route key (a `State`-bound
+ * mode, a tagged selection), use `<Match on cases>` instead.
+ */
+export const Route = {
+    /** Build a `<Route>` hosting slot from `{ nav, routes }`. See {@link createRoute}. */
+    Root: createRoute,
+};
 //# sourceMappingURL=index.js.map

package/dist/src/navigation/pages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigation/pages/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/navigation/pages/index.ts"],"names":[],"mappings":"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"}

package/dist/src/reactive/match.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * `Match` — the hosting slot over a variant (#333): the component-level twin
+ * of `variant.match`.
+ *
+ * A plain `variant.match(…)` selecting between mounted components reconciles
+ * same-shape nodes, so swapping component A → B at one slot keeps A mounted —
+ * its nested `Reactive` / bind / scroll / open state persists and the content
+ * goes stale. `Match` host-mounts only the active case and **remounts on tag
+ * change**: each case is a normal, self-contained component built with the
+ * existing binds, torn down and rebuilt fresh per key. Same-tag payload/data
+ * churn re-renders without losing mounted state.
+ *
+ * @packageDocumentation
+ */
+import { type BlockBuilder, type EastType, type ExprType, type SubtypeExprOrValue, type VariantType } from "@elaraai/east";
+import { UIComponentType } from "../component.js";
+/**
+ * The case registry: one body per variant case, receiving `($, payload)` —
+ * the inner block builder and that case's typed payload. Typed from the `on`
+ * variant so a wrong payload arg is a compile error; every case must be
+ * handled (exhaustive), exactly like `variant.match`.
+ */
+export type MatchCases<C extends {
+    [K in string]: EastType;
+}> = {
+    [K in keyof C]: ($: BlockBuilder<typeof UIComponentType>, payload: ExprType<C[K]>) => SubtypeExprOrValue<typeof UIComponentType>;
+};
+/**
+ * The input to the `<Match>` hosting slot: the variant expression selecting
+ * the active case, plus the typed case registry.
+ *
+ * @remarks
+ * Taking a **variant** (not a bare string/number key) is what lets the case
+ * map be typed + exhaustive — model the choice as a variant (a `State`-bound
+ * mode, a selection tagged as a variant) to get it. `C` is fixed by `on`, so
+ * every `cases` handler is contextually typed.
+ */
+export interface MatchInput<C extends {
+    [K in string]: EastType;
+}> {
+    /** The variant expression selecting the active case — its reads are the reactive subscription. */
+    on: ExprType<VariantType<C>>;
+    /** One body per case — see {@link MatchCases}. `C` is fixed by `on`, so the handlers are contextually typed. */
+    cases: MatchCases<NoInfer<C>>;
+}
+/**
+ * Build a `<Match>` hosting slot from a variant expression + a typed case
+ * registry.
+ *
+ * The nullary `render` re-reads `on` and `match`es the active case to its
+ * body. The bodies live in the match arms (in the IR), so the manifest walk
+ * collects every case's binds (the union) while only the matched arm executes
+ * — the renderer mounts just the active case. The `tag` closure re-reads `on`
+ * and yields the active case name; the renderer keys the mounted subtree by
+ * it, so the active case remounts exactly on tag change.
+ *
+ * @param input - The {@link MatchInput} (`on` variant + `cases` registry).
+ * @returns A `Match` `UIComponentType` value.
+ */
+declare function createMatch<C extends {
+    [K in string]: EastType;
+}>({ on, cases }: MatchInput<C>): ExprType<typeof UIComponentType>;
+/**
+ * The `Match` namespace — the general hosting slot over a variant.
+ *
+ * @remarks
+ * Authored as the `<Match on={…} cases={{…}} />` tag; `Match.Root({ on,
+ * cases })` is the underlying factory. Use it to swap a **stateful**
+ * component (its own `<Reactive>` / binds) at one slot by a reactive key:
+ * the active case remounts on tag change. Where the key is a nav route, use
+ * `<Route nav routes>` instead — it pins the case map to the
+ * `Navigation.config` and hands each body the route payload + nav. For
+ * selecting a plain *value* by key (a label, a count), use `variant.match`
+ * directly — only mounted subtrees need the hosting slot.
+ */
+export declare const Match: {
+    /** Build a `<Match>` hosting slot from `{ on, cases }`. See {@link createMatch}. */
+    readonly Root: typeof createMatch;
+};
+export {};
+//# sourceMappingURL=match.d.ts.map

package/dist/src/reactive/match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../../src/reactive/match.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAIH,KAAK,YAAY,EACjB,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACnB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,GAAG,QAAQ;CAAE,IAAI;KAC3D,CAAC,IAAI,MAAM,CAAC,GAAG,CACZ,CAAC,EAAE,YAAY,CAAC,OAAO,eAAe,CAAC,EACvC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACtB,kBAAkB,CAAC,OAAO,eAAe,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,GAAG,QAAQ;CAAE;IAC7D,kGAAkG;IAClG,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,gHAAgH;IAChH,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,GAAG,QAAQ;CAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAY1H;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK;IACd,oFAAoF;;CAE9E,CAAC"}

package/dist/src/reactive/match.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * `Match` — the hosting slot over a variant (#333): the component-level twin
+ * of `variant.match`.
+ *
+ * A plain `variant.match(…)` selecting between mounted components reconciles
+ * same-shape nodes, so swapping component A → B at one slot keeps A mounted —
+ * its nested `Reactive` / bind / scroll / open state persists and the content
+ * goes stale. `Match` host-mounts only the active case and **remounts on tag
+ * change**: each case is a normal, self-contained component built with the
+ * existing binds, torn down and rebuilt fresh per key. Same-tag payload/data
+ * churn re-renders without losing mounted state.
+ *
+ * @packageDocumentation
+ */
+import { East, StringType, variant, } from "@elaraai/east";
+import { UIComponentType } from "../component.js";
+/**
+ * Build a `<Match>` hosting slot from a variant expression + a typed case
+ * registry.
+ *
+ * The nullary `render` re-reads `on` and `match`es the active case to its
+ * body. The bodies live in the match arms (in the IR), so the manifest walk
+ * collects every case's binds (the union) while only the matched arm executes
+ * — the renderer mounts just the active case. The `tag` closure re-reads `on`
+ * and yields the active case name; the renderer keys the mounted subtree by
+ * it, so the active case remounts exactly on tag change.
+ *
+ * @param input - The {@link MatchInput} (`on` variant + `cases` registry).
+ * @returns A `Match` `UIComponentType` value.
+ */
+function createMatch({ on, cases }) {
+    // The handlers receive ($, payload) — the exact `variant.match` arm shape —
+    // so the registry passes straight through as the match arms.
+    const render = East.function([], UIComponentType, ($) => {
+        const cur = $.const(on);
+        return cur.match(cases);
+    });
+    const tag = East.function([], StringType, ($) => {
+        const cur = $.const(on);
+        return cur.getTag();
+    });
+    return East.value(variant("Match", { render, tag }), UIComponentType);
+}
+/**
+ * The `Match` namespace — the general hosting slot over a variant.
+ *
+ * @remarks
+ * Authored as the `<Match on={…} cases={{…}} />` tag; `Match.Root({ on,
+ * cases })` is the underlying factory. Use it to swap a **stateful**
+ * component (its own `<Reactive>` / binds) at one slot by a reactive key:
+ * the active case remounts on tag change. Where the key is a nav route, use
+ * `<Route nav routes>` instead — it pins the case map to the
+ * `Navigation.config` and hands each body the route payload + nav. For
+ * selecting a plain *value* by key (a label, a count), use `variant.match`
+ * directly — only mounted subtrees need the hosting slot.
+ */
+export const Match = {
+    /** Build a `<Match>` hosting slot from `{ on, cases }`. See {@link createMatch}. */
+    Root: createMatch,
+};
+//# sourceMappingURL=match.js.map

package/dist/src/reactive/match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.js","sourceRoot":"","sources":["../../../src/reactive/match.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAMV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgClD;;;;;;;;;;;;;GAaG;AACH,SAAS,WAAW,CAAwC,EAAE,EAAE,EAAE,KAAK,EAAiB;IACpF,4EAA4E;IAC5E,6DAA6D;IAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACpD,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACxB,OAAQ,GAA0E,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpG,CAAC,CAAC,CAAC;IACH,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;QAC5C,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACxB,OAAQ,GAAqD,CAAC,MAAM,EAAE,CAAC;IAC3E,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;AAC1E,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,oFAAoF;IACpF,IAAI,EAAE,WAAW;CACX,CAAC"}

package/dist/src/runtime/navigation/index.d.ts

@@ -6,4 +6,5 @@
 export { Breadcrumb } from "./breadcrumb.js";
 export { NavList } from "./nav-list.js";
 export { Pages } from "./pages.js";
+export { Route } from "./route.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/runtime/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/runtime/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/runtime/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/runtime/navigation/index.js

@@ -6,4 +6,5 @@
 export { Breadcrumb } from "./breadcrumb.js";
 export { NavList } from "./nav-list.js";
 export { Pages } from "./pages.js";
+export { Route } from "./route.js";
 //# sourceMappingURL=index.js.map

package/dist/src/runtime/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/runtime/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/runtime/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/runtime/navigation/route.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/** Navigation `<Route>` tag — the nav-typed hosting slot (#333). */
+import { type RouteInput } from "../../navigation/pages/index.js";
+import type { NavRoutes } from "../../navigation/pages/types.js";
+import type { UIElement } from "../runtime.js";
+/**
+ * Nav-typed hosting slot — `<Pages>` generalized to any slot: renders only the
+ * active route's body and **remounts it on navigation**, but is placeable
+ * anywhere (a header widget, a sidebar, a drawer body). Bind the nav handle
+ * once in the enclosing `<Reactive>` and share it between the body `<Pages>`,
+ * the chrome, and any number of `<Route>` slots — they stay in lockstep and
+ * each remounts *its own* slot on navigation. Route keys are typed +
+ * exhaustive against the `Navigation.config`; each body receives the route's
+ * payload + the nav handle. For a non-route key (a `State`-bound mode, a
+ * tagged selection), use `<Match on cases>` instead.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, NullType, UIComponentType } from "@elaraai/east";
+ * import { Navigation, Route, Reactive, Text } from "@elaraai/east-ui";
+ *
+ * const widget = East.function([], UIComponentType, _$ => {
+ *     const routes = Navigation.config({ overview: { value: NullType, label: "Overview" } });
+ *     return (
+ *         <Reactive>{$ => {
+ *             const nav = $.let(Navigation.bind(routes, "app.nav", [routes.Page.overview()]));
+ *             return <Route nav={nav} routes={{ overview: () => <Text>Overview widget</Text> }} />;
+ *         }}</Reactive>
+ *     );
+ * });
+ * ```
+ *
+ * @remarks
+ * Desugars to `Route.Root({ nav, routes })`. A generic function declaration
+ * (merged with the `Route` namespace) so it is a valid generic JSX component.
+ */
+export declare function Route<R extends NavRoutes>(props: RouteInput<R>): UIElement;
+export declare namespace Route {
+    /** The underlying factory: `Route.Root({ nav, routes })`. */
+    const Root: <R extends NavRoutes>({ nav, routes }: RouteInput<R>) => import("@elaraai/east").ExprType<typeof import("../../component.js").UIComponentType>;
+}
+//# sourceMappingURL=route.d.ts.map

package/dist/src/runtime/navigation/route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../src/runtime/navigation/route.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oEAAoE;AAEpE,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAE1E;AAGD,yBAAiB,KAAK,CAAC;IACnB,6DAA6D;IACtD,MAAM,IAAI,gJAAoB,CAAC;CACzC"}

package/dist/src/runtime/navigation/route.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/** Navigation `<Route>` tag — the nav-typed hosting slot (#333). */
+import { Route as RouteFactory } from "../../navigation/pages/index.js";
+/**
+ * Nav-typed hosting slot — `<Pages>` generalized to any slot: renders only the
+ * active route's body and **remounts it on navigation**, but is placeable
+ * anywhere (a header widget, a sidebar, a drawer body). Bind the nav handle
+ * once in the enclosing `<Reactive>` and share it between the body `<Pages>`,
+ * the chrome, and any number of `<Route>` slots — they stay in lockstep and
+ * each remounts *its own* slot on navigation. Route keys are typed +
+ * exhaustive against the `Navigation.config`; each body receives the route's
+ * payload + the nav handle. For a non-route key (a `State`-bound mode, a
+ * tagged selection), use `<Match on cases>` instead.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, NullType, UIComponentType } from "@elaraai/east";
+ * import { Navigation, Route, Reactive, Text } from "@elaraai/east-ui";
+ *
+ * const widget = East.function([], UIComponentType, _$ => {
+ *     const routes = Navigation.config({ overview: { value: NullType, label: "Overview" } });
+ *     return (
+ *         <Reactive>{$ => {
+ *             const nav = $.let(Navigation.bind(routes, "app.nav", [routes.Page.overview()]));
+ *             return <Route nav={nav} routes={{ overview: () => <Text>Overview widget</Text> }} />;
+ *         }}</Reactive>
+ *     );
+ * });
+ * ```
+ *
+ * @remarks
+ * Desugars to `Route.Root({ nav, routes })`. A generic function declaration
+ * (merged with the `Route` namespace) so it is a valid generic JSX component.
+ */
+export function Route(props) {
+    return RouteFactory.Root(props);
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (Route) {
+    /** The underlying factory: `Route.Root({ nav, routes })`. */
+    Route.Root = RouteFactory.Root;
+})(Route || (Route = {}));
+//# sourceMappingURL=route.js.map

package/dist/src/runtime/navigation/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../../../../src/runtime/navigation/route.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oEAAoE;AAEpE,OAAO,EAAE,KAAK,IAAI,YAAY,EAAmB,MAAM,iCAAiC,CAAC;AAIzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,KAAK,CAAsB,KAAoB;IAC3D,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAc,CAAC;AACjD,CAAC;AAED,2DAA2D;AAC3D,WAAiB,KAAK;IAClB,6DAA6D;IAChD,UAAI,GAAG,YAAY,CAAC,IAAI,CAAC;AAC1C,CAAC,EAHgB,KAAK,KAAL,KAAK,QAGrB"}

package/dist/src/runtime/reactive/index.d.ts

@@ -5,4 +5,5 @@
 /** Reactive JSX tag. Mirrors `src/reactive/`. */
 export { Reactive } from "./reactive.js";
 export type { ReactiveRender } from "./reactive.js";
+export { Match } from "./match.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/runtime/reactive/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/runtime/reactive/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAiD;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/runtime/reactive/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAiD;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/runtime/reactive/index.js

@@ -4,4 +4,5 @@
  */
 /** Reactive JSX tag. Mirrors `src/reactive/`. */
 export { Reactive } from "./reactive.js";
+export { Match } from "./match.js";
 //# sourceMappingURL=index.js.map

package/dist/src/runtime/reactive/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/runtime/reactive/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAiD;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/runtime/reactive/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAiD;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/runtime/reactive/match.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/** The `<Match>` hosting-slot tag (#333). */
+import type { EastType } from "@elaraai/east";
+import { type MatchInput } from "../../reactive/match.js";
+import type { UIElement } from "../runtime.js";
+/**
+ * Hosting slot over a variant — the component-level twin of `variant.match`:
+ * host-mounts only the active case and **remounts it on tag change**, so a
+ * stateful component (its own `<Reactive>` / binds) swapped at one slot is
+ * torn down and rebuilt fresh per key instead of keeping the previous case's
+ * mounted state. Same-tag payload/data churn re-renders without remounting.
+ * `cases` are keyed by the variant's case names, exhaustive, and each handler
+ * receives that case's typed payload — exactly like `variant.match`. Where
+ * the key is a nav route, use `<Route nav routes>` instead; for selecting a
+ * plain *value* by key, use `variant.match` directly.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, NullType, StringType, UIComponentType, VariantType } from "@elaraai/east";
+ * import { Match, Reactive, State, Text } from "@elaraai/east-ui";
+ *
+ * const ModeType = VariantType({ list: NullType, detail: StringType });
+ *
+ * const slot = East.function([], UIComponentType, _$ => (
+ *     <Reactive>{$ => {
+ *         const modeBind = $.let(State.bind([ModeType], "app.mode", East.value(variant("list", null), ModeType)));
+ *         const mode = $.let(modeBind.read());
+ *         return <Match on={mode} cases={{
+ *             list: (_$) => <Text>All items</Text>,
+ *             detail: (_$, id) => <Text>{East.str`Item ${id}`}</Text>,
+ *         }} />;
+ *     }}</Reactive>
+ * ));
+ * ```
+ *
+ * @remarks
+ * Desugars to `Match.Root({ on, cases })`. A generic function declaration
+ * (merged with the `Match` namespace) so it is a valid generic JSX component.
+ */
+export declare function Match<C extends {
+    [K in string]: EastType;
+}>(props: MatchInput<C>): UIElement;
+export declare namespace Match {
+    /** The underlying factory: `Match.Root({ on, cases })`. */
+    const Root: <C extends { [K in string]: EastType; }>({ on, cases }: MatchInput<C>) => import("@elaraai/east").ExprType<typeof import("../../component.js").UIComponentType>;
+}
+//# sourceMappingURL=match.d.ts.map

package/dist/src/runtime/reactive/match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../../../src/runtime/reactive/match.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,6CAA6C;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,GAAG,QAAQ;CAAE,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAE5F;AAGD,yBAAiB,KAAK,CAAC;IACnB,2DAA2D;IACpD,MAAM,IAAI,iKAAoB,CAAC;CACzC"}

package/dist/src/runtime/reactive/match.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { Match as MatchFactory } from "../../reactive/match.js";
+/**
+ * Hosting slot over a variant — the component-level twin of `variant.match`:
+ * host-mounts only the active case and **remounts it on tag change**, so a
+ * stateful component (its own `<Reactive>` / binds) swapped at one slot is
+ * torn down and rebuilt fresh per key instead of keeping the previous case's
+ * mounted state. Same-tag payload/data churn re-renders without remounting.
+ * `cases` are keyed by the variant's case names, exhaustive, and each handler
+ * receives that case's typed payload — exactly like `variant.match`. Where
+ * the key is a nav route, use `<Route nav routes>` instead; for selecting a
+ * plain *value* by key, use `variant.match` directly.
+ *
+ * @example
+ * ```tsx
+ * // .tsx file with the `@jsxImportSource @elaraai/east-ui` pragma
+ * import { East, NullType, StringType, UIComponentType, VariantType } from "@elaraai/east";
+ * import { Match, Reactive, State, Text } from "@elaraai/east-ui";
+ *
+ * const ModeType = VariantType({ list: NullType, detail: StringType });
+ *
+ * const slot = East.function([], UIComponentType, _$ => (
+ *     <Reactive>{$ => {
+ *         const modeBind = $.let(State.bind([ModeType], "app.mode", East.value(variant("list", null), ModeType)));
+ *         const mode = $.let(modeBind.read());
+ *         return <Match on={mode} cases={{
+ *             list: (_$) => <Text>All items</Text>,
+ *             detail: (_$, id) => <Text>{East.str`Item ${id}`}</Text>,
+ *         }} />;
+ *     }}</Reactive>
+ * ));
+ * ```
+ *
+ * @remarks
+ * Desugars to `Match.Root({ on, cases })`. A generic function declaration
+ * (merged with the `Match` namespace) so it is a valid generic JSX component.
+ */
+export function Match(props) {
+    return MatchFactory.Root(props);
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (Match) {
+    /** The underlying factory: `Match.Root({ on, cases })`. */
+    Match.Root = MatchFactory.Root;
+})(Match || (Match = {}));
+//# sourceMappingURL=match.js.map

package/dist/src/runtime/reactive/match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.js","sourceRoot":"","sources":["../../../../src/runtime/reactive/match.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,KAAK,IAAI,YAAY,EAAmB,MAAM,yBAAyB,CAAC;AAGjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,KAAK,CAAwC,KAAoB;IAC7E,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAc,CAAC;AACjD,CAAC;AAED,2DAA2D;AAC3D,WAAiB,KAAK;IAClB,2DAA2D;IAC9C,UAAI,GAAG,YAAY,CAAC,IAAI,CAAC;AAC1C,CAAC,EAHgB,KAAK,KAAL,KAAK,QAGrB"}

package/dist/test/navigation/index.d.ts

@@ -6,4 +6,5 @@
 export * from "./breadcrumb.examples.js";
 export * from "./nav-list.examples.js";
 export * from "./pages.examples.js";
+export * from "./route.examples.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/test/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../test/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,+EAA+E;AAE/E,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../test/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,+EAA+E;AAE/E,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/test/navigation/index.js

@@ -6,4 +6,5 @@
 export * from "./breadcrumb.examples.js";
 export * from "./nav-list.examples.js";
 export * from "./pages.examples.js";
+export * from "./route.examples.js";
 //# sourceMappingURL=index.js.map

package/dist/test/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../test/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,+EAA+E;AAE/E,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../test/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,+EAA+E;AAE/E,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/test/navigation/route.examples.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `<Route>` is `<Pages>` generalized to any slot: renders only the active
+ * route's body and remounts it on navigation, but placeable anywhere. Here a
+ * single Route slot hosts a per-route widget driven by the bound nav handle.
+ */
+export declare const routeBasic: import("@elaraai/east").ExampleDef<[], any>;
+/**
+ * The body `<Pages>` and a sidebar `<Route>` bind the **same** nav handle, so
+ * they stay in lockstep and each remounts *its own* slot on navigation — the
+ * behaviour `<Pages>` had for the page body, now available for any slot.
+ */
+export declare const routeSidebarSlot: import("@elaraai/east").ExampleDef<[], any>;
+//# sourceMappingURL=route.examples.d.ts.map

package/dist/test/navigation/route.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.examples.d.ts","sourceRoot":"","sources":["../../../test/navigation/route.examples.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,UAAU,6CAgCrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,6CA4C3B,CAAC"}

package/dist/test/navigation/route.examples.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/east-ui/jsx-runtime";
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/** @jsxImportSource @elaraai/east-ui */
+import { East, NullType, StringType, IntegerType, StructType, example } from "@elaraai/east";
+import { UIComponentType } from "@elaraai/east-ui";
+import { Navigation, Route, Pages, Reactive, VStack, HStack, Box, Text, Button } from "@elaraai/east-ui";
+/**
+ * `<Route>` is `<Pages>` generalized to any slot: renders only the active
+ * route's body and remounts it on navigation, but placeable anywhere. Here a
+ * single Route slot hosts a per-route widget driven by the bound nav handle.
+ */
+export const routeBasic = example({
+    keywords: ["Route", "Navigation", "nav", "routes", "hosting slot", "remount", "navigate", "widget"],
+    description: "A Route slot hosts a per-route widget — typed payload per route, remounts on navigation",
+    fn: East.function([], UIComponentType, (_$) => {
+        const ItemRow = StructType({ id: StringType, value: IntegerType });
+        const routes = Navigation.config({
+            overview: { value: NullType, label: "Overview" },
+            detail: { value: ItemRow, label: "Item" },
+        });
+        return (_jsx(Reactive, { children: $ => {
+                const nav = $.let(Navigation.bind(routes, "route.basic", [routes.Page.overview()]));
+                const open = $.const(East.function([], NullType, $ => {
+                    $(nav.go.detail(East.value({ id: "item-1", value: 42n }, ItemRow)));
+                }));
+                const back = $.const(East.function([], NullType, $ => { $(nav.pop()); }));
+                return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsxs(HStack, { gap: "2", children: [_jsx(Button, { onClick: open, children: "Open item-1" }), _jsx(Button, { onClick: back, children: "\u2190 Back" })] }), _jsx(Route, { nav: nav, routes: {
+                                overview: () => _jsx(Text, { children: "Overview widget" }),
+                                detail: (_$, row) => _jsx(Text, { children: East.str `Item ${row.id} — value ${East.print(row.value)}` }),
+                            } })] }));
+            } }));
+    }),
+    inputs: [],
+});
+/**
+ * The body `<Pages>` and a sidebar `<Route>` bind the **same** nav handle, so
+ * they stay in lockstep and each remounts *its own* slot on navigation — the
+ * behaviour `<Pages>` had for the page body, now available for any slot.
+ */
+export const routeSidebarSlot = example({
+    keywords: ["Route", "Pages", "Navigation", "sidebar", "slot", "lockstep", "app shell", "remount"],
+    description: "A sidebar Route slot beside the body Pages — one nav handle drives both, each remounts its own slot on navigation",
+    fn: East.function([], UIComponentType, (_$) => {
+        const DetailRow = StructType({ id: StringType, group: StringType });
+        const routes = Navigation.config({
+            overview: { value: NullType, label: "Overview" },
+            detail: { value: DetailRow, label: "Item" },
+        });
+        return (_jsx(Reactive, { children: $ => {
+                const nav = $.let(Navigation.bind(routes, "route.shell", [routes.Page.overview()]));
+                const open = $.const(East.function([], NullType, $ => {
+                    $(nav.go.detail(East.value({ id: "item-7", group: "B" }, DetailRow)));
+                }));
+                const back = $.const(East.function([], NullType, $ => { $(nav.pop()); }));
+                return (_jsxs(HStack, { gap: "4", align: "stretch", children: [_jsx(Box, { padding: "3", children: _jsx(Route, { nav: nav, routes: {
+                                    overview: () => _jsx(Text, { children: "No selection" }),
+                                    detail: (_$, row) => _jsx(Text, { children: East.str `Selected: ${row.id} · ${row.group}` }),
+                                } }) }), _jsx(Pages, { nav: nav, pages: {
+                                overview: () => (_jsxs(VStack, { gap: "2", align: "stretch", children: [_jsx(Text, { children: "Overview \u2014 item list" }), _jsx(Button, { onClick: open, children: "Open item-7" })] })),
+                                detail: (_$, row) => (_jsxs(VStack, { gap: "2", align: "stretch", children: [_jsx(Text, { children: East.str `Item ${row.id} · group ${row.group}` }), _jsx(Button, { onClick: back, children: "\u2190 Back" })] })),
+                            } })] }));
+            } }));
+    }),
+    inputs: [],
+});
+//# sourceMappingURL=route.examples.js.map