create-proto 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Describe a screen, watch your prototype run natively on iPhone — designer-first, paired with Claude Code.",
   "type": "module",
   "license": "MIT",

package/template/CLAUDE.md

@@ -16,7 +16,7 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
 - `@expo/ui/swift-ui` — `Button`, `Toggle`, `Form`, `Section`, etc.
 - `expo-glass-effect` `GlassView` — Liquid Glass surfaces
 
-**Prototo primitives** in `/components/proto` — small set of themed fallbacks: `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Divider`, `Modal`. Read the file when you need the API. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
+**Prototo primitives** in `/components/proto` — small set of themed fallbacks: `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Slider`, `Stepper`, `Divider`, `Modal`. Read the file when you need the API. `Toggle`, `Slider`, and `Stepper` render real native SwiftUI (`@expo/ui`) on iOS, tinted with the app accent. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
 
 **Prototo motion + graphics** — four subpath modules in `/components/proto` cover animation and drawing. Pick by what the prompt actually asks for:
 
@@ -78,14 +78,18 @@ Do this especially after layout, color, typography, or spacing changes. If `prot
 
 ## Proto MCP tools
 
-When the designer runs `proto start`, a local MCP server (`prototo`) connects automatically — no setup. It gives you two tools that close the feedback loop, so you can see what you built instead of asking the designer to relay it.
+When the designer runs `proto start`, a local MCP server (`prototo`) connects automatically — no setup. It gives you three tools that close the feedback loop, so you can see what you built instead of asking the designer to relay it.
+
+**At the start of any fix session** (the designer says something is broken, red, or not working):
+
+1. Call `get_metro_errors` first — it returns the current build failures and runtime crashes from the running prototype, with the raw error text and the screen involved. Don't ask the designer to paste or describe an error before checking it.
 
 **After every screen write:**
 
 1. Call `compile_check` with the screen name — it type-checks the project and reports any problems in plain language. Fix anything it surfaces before moving on.
 2. Call `get_simulator_screenshot` — it returns what the prototype actually renders right now. Inspect it for the same defects as above.
 
-Never assume a screen rendered correctly — check the screenshot. Never ask the designer to describe an error you can catch with `compile_check`. If a tool says the Simulator isn't running, the designer needs to run `proto start` first.
+Never assume a screen rendered correctly — check the screenshot. Never ask the designer to describe an error you can catch with `get_metro_errors` or `compile_check`. If a tool says the Simulator isn't running (or Metro reports clean while the designer still sees an error), the designer needs to run `proto start` first.
 
 (`get_simulator_screenshot` is the automated form of the `proto shot` loop above — prefer the tool when it's available.)
 

package/template/components/proto/Button.tsx

@@ -1,4 +1,5 @@
-import { Pressable, type ViewStyle } from 'react-native';
+import { Pressable, View, type TextStyle, type ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import * as Haptics from 'expo-haptics';
 import { useTheme, useAccent } from './useTheme';
@@ -10,9 +11,21 @@ export type ButtonProps = {
   label: string;
   variant?: ButtonVariant;
   onPress?: () => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
 };
 
-export function Button({ label, variant = 'primary', onPress }: ButtonProps) {
+export function Button({
+  label,
+  variant = 'primary',
+  onPress,
+  disabled = false,
+  icon,
+  style,
+  textStyle,
+}: ButtonProps) {
   const theme = useTheme();
   const accent = useAccent();
   const scale = useSharedValue(1);
@@ -22,9 +35,11 @@ export function Button({ label, variant = 'primary', onPress }: ButtonProps) {
   }));
 
   const handlePressIn = () => {
+    if (disabled) return;
     scale.value = withTiming(0.96, { duration: 80 });
   };
   const handlePressOut = () => {
+    if (disabled) return;
     scale.value = withTiming(1, { duration: 120 });
   };
   const handlePress = () => {
@@ -47,14 +62,18 @@ export function Button({ label, variant = 'primary', onPress }: ButtonProps) {
     paddingHorizontal: theme.space.md,
     alignItems: 'center',
     justifyContent: 'center',
+    opacity: disabled ? 0.5 : 1,
   };
 
   return (
-    <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={handlePress}>
-      <Animated.View style={[baseStyle, animated]}>
-        <Text size="label" style={{ color: fg }}>
-          {label}
-        </Text>
+    <Pressable disabled={disabled} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={handlePress}>
+      <Animated.View style={[baseStyle, animated, style]}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.space.sm }}>
+          {icon}
+          <Text size="label" style={[{ color: fg }, textStyle]}>
+            {label}
+          </Text>
+        </View>
       </Animated.View>
     </Pressable>
   );

package/template/components/proto/Card.tsx

@@ -44,8 +44,6 @@ export function Card({ glass = false, padding, children }: CardProps) {
       style={{
         backgroundColor: theme.surface.card,
         borderRadius: theme.radius.card,
-        borderWidth: 1,
-        borderColor: theme.border.default,
         padding: pad,
       }}
     >

package/template/components/proto/Divider.tsx

@@ -1,15 +1,28 @@
 import { View } from 'react-native';
 import { useTheme } from './useTheme';
+import { Text } from './Text';
 
-export function Divider() {
+export type DividerProps = {
+  label?: string;
+};
+
+export function Divider({ label }: DividerProps) {
   const theme = useTheme();
+
+  if (!label) {
+    return (
+      <View style={{ height: 1, width: '100%', backgroundColor: theme.border.default }} />
+    );
+  }
+
+  const line = <View style={{ flex: 1, height: 1, backgroundColor: theme.border.default }} />;
   return (
-    <View
-      style={{
-        height: 1,
-        width: '100%',
-        backgroundColor: theme.border.default,
-      }}
-    />
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.space.sm }}>
+      {line}
+      <Text size="caption" color="secondary">
+        {label}
+      </Text>
+      {line}
+    </View>
   );
 }

package/template/components/proto/Input.tsx

@@ -0,0 +1,27 @@
+import { TextInput, type TextInputProps } from 'react-native';
+import { useTheme } from './useTheme';
+
+export type InputProps = TextInputProps;
+
+export function Input({ style, ...props }: InputProps) {
+  const theme = useTheme();
+  return (
+    <TextInput
+      placeholderTextColor={theme.text.tertiary}
+      style={[
+        {
+          backgroundColor: theme.surface.secondary,
+          color: theme.text.primary,
+          borderColor: theme.border.default,
+          borderWidth: 1,
+          borderRadius: theme.radius.button,
+          paddingHorizontal: theme.space.md,
+          height: 52,
+          fontSize: 17,
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/template/components/proto/Lottie.tsx

@@ -0,0 +1,12 @@
+import LottieView, { type LottieViewProps } from 'lottie-react-native';
+
+export type LottieProps = {
+  source: LottieViewProps['source'];
+  autoPlay?: boolean;
+  loop?: boolean;
+  style?: LottieViewProps['style'];
+};
+
+export function Lottie({ source, autoPlay = true, loop = true, style }: LottieProps) {
+  return <LottieView source={source} autoPlay={autoPlay} loop={loop} style={style} />;
+}

package/template/components/proto/Screen.tsx

@@ -1,4 +1,4 @@
-import { ScrollView, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import type { ReactNode } from 'react';
 import { useTheme } from './useTheme';
@@ -41,9 +41,14 @@ export function Screen({ scrollable = true, children }: ScreenProps) {
   return (
     <SafeAreaView
       style={{ flex: 1, backgroundColor: theme.surface.primary }}
-      edges={['bottom', 'left', 'right']}
+      edges={['top', 'bottom', 'left', 'right']}
     >
-      <View style={{ flex: 1, padding, gap: padding }}>{children}</View>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <View style={{ flex: 1, padding, gap: padding }}>{children}</View>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }

package/template/components/proto/Slider.tsx

@@ -0,0 +1,55 @@
+import { Platform, View } from 'react-native';
+import { Host, Slider as SwiftUISlider } from '@expo/ui/swift-ui';
+import { tint } from '@expo/ui/swift-ui/modifiers';
+import { useAccent, useTheme } from './useTheme';
+import { Text } from './Text';
+
+export type SliderProps = {
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+};
+
+export function Slider({ value, onChange, min = 0, max = 1, step, label }: SliderProps) {
+  const theme = useTheme();
+  const accent = useAccent();
+
+  const control =
+    Platform.OS === 'ios' ? (
+      <Host style={{ width: '100%', height: 44 }}>
+        <SwiftUISlider
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onValueChange={(next) => onChange?.(next)}
+          modifiers={[tint(accent)]}
+        />
+      </Host>
+    ) : (
+      // ponytail: iOS-first product; Android renders a read-only track (no core RN slider, and
+      // adding @react-native-community/slider for a path that never ships isn't worth it).
+      <View style={{ height: 4, borderRadius: 2, backgroundColor: theme.border.default }}>
+        <View
+          style={{
+            height: 4,
+            borderRadius: 2,
+            backgroundColor: accent,
+            width: `${((value - min) / (max - min)) * 100}%`,
+          }}
+        />
+      </View>
+    );
+
+  if (!label) return control;
+
+  return (
+    <View style={{ gap: theme.space.xs }}>
+      <Text size="label">{label}</Text>
+      {control}
+    </View>
+  );
+}

package/template/components/proto/Stepper.tsx

@@ -0,0 +1,52 @@
+import { Platform, Pressable, View } from 'react-native';
+import { Host, Stepper as SwiftUIStepper } from '@expo/ui/swift-ui';
+import { useTheme } from './useTheme';
+import { Text } from './Text';
+
+export type StepperProps = {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+export function Stepper({ label, value, onChange, min, max, step = 1 }: StepperProps) {
+  const theme = useTheme();
+
+  if (Platform.OS === 'ios') {
+    return (
+      <Host matchContents>
+        <SwiftUIStepper
+          label={label}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onValueChange={(next) => onChange(next)}
+        />
+      </Host>
+    );
+  }
+
+  // ponytail: iOS-first product; minimal functional RN fallback for Android (no core RN stepper).
+  const clamp = (n: number) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Text size="body">{label}</Text>
+      <View style={{ flexDirection: 'row', gap: theme.space.md }}>
+        <Pressable onPress={() => onChange(clamp(value - step))}>
+          <Text size="headline">−</Text>
+        </Pressable>
+        <Pressable onPress={() => onChange(clamp(value + step))}>
+          <Text size="headline">＋</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

package/template/components/proto/index.ts

@@ -5,7 +5,11 @@ export { Text, type TextProps, type TextSize, type TextColor } from './Text';
 export { Card, type CardProps } from './Card';
 export { Button, type ButtonProps, type ButtonVariant } from './Button';
 export { Toggle, type ToggleProps } from './Toggle';
-export { Divider } from './Divider';
+export { Slider, type SliderProps } from './Slider';
+export { Stepper, type StepperProps } from './Stepper';
+export { Divider, type DividerProps } from './Divider';
+export { Input, type InputProps } from './Input';
+export { Lottie, type LottieProps } from './Lottie';
 export { Modal, type ModalProps } from './Modal';
 export { useTheme, useAccent } from './useTheme';
 export { ProtoConfigProvider, useProtoConfig } from './ProtoConfigContext';

package/template/components/proto/tokens/liquidGlass.ts

@@ -4,7 +4,7 @@ export const liquidGlass: Theme = {
   surface: {
     primary: 'rgba(255, 255, 255, 0.72)',
     secondary: 'rgba(255, 255, 255, 0.48)',
-    card: '#f3f5f8',
+    card: '#F2F2F7',
     nav: 'rgba(255, 255, 255, 0.82)',
   },
   text: {