finishing: Mvp/kopi maker #5

AGENTS.md

@@ -0,0 +1,28 @@
+## Runtime & Framework
+- Expo SDK `~54.0.25`, React `19.1.0`, React Native `0.81.5`, web via `react-native-web ~0.21.0`.
+- `expo-router ~6.0.15` entry (`main: expo-router/entry`), React Navigation 7.x stack libs present.
+
+## Routing & Navigation
+- Root stack in `app/_layout.tsx`; tabs group in `app/(tabs)/_layout.tsx` uses custom bottom bar.
+- Tabs: Home, Favorites, Kopi (center FAB-style), Orders, Me. Custom tab bar has rounded background, inset, and lifted Kopi button sized via constants at top of the file.
+- Modal example removed (deleted `app/modal.tsx` and stack registration).
+
+## Styling
+- NativeWind `^4.2.1` with Babel `jsxImportSource: "nativewind"` + `nativewind/babel`; Metro wrapped with `withNativeWind(config, { input: "./global.css" })`.
+- Tailwind `^3.4.18`; `tailwind.config.js` scans `./App.tsx`, `./app/**/*`, `./components/**/*`. Colors extended to coffee palette via CSS variables in `global.css` (currently only light-mode values).
+
+## State & Domain
+- Zustand store `stores/kopiMakerStore.ts`: holds kopi selection (`milkiness`, `sweetness`, `strength`, `temperature`), setters/reset, derived `baseName/displayName/phrase` via `utils/kopiInfer`.
+- Domain types `types/kopi.ts`: option groups, option lists, `KopiSelection`, default selection. Temperature replaces earlier “state” naming.
+- `utils/kopiInfer.ts`: maps selection to kopi naming parts.
+
+## UI Pages
+- Tab screens (`app/(tabs)/*.tsx`) are placeholders using Tailwind color tokens; Home/Kopi/Favorites/Orders/Me minimal content.
+- Template components `hello-wave`, `parallax-scroll-view`, `external-link` removed. `haptic-tab.tsx` remains for tab haptics; `themed-text`/`themed-view` only used in deleted modal.
+
+## Tooling
+- TypeScript `~5.9.2`, strict with `@/*` alias. ESLint `^9.25.0` + `eslint-config-expo ~10.0.0`; `prettier-plugin-tailwindcss ^0.5.14`.
+- Metro customized only for NativeWind; Babel preset is `babel-preset-expo`.
+
+## Platform Config
+- app.json: slug/name `kopi-shop`, scheme `kopishop`, portrait, automatic UI mode, static web output.

app/(tabs)/kopi.tsx

@@ -1,9 +1,114 @@
-import { Text, View } from 'react-native';
+import { KopiCupPreview, OptionSelector } from "@/components/kopi";
+import { useKopiMakerStore } from "@/stores/kopiMakerStore";
+import { Colors } from "@/constants/theme";
+import { useColorScheme } from "@/hooks/use-color-scheme";
+import {
+  MILKINESS_OPTIONS,
+  STRENGTH_OPTIONS,
+  SWEETNESS_OPTIONS,
+  TEMPERATURE_OPTIONS,
+} from "@/types/kopi";
+import { Dimensions, Pressable, ScrollView, Text, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+const { width } = Dimensions.get("window");
+const CURVE_HEIGHT = 80;
+const CURVE_DEPTH = 50;
+const SVG_H = CURVE_HEIGHT + CURVE_DEPTH;
 
 export default function KopiScreen() {
+  const milkiness = useKopiMakerStore((s) => s.milkiness);
+  const sweetness = useKopiMakerStore((s) => s.sweetness);
+  const strength = useKopiMakerStore((s) => s.strength);
+  const temperature = useKopiMakerStore((s) => s.temperature);
+  const setMilkiness = useKopiMakerStore((s) => s.setMilkiness);
+  const setSweetness = useKopiMakerStore((s) => s.setSweetness);
+  const setStrength = useKopiMakerStore((s) => s.setStrength);
+  const setTemperature = useKopiMakerStore((s) => s.setTemperature);
+  const phrase = useKopiMakerStore((s) => s.phrase());
+
+  const colorScheme = useColorScheme() ?? "light";
+  const topBg = Colors[colorScheme].background;
+
   return (
-    <View className="flex-1 justify-center items-center bg-milk-coffee">
-      <Text className="text-xl font-bold text-dark-coffee">Kopi Screen</Text>
+    <View className="flex-1 bg-warm-beige">
+      {/* Top Section: Preview (40%) */}
+      <View style={{ flex: 0.4, zIndex: 2, backgroundColor: topBg }}>
+        <KopiCupPreview name={phrase} />
+
+        {/* 微笑曲线分界 */}
+
+        <View
+          pointerEvents="none"
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            // 关键：往下压 CURVE_DEPTH，让“曲线边”贴在分界处
+            bottom: -CURVE_DEPTH,
+            zIndex: 999,
+            elevation: 999, // 安卓需要
+          }}
+        >
+          <Svg width={width} height={SVG_H} viewBox={`0 0 ${width} ${SVG_H}`}>
+            <Path
+              d={`
+        M 0 0
+        L ${width} 0
+        L ${width} ${CURVE_HEIGHT}
+        Q ${width / 2} ${CURVE_HEIGHT + CURVE_DEPTH} 0 ${CURVE_HEIGHT}
+        Z
+      `}
+              fill={topBg}
+            />
+          </Svg>
+        </View>
+      </View>
+
+      {/* Bottom Section: Controls (60%) */}
+      <View className="flex-[0.6] bg-warm-beige pt-6" style={{ zIndex: 1 }}>
+        <ScrollView
+          className="flex-1"
+          contentContainerStyle={{ paddingBottom: 120, paddingHorizontal: 0 }}
+        >
+          <OptionSelector
+            label="Milk"
+            options={MILKINESS_OPTIONS}
+            value={milkiness}
+            onChange={setMilkiness}
+          />
+          <OptionSelector
+            label="Sugar"
+            options={SWEETNESS_OPTIONS}
+            value={sweetness}
+            onChange={setSweetness}
+          />
+          <OptionSelector
+            label="Strength"
+            options={STRENGTH_OPTIONS}
+            value={strength}
+            onChange={setStrength}
+          />
+          <OptionSelector
+            label="Temperature"
+            options={TEMPERATURE_OPTIONS}
+            value={temperature}
+            onChange={setTemperature}
+          />
+        </ScrollView>
+      </View>
+
+      {/* Brew Button */}
+      <View className="absolute bottom-8 left-0 right-0 px-6">
+        <Pressable
+          className="bg-dark-coffee py-4 rounded-2xl items-center shadow-lg active:opacity-90"
+          onPress={() => console.log("Brewing:", phrase)}
+        >
+          <Text className="text-white text-xl font-bold tracking-wider">
+            BREW
+          </Text>
+        </Pressable>
+      </View>
     </View>
   );
 }

app/_layout.tsx

@@ -16,7 +16,6 @@ export default function RootLayout() {
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
       </Stack>
       <StatusBar style="auto" />
     </ThemeProvider>

components/kopi/KopiCupPreview.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Dimensions, Text, View } from 'react-native';
+
+interface KopiCupPreviewProps {
+  name: string;
+}
+
+const { width } = Dimensions.get('window');
+const curveRadius = width; // big radius to form a smooth smile at the bottom edge
+
+export const KopiCupPreview = ({ name }: KopiCupPreviewProps) => {
+  return (
+    <View
+      className="w-full h-full bg-cream items-center justify-center overflow-hidden"
+      style={{
+        borderBottomLeftRadius: curveRadius,
+        borderBottomRightRadius: curveRadius,
+      }}>
+      <View className="items-center mb-6 px-6">
+        <Text className="text-5xl font-bold text-dark-coffee text-center leading-tight">
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};

components/kopi/OptionSelector.tsx

@@ -0,0 +1,50 @@
+import type { OptionItem } from '@/types/kopi';
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+interface OptionSelectorProps<T extends string> {
+  label: string;
+  options: OptionItem<T>[];
+  value: T;
+  onChange: (value: T) => void;
+}
+
+export const OptionSelector = <T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: OptionSelectorProps<T>) => {
+  return (
+    <View className="mb-6">
+      <Text className="text-lg font-bold text-dark-coffee mb-3 px-4">{label}</Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 10,
+          rowGap: 10,
+          paddingHorizontal: 16,
+        }}>
+        {options.map((option) => {
+          const isSelected = option.code === value;
+          return (
+            <Pressable
+              key={option.code}
+              onPress={() => onChange(option.code)}
+              className={`px-4 py-2 rounded-md border ${
+                isSelected
+                  ? 'bg-dark-coffee border-dark-coffee'
+                  : 'bg-cream border-grey'
+              }`}
+            >
+              <Text className={`text-base font-semibold ${isSelected ? 'text-white' : 'text-dark-coffee'}`}>
+                {option.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};

components/kopi/index.ts

@@ -0,0 +1,2 @@
+export * from './KopiCupPreview';
+export * from './OptionSelector';