Ushop Uassistant Screen

import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Icon, type IconName, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { LumioBot, Mount, Press } from "../shared";

const CHIPS: { icon: IconName; label: string; color: string }[] = [
  { icon: "package", label: "Best mothers day gift", color: "#65A30D" },
  { icon: "sparkles", label: "Independent Day", color: "#E8862D" },
  { icon: "trophy", label: "Sports", color: "#7C5CFC" },
];

function ShopNav() {
  const insets = useSafeAreaInsets();
  const items: { icon: IconName; active?: boolean }[] = [
    { icon: "search", active: true },
    { icon: "edit" },
    { icon: "globe" },
    { icon: "book-open" },
  ];
  return (
    <View
      className="absolute inset-x-10 flex-row items-center rounded-full bg-[#1B1B26] px-2 py-2"
      style={{ bottom: Math.max(insets.bottom, 12) }}
    >
      {items.map((it) => (
        <Press
          key={it.icon}
          accessibilityRole="button"
          className={cn(
            "h-11 flex-1 items-center justify-center rounded-full",
            it.active && "bg-white",
          )}
        >
          <Icon name={it.icon} size="sm" color={it.active ? "#1B1B26" : "#8E8E93"} />
        </Press>
      ))}
    </View>
  );
}

/** Shop assistant — the "Need anything?" empty state: greeting header, a
 *  big ask pill with camera + voice orb, suggestion chips, all whitespace,
 *  and the dark floating nav. Complements the chat/ai-assistant thread. */
export function ShopAssistantScreen({ name = "Jhonathon", onCart }: { name?: string; onCart?: () => void }) {
  const haptics = useHaptic();
  const [asked, setAsked] = React.useState(false);
  return (
    <View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        {/* header */}
        <View className="flex-row items-center justify-between px-5 pt-1">
          <View className="flex-row items-center gap-3">
            <Avatar fallback={name.slice(0, 1)} size="md" source={{ uri: "https://i.pravatar.cc/150?img=59" }} />
            <View>
              <Text className="text-[12px] text-muted-foreground">Good Morning,</Text>
              <Text className="text-[15px] font-semibold text-[#1B1B26] dark:text-white">{name} Troot</Text>
            </View>
          </View>
          <Press
            onPress={onCart}
            accessibilityRole="button"
            accessibilityLabel="Basket"
            className="h-10 w-10 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]"
          >
            <Icon name="shopping-cart" size="md" color="#1B1B26" />
          </Press>
        </View>

        {/* centered ask state */}
        <View className="flex-1 items-center justify-center px-8">
          <Mount className="items-center gap-4">
            <LumioBot size={64} />
            <View className="items-center">
              <Text className="text-[26px] font-bold tracking-tight text-[#1B1B26] dark:text-white">Need anything?</Text>
              <Text className="mt-2.5 text-center text-[13.5px] leading-relaxed text-muted-foreground">
                Lumio finds exactly what{"\n"}you need—faster and easier than ever.
              </Text>
            </View>
          </Mount>

          <Mount delay={70} className="mt-8 w-full">
            <Press
              onPress={() => {
                haptics.medium();
                setAsked((a) => !a);
              }}
              accessibilityRole="button"
              accessibilityLabel={asked ? "Ask again" : "Ask the assistant"}
              className="flex-row items-center rounded-full bg-white p-2 pl-4 shadow-sm dark:bg-[#1A1A20]"
            >
              <Icon name="camera" size="md" color="#1B1B26" />
              <View className="flex-1 px-3">
                <Text className="text-[15px] text-muted-foreground">
                  {asked ? "Best mothers day gift…" : "Ask Anything…"}
                </Text>
              </View>
              <View className="h-11 w-11 items-center justify-center">
                <Press
                  onPress={() => haptics.light()}
                  accessibilityRole="button"
                  accessibilityLabel="Voice input"
                  className="h-11 w-11 items-center justify-center rounded-full bg-[#1B1B26]"
                >
                  <Icon name="mic" size="md" color="#FFFFFF" />
                </Press>
              </View>
            </Press>
          </Mount>

          {asked && (
            <Mount delay={0} className="mt-6 w-full">
              <View className="flex-row gap-2.5">
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="package" size="lg" color="#65A30D" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Silk scarf</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$42</Text>
                </View>
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="heart" size="lg" color="#E04747" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Rose candle</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$18</Text>
                </View>
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="sparkles" size="lg" color="#E8862D" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Gold bracelet</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$88</Text>
                </View>
              </View>
              <Text className="mt-2 text-center text-[12px] text-muted-foreground">
                3 picks for mom — tap one to ask more
              </Text>
            </Mount>
          )}

          <Mount delay={120} className="mt-4 flex-row flex-wrap justify-center gap-2.5">
            {CHIPS.map((c) => (
              <Press
                key={c.label}
                onPress={() => haptics.selection()}
                accessibilityRole="button"
                className="flex-row items-center gap-1.5 rounded-full bg-white px-3.5 py-2 dark:bg-[#1A1A20]"
              >
                <Icon name={c.icon} size="sm" color={c.color} />
                <Text className="text-[12.5px] font-medium text-[#1B1B26]/80 dark:text-white/80">{c.label}</Text>
              </Press>
            ))}
          </Mount>
        </View>
      </SafeAreaView>
      <ShopNav />
    </View>
  );
}
ShopAssistantScreen.displayName = "ShopAssistantScreen";

Recreate the "Ushop Uassistant Screen" screen in React Native using LumioUI.

Goal: Ushop Uassistant screen Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add ecommerce-shop-assistant
```

Or pull just the components: `npx lumioui add button text icon avatar`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- imported but not rendered directly — likely used through a sibling or as a utility

### `text` — Themed type scale from caption to display.
- `<Text>` ×13

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×8

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/ecommerce/shop-assistant.tsx` exporting ShopAssistantScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Icon, type IconName, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { LumioBot, Mount, Press } from "../shared";

const CHIPS: { icon: IconName; label: string; color: string }[] = [
  { icon: "package", label: "Best mothers day gift", color: "#65A30D" },
  { icon: "sparkles", label: "Independent Day", color: "#E8862D" },
  { icon: "trophy", label: "Sports", color: "#7C5CFC" },
];

function ShopNav() {
  const insets = useSafeAreaInsets();
  const items: { icon: IconName; active?: boolean }[] = [
    { icon: "search", active: true },
    { icon: "edit" },
    { icon: "globe" },
    { icon: "book-open" },
  ];
  return (
    <View
      className="absolute inset-x-10 flex-row items-center rounded-full bg-[#1B1B26] px-2 py-2"
      style={{ bottom: Math.max(insets.bottom, 12) }}
    >
      {items.map((it) => (
        <Press
          key={it.icon}
          accessibilityRole="button"
          className={cn(
            "h-11 flex-1 items-center justify-center rounded-full",
            it.active && "bg-white",
          )}
        >
          <Icon name={it.icon} size="sm" color={it.active ? "#1B1B26" : "#8E8E93"} />
        </Press>
      ))}
    </View>
  );
}

/** Shop assistant — the "Need anything?" empty state: greeting header, a
 *  big ask pill with camera + voice orb, suggestion chips, all whitespace,
 *  and the dark floating nav. Complements the chat/ai-assistant thread. */
export function ShopAssistantScreen({ name = "Jhonathon", onCart }: { name?: string; onCart?: () => void }) {
  const haptics = useHaptic();
  const [asked, setAsked] = React.useState(false);
  return (
    <View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        {/* header */}
        <View className="flex-row items-center justify-between px-5 pt-1">
          <View className="flex-row items-center gap-3">
            <Avatar fallback={name.slice(0, 1)} size="md" source={{ uri: "https://i.pravatar.cc/150?img=59" }} />
            <View>
              <Text className="text-[12px] text-muted-foreground">Good Morning,</Text>
              <Text className="text-[15px] font-semibold text-[#1B1B26] dark:text-white">{name} Troot</Text>
            </View>
          </View>
          <Press
            onPress={onCart}
            accessibilityRole="button"
            accessibilityLabel="Basket"
            className="h-10 w-10 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]"
          >
            <Icon name="shopping-cart" size="md" color="#1B1B26" />
          </Press>
        </View>

        {/* centered ask state */}
        <View className="flex-1 items-center justify-center px-8">
          <Mount className="items-center gap-4">
            <LumioBot size={64} />
            <View className="items-center">
              <Text className="text-[26px] font-bold tracking-tight text-[#1B1B26] dark:text-white">Need anything?</Text>
              <Text className="mt-2.5 text-center text-[13.5px] leading-relaxed text-muted-foreground">
                Lumio finds exactly what{"\n"}you need—faster and easier than ever.
              </Text>
            </View>
          </Mount>

          <Mount delay={70} className="mt-8 w-full">
            <Press
              onPress={() => {
                haptics.medium();
                setAsked((a) => !a);
              }}
              accessibilityRole="button"
              accessibilityLabel={asked ? "Ask again" : "Ask the assistant"}
              className="flex-row items-center rounded-full bg-white p-2 pl-4 shadow-sm dark:bg-[#1A1A20]"
            >
              <Icon name="camera" size="md" color="#1B1B26" />
              <View className="flex-1 px-3">
                <Text className="text-[15px] text-muted-foreground">
                  {asked ? "Best mothers day gift…" : "Ask Anything…"}
                </Text>
              </View>
              <View className="h-11 w-11 items-center justify-center">
                <Press
                  onPress={() => haptics.light()}
                  accessibilityRole="button"
                  accessibilityLabel="Voice input"
                  className="h-11 w-11 items-center justify-center rounded-full bg-[#1B1B26]"
                >
                  <Icon name="mic" size="md" color="#FFFFFF" />
                </Press>
              </View>
            </Press>
          </Mount>

          {asked && (
            <Mount delay={0} className="mt-6 w-full">
              <View className="flex-row gap-2.5">
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="package" size="lg" color="#65A30D" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Silk scarf</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$42</Text>
                </View>
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="heart" size="lg" color="#E04747" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Rose candle</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$18</Text>
                </View>
                <View className="w-24 overflow-hidden rounded-2xl bg-white p-2 dark:bg-[#1A1A20]">
                  <View className="h-16 items-center justify-center rounded-xl bg-[#F4F5F9]">
                    <Icon name="sparkles" size="lg" color="#E8862D" />
                  </View>
                  <Text className="mt-1.5 text-[10.5px] font-semibold text-[#1B1B26] dark:text-white" numberOfLines={1}>Gold bracelet</Text>
                  <Text className="text-[10.5px] text-muted-foreground">$88</Text>
                </View>
              </View>
              <Text className="mt-2 text-center text-[12px] text-muted-foreground">
                3 picks for mom — tap one to ask more
              </Text>
            </Mount>
          )}

          <Mount delay={120} className="mt-4 flex-row flex-wrap justify-center gap-2.5">
            {CHIPS.map((c) => (
              <Press
                key={c.label}
                onPress={() => haptics.selection()}
                accessibilityRole="button"
                className="flex-row items-center gap-1.5 rounded-full bg-white px-3.5 py-2 dark:bg-[#1A1A20]"
              >
                <Icon name={c.icon} size="sm" color={c.color} />
                <Text className="text-[12.5px] font-medium text-[#1B1B26]/80 dark:text-white/80">{c.label}</Text>
              </Press>
            ))}
          </Mount>
        </View>
      </SafeAreaView>
      <ShopNav />
    </View>
  );
}
ShopAssistantScreen.displayName = "ShopAssistantScreen";
```

Screen: https://lumioui.dev/screens/ecommerce-shop-assistant