@sigx/lynx-daisyui 0.4.1 → 0.4.3

package/README.md

@@ -83,10 +83,88 @@ layout role. For multi-class compositions (color + modifier),
 `theme.set('daisy-light daisy-rounded')` works — the class string is
 applied verbatim to the host view.
 
+### Two layers: content vs. OS chrome
+
+A theme drives two different things, and they scope differently:
+
+1. **In-app content** — the `--color-*` / radius variables and icon
+   tints. These live on a host view and inherit down a subtree, so they
+   are genuinely *scopable*.
+2. **OS chrome** — the status- and navigation-bar tint (pushed by
+   `<StatusBarSync>`). This is a global OS singleton; it can only reflect
+   one theme at a time.
+
+The rule:
+
+> `useTheme()` is the theme for the **content you render** — the nearest
+> `<ThemeProvider>`, or the app-global theme at the root / in headless
+> code. **System chrome always follows the global theme.** `StatusBarSync`
+> binds to the global controller, so a nested provider can't hijack the
+> bars.
+>
+> *Scopes recolor pixels you draw; only the global theme touches the OS.*
+
+This mirrors Flutter, where `Theme` nests freely for content while system
+chrome goes through a separate channel (`AnnotatedRegion`/`SystemChrome`).
+
+### Headless control (no provider required)
+
+The active theme lives in a module-level singleton, so you can read and
+set it from anywhere — a store, a service, app-boot logic, an effect —
+without a mounted `<ThemeProvider>` ancestor. `useTheme()` resolves to
+this same controller when no provider is in scope (it never throws).
+
+```tsx
+import { themeController } from '@sigx/lynx-daisyui';
+
+// From any non-component module:
+themeController.set('daisy-dark');
+themeController.toggle();
+themeController.followSystem();
+themeController.name;            // current selection
+```
+
+A mounted root `<ThemeProvider>` binds this singleton, so headless
+mutations render and the OS bars follow.
+
+### Per-screen themes
+
+Different screens can use different themes — and the status-bar icons
+follow the active screen so they stay legible. Because this drives the
+**global** theme, the bars update automatically:
+
+```tsx
+import { useScreenTheme } from '@sigx/lynx-daisyui';
+
+const Gallery = component(() => {
+    useScreenTheme('daisy-dark'); // dark (incl. status bar) while focused; restored on blur
+    return () => <view>…</view>;
+});
+```
+
+`useScreenTheme` is built on `@sigx/lynx-navigation`'s `useFocusEffect`
+(an optional peer) and must be called from a routed screen.
+
+### Scoped sub-overrides
+
+To recolor just a **region** without touching the OS bars, nest a
+`<ThemeProvider>`. Its subtree (content + icons) re-themes; the status
+bar stays on the global theme.
+
+```tsx
+<ThemeProvider initial="daisy-light">
+    <App />
+    {/* this card renders synthwave; the status bar stays light */}
+    <ThemeProvider initial="daisy-synthwave">
+        <PreviewCard />
+    </ThemeProvider>
+</ThemeProvider>
+```
+
 ## Navigation chrome
 
 Two daisy-themed components that pair with
-[`@sigx/lynx-navigation`](../lynx-navigation). Both read state via the
+[`@sigx/lynx-navigation`](https://github.com/signalxjs/lynx/tree/main/packages/lynx-navigation). Both read state via the
 navigation package's hooks (no internal-module imports), so swapping
 in custom designs later is a one-component change.
 
@@ -143,6 +221,44 @@ For a fully-custom design, build directly on
 `useScreenChrome()` from `@sigx/lynx-navigation` — `NavHeader` is just
 one consumer of that hook.
 
+### `<SwiperIndicator>`
+
+Themed wrapper around the headless `useSwiperDot*` hooks from
+[`@sigx/lynx-gestures`](https://github.com/signalxjs/lynx/tree/main/packages/lynx-gestures#swiper-and-headless-dot-hooks).
+Reads colours from the active daisy theme so the indicator follows light
+/ dark mode automatically.
+
+```tsx
+import { Swiper } from '@sigx/lynx-gestures';
+import { SwiperIndicator } from '@sigx/lynx-daisyui';
+
+<Swiper offset={offset} index={pageIdx} width={pageWidth}>{pages}</Swiper>
+<SwiperIndicator
+  variant="dots"
+  count={pages.length}
+  offset={offset}
+  pageWidth={pageWidth}
+  index={pageIdx}
+  color="primary"
+  onDotPress={(i) => { pageIdx.value = i }}
+/>
+```
+
+| Variant       | Animated channel             | Notes                                                              |
+| ------------- | ---------------------------- | ------------------------------------------------------------------ |
+| `dots`        | `opacity` crossfade          | Default. Two-colour overlay per dot.                               |
+| `bar`         | `translateX` (single thumb)  | One MT binding regardless of page count — cheapest for long lists. |
+| `pill`        | `scaleX` + `opacity`         | Active dot stretches into a pill while overlay fades in.           |
+| `scale-pulse` | uniform `scale`              | Monochrome pulse — no colour crossfade.                            |
+| `numbered`    | none (BG-thread text)        | Renders `n / total`. Requires `index` signal.                      |
+
+Props: `count`, `offset` (`SharedValue<number>`), `pageWidth`, `index`
+(`PrimitiveSignal<number>`, required for `numbered`), `color`, `inactiveColor`
+(daisy tokens), `size` (`'xs' | 'sm' | 'md' | 'lg'`), `onDotPress`.
+
+For a non-standard visual, skip this component and call the headless
+hooks directly — they're the same primitives this component composes.
+
 ## Layout primitives
 
 Daisy's flex primitives (`Center`, `Col`, `Row`) accept a `flex={n}`

package/dist/index.d.ts

@@ -50,8 +50,16 @@ export { NavTabBar } from './navigation/NavTabBar.js';
 export type { NavTabBarProps, NavTabBarPosition, NavTabBarBackground, NavTabRenderContext, } from './navigation/NavTabBar.js';
 export { NavHeader } from './navigation/NavHeader.js';
 export type { NavHeaderProps, NavHeaderBackground, } from './navigation/NavHeader.js';
-export { ThemeProvider, useTheme } from './theme/ThemeProvider.js';
-export type { DaisyTheme, ThemeController, ThemeProviderProps, } from './theme/ThemeProvider.js';
+export { NavDrawer } from './navigation/NavDrawer.js';
+export type { NavDrawerProps, NavDrawerSide, } from './navigation/NavDrawer.js';
+export { SwiperIndicator } from './navigation/SwiperIndicator.js';
+export type { SwiperIndicatorProps, SwiperIndicatorVariant, SwiperIndicatorSize, } from './navigation/SwiperIndicator.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
+export type { DaisyTheme, ThemeController, ThemeProviderProps, Theme, ThemePalette, ThemeRadius, ThemeVariant, } from './theme/ThemeProvider.js';
+export { StatusBarSync } from './theme/StatusBarSync.js';
+export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
+export { themeController } from './theme/theme-state.js';
+export { useScreenTheme } from './theme/use-screen-theme.js';
 export { Avatar } from './data/Avatar.js';
 export type { AvatarProps, AvatarSize } from './data/Avatar.js';
 export { Text } from './typography/Text.js';

package/dist/index.js

@@ -29,8 +29,18 @@ export { Steps } from './feedback/Steps.js';
 export { Tabs } from './navigation/Tabs.js';
 export { NavTabBar } from './navigation/NavTabBar.js';
 export { NavHeader } from './navigation/NavHeader.js';
+export { NavDrawer } from './navigation/NavDrawer.js';
+export { SwiperIndicator } from './navigation/SwiperIndicator.js';
 // Theme
-export { ThemeProvider, useTheme } from './theme/ThemeProvider.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
+export { StatusBarSync } from './theme/StatusBarSync.js';
+// Headless theme handle (issue #113): import and call from anywhere — stores,
+// services, effects, app-boot — with no `<ThemeProvider>` ancestor required.
+// `useTheme()` resolves to this when no provider is in scope.
+export { themeController } from './theme/theme-state.js';
+// Per-screen theming: pin the global theme while a navigation screen is focused
+// (requires the optional `@sigx/lynx-navigation` peer).
+export { useScreenTheme } from './theme/use-screen-theme.js';
 // Data
 export { Avatar } from './data/Avatar.js';
 // Typography

package/dist/navigation/NavDrawer.d.ts

@@ -0,0 +1,62 @@
+/**
+ * `<NavDrawer>` — daisy-themed off-canvas drawer for `@sigx/lynx-navigation`.
+ *
+ * Composes the primitive `<Drawer>` purely as the state provider (so
+ * `useDrawer()` resolves for descendants) and drives its own
+ * `SharedValue`-backed slide + fade transition via `@sigx/lynx-motion`.
+ *
+ * Behavior:
+ *  - Panel translates from off-screen on the configured `side` to `0`
+ *    on open (and back on close). Default side is `'left'`.
+ *  - Backdrop fades 0 → 0.3 in tandem.
+ *  - Chrome mounts on open and unmounts after the exit animation completes,
+ *    so the closed-state drawer doesn't intercept taps to underlying tabs.
+ *  - Backdrop is a plain `<view bindtap>` — no Pressable scale/opacity
+ *    feedback (which flickers an opaque scrim).
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <NavDrawer slots={{ sidebar: () => <MyMenu /> }}>
+ *     <Stack />
+ *   </NavDrawer>
+ * </NavigationRoot>
+ * ```
+ *
+ * Inside descendants, `useDrawer()` from `@sigx/lynx-navigation` returns
+ * `{ isOpen, open, close, toggle }`.
+ *
+ * The primitive's own `<Drawer />` is intentionally minimal (state +
+ * `display: none` overlay only); this component is the
+ * batteries-included variant for daisyui consumers.
+ */
+import { type Define, type JSXElement } from '@sigx/lynx';
+import { type BackgroundValue } from '../shared/styles.js';
+export type NavDrawerSide = 'left' | 'right';
+export type NavDrawerProps = 
+/** Which edge the panel slides in from. Default 'left'. */
+Define.Prop<'side', NavDrawerSide, false>
+/** Panel surface color. Accepts daisy tokens ('base-100', 'primary', …)
+ *  — applied as a `bg-<token>` Tailwind class so the daisy preset's
+ *  CSS-pipeline rule resolves the `var(--color-<token>)`. Also accepts
+ *  raw CSS color strings ('#facc15', 'rgb(...)') — applied as inline
+ *  `backgroundColor`. Default 'base-100'. */
+ & Define.Prop<'background', BackgroundValue, false>
+/** Show a separator line on the panel's inner edge. Default true. */
+ & Define.Prop<'bordered', boolean, false>
+/** Render a dismiss-on-tap scrim over the main content when open. Default true. */
+ & Define.Prop<'backdrop', boolean, false>
+/** Panel width in pixels. Default 280. */
+ & Define.Prop<'width', number, false>
+/** Open the drawer at mount. Default false. Passthrough to primitive `<Drawer>`. */
+ & Define.Prop<'initialOpen', boolean, false>
+/** Drawer panel contents — your menu UI. */
+ & Define.Slot<'sidebar'>
+/** Main content — usually a `<Stack>` or `<Tabs>`. */
+ & Define.Slot<'default'>;
+export declare const NavDrawer: import("@sigx/runtime-core").ComponentFactory<NavDrawerProps, void, {
+    sidebar: () => JSXElement | JSXElement[] | null;
+} & {
+    default: () => JSXElement | JSXElement[] | null;
+}>;

package/dist/navigation/NavDrawer.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<NavDrawer>` — daisy-themed off-canvas drawer for `@sigx/lynx-navigation`.
+ *
+ * Composes the primitive `<Drawer>` purely as the state provider (so
+ * `useDrawer()` resolves for descendants) and drives its own
+ * `SharedValue`-backed slide + fade transition via `@sigx/lynx-motion`.
+ *
+ * Behavior:
+ *  - Panel translates from off-screen on the configured `side` to `0`
+ *    on open (and back on close). Default side is `'left'`.
+ *  - Backdrop fades 0 → 0.3 in tandem.
+ *  - Chrome mounts on open and unmounts after the exit animation completes,
+ *    so the closed-state drawer doesn't intercept taps to underlying tabs.
+ *  - Backdrop is a plain `<view bindtap>` — no Pressable scale/opacity
+ *    feedback (which flickers an opaque scrim).
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <NavDrawer slots={{ sidebar: () => <MyMenu /> }}>
+ *     <Stack />
+ *   </NavDrawer>
+ * </NavigationRoot>
+ * ```
+ *
+ * Inside descendants, `useDrawer()` from `@sigx/lynx-navigation` returns
+ * `{ isOpen, open, close, toggle }`.
+ *
+ * The primitive's own `<Drawer />` is intentionally minimal (state +
+ * `display: none` overlay only); this component is the
+ * batteries-included variant for daisyui consumers.
+ */
+import { component, effect, onUnmounted, runOnMainThread, signal, untrack, useAnimatedStyle, useMainThreadRef, useSharedValue, } from '@sigx/lynx';
+import { withTiming } from '@sigx/lynx-motion';
+import { Drawer, useDrawer } from '@sigx/lynx-navigation';
+import { resolveDaisyColor } from '../shared/styles.js';
+/**
+ * Slide-in / fade-in timing. Slightly longer than the slide-out so the
+ * drawer feels deliberate on open and snappy on dismiss — matches the
+ * convention used by Stack's push/pop transitions in `lynx-navigation`.
+ */
+const ENTER_DURATION_SEC = 0.28;
+const EXIT_DURATION_SEC = 0.22;
+const EXIT_DURATION_MS = Math.round(EXIT_DURATION_SEC * 1000);
+const BACKDROP_OPACITY = 0.3;
+export const NavDrawer = component(({ props, slots }) => {
+    return () => (_jsx(Drawer, { initialOpen: props.initialOpen, children: _jsx(NavDrawerShell, { side: props.side ?? 'left', background: props.background ?? 'base-100', bordered: props.bordered ?? true, backdrop: props.backdrop ?? true, width: props.width ?? 280, renderSidebar: slots.sidebar, children: slots.default?.() }) }));
+});
+const NavDrawerShell = component(({ props, slots }) => {
+    const drawer = useDrawer();
+    // Seed progress from current open state so `initialOpen=true` mounts
+    // already-open without a slide-in flash.
+    const progress = useSharedValue(drawer.isOpen ? 1 : 0);
+    const shouldRender = signal(drawer.isOpen);
+    // Track whether the chrome is currently mounted (or animating out) so the
+    // initial effect tick on a closed drawer doesn't kick a no-op close
+    // animation + unmount timer.
+    let chromeMounted = drawer.isOpen;
+    let exitTimer = null;
+    // Pre-register the worklets at setup so the SWC main-thread transform
+    // captures `progress` once. Re-registering on every effect tick would
+    // re-ship the worklet body across the bridge unnecessarily.
+    const openAnim = runOnMainThread(() => {
+        'main thread';
+        withTiming(progress, 1, { duration: ENTER_DURATION_SEC });
+    });
+    const closeAnim = runOnMainThread(() => {
+        'main thread';
+        withTiming(progress, 0, { duration: EXIT_DURATION_SEC });
+    });
+    const animRunner = effect(() => {
+        const open = drawer.isOpen;
+        if (open) {
+            if (exitTimer != null) {
+                clearTimeout(exitTimer);
+                exitTimer = null;
+            }
+            chromeMounted = true;
+            untrack(() => {
+                shouldRender.value = true;
+            });
+            openAnim();
+        }
+        else if (chromeMounted) {
+            chromeMounted = false;
+            closeAnim();
+            // Wait for the exit animation to finish before unmounting the
+            // chrome — otherwise the panel pops out instead of sliding,
+            // and the backdrop's bindtap area disappears mid-fade.
+            exitTimer = setTimeout(() => {
+                untrack(() => {
+                    shouldRender.value = false;
+                });
+                exitTimer = null;
+            }, EXIT_DURATION_MS);
+        }
+        // else: drawer is closed and the chrome was never mounted (the
+        // common initial-mount case) — nothing to animate or schedule.
+    });
+    onUnmounted(() => {
+        animRunner.stop();
+        if (exitTimer != null)
+            clearTimeout(exitTimer);
+    });
+    return () => {
+        return (_jsxs("view", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+            }, children: [slots.default?.(), shouldRender.value
+                    ? (_jsx(DrawerChrome
+                    // Key by side+width — `useAnimatedStyle`
+                    // snapshots `outputRange` at setup, so a
+                    // runtime change to either (panel slide
+                    // distance is signed by side, magnitude by
+                    // width) needs a remount + rebind. Width
+                    // changes mid-open are vanishingly rare;
+                    // toggling `side` likewise. The explicit
+                    // remount keeps the binding consistent if
+                    // a consumer wires either to a reactive
+                    // value.
+                    , { side: props.side, progress: progress, width: props.width, background: props.background, bordered: props.bordered, backdrop: props.backdrop, renderSidebar: props.renderSidebar, onBackdropPress: () => drawer.close() }, `drawer-chrome-${props.side}-${props.width}`))
+                    : null] }));
+    };
+});
+const DrawerChrome = component(({ props }) => {
+    const panelRef = useMainThreadRef(null);
+    const backdropRef = useMainThreadRef(null);
+    // Slide range mirrors `side`: left-side starts at `-width` (off-screen
+    // left) and lands at `0`; right-side starts at `+width` and lands at `0`.
+    // Capture once — NavDrawerShell remounts on side/width change to rebind.
+    const closedTx = props.side === 'right' ? props.width : -props.width;
+    // Bind once at setup. `useAnimatedStyle` snapshots its mapper/range
+    // params at registration time; NavDrawerShell keys DrawerChrome by
+    // side+width so a change to either forces a remount + rebind here.
+    useAnimatedStyle(panelRef, props.progress, 'translateX', {
+        inputRange: [0, 1],
+        outputRange: [closedTx, 0],
+    });
+    // Register unconditionally so a runtime `backdrop` toggle works
+    // both directions. `useAnimatedStyle` only binds once at setup; if
+    // this lived inside `if (props.backdrop)` a false→true toggle would
+    // mount a backdrop view with no opacity binding, leaving it stuck
+    // at the inline `opacity: 0` seed. When the backdrop view isn't
+    // rendered, `backdropRef.current` is null and the MT bridge's
+    // `setStyleProperties` apply silently skips — no harm.
+    useAnimatedStyle(backdropRef, props.progress, 'opacity', {
+        inputRange: [0, 1],
+        outputRange: [0, BACKDROP_OPACITY],
+    });
+    return () => {
+        const isRight = props.side === 'right';
+        // Lynx resolves `var(--color-*)` inside CSS-pipeline rules (Tailwind
+        // classes, stylesheet imports) but NOT inside inline `style.backgroundColor`
+        // — an inline `'var(--color-base-100)'` paints transparent. So for known
+        // daisy tokens we apply the surface via the Tailwind class `bg-<token>`
+        // (which the daisy preset compiles to a `var()` rule that DOES resolve);
+        // raw CSS strings ('#facc15', 'rgb(...)', 'var(--my-custom)') fall through
+        // to inline because there's no compiled class to use for them.
+        const resolved = resolveDaisyColor(props.background);
+        const isDaisyToken = resolved !== props.background;
+        const bgClass = isDaisyToken ? `bg-${props.background}` : '';
+        // Border lives on the panel's *inner* edge (the one facing the
+        // main content). Daisy class names are still the cleanest way to
+        // pick up `--color-base-300` for the separator hairline.
+        const borderClass = props.bordered
+            ? (isRight ? 'border-l border-base-300' : 'border-r border-base-300')
+            : '';
+        const panelClass = [bgClass, borderClass].filter(Boolean).join(' ');
+        const panelStyle = {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: props.width,
+        };
+        if (!isDaisyToken)
+            panelStyle.backgroundColor = props.background;
+        // Only the side-relevant inset is set; omitting the other lets
+        // the panel size to `width` rather than stretching edge-to-edge.
+        if (isRight)
+            panelStyle.right = 0;
+        else
+            panelStyle.left = 0;
+        return (_jsxs("view", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            }, children: [props.backdrop
+                    ? (_jsx("view", { "main-thread:ref": backdropRef, bindtap: () => props.onBackdropPress(), class: "bg-base-content", style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            opacity: 0,
+                        }, "accessibility-element": true, "accessibility-label": "Close drawer", "accessibility-trait": "button" }))
+                    : null, _jsx("view", { "main-thread:ref": panelRef, class: panelClass, style: panelStyle, children: props.renderSidebar?.() })] }));
+    };
+});

package/dist/navigation/NavHeader.d.ts

@@ -19,13 +19,24 @@
  * for daisyui consumers.
  */
 import { type Define, type JSXElement } from '@sigx/lynx';
+import { type IconSpec } from '@sigx/lynx-icons';
 export type NavHeaderBackground = 'base-100' | 'base-200' | 'base-300' | 'transparent';
 export type NavHeaderProps = 
 /** Surface color token. Default 'base-200'. */
 Define.Prop<'background', NavHeaderBackground, false>
 /** Show a separator line at the bottom. Default true. */
  & Define.Prop<'bordered', boolean, false>
-/** Replace the back button entirely. Receives `pop` so the custom node can wire its own tap handler. */
+/**
+ * Render the back chevron from an `IconSpec` (e.g. `{ set: 'lucide',
+ * name: 'chevron-left' }`). The icon is rendered with
+ * `variant="primary"`, which `<ThemeProvider>`'s color resolver maps
+ * to the daisy primary hex and substitutes into the SVG `fill=`.
+ * Wrapped in a Pressable wired to the stack's pop. Falls back to the
+ * default "‹ Back" text when not provided. Ignored when `renderBack`
+ * or `<Screen.HeaderLeft>` is also supplied — those win.
+ */
+ & Define.Prop<'backIcon', IconSpec, false>
+/** Full override: render any JSX for the back button. Takes priority over `backIcon`. */
  & Define.Prop<'renderBack', (ctx: {
     pop: () => void;
 }) => JSXElement, false>;

package/dist/navigation/NavHeader.js

@@ -21,8 +21,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
  */
 import { component } from '@sigx/lynx';
 import { Pressable } from '@sigx/lynx-gestures';
+import { Icon } from '@sigx/lynx-icons';
 import { useScreenChrome } from '@sigx/lynx-navigation';
 import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+/** Pixel size used when rendering the back-button icon from an `IconSpec`. */
+const NAV_HEADER_ICON_SIZE = 22;
 const backgroundClass = {
     'base-100': 'bg-base-100',
     'base-200': 'bg-base-200',
@@ -47,11 +50,17 @@ export const NavHeader = component(({ props }) => {
             bg,
             borderClass,
         ].filter(Boolean).join(' ');
+        // Resolution order: <Screen.HeaderLeft> slot fill → custom renderBack
+        // → backIcon spec → default text. The spec path renders `<Icon>`
+        // with `variant="primary"`, which the daisy resolver maps to the
+        // primary hex and substitutes into the SVG `fill=`.
         const left = chrome.headerLeft?.()
             ?? (chrome.canGoBack
                 ? (props.renderBack
                     ? props.renderBack({ pop: chrome.pop })
-                    : _jsx(DefaultBackButton, { onPress: chrome.pop }))
+                    : (props.backIcon
+                        ? _jsx(BackIconButton, { spec: props.backIcon, onPress: chrome.pop })
+                        : _jsx(DefaultBackButton, { onPress: chrome.pop })))
                 : null);
         const right = chrome.headerRight?.() ?? null;
         return (_jsxs("view", { class: containerClass, children: [_jsx("view", { class: "flex flex-row items-center", style: { minWidth: 56 }, children: left }), _jsx("view", { class: "flex-1 items-center justify-center", children: _jsx("text", { class: "text-base-content text-base font-semibold", children: chrome.title }) }), _jsx("view", { class: "flex flex-row items-center justify-end", style: { minWidth: 56 }, children: right })] }));
@@ -60,3 +69,6 @@ export const NavHeader = component(({ props }) => {
 const DefaultBackButton = component(({ props }) => {
     return () => (_jsx(Pressable, { class: "px-2 py-2", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": "Back", "accessibility-trait": "button", onPress: () => props.onPress(), children: _jsx("text", { class: "text-primary text-base", children: "\u2039 Back" }) }));
 });
+const BackIconButton = component(({ props }) => {
+    return () => (_jsx(Pressable, { class: "px-2 py-2", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": "Back", "accessibility-trait": "button", onPress: () => props.onPress(), children: _jsx(Icon, { set: props.spec.set, name: props.spec.name, size: NAV_HEADER_ICON_SIZE, variant: "primary" }) }));
+});

package/dist/navigation/NavTabBar.js

@@ -16,8 +16,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
  */
 import { component } from '@sigx/lynx';
 import { Pressable } from '@sigx/lynx-gestures';
+import { Icon } from '@sigx/lynx-icons';
 import { useTabs } from '@sigx/lynx-navigation';
 import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+/** Narrow `TabInfo.icon` to its `IconSpec` variant — the bar renders `<Icon>` for these. */
+const isIconSpec = (v) => typeof v === 'object' && v !== null && 'set' in v && 'name' in v
+    && typeof v.set === 'string'
+    && typeof v.name === 'string';
 const backgroundClass = {
     'base-100': 'bg-base-100',
     'base-200': 'bg-base-200',
@@ -48,11 +53,38 @@ export const NavTabBar = component(({ props }) => {
             }) }));
     };
 });
+/**
+ * Pixel size the bar uses when rendering `<Icon>` from an `IconSpec`.
+ * Matches the default tab-row height visually.
+ */
+const TAB_ICON_SIZE = 22;
 const DefaultNavTab = component(({ props }) => {
     return () => {
         const label = props.info.label ?? props.info.name;
         const a11y = props.info.accessibilityLabel ?? label;
-        const textColor = props.active ? 'text-primary font-semibold' : 'text-base-content opacity-60';
-        return (_jsxs(Pressable, { class: "flex-1 items-center justify-center py-3", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": a11y, "accessibility-trait": "button", "accessibility-status": props.active ? 'selected' : undefined, onPress: () => props.onPress(), children: [props.info.icon ?? null, _jsx("text", { class: `text-sm ${textColor}`, children: label })] }));
+        // Label uses native CSS color via daisy `text-*` classes — Lynx's
+        // `<text>` honors color inheritance normally. The icon path below
+        // can't rely on the same trick (see comment there for why).
+        const labelTone = props.active ? 'text-primary' : 'text-base-content opacity-60';
+        const weight = props.active ? 'font-semibold' : '';
+        const icon = props.info.icon;
+        // For an `IconSpec`, render `<Icon>` with the matching daisy
+        // variant. `<ThemeProvider>`'s color resolver maps `'primary'` /
+        // `'base-content'` (etc.) to the current theme's hex value, which
+        // `<Icon>` substitutes directly into the SVG `fill=` attribute —
+        // Lynx's `<svg content=…>` parses inline SVG in isolation and
+        // doesn't inherit host `color`, so class-based theming doesn't
+        // reach the SVG content. Inactive layers `opacity-60` as a class
+        // on the outer element (opacity does propagate to the raster).
+        //
+        // For a `JSXElement`, the consumer is in charge of styling — we
+        // leave it untouched. They can opt into the same theming by
+        // passing `variant="primary"` themselves.
+        const iconVariant = props.active ? 'primary' : 'base-content';
+        const iconClass = props.active ? undefined : 'opacity-60';
+        const renderedIcon = isIconSpec(icon)
+            ? _jsx(Icon, { set: icon.set, name: icon.name, size: TAB_ICON_SIZE, variant: iconVariant, class: iconClass })
+            : (icon ?? null);
+        return (_jsxs(Pressable, { class: "flex-1 items-center justify-center py-3", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": a11y, "accessibility-trait": "button", "accessibility-status": props.active ? 'selected' : undefined, onPress: () => props.onPress(), children: [renderedIcon, _jsx("text", { class: `text-sm ${labelTone} ${weight}`, children: label })] }));
     };
 });

package/dist/navigation/SwiperIndicator.d.ts

@@ -0,0 +1,59 @@
+import { type Define, type PrimitiveSignal, type SharedValue } from '@sigx/lynx';
+import { type DaisyColor } from '../shared/styles.js';
+/**
+ * Visual style for the swiper page indicator.
+ *
+ * - `dots` — equally-spaced circles, the active one fades in via opacity.
+ *   Today's default. Cheap (opacity-only MT mapper, no layout each frame).
+ * - `bar` — fixed track with a single sliding thumb. Single MT binding
+ *   regardless of page count, so cheapest for very long carousels.
+ * - `pill` — the active dot stretches horizontally into a pill while
+ *   neighbours stay circular. Uses `scaleX` so siblings don't reflow.
+ * - `numbered` — text counter like `2 / 5`. Pure BG-thread, no animation.
+ * - `scale-pulse` — circles where the active one scales up. No colour
+ *   crossfade — pairs well with monochrome palettes.
+ */
+export type SwiperIndicatorVariant = 'dots' | 'bar' | 'pill' | 'numbered' | 'scale-pulse';
+export type SwiperIndicatorSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SwiperIndicatorProps = Define.Prop<'variant', SwiperIndicatorVariant, false>
+/** Live MT pixel offset from the parent `<Swiper>`. Required for all animated variants. */
+ & Define.Prop<'offset', SharedValue<number>, false>
+/** Page width in CSS px. Must match the Swiper's effective page width. */
+ & Define.Prop<'pageWidth', number, false>
+/** Total page count. */
+ & Define.Prop<'count', number, true>
+/**
+ * Current page (whole-units). Required for `numbered`, used by `bar`
+ * as fallback when `offset` isn't wired, and consumed by all variants
+ * for tap-to-jump.
+ */
+ & Define.Prop<'index', PrimitiveSignal<number>, false> & Define.Prop<'color', DaisyColor, false> & Define.Prop<'inactiveColor', DaisyColor, false> & Define.Prop<'size', SwiperIndicatorSize, false>
+/**
+ * Tap-to-jump handler. The receiver should typically write
+ * `index.value = i` to glide the swiper to that page.
+ */
+ & Define.Prop<'onDotPress', (index: number) => void, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false>;
+/**
+ * Themed swiper page indicator with five preset variants. Each variant
+ * is a thin shell over a headless hook from `@sigx/lynx-gestures` (see
+ * `useSwiperDotProgress`, `useSwiperDotScale`, `useSwiperDotGrowX`,
+ * `useSwiperDotTranslate`). For a fully custom indicator, compose the
+ * hooks yourself rather than forking this file.
+ *
+ * @example
+ * ```tsx
+ * const offset = useSharedValue(0);
+ * const idx = signal({ value: 0 });
+ * <Swiper offset={offset} index={idx} width={W}>…</Swiper>
+ * <SwiperIndicator
+ *   variant="pill"
+ *   offset={offset}
+ *   pageWidth={W}
+ *   count={photos.length}
+ *   index={idx}
+ *   color="primary"
+ *   onDotPress={(i) => { idx.value = i; }}
+ * />
+ * ```
+ */
+export declare const SwiperIndicator: import("@sigx/runtime-core").ComponentFactory<SwiperIndicatorProps, void, {}>;