create-better-t-stack 2.14.4 → 2.15.0

package/templates/frontend/native/unistyles/app/(drawer)/index.tsx.hbs

@@ -28,56 +28,79 @@ export default function Home() {
 
   return (
     <Container>
-      <ScrollView contentContainerStyle={styles.pageContainer}>
-        <Text style={styles.headerTitle}>BETTER T STACK</Text>
+      <ScrollView
+        contentContainerStyle={styles.container}
+        showsVerticalScrollIndicator={false}
+      >
+        <Text className="font-mono text-foreground text-3xl font-bold mb-4">
+			BETTER T STACK
+		</Text>
+        <View style={styles.statusCard}>
+          <View style={styles.statusHeader}>
+            <Text style={styles.statusTitle}>System Status</Text>
+            <View style={styles.statusBadge}>
+              <Text style={styles.statusBadgeText}>LIVE</Text>
+            </View>
+          </View>
 
-        <View style={styles.apiStatusCard}>
-          <Text style={styles.cardTitle}>API Status</Text>
           {{#if (eq backend "convex")}}
-          <View style={styles.apiStatusRow}>
+          <View style={styles.statusRow}>
             <View
               style={[
-                styles.statusIndicatorDot,
+                styles.statusDot,
                 healthCheck === "OK"
-                  ? styles.statusIndicatorGreen
-                  : styles.statusIndicatorRed,
+                  ? styles.statusDotSuccess
+                  : styles.statusDotWarning,
               ]}
             />
-            <Text style={styles.statusText}>
-              {healthCheck === undefined
-                ? "Checking..."
-                : healthCheck === "OK"
-                  ? "Connected"
-                  : "Error"}
-            </Text>
+            <View style={styles.statusContent}>
+              <Text style={styles.statusLabel}>Convex</Text>
+              <Text style={styles.statusDescription}>
+                {healthCheck === undefined
+                  ? "Checking connection..."
+                  : healthCheck === "OK"
+                    ? "All systems operational"
+                    : "Service unavailable"}
+              </Text>
+            </View>
           </View>
           {{else}}
             {{#unless (eq api "none")}}
-            <View style={styles.apiStatusRow}>
+            <View style={styles.statusRow}>
               <View
                 style={[
-                  styles.statusIndicatorDot,
+                  styles.statusDot,
                   healthCheck.data
-                    ? styles.statusIndicatorGreen
-                    : styles.statusIndicatorRed,
+                    ? styles.statusDotSuccess
+                    : styles.statusDotWarning,
                 ]}
               />
-              <Text style={styles.statusText}>
-                {{#if (eq api "orpc")}}
-                {healthCheck.isLoading
-                  ? "Checking..."
-                  : healthCheck.data
-                    ? "Connected"
-                    : "Disconnected"}
-                {{/if}}
-                {{#if (eq api "trpc")}}
-                {healthCheck.isLoading
-                  ? "Checking..."
-                  : healthCheck.data
-                    ? "Connected"
-                    : "Disconnected"}
-                {{/if}}
-              </Text>
+              <View style={styles.statusContent}>
+                <Text style={styles.statusLabel}>
+                  {{#if (eq api "orpc")}}
+                  ORPC
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  TRPC
+                  {{/if}}
+                </Text>
+                <Text style={styles.statusDescription}>
+                  {{#if (eq api "orpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                </Text>
+              </View>
             </View>
             {{/unless}}
           {{/if}}
@@ -88,44 +111,84 @@ export default function Home() {
 }
 
 const styles = StyleSheet.create((theme) => ({
-  pageContainer: {
-    paddingHorizontal: 8,
+  container: {
+    paddingHorizontal: theme.spacing.md,
+  },
+  heroSection: {
+    paddingVertical: theme.spacing.xl,
   },
-  headerTitle: {
-    color: theme?.colors?.typography,
-    fontSize: 30,
+  heroTitle: {
+    fontSize: theme.fontSize["4xl"],
     fontWeight: "bold",
-    marginBottom: 16,
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing.sm,
   },
-  apiStatusCard: {
-    marginBottom: 24,
-    borderRadius: 8,
+  heroSubtitle: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.mutedForeground,
+    lineHeight: 28,
+  },
+  statusCard: {
+    backgroundColor: theme.colors.card,
     borderWidth: 1,
-    borderColor: theme?.colors?.border,
-    padding: 16,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.xl,
+    padding: theme.spacing.lg,
+    marginBottom: theme.spacing.lg,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  statusHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing.md,
+  },
+  statusTitle: {
+    fontSize: theme.fontSize.lg,
+    fontWeight: "600",
+    color: theme.colors.cardForeground,
+  },
+  statusBadge: {
+    backgroundColor: theme.colors.secondary,
+    paddingHorizontal: theme.spacing.sm + 4,
+    paddingVertical: theme.spacing.xs,
+    borderRadius: 9999,
   },
-  cardTitle: {
-    marginBottom: 12,
+  statusBadgeText: {
+    fontSize: theme.fontSize.xs,
     fontWeight: "500",
-    color: theme?.colors?.typography,
+    color: theme.colors.secondaryForeground,
   },
-  apiStatusRow: {
+  statusRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: theme.spacing.sm + 4,
   },
-  statusIndicatorDot: {
+  statusDot: {
     height: 12,
     width: 12,
-    borderRadius: 9999,
+    borderRadius: 6,
   },
-  statusIndicatorGreen: {
+  statusDotSuccess: {
     backgroundColor: theme.colors.success,
   },
-  statusIndicatorRed: {
-    backgroundColor: theme.colors.destructive,
+  statusDotWarning: {
+    backgroundColor: "#F59E0B",
   },
-  statusText: {
-    color: theme?.colors?.typography,
+  statusContent: {
+    flex: 1,
+  },
+  statusLabel: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: "500",
+    color: theme.colors.cardForeground,
   },
+  statusDescription: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.mutedForeground,
+  }
 }));

package/templates/frontend/native/unistyles/app/+not-found.tsx

@@ -1,34 +1,65 @@
+import { Container } from "@/components/container";
 import { Link, Stack } from "expo-router";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 
-import { Container } from "@/components/container";
-
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: "Oops!" }} />
       <Container>
-        <Text style={styles.title}>This screen doesn't exist.</Text>
-        <Link href="/" style={styles.link}>
-          <Text style={styles.linkText}>Go to home screen!</Text>
-        </Link>
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <Text style={styles.emoji}>🤔</Text>
+            <Text style={styles.title}>Page Not Found</Text>
+            <Text style={styles.description}>
+              Sorry, the page you're looking for doesn't exist.
+            </Text>
+            <Link href="/" style={styles.button}>
+              <Text style={styles.buttonText}>Go to Home</Text>
+            </Link>
+          </View>
+        </View>
       </Container>
     </>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing.lg,
+  },
+  content: {
+    alignItems: "center",
+  },
+  emoji: {
+    fontSize: 64,
+    marginBottom: theme.spacing.md,
+  },
   title: {
-    fontSize: 20,
+    fontSize: theme.fontSize["2xl"],
     fontWeight: "bold",
-    color: theme.colors.typography,
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing.sm,
+    textAlign: "center",
+  },
+  description: {
+    color: theme.colors.mutedForeground,
+    textAlign: "center",
+    marginBottom: theme.spacing.xl,
+    maxWidth: 280,
   },
-  link: {
-    marginTop: 16,
-    paddingVertical: 16,
+  button: {
+    backgroundColor: `${theme.colors.primary}1A`, // 10% opacity
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.sm + 4,
+    borderRadius: theme.borderRadius.lg,
   },
-  linkText: {
-    fontSize: 14,
+  buttonText: {
+    color: theme.colors.primary,
+    fontWeight: "500",
   },
 }));

package/templates/frontend/native/unistyles/app/_layout.tsx.hbs

@@ -1,3 +1,6 @@
+{{#if (includes examples "ai")}}
+import "@/polyfills";
+{{/if}}
 {{#if (eq api "trpc")}}
 import { queryClient } from "@/utils/trpc";
 {{/if}}
@@ -39,9 +42,9 @@ export default function RootLayout() {
               backgroundColor: theme.colors.background,
             },
             headerTitleStyle: {
-              color: theme.colors.typography,
+              color: theme.colors.foreground,
             },
-            headerTintColor: theme.colors.typography,
+            headerTintColor: theme.colors.foreground,
           }}
         >
           <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
@@ -62,9 +65,9 @@ export default function RootLayout() {
               backgroundColor: theme.colors.background,
             },
             headerTitleStyle: {
-              color: theme.colors.typography,
+              color: theme.colors.foreground,
             },
-            headerTintColor: theme.colors.typography,
+            headerTintColor: theme.colors.foreground,
           }}
         >
           <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
@@ -83,9 +86,9 @@ export default function RootLayout() {
               backgroundColor: theme.colors.background,
             },
             headerTitleStyle: {
-              color: theme.colors.typography,
+              color: theme.colors.foreground,
             },
-            headerTintColor: theme.colors.typography,
+            headerTintColor: theme.colors.foreground,
           }}
         >
           <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />

package/templates/frontend/native/unistyles/app/modal.tsx

@@ -1,29 +1,33 @@
 import { Container } from "@/components/container";
-import { StatusBar } from "expo-status-bar";
-import { Platform, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 
 export default function Modal() {
   return (
-    <>
-      <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
-      <Container>
-        <View style={styles.container}>
-          <Text style={styles.text}>Model</Text>
+    <Container>
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Modal</Text>
         </View>
-      </Container>
-    </>
+      </View>
+    </Container>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  text: {
-    color: theme.colors.typography,
-  },
   container: {
     flex: 1,
-    paddingBottom: 100,
-    justifyContent: "center",
+    padding: theme.spacing.lg,
+  },
+  header: {
+    flexDirection: "row",
     alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing.xl,
+  },
+  title: {
+    fontSize: theme.fontSize["2xl"],
+    fontWeight: "bold",
+    color: theme.colors.foreground,
   },
 }));

package/templates/frontend/native/unistyles/components/container.tsx

@@ -1,20 +1,15 @@
 import React from "react";
-import { View } from "react-native";
+import { SafeAreaView } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 
 export const Container = ({ children }: { children: React.ReactNode }) => {
-  return <View style={styles.container}>{children}</View>;
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
-    paddingBottom: rt.insets.bottom,
     backgroundColor: theme.colors.background,
-    transform: [
-      {
-        translateY: rt.insets.ime * -1,
-      },
-    ],
+    paddingBottom: rt.insets.bottom,
   },
 }));

package/templates/frontend/native/unistyles/components/header-button.tsx

@@ -1,31 +1,36 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { forwardRef } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { forwardRef } from "react";
+import { Pressable } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 
-export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
-  ({ onPress }, ref) => {
-    return (
-      <Pressable onPress={onPress}>
-        {({ pressed }) => (
-          <FontAwesome
-            name="info-circle"
-            size={25}
-            color="gray"
-            style={[
-              styles.headerRight,
-              {
-                opacity: pressed ? 0.5 : 1,
-              },
-            ]}
-          />
-        )}
-      </Pressable>
-    );
-  }
-);
+export const HeaderButton = forwardRef<
+  typeof Pressable,
+  { onPress?: () => void }
+>(({ onPress }, ref) => {
+  return (
+    <Pressable onPress={onPress} style={styles.button}>
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={20}
+          color={styles.icon.color}
+          style={{
+            opacity: pressed ? 0.7 : 1,
+          }}
+        />
+      )}
+    </Pressable>
+  );
+});
 
-export const styles = StyleSheet.create({
-  headerRight: {
-    marginRight: 15,
+const styles = StyleSheet.create((theme) => ({
+  button: {
+    padding: theme.spacing.sm,
+    marginRight: theme.spacing.sm,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: `${theme.colors.secondary}80`, // 50% opacity
   },
-});
+  icon: {
+    color: theme.colors.secondaryForeground,
+  },
+}));

package/templates/frontend/native/unistyles/components/tabbar-icon.tsx

@@ -1,15 +1,8 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { StyleSheet } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 export const TabBarIcon = (props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
+  name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) => {
-  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+  return <FontAwesome size={24} style={{ marginBottom: -3 }} {...props} />;
 };
-
-export const styles = StyleSheet.create({
-  tabBarIcon: {
-    marginBottom: -3,
-  },
-});

package/templates/frontend/native/unistyles/{package.json → package.json.hbs}

@@ -14,6 +14,10 @@
     "@react-navigation/bottom-tabs": "^7.0.5",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.3",
+    {{#if (includes examples "ai")}}
+    "@stardazed/streams-text-encoding": "^1.0.2",
+    "@ungap/structured-clone": "^1.3.0",
+    {{/if}}
     "@tanstack/react-form": "^1.0.5",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "expo": "^53.0.8",
@@ -34,7 +38,7 @@
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.10.0",
-    "react-native-unistyles": "3.0.0-rc.3",
+    "react-native-unistyles": "^3.0.0-rc.4",
     "react-native-web": "^0.20.0"
   },
   "devDependencies": {

package/templates/frontend/native/unistyles/theme.ts

@@ -1,35 +1,98 @@
 const sharedColors = {
   success: "#22C55E",
-  destructive: "#DC2626",
-  border: "#D1D5DB",
+  destructive: "#EF4444",
+  warning: "#F59E0B",
+  info: "#3B82F6",
 } as const;
 
 export const lightTheme = {
   colors: {
     ...sharedColors,
-    typography: "#000000",
-    background: "#ffffff",
-    primary: "#3B82F6",
+    typography: "hsl(222.2 84% 4.9%)",
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(222.2 84% 4.9%)",
+    card: "hsl(0 0% 100%)",
+    cardForeground: "hsl(222.2 84% 4.9%)",
+    primary: "hsl(221.2 83.2% 53.3%)",
+    primaryForeground: "hsl(210 40% 98%)",
+    secondary: "hsl(210 40% 96%)",
+    secondaryForeground: "hsl(222.2 84% 4.9%)",
+    muted: "hsl(210 40% 96%)",
+    mutedForeground: "hsl(215.4 16.3% 46.9%)",
+    accent: "hsl(210 40% 96%)",
+    accentForeground: "hsl(222.2 84% 4.9%)",
+    border: "hsl(214.3 31.8% 91.4%)",
+    input: "hsl(214.3 31.8% 91.4%)",
+    ring: "hsl(221.2 83.2% 53.3%)",
   },
-  margins: {
-    sm: 2,
-    md: 4,
-    lg: 8,
-    xl: 12,
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
   },
 } as const;
 
 export const darkTheme = {
   colors: {
     ...sharedColors,
-    typography: "#ffffff",
-    background: "#000000",
-    primary: "#60A5FA",
-  },
-  margins: {
-    sm: 2,
-    md: 4,
-    lg: 8,
-    xl: 12,
+    typography: "hsl(210 40% 98%)",
+    background: "hsl(222.2 84% 4.9%)",
+    foreground: "hsl(210 40% 98%)",
+    card: "hsl(222.2 84% 4.9%)",
+    cardForeground: "hsl(210 40% 98%)",
+    primary: "hsl(217.2 91.2% 59.8%)",
+    primaryForeground: "hsl(222.2 84% 4.9%)",
+    secondary: "hsl(217.2 32.6% 17.5%)",
+    secondaryForeground: "hsl(210 40% 98%)",
+    muted: "hsl(217.2 32.6% 17.5%)",
+    mutedForeground: "hsl(215 20.2% 65.1%)",
+    accent: "hsl(217.2 32.6% 17.5%)",
+    accentForeground: "hsl(210 40% 98%)",
+    border: "hsl(217.2 32.6% 17.5%)",
+    input: "hsl(217.2 32.6% 17.5%)",
+    ring: "hsl(224.3 76.3% 94.1%)",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
   },
 } as const;

package/templates/frontend/native/unistyles/unistyles.ts

@@ -1,7 +1,7 @@
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from "react-native-unistyles";
 
-import { breakpoints } from './breakpoints';
-import { lightTheme, darkTheme } from './theme';
+import { breakpoints } from "./breakpoints";
+import { darkTheme, lightTheme } from "./theme";
 
 type AppBreakpoints = typeof breakpoints;
 
@@ -10,7 +10,7 @@ type AppThemes = {
   dark: typeof darkTheme;
 };
 
-declare module 'react-native-unistyles' {
+declare module "react-native-unistyles" {
   export interface UnistylesBreakpoints extends AppBreakpoints {}
   export interface UnistylesThemes extends AppThemes {}
 }