@sigx/lynx-navigation 0.1.0 → 0.1.2

package/dist/components/Stack.js

@@ -1,39 +1,75 @@
-import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
 import { component } from '@sigx/lynx';
+import { Suspense, isLazyComponent } from '@sigx/lynx';
 import { useNav } from '../hooks/use-nav.js';
-import { useNavRoutes } from '../hooks/use-nav-internal.js';
+import { useNavInternals, useNavRoutes } from '../hooks/use-nav-internal.js';
+import { ScreenContainer } from './ScreenContainer.js';
+import { EdgeBackHandle } from './EdgeBackHandle.js';
+import { EntryScope } from './EntryScope.js';
 /**
- * Stack navigator — renders the topmost stack entry's component.
+ * Stack navigator — renders the topmost stack entry's component at rest, or
+ * the top + underneath entries during a transition.
  *
- * v0.1 minimal slice: renders only the top entry, with no transition and no
- * preserved-mount lower entries. Phase 0.2 extends this to mount the
- * top-N entries (so back-swipe can show the underlying screen) and runs MTS
- * transition drivers between them.
+ * **Idle**: just the top entry, full-bleed, no transform. The screen
+ * component mounts directly so it can use its own layout (no extra absolute
+ * positioning that would break percentage heights).
  *
- * `key={top.key}` forces unmount/remount when the active entry changes — same
- * pattern `@sigx/router`'s `<RouterView>` uses to prevent lazy components
- * from stacking (`packages/router/src/RouterView.tsx:97-98`).
+ * **Transitioning**: two `<ScreenContainer>` instances stacked absolutely,
+ * each with an MT-driven `translateX` that reads from the navigator's
+ * progress `SharedValue`. The host's BG thread doesn't tick per frame —
+ * `useAnimatedStyle` runs the interpolation entirely on MT.
+ *
+ * `key={top.key}` keeps the idle render's component instance stable across
+ * unrelated re-renders. During transitions, composite keys
+ * (`${entry.key}-${role}-${kind}`) ensure a fresh mount per role/kind pair so
+ * the `useAnimatedStyle` binding is set with the right input/output ranges.
  */
 export const Stack = component(() => {
     const nav = useNav();
     const routes = useNavRoutes();
+    const internals = useNavInternals();
     return () => {
+        const transition = nav.transition;
         const top = nav.current;
-        const route = routes[top.route];
-        if (!route) {
-            // Defensive: navigator state should never reference an unregistered
-            // route, but if it does we surface nothing rather than crash.
-            return null;
+        if (!transition) {
+            const route = routes[top.route];
+            if (!route)
+                return null;
+            const Comp = route.component;
+            if (typeof Comp !== 'function')
+                return null;
+            const params = top.params;
+            // Wrap lazy routes that declare a `fallback` in <Suspense> so the
+            // chunk-load shows the user-provided spinner instead of throwing
+            // up to the nearest outer boundary (which may be wrong layer or
+            // missing entirely).
+            const body = isLazyComponent(Comp) && route.fallback
+                ? (_jsx(Suspense, { fallback: route.fallback, children: _jsx(Comp, { ...params }) }))
+                : _jsx(Comp, { ...params });
+            // When canGoBack and edge-swipe is enabled, overlay the gesture
+            // handle so the user can pan from the left edge to start a back
+            // transition. `position: absolute` doesn't disturb the screen's
+            // own layout — the handle only intercepts touches in the leftmost
+            // 20px, and only when they pan rightward past `MIN_DISTANCE`.
+            if (nav.canGoBack && internals.edgeSwipeEnabled) {
+                return (_jsxs("view", { style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: '100%',
+                    }, children: [_jsx(EntryScope, { entry: top, children: body }, top.key), _jsx(EdgeBackHandle, {}, "edge-back")] }));
+            }
+            return (_jsx(EntryScope, { entry: top, children: body }, top.key));
         }
-        const Comp = route.component;
-        if (typeof Comp !== 'function')
-            return null;
-        // Phase 0.1 only handles eager component factories. Lazy
-        // imports — `() => import(...)` — need a `lazy()` wrapper from sigx;
-        // we'll integrate that in the showcase-migration slice.
-        const ComponentFactoryRef = Comp;
-        const params = top.params;
-        return _jsx(ComponentFactoryRef, { ...params }, top.key);
+        // Cast progress: TransitionState carries it as `unknown` to avoid
+        // pinning the contract to `@sigx/lynx`'s SharedValue at the type
+        // level; here at the runtime boundary we know it's a SharedValue<number>.
+        const progress = transition.progress;
+        return (_jsxs("view", { style: {
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden',
+            }, children: [_jsx(ScreenContainer, { entry: transition.underneathEntry, routes: routes, role: "underneath", kind: transition.kind, progress: progress }, `${transition.underneathEntry.key}-underneath-${transition.kind}`), _jsx(ScreenContainer, { entry: transition.topEntry, routes: routes, role: "top", kind: transition.kind, progress: progress }, `${transition.topEntry.key}-top-${transition.kind}`)] }));
     };
 });
 //# sourceMappingURL=Stack.js.map

package/dist/components/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,EAAE;IAChC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,MAAM,GAAG,YAAY,EAAE,CAAC;IAE9B,OAAO,GAAG,EAAE;QACR,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;QACxB,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,oEAAoE;YACpE,8DAA8D;YAC9D,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;QAC7B,IAAI,OAAO,IAAI,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC;QAC5C,yDAAyD;QACzD,qEAAqE;QACrE,wDAAwD;QACxD,MAAM,mBAAmB,GAAG,IAI3B,CAAC;QACF,MAAM,MAAM,GAAG,GAAG,CAAC,MAAiC,CAAC;QACrD,OAAO,KAAC,mBAAmB,OAAmB,MAAM,IAAnB,GAAG,CAAC,GAAG,CAAgB,CAAC;IAC7D,CAAC,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabBar.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<TabBar>` — default chrome for `<Tabs>`.
+ *
+ * Renders a row of tab buttons reading from the enclosing `useTabs()`
+ * navigator. Active tab is highlighted via the `active` prop on each
+ * default button (consumers can re-style via `renderTab`).
+ *
+ * Customization knobs:
+ *   - `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.
+ *
+ * Accessibility:
+ *   - Each default button gets `accessibility-label` from
+ *     `info.accessibilityLabel ?? info.label ?? info.name`.
+ *   - Each default button gets `accessibility-element="true"` so screen
+ *     readers see the whole pill, not just the inner `<text>`.
+ *   - Each default button gets `accessibility-trait="button"` and a
+ *     `selected` flag on the active one so VoiceOver/TalkBack announces
+ *     focus state on tab switch.
+ *
+ * Placement: mount inside `<Tabs>` alongside the `<Tabs.Screen>`s. Order
+ * matters visually (place above or below the screen bodies depending on
+ * the layout), and `<Tabs.Screen>` bodies all stack with `display:flex` so
+ * the TabBar should be at a deterministic position in the JSX.
+ */
+import { type JSXElement } from '@sigx/lynx';
+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. */
+    readonly active: boolean;
+    /** Activates this tab. Use as a `bindtap` handler on the rendered node. */
+    onPress(): void;
+}
+export declare const TabBar: import("@sigx/runtime-core").ComponentFactory<{
+    renderTab?: ((info: TabInfo, ctx: TabRenderContext) => JSXElement) | undefined;
+}, void, {}>;
+//# sourceMappingURL=TabBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/components/TabBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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;AAmCD,eAAO,MAAM,MAAM;wBAhCmB,OAAO,OAAO,gBAAgB,KAAK,UAAU;YA4DjF,CAAC"}

package/dist/components/TabBar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<TabBar>` — default chrome for `<Tabs>`.
+ *
+ * Renders a row of tab buttons reading from the enclosing `useTabs()`
+ * navigator. Active tab is highlighted via the `active` prop on each
+ * default button (consumers can re-style via `renderTab`).
+ *
+ * Customization knobs:
+ *   - `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.
+ *
+ * Accessibility:
+ *   - Each default button gets `accessibility-label` from
+ *     `info.accessibilityLabel ?? info.label ?? info.name`.
+ *   - Each default button gets `accessibility-element="true"` so screen
+ *     readers see the whole pill, not just the inner `<text>`.
+ *   - Each default button gets `accessibility-trait="button"` and a
+ *     `selected` flag on the active one so VoiceOver/TalkBack announces
+ *     focus state on tab switch.
+ *
+ * Placement: mount inside `<Tabs>` alongside the `<Tabs.Screen>`s. Order
+ * matters visually (place above or below the screen bodies depending on
+ * the layout), and `<Tabs.Screen>` bodies all stack with `display:flex` so
+ * the TabBar should be at a deterministic position in the JSX.
+ */
+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 marker — consumers that want
+ * branded chrome pass `renderTab`.
+ */
+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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EACH,SAAS,GAGZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAalD;;;;;GAKG;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

@@ -0,0 +1,101 @@
+/**
+ * `<Tabs>` — Lynx tab navigator.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <Tabs initialTab="feed">
+ *     <Tabs.Screen name="feed" icon={<FeedIcon />} label="Feed">
+ *       <FeedView />
+ *     </Tabs.Screen>
+ *     <Tabs.Screen name="me" icon={<MeIcon />} label="Profile">
+ *       <ProfileView />
+ *     </Tabs.Screen>
+ *   </Tabs>
+ * </NavigationRoot>
+ * ```
+ *
+ * Scope of this slice (v0.1): pure UI primitive. Each tab's body stays
+ * mounted for state preservation (the inactive ones render with
+ * `display: 'none'`). Active tab is reactive via `useTabs()`.
+ *
+ * Out of scope (deferred to a nested-navigators slice):
+ *   - Per-tab `<Stack>` with its own navigator state machine
+ *   - `nav.parent` chain into the Tabs nav
+ *   - Named navigators (`useNav('root')`)
+ *
+ * Those build on multi-navigator-state plumbing that isn't ready yet.
+ * For now, the inner content of a `<Tabs.Screen>` shares the same nav as
+ * its outer `<NavigationRoot>` — usable for shallow tab apps, but full
+ * nested routing comes later.
+ */
+import { type Define, type JSXElement } from '@sigx/lynx';
+/** 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 human-readable label. Defaults to `name`. */
+    readonly label?: string;
+    /**
+     * Accessibility label announced by screen readers. Falls back to
+     * `label`, then `name`. Surfaced as `accessibility-label` on the
+     * default `<TabBar>` button.
+     */
+    readonly accessibilityLabel?: string;
+}
+/** Reactive controller exposed by `useTabs()`. */
+export interface TabsNav {
+    /** Currently-active tab name. Reactive — accessing inside render/effect tracks. */
+    readonly active: string;
+    /** Switch the active tab. Triggers reactive updates in any consumer. */
+    setActive(name: string): void;
+    /** Snapshot of registered tabs in registration order. Reactive. */
+    readonly tabs: ReadonlyArray<TabInfo>;
+}
+/**
+ * Access the enclosing Tabs navigator. Throws when called outside `<Tabs>`.
+ */
+export declare const useTabs: import("@sigx/runtime-core").InjectableFunction<TabsNav>;
+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'>;
+/**
+ * Compound export. `Tabs` is the parent component; `Tabs.Screen` registers
+ * an individual tab. Matches the `Screen` / `Screen.Header` shape used
+ * elsewhere in this package and the daisyui `Modal` / `Modal.Header`
+ * convention.
+ */
+export declare const Tabs: ((props: {
+    initialTab?: string | undefined;
+} & {} & {
+    slots?: Partial<{
+        default: () => JSXElement | JSXElement[] | null;
+    }> | undefined;
+} & {} & JSX.IntrinsicAttributes & import("@sigx/runtime-core").ComponentAttributeExtensions & {
+    ref?: import("@sigx/runtime-core").Ref<void> | undefined;
+    children?: any;
+}) => JSXElement) & {
+    __setup: import("@sigx/runtime-core").SetupFn<{
+        initialTab?: string | undefined;
+    }, TabsProps, void, {
+        default: () => JSXElement | JSXElement[] | null;
+    }>;
+    __name?: string;
+    __islandId?: string;
+    __props: {
+        initialTab?: string | undefined;
+    };
+    __events: TabsProps;
+    __ref: void;
+    __slots: {
+        default: () => JSXElement | JSXElement[] | null;
+    };
+} & {
+    Screen: import("@sigx/runtime-core").ComponentFactory<TabsScreenProps, void, {
+        default: () => JSXElement | JSXElement[] | null;
+    }>;
+};
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;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,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;AAoC7B;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEf,CAAC"}

package/dist/components/Tabs.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<Tabs>` — Lynx tab navigator.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <Tabs initialTab="feed">
+ *     <Tabs.Screen name="feed" icon={<FeedIcon />} label="Feed">
+ *       <FeedView />
+ *     </Tabs.Screen>
+ *     <Tabs.Screen name="me" icon={<MeIcon />} label="Profile">
+ *       <ProfileView />
+ *     </Tabs.Screen>
+ *   </Tabs>
+ * </NavigationRoot>
+ * ```
+ *
+ * Scope of this slice (v0.1): pure UI primitive. Each tab's body stays
+ * mounted for state preservation (the inactive ones render with
+ * `display: 'none'`). Active tab is reactive via `useTabs()`.
+ *
+ * Out of scope (deferred to a nested-navigators slice):
+ *   - Per-tab `<Stack>` with its own navigator state machine
+ *   - `nav.parent` chain into the Tabs nav
+ *   - Named navigators (`useNav('root')`)
+ *
+ * Those build on multi-navigator-state plumbing that isn't ready yet.
+ * For now, the inner content of a `<Tabs.Screen>` shares the same nav as
+ * its outer `<NavigationRoot>` — usable for shallow tab apps, but full
+ * nested routing comes later.
+ */
+import { component, compound, defineInjectable, defineProvide, onUnmounted, signal, untrack, } from '@sigx/lynx';
+/**
+ * Access the enclosing Tabs navigator. Throws when called outside `<Tabs>`.
+ */
+export const useTabs = defineInjectable(() => {
+    throw new Error('[lynx-navigation] useTabs() called outside of a <Tabs> component.');
+});
+const useTabsRegistrar = defineInjectable(() => {
+    throw new Error('[lynx-navigation] <Tabs.Screen> rendered outside a <Tabs> component.');
+});
+const _Tabs = component(({ props, slots }) => {
+    // Tabs are stored as a deeply-reactive proxy signal so `tabs` consumers
+    // re-render when registration changes. `activeSignal` uses the wrapped
+    // `{value}` pattern so we can write a `string | null` without the
+    // proxy treating the inner string as an object.
+    const tabs = signal([]);
+    const activeSignal = signal({
+        value: props.initialTab ?? null,
+    });
+    const registrar = {
+        register(info) {
+            // Wrap in untrack so registration writes inside `<Tabs.Screen>`'s
+            // setup phase don't notify the same setup effect that issued them
+            // — sigx's setup runs in a tracked scope by default.
+            untrack(() => {
+                const idx = tabs.findIndex((t) => t.name === info.name);
+                if (idx === -1)
+                    tabs.push(info);
+                else
+                    tabs[idx] = info;
+                if (activeSignal.value === null) {
+                    activeSignal.value = info.name;
+                }
+            });
+        },
+        unregister(name) {
+            untrack(() => {
+                const idx = tabs.findIndex((t) => t.name === name);
+                if (idx !== -1)
+                    tabs.splice(idx, 1);
+                if (activeSignal.value === name) {
+                    activeSignal.value = tabs[0]?.name ?? null;
+                }
+            });
+        },
+        tabs,
+        activeSignal,
+    };
+    const nav = {
+        get active() {
+            // Empty-tabs state is rare in practice (no <Tabs.Screen> yet) but
+            // possible during initial render; expose '' rather than null so
+            // consumers can compare strings without narrowing.
+            return activeSignal.value ?? '';
+        },
+        setActive(name) {
+            // Silently ignore unknown names rather than writing them and
+            // hiding every tab body. Surfacing as a no-op gives consumers a
+            // predictable failure mode for typos / dynamic name sources.
+            if (!tabs.some((t) => t.name === name))
+                return;
+            activeSignal.value = name;
+        },
+        get tabs() {
+            return tabs;
+        },
+    };
+    defineProvide(useTabs, () => nav);
+    defineProvide(useTabsRegistrar, () => registrar);
+    return () => slots.default?.();
+});
+const TabsScreen = component(({ props, slots }) => {
+    const registrar = useTabsRegistrar();
+    // Capture `name` once at setup. Props is reactive in sigx, but using a
+    // changing `name` for an already-registered screen would be ambiguous
+    // (rename vs re-register?) — pin it and require callers to remount on
+    // identity change. This matches React Navigation's contract.
+    const name = props.name;
+    registrar.register({
+        name,
+        icon: props.icon,
+        label: props.label,
+        accessibilityLabel: props.accessibilityLabel,
+    });
+    onUnmounted(() => registrar.unregister(name));
+    return () => {
+        // `display: none` keeps the body mounted so per-tab state survives
+        // tab switches. Read activeSignal here so re-activating triggers a
+        // re-render with display restored.
+        const active = registrar.activeSignal.value === name;
+        return (_jsx("view", { style: {
+                display: active ? 'flex' : 'none',
+                width: '100%',
+                height: '100%',
+            }, children: slots.default?.() }));
+    };
+});
+/**
+ * Compound export. `Tabs` is the parent component; `Tabs.Screen` registers
+ * an individual tab. Matches the `Screen` / `Screen.Header` shape used
+ * elsewhere in this package and the daisyui `Modal` / `Modal.Header`
+ * convention.
+ */
+export const Tabs = compound(_Tabs, {
+    Screen: TabsScreen,
+});
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs.js.map

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

package/dist/hooks/use-focus.d.ts

@@ -0,0 +1,46 @@
+import { type Computed } from '@sigx/lynx';
+/**
+ * Reactive "is this screen the focused entry?" signal.
+ *
+ * Must be called from inside a component rendered as a route by `<Stack>` (or
+ * any other navigator that uses `<EntryScope>`); throws otherwise. The
+ * returned `Computed` reads `nav.current.key` and compares it to the entry
+ * the calling screen was mounted for, so any nav mutation that changes the
+ * top entry flips the value.
+ *
+ * Note: screens stay mounted when something is pushed on top of them — they
+ * just lose focus. Pop the new top off and they regain focus.
+ *
+ * @example
+ * ```tsx
+ * const Profile = component(() => {
+ *     const isFocused = useIsFocused();
+ *     return () => <text>{isFocused.value ? 'visible' : 'hidden'}</text>;
+ * });
+ * ```
+ */
+export declare function useIsFocused(): Computed<boolean>;
+/**
+ * Run `cb` whenever this screen gains focus; run the returned cleanup when it
+ * loses focus or unmounts. Mirrors React Navigation's `useFocusEffect`.
+ *
+ * Lifecycle:
+ *  - cb runs immediately if the screen is already focused at mount.
+ *  - When the screen loses focus (something pushed on top), cleanup runs.
+ *  - When focus returns (the cover is popped), `cb` runs again — yielding a
+ *    fresh cleanup for the next blur.
+ *  - On unmount, cleanup runs once if still focused.
+ *
+ * Common uses: subscribe to a data source while visible, track an analytics
+ * "screen view" event, start/stop a polling loop.
+ *
+ * @example
+ * ```tsx
+ * useFocusEffect(() => {
+ *     const id = setInterval(refresh, 5000);
+ *     return () => clearInterval(id);
+ * });
+ * ```
+ */
+export declare function useFocusEffect(cb: () => void | (() => void)): void;
+//# sourceMappingURL=use-focus.d.ts.map

package/dist/hooks/use-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,KAAK,QAAQ,EAChB,MAAM,YAAY,CAAC;AAIpB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,IAAI,QAAQ,CAAC,OAAO,CAAC,CAOhD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CA0BlE"}

package/dist/hooks/use-focus.js

@@ -0,0 +1,81 @@
+import { computed, effect, onUnmounted, untrack, } from '@sigx/lynx';
+import { useNav } from './use-nav.js';
+import { useCurrentEntry } from './use-nav-internal.js';
+/**
+ * Reactive "is this screen the focused entry?" signal.
+ *
+ * Must be called from inside a component rendered as a route by `<Stack>` (or
+ * any other navigator that uses `<EntryScope>`); throws otherwise. The
+ * returned `Computed` reads `nav.current.key` and compares it to the entry
+ * the calling screen was mounted for, so any nav mutation that changes the
+ * top entry flips the value.
+ *
+ * Note: screens stay mounted when something is pushed on top of them — they
+ * just lose focus. Pop the new top off and they regain focus.
+ *
+ * @example
+ * ```tsx
+ * const Profile = component(() => {
+ *     const isFocused = useIsFocused();
+ *     return () => <text>{isFocused.value ? 'visible' : 'hidden'}</text>;
+ * });
+ * ```
+ */
+export function useIsFocused() {
+    const nav = useNav();
+    // Capture the entry's key once at setup. The entry object provided
+    // through `defineProvide` may carry reactive dependencies; we only care
+    // about the immutable key of the entry this screen was mounted for.
+    const myKey = useCurrentEntry().key;
+    return computed(() => nav.current.key === myKey);
+}
+/**
+ * Run `cb` whenever this screen gains focus; run the returned cleanup when it
+ * loses focus or unmounts. Mirrors React Navigation's `useFocusEffect`.
+ *
+ * Lifecycle:
+ *  - cb runs immediately if the screen is already focused at mount.
+ *  - When the screen loses focus (something pushed on top), cleanup runs.
+ *  - When focus returns (the cover is popped), `cb` runs again — yielding a
+ *    fresh cleanup for the next blur.
+ *  - On unmount, cleanup runs once if still focused.
+ *
+ * Common uses: subscribe to a data source while visible, track an analytics
+ * "screen view" event, start/stop a polling loop.
+ *
+ * @example
+ * ```tsx
+ * useFocusEffect(() => {
+ *     const id = setInterval(refresh, 5000);
+ *     return () => clearInterval(id);
+ * });
+ * ```
+ */
+export function useFocusEffect(cb) {
+    const isFocused = useIsFocused();
+    let cleanup;
+    const runner = effect(() => {
+        const focused = isFocused.value;
+        // Always tear down any previous focus session before starting a new
+        // one (or before going dormant on blur). Wrap `cb` in `untrack` so
+        // signals read inside the user-provided callback can't retrigger the
+        // outer effect and stack subscriptions.
+        if (typeof cleanup === 'function') {
+            const fn = cleanup;
+            cleanup = undefined;
+            fn();
+        }
+        if (focused) {
+            cleanup = untrack(() => cb());
+        }
+    });
+    onUnmounted(() => {
+        if (typeof cleanup === 'function') {
+            const fn = cleanup;
+            cleanup = undefined;
+            fn();
+        }
+        runner.stop();
+    });
+}
+//# sourceMappingURL=use-focus.js.map

package/dist/hooks/use-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus.js","sourceRoot":"","sources":["../../src/hooks/use-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,GAEV,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,YAAY;IACxB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,mEAAmE;IACnE,wEAAwE;IACxE,oEAAoE;IACpE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC,GAAG,CAAC;IACpC,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC;AACrD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,cAAc,CAAC,EAA6B;IACxD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,IAAI,OAA4B,CAAC;IACjC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,EAAE;QACvB,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;QAChC,oEAAoE;QACpE,mEAAmE;QACnE,qEAAqE;QACrE,wCAAwC;QACxC,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAChC,MAAM,EAAE,GAAG,OAAO,CAAC;YACnB,OAAO,GAAG,SAAS,CAAC;YACpB,EAAE,EAAE,CAAC;QACT,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,WAAW,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAChC,MAAM,EAAE,GAAG,OAAO,CAAC;YACnB,OAAO,GAAG,SAAS,CAAC;YACpB,EAAE,EAAE,CAAC;QACT,CAAC;QACD,MAAM,CAAC,IAAI,EAAE,CAAC;IAClB,CAAC,CAAC,CAAC;AACP,CAAC"}