@sigx/lynx-navigation 0.4.0 → 0.4.2

package/dist/components/NavigationRoot.js

@@ -0,0 +1,67 @@
+import { component, defineProvide, useSharedValue } from '@sigx/lynx';
+import { createNavigatorState } from '../navigator/core.js';
+import { useNav } from '../hooks/use-nav.js';
+import { useNavInternals, useNavRoutes } from '../hooks/use-nav-internal.js';
+import { _setRouteRegistry } from '../url/registry.js';
+/**
+ * Root of a navigator subtree.
+ *
+ * Creates a fresh `NavigatorState` from `routes` and provides it via
+ * `defineProvide`, so descendant `<Stack>` / `<Screen>` components and any
+ * `useNav()` / `useParams()` calls resolve through this instance.
+ *
+ * The bottom-of-stack entry is built from `initialRoute` (defaults to the
+ * first key in `routes`). For routes that declare a params schema, you must
+ * pass `initialParams` matching that schema.
+ *
+ * Mirrors the install pattern of `@sigx/router` (see
+ * `packages/router/src/router.ts:519-528`), but at component scope rather than
+ * `app.use(router)` — no app-wide singleton, so multi-navigator apps and
+ * tests get isolated state for free.
+ */
+export const NavigationRoot = component(({ props, slots }) => {
+    const routes = props.routes;
+    const initialName = props.initialRoute ?? Object.keys(routes)[0];
+    if (!routes[initialName]) {
+        throw new Error(`[lynx-navigation] <NavigationRoot> initialRoute='${initialName}' is not in the routes registry.`);
+    }
+    // Publish the active route registry to the URL bridge so module-level
+    // `hrefFor` / `parseHref` callers (deep-link handlers, anything outside
+    // the component tree) resolve against this navigator's routes. Last
+    // mount wins — multi-root apps that need isolation should call the
+    // URL helpers with explicit context (TBD post-1.0).
+    _setRouteRegistry(routes);
+    const initialPresentation = routes[initialName].presentation ?? 'card';
+    const initial = {
+        key: 'root',
+        route: initialName,
+        params: props.initialParams ?? {},
+        search: props.initialSearch ?? {},
+        state: undefined,
+        presentation: initialPresentation,
+    };
+    // SharedValue driving the slide-from-right push/pop transition. Created
+    // unconditionally (hooks must be) but only forwarded into the navigator
+    // when animations are enabled — `createNavigatorState` falls back to
+    // instant swaps when `progress` is undefined.
+    const progressSv = useSharedValue(0);
+    const animationsEnabled = props.animated !== false;
+    const navState = createNavigatorState({
+        routes,
+        initial,
+        progress: animationsEnabled ? progressSv : undefined,
+    });
+    defineProvide(useNav, () => navState.nav);
+    defineProvide(useNavRoutes, () => navState.routes);
+    const edgeSwipeEnabled = props.edgeSwipeEnabled !== false;
+    defineProvide(useNavInternals, () => ({
+        progress: animationsEnabled ? progressSv : null,
+        beginBackGesture: navState._gesture.beginBackGesture,
+        commitBackGesture: navState._gesture.commitBackGesture,
+        cancelBackGesture: navState._gesture.cancelBackGesture,
+        edgeSwipeEnabled,
+        screens: navState._screens,
+    }));
+    return () => slots.default?.();
+});
+//# sourceMappingURL=NavigationRoot.js.map

package/dist/components/NavigationRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRoot.js","sourceRoot":"","sources":["../../src/components/NavigationRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAe,MAAM,YAAY,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAqBvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAsB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,WAAW,GAAW,KAAK,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACzE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CACX,oDAAoD,WAAW,kCAAkC,CACpG,CAAC;IACN,CAAC;IACD,sEAAsE;IACtE,wEAAwE;IACxE,oEAAoE;IACpE,mEAAmE;IACnE,oDAAoD;IACpD,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,mBAAmB,GAAiB,MAAM,CAAC,WAAW,CAAC,CAAC,YAAY,IAAI,MAAM,CAAC;IACrF,MAAM,OAAO,GAAe;QACxB,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,KAAK,CAAC,aAAa,IAAI,EAAE;QACjC,MAAM,EAAE,KAAK,CAAC,aAAa,IAAI,EAAE;QACjC,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,mBAAmB;KACpC,CAAC;IAEF,wEAAwE;IACxE,wEAAwE;IACxE,qEAAqE;IACrE,8CAA8C;IAC9C,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC;IACnD,MAAM,QAAQ,GAAG,oBAAoB,CAAC;QAClC,MAAM;QACN,OAAO;QACP,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;KACvD,CAAC,CAAC;IAEH,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC1C,aAAa,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,KAAK,KAAK,CAAC;IAC1D,aAAa,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QAClC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;QAC/C,gBAAgB,EAAE,QAAQ,CAAC,QAAQ,CAAC,gBAAgB;QACpD,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,iBAAiB;QACtD,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,iBAAiB;QACtD,gBAAgB;QAChB,OAAO,EAAE,QAAQ,CAAC,QAAQ;KAC7B,CAAC,CAAC,CAAC;IAEJ,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;AACnC,CAAC,CAAC,CAAC"}

package/dist/components/Screen.js

@@ -0,0 +1,98 @@
+/**
+ * `<Screen>` — declarative per-screen options + slot fills.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const ProfileScreen = component(() => () => (
+ *   <Screen title="Profile" headerShown gestureEnabled>
+ *     <Screen.HeaderRight>
+ *       <text bindtap={onEdit}>Edit</text>
+ *     </Screen.HeaderRight>
+ *     <view>body…</view>
+ *   </Screen>
+ * ));
+ * ```
+ *
+ * `<Screen>` itself renders its `default` slot inline — so the body lives
+ * where you'd expect with no extra layout wrapper. The sub-components
+ * (`Screen.Header`, `Screen.HeaderLeft`, `Screen.HeaderRight`,
+ * `Screen.TabBarItem`) render `null` and write into the entry's
+ * `ScreenRegistry`. The navigator's persistent chrome reads from there.
+ *
+ * Note: `<Screen.TabBarItem>` registers a scoped slot fill on the entry's
+ * `ScreenRegistry`, but the built-in `<TabBar>` doesn't read it yet — the
+ * fill is exposed for custom tab-bar renderers (pass `renderTab` and look
+ * up the active entry's registry yourself).
+ *
+ * Sub-component placement inside `<Screen>` is conventional — sigx scopes
+ * are by component tree, so they work anywhere under the same EntryScope.
+ * Placing them as direct children of `<Screen>` keeps the call site
+ * declarative and grep-friendly.
+ */
+import { component, onUnmounted } from '@sigx/lynx';
+import { useScreenRegistry } from '../hooks/use-nav-internal.js';
+import { mergeOptions, setSlot } from '../internal/screen-registry.js';
+const ScreenRoot = component(({ props, slots }) => {
+    const registry = useScreenRegistry();
+    // Apply options whenever the component sets up. Only set keys that
+    // were actually passed — `mergeOptions` treats `undefined` as "clear
+    // this key", so building the patch from raw `props.X` would wipe
+    // every option a previous `useScreenOptions(...)` (or another `<Screen>`)
+    // had set on this same entry.
+    const patch = {};
+    if (props.title !== undefined)
+        patch.title = props.title;
+    if (props.headerShown !== undefined)
+        patch.headerShown = props.headerShown;
+    if (props.gestureEnabled !== undefined)
+        patch.gestureEnabled = props.gestureEnabled;
+    mergeOptions(registry, patch);
+    return () => slots.default?.();
+});
+/**
+ * Build a sub-component that registers its `default` slot under `name` on
+ * the current screen's registry. Unmount removes the fill so navigating
+ * away from a screen with a `<Screen.HeaderRight>` clears that action.
+ */
+function makeSlotFiller(name) {
+    return component(({ slots }) => {
+        const registry = useScreenRegistry();
+        setSlot(registry, name, () => slots.default?.());
+        onUnmounted(() => setSlot(registry, name, undefined));
+        return () => null;
+    });
+}
+const Header = makeSlotFiller('header');
+const HeaderLeft = makeSlotFiller('headerLeft');
+const HeaderRight = makeSlotFiller('headerRight');
+const TabBarItem = component(({ slots }) => {
+    const registry = useScreenRegistry();
+    setSlot(registry, 'tabBarItem', (ctx) => {
+        const out = slots.default?.();
+        // Children may be a render function `({active}) => JSX` or plain
+        // JSX (in which case `active` is ignored). Normalise to a value.
+        if (typeof out === 'function')
+            return out(ctx);
+        if (Array.isArray(out)) {
+            const first = out[0];
+            if (typeof first === 'function')
+                return first(ctx);
+        }
+        return out;
+    });
+    onUnmounted(() => setSlot(registry, 'tabBarItem', undefined));
+    return () => null;
+});
+/**
+ * Compound export. `Screen` is callable as a JSX element and exposes the
+ * sub-components as properties (`Screen.Header`, etc.) for the declarative
+ * call site shown in the file header.
+ */
+export const Screen = Object.assign(ScreenRoot, {
+    Header,
+    HeaderLeft,
+    HeaderRight,
+    TabBarItem,
+});
+//# sourceMappingURL=Screen.js.map

package/dist/components/Screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../src/components/Screen.tsx"],"names":[],"mappings":"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"}

package/dist/components/Stack.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component, defineProvide, effect, onUnmounted, untrack, useSharedValue, } from '@sigx/lynx';
+import { createNavigatorState } from '../navigator/core.js';
+import { useNav } from '../hooks/use-nav.js';
+import { useCurrentEntry, useNavInternals, useNavRoutes, } from '../hooks/use-nav-internal.js';
+import { animationVariant, computeLayers, isOverlayPresentation } from '../internal/layer-plan.js';
+import { EdgeBackHandle } from './EdgeBackHandle.js';
+import { Layer } from './Layer.js';
+import { useTabScreenName, useTabs } from './Tabs.js';
+let _nestedKeyCounter = 0;
+/**
+ * Stack navigator — renders the topmost stack entry's component at rest, or
+ * the top + underneath entries during a transition.
+ *
+ * Two modes:
+ *
+ * **Bound** (no `initialRoute`): renders the enclosing navigator's stack.
+ * This is the shape used directly under `<NavigationRoot>` and is what
+ * single-stack apps want.
+ *
+ * **Nested-owner** (`initialRoute="…"`): mints a fresh `NavigatorState` with
+ * its own progress `SharedValue` and edge-back gesture, and provides
+ * `useNav` / `useNavInternals` / `useNavRoutes` to its subtree. `useNav()`
+ * inside this stack returns the nested nav; `nav.parent` points to the
+ * enclosing one. Per-tab stacks are the canonical use case:
+ *
+ * ```tsx
+ * <Tabs initialTab="trips">
+ *   <Tabs.Screen name="trips"><Stack initialRoute="tripsHome" /></Tabs.Screen>
+ *   <Tabs.Screen name="map"><Stack initialRoute="mapHome" /></Tabs.Screen>
+ * </Tabs>
+ * ```
+ *
+ * Modal/fullScreen pushes escalate up the parent chain automatically — so
+ * `nav.push('newTrip')` from inside Trips (where `newTrip` is `modal`)
+ * walks to root and overlays the whole UI. `replace` stays strictly local
+ * (asymmetric with `push`) so a modal `replace` never wipes the root stack.
+ *
+ * **Render strategy.** Stack always emits the same JSX shape — a
+ * relative wrapper containing one `<Layer>` per entry returned by
+ * `computeLayers(stack, transition, progress)`. Each Layer is an
+ * absolutely-positioned host view with optional MT-bound translate
+ * animation. The pure layer-plan function decides:
+ *
+ *  - **Idle.** Topmost non-overlay base + any overlays above it. All
+ *    static (no transform). Overlays (`modal` / `fullScreen` /
+ *    `transparent-modal`) keep their underneath mounted; cards
+ *    replace their underneath in the base layer.
+ *  - **Card transition.** Both top and underneath animate (slide-in
+ *    + parallax). After settle, idle rules apply — the underneath
+ *    unmounts because the new top is the sole base.
+ *  - **Overlay transition.** The full idle layer stack up through
+ *    the underneath stays static; only the animated top has a
+ *    transform. After settle, the overlay either joins the static
+ *    idle stack (push) or unmounts (pop).
+ *
+ * Layer keys are `layer-${entry.key}-${animationVariant}`. The variant
+ * suffix forces a remount when an entry transitions from animated to
+ * static (or vice versa) — `useAnimatedStyle` binds once at setup and
+ * can't switch its mapper at runtime. Modal underneath layers never
+ * animate, so their key is stable across the modal lifecycle and the
+ * subtree's state (per-tab Stack navigators, scroll positions,
+ * in-flight inputs) survives.
+ */
+export const Stack = component(({ props, slots }) => {
+    // Capture enclosing scope's nav + routes + internals BEFORE any of the
+    // defineProvide calls below override them for descendants. These are
+    // always the "outer" values regardless of whether this Stack is bound
+    // or nested-owner.
+    const parentNav = useNav();
+    const routes = useNavRoutes();
+    const parentInternals = useNavInternals();
+    // Decide mode at setup. `props.initialRoute` is captured once — the
+    // alternative (reactive switch between bound and nested-owner) would
+    // need to dispose and recreate the inner nav, which would lose all
+    // pushed state. Reasonable to pin it.
+    const initialName = props.initialRoute;
+    const isNested = typeof initialName === 'string' && initialName.length > 0;
+    let nav;
+    let internals;
+    if (isNested) {
+        if (!routes[initialName]) {
+            throw new Error(`[lynx-navigation] <Stack initialRoute='${initialName}'>: ` +
+                `route is not registered. Known routes: ` +
+                `${Object.keys(routes).join(', ') || '(none)'}`);
+        }
+        // Host entry — the parent's current top *when this Stack mounts*.
+        // Used by the focus chain so the nested nav is only "locally
+        // focused" while its host entry is still the top of the parent.
+        // Wrapped in try/catch because `<Stack initialRoute>` *may* be
+        // placed outside an EntryScope (e.g. directly under
+        // `<NavigationRoot>`); in that case there's no host-entry gate to
+        // apply and we just rely on `parent.isLocallyFocused`.
+        let hostEntryKey = null;
+        try {
+            hostEntryKey = useCurrentEntry().key;
+        }
+        catch {
+            hostEntryKey = null;
+        }
+        // Enclosing tab name (if any). Lets the focus chain gate on tab
+        // active state — Trips' inner stack reports `isLocallyFocused: false`
+        // while the user is on the Map tab, even though it's the top of
+        // its own stack.
+        let tabName = null;
+        let tabsHandle = null;
+        try {
+            tabName = useTabScreenName();
+            tabsHandle = useTabs();
+        }
+        catch {
+            tabName = null;
+            tabsHandle = null;
+        }
+        // Inherit animation enablement from the parent — if the root was
+        // created with `animated={false}` (tests), nested stacks should
+        // also commit instantly so test assertions don't have to wait on
+        // a SharedValue that won't tick.
+        const animationsEnabled = parentInternals.progress !== null;
+        const progressSv = useSharedValue(0);
+        const presentation = (routes[initialName].presentation ?? 'card');
+        // Counter-derived suffix keeps base-entry keys unique across
+        // concurrent nested stacks in a tab app. Plain `Math.random` would
+        // do but a counter is deterministic for test snapshots.
+        _nestedKeyCounter += 1;
+        const initial = {
+            key: `nested-${initialName}-${_nestedKeyCounter}`,
+            route: initialName,
+            params: props.initialParams ?? {},
+            search: props.initialSearch ?? {},
+            state: undefined,
+            presentation,
+        };
+        const navState = createNavigatorState({
+            routes,
+            initial,
+            progress: animationsEnabled ? progressSv : undefined,
+            parent: parentNav,
+            // Start un-focused; the effect below flips this once we observe
+            // the parent's current entry / tab-active state.
+            initialLocallyFocused: false,
+        });
+        nav = navState.nav;
+        internals = {
+            progress: animationsEnabled ? progressSv : null,
+            beginBackGesture: navState._gesture.beginBackGesture,
+            commitBackGesture: navState._gesture.commitBackGesture,
+            cancelBackGesture: navState._gesture.cancelBackGesture,
+            edgeSwipeEnabled: 
+            // Gate on animationsEnabled too — if there's no progress
+            // SharedValue (e.g. parent is `animated={false}`), the edge
+            // swipe gesture would call `beginBackGesture()` with a null
+            // progress and leave the stack in an inconsistent state.
+            animationsEnabled && parentInternals.edgeSwipeEnabled,
+            screens: navState._screens,
+        };
+        // Reactive focus chain: this nav is locally focused iff
+        //   1. (no host entry captured) OR parent.current.key === hostEntryKey
+        //   2. parent.isLocallyFocused
+        //   3. (no enclosing tab) OR tabs.active === tabName
+        // Effect re-runs on any of those changing — parent's stack
+        // mutating, parent's own focus flipping, or the tab switching.
+        const focusRunner = effect(() => {
+            const hostMatch = hostEntryKey === null || parentNav.current.key === hostEntryKey;
+            const parentFocused = parentNav.isLocallyFocused;
+            const tabActive = tabName === null || tabsHandle === null
+                ? true
+                : tabsHandle.active === tabName;
+            const focused = hostMatch && parentFocused && tabActive;
+            // Write outside the read-tracking window — `_setLocallyFocused`
+            // bumps a signal that no consumer in *this* setup reads, but
+            // it's good hygiene anyway.
+            untrack(() => navState._setLocallyFocused(focused));
+        });
+        onUnmounted(() => {
+            focusRunner.stop();
+            parentNav._children.delete(nav);
+        });
+        defineProvide(useNav, () => nav);
+        defineProvide(useNavRoutes, () => routes);
+        defineProvide(useNavInternals, () => internals);
+    }
+    else {
+        nav = parentNav;
+        internals = parentInternals;
+    }
+    // Per-stack chrome (slots.default) renders *inside* this Stack's
+    // nav scope so a `<Header />` placed there resolves `useNav()` to
+    // the per-stack nav. Wrapping the active body in a flex-column
+    // with the slot above does that without disturbing layer-fill
+    // semantics — the slot takes natural height, the body keeps
+    // flex-fill.
+    const flexColumnFill = {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+    };
+    return () => {
+        const chrome = slots.default?.();
+        const layers = computeLayers(nav.stack, nav.transition, internals.progress);
+        const renderLayerNode = (layer) => layer ? (_jsx(Layer, { entry: layer.entry, routes: routes, animation: layer.animation }, `layer-${layer.entry.key}-${animationVariant(layer.animation)}`)) : null;
+        // sigx's reconciler treats a single array-valued JSX child as
+        // one "slot": when the array's *length* changes between
+        // renders, keyed children inside can be remounted even if
+        // their keys are stable. To make stacked-overlay state
+        // preservation work (modal A still mounted after modal B
+        // pushes on top), each layer is emitted as its own separate
+        // JSX child slot rather than as an array. The slots are
+        // position-stable across renders — the only thing that
+        // changes is a slot turning from `null` to a Layer (mount) or
+        // vice versa (unmount). MAX_LAYERS caps the supported stack
+        // depth; in practice apps rarely stack more than 2-3 overlays.
+        // If you hit the cap, increase the constant — the unrolled
+        // shape is just verbose, not algorithmically limited.
+        // Edge-swipe handle on top, gated on:
+        //  - `internals.edgeSwipeEnabled` — opt-out flag (also off
+        //    when the navigator has no progress SharedValue, i.e.
+        //    animations disabled — no in-flight gesture to animate).
+        //  - `nav.canGoBack` — something to pop back to.
+        //  - `!nav.transition` — no animation already running.
+        //  - The current top is a card (not an overlay). Edge-swipe
+        //    is the iOS-style horizontal pop gesture for card stacks;
+        //    using it to dismiss a modal would be the wrong axis +
+        //    the wrong dismissal semantic.
+        //
+        // The handle only intercepts touches in the leftmost 20px and
+        // ignores small drags, so placing it last (highest z) doesn't
+        // disturb screen touches.
+        const top = nav.current;
+        const edgeHandle = (internals.edgeSwipeEnabled
+            && nav.canGoBack
+            && !nav.transition
+            && !isOverlayPresentation(top.presentation))
+            ? _jsx(EdgeBackHandle, {}, "edge-back")
+            : null;
+        const body = (_jsxs("view", { style: {
+                position: 'relative',
+                width: '100%',
+                // Flex-fill so the layer container has a real
+                // height — `<Layer>`s anchor via `position:
+                // absolute; top/right/bottom/left: 0`, which
+                // needs a sized relative parent.
+                ...flexColumnFill,
+                // Clip any animated layer that translates off-
+                // screen so the slide doesn't bleed past the
+                // Stack's bounds.
+                overflow: 'hidden',
+            }, children: [renderLayerNode(layers[0]), renderLayerNode(layers[1]), renderLayerNode(layers[2]), renderLayerNode(layers[3]), renderLayerNode(layers[4]), renderLayerNode(layers[5]), renderLayerNode(layers[6]), renderLayerNode(layers[7]), renderLayerNode(layers[8]), renderLayerNode(layers[9]), renderLayerNode(layers[10]), renderLayerNode(layers[11]), renderLayerNode(layers[12]), renderLayerNode(layers[13]), renderLayerNode(layers[14]), renderLayerNode(layers[15]), edgeHandle] }));
+        if (chrome == null)
+            return body;
+        return (_jsxs("view", { style: flexColumnFill, children: [chrome, _jsx("view", { style: flexColumnFill, children: body })] }));
+    };
+});
+//# sourceMappingURL=Stack.js.map

package/dist/components/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabBar.d.ts

@@ -25,7 +25,7 @@
  *     one so VoiceOver/TalkBack announces focus state on tab switch.
  */
 import { type JSXElement } from '@sigx/lynx';
-import { type TabInfo } from './Tabs';
+import { type TabInfo } from './Tabs.js';
 /** Rendering context passed to a `renderTab` consumer. */
 export interface TabRenderContext {
     /** True when this tab is currently active. Reactive — re-runs render on change. */

package/dist/components/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/components/TabBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAGH,KAAK,UAAU,EAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE/C,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC7B,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAAC;CACnB;AAoCD,eAAO,MAAM,MAAM;wBAjCmB,OAAO,OAAO,gBAAgB,KAAK,UAAU;YA6DjF,CAAC"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/components/TabBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAGH,KAAK,UAAU,EAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAElD,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC7B,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAAC;CACnB;AAoCD,eAAO,MAAM,MAAM;wBAjCmB,OAAO,OAAO,gBAAgB,KAAK,UAAU;YA6DjF,CAAC"}

package/dist/components/TabBar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<TabBar>` — headless default chrome for `<Tabs>`.
+ *
+ * Renders the active-tab buttons reading from the enclosing `useTabs()`
+ * navigator. Intentionally **unstyled** — this lives in the (theme-less)
+ * navigation package, so it ships pure structure + accessibility wiring.
+ * Themed chrome belongs in a UI-kit package: see `<NavTabBar />` in
+ * `@sigx/lynx-daisyui` for the daisy-themed equivalent.
+ *
+ * Use this directly only if you want to handle styling yourself via the
+ * `renderTab` prop. For a "looks like a tab bar out of the box" component,
+ * pull `<NavTabBar />` from `@sigx/lynx-daisyui` (or your own UI kit).
+ *
+ * Customization:
+ *   - `renderTab`: a function `(info, ctx) => JSX` that fully replaces the
+ *     default button rendering for each tab. `ctx.active` tells the
+ *     consumer whether this tab is currently focused; `ctx.onPress`
+ *     activates the tab. **Recommended** for any visual treatment.
+ *
+ * Accessibility (baked into the default button — the one structural
+ * concern this component keeps):
+ *   - `accessibility-label` from `info.accessibilityLabel ?? info.label ?? info.name`.
+ *   - `accessibility-element="true"` so screen readers see the whole pill.
+ *   - `accessibility-trait="button"` and a `selected` flag on the active
+ *     one so VoiceOver/TalkBack announces focus state on tab switch.
+ */
+import { component, } from '@sigx/lynx';
+import { useTabs } from './Tabs.js';
+/**
+ * Default per-tab button. Plain `<view>` with a `<text>` inside, an
+ * `accessibility-*` cluster for screen readers, and a tap handler. No
+ * styling beyond a minimal active-state opacity hint — consumers that
+ * want branded chrome pass `renderTab` or use a UI-kit-provided tab bar
+ * (e.g. `<NavTabBar />` from `@sigx/lynx-daisyui`).
+ */
+const DefaultTabButton = component(({ props }) => {
+    return () => {
+        const label = props.info.label ?? props.info.name;
+        const a11y = props.info.accessibilityLabel ?? label;
+        return (_jsxs("view", { bindtap: () => props.onPress(), "accessibility-element": true, "accessibility-label": a11y, "accessibility-trait": "button", "accessibility-status": props.active ? 'selected' : undefined, style: { opacity: props.active ? 1 : 0.6 }, children: [props.info.icon ?? null, _jsx("text", { children: label })] }));
+    };
+});
+export const TabBar = component(({ props }) => {
+    const nav = useTabs();
+    return () => {
+        // Reading `nav.tabs` and `nav.active` here ties this render to both
+        // the registration list and the active signal — switching active or
+        // adding/removing a `<Tabs.Screen>` updates the bar reactively.
+        const tabs = nav.tabs;
+        const active = nav.active;
+        const renderer = props.renderTab;
+        return (_jsx("view", { "accessibility-element": false, children: tabs.map((info) => {
+                const isActive = info.name === active;
+                const onPress = () => nav.setActive(info.name);
+                if (renderer) {
+                    return renderer(info, { active: isActive, onPress });
+                }
+                return (_jsx(DefaultTabButton, { info: info, active: isActive, onPress: onPress }));
+            }) }));
+    };
+});
+//# sourceMappingURL=TabBar.js.map

package/dist/components/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../src/components/TabBar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EACH,SAAS,GAGZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAalD;;;;;;GAMG;AACH,MAAM,gBAAgB,GAAG,SAAS,CAIhC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACZ,OAAO,GAAG,EAAE;QACR,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAClD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,IAAI,KAAK,CAAC;QACpD,OAAO,CACH,gBACI,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,2BACP,IAAI,yBACN,IAAI,yBACL,QAAQ,0BACN,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC3D,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,aAEzC,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,EACxB,yBAAO,KAAK,GAAQ,IACjB,CACV,CAAC;IACN,CAAC,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAc,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;IACtB,OAAO,GAAG,EAAE;QACR,oEAAoE;QACpE,oEAAoE;QACpE,gEAAgE;QAChE,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;QACtB,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;QAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;QACjC,OAAO,CACH,wCAA6B,KAAK,YAC7B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;gBACtC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,IAAI,QAAQ,EAAE,CAAC;oBACX,OAAO,QAAQ,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;gBACzD,CAAC;gBACD,OAAO,CACH,KAAC,gBAAgB,IACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,OAAO,GAClB,CACL,CAAC;YACN,CAAC,CAAC,GACC,CACV,CAAC;IACN,CAAC,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/components/Tabs.d.ts

@@ -32,12 +32,17 @@
  * tabs UI (TabBar included) and dismiss back into the originating tab.
  */
 import { type Define, type JSXElement } from '@sigx/lynx';
+import type { IconSpec } from '@sigx/lynx-icons';
 /** Metadata about a registered `<Tabs.Screen>`. */
 export interface TabInfo {
     /** Stable tab id, used by `setActive`. */
     readonly name: string;
-    /** Optional icon node — passed through to the default tab bar. */
-    readonly icon?: JSXElement;
+    /**
+     * Optional icon. Either an `IconSpec` (the bar renders an `<Icon>` and
+     * controls color/size via theme) or a precomputed JSX node (full
+     * control — color, size, custom component).
+     */
+    readonly icon?: IconSpec | JSXElement;
     /** Optional human-readable label. Defaults to `name`. */
     readonly label?: string;
     /**
@@ -69,7 +74,7 @@ export declare const useTabs: import("@sigx/runtime-core").InjectableFunction<Ta
  */
 export declare const useTabScreenName: import("@sigx/runtime-core").InjectableFunction<string>;
 type TabsProps = Define.Prop<'initialTab', string> & Define.Slot<'default'>;
-type TabsScreenProps = Define.Prop<'name', string, true> & Define.Prop<'icon', JSXElement> & Define.Prop<'label', string> & Define.Prop<'accessibilityLabel', string> & Define.Slot<'default'>;
+type TabsScreenProps = Define.Prop<'name', string, true> & Define.Prop<'icon', IconSpec | JSXElement> & Define.Prop<'label', string> & Define.Prop<'accessibilityLabel', string> & Define.Slot<'default'>;
 /**
  * Compound export. `Tabs` is the parent component; `Tabs.Screen` registers
  * an individual tab. Matches the `Screen` / `Screen.Header` shape used

package/dist/components/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAQH,KAAK,MAAM,EACX,KAAK,UAAU,EAElB,MAAM,YAAY,CAAC;AAEpB,mDAAmD;AACnD,MAAM,WAAW,OAAO;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACxC;AAED,kDAAkD;AAClD,MAAM,WAAW,OAAO;IACpB,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,wEAAwE;IACxE,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,0DAIlB,CAAC;AAsBH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,yDAI3B,CAAC;AAEH,KAAK,SAAS,GACR,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GACjC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAgE7B,KAAK,eAAe,GACd,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GACjC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,GAC/B,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,GAC5B,MAAM,CAAC,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GACzC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAsD7B;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEf,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAQH,KAAK,MAAM,EACX,KAAK,UAAU,EAElB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,mDAAmD;AACnD,MAAM,WAAW,OAAO;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,yDAAyD;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACxC;AAED,kDAAkD;AAClD,MAAM,WAAW,OAAO;IACpB,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,wEAAwE;IACxE,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,0DAIlB,CAAC;AAsBH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,yDAI3B,CAAC;AAEH,KAAK,SAAS,GACR,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GACjC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAgE7B,KAAK,eAAe,GACd,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GACjC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC,GAC1C,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,GAC5B,MAAM,CAAC,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GACzC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAsD7B;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEf,CAAC"}