create-proto 0.7.6 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "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/assets/lottie/logo-prototo.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":480,"w":480,"meta":{"g":"@lottiefiles/creator@1.92.0"},"layers":[{"ty":4,"nm":"light-bot-R","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":18},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":27},{"s":[100,100],"t":34}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[432,368]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":18},{"s":[100],"t":24}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.941,0.894,0.91]},"r":1,"o":{"a":0,"k":100}}],"ind":1},{"ty":4,"nm":"light-bot-L","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":18},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":27},{"s":[100,100],"t":34}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[48,368]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":18},{"s":[100],"t":24}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.941,0.894,0.91]},"r":1,"o":{"a":0,"k":100}}],"ind":2},{"ty":4,"nm":"light-R-mid","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":13},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":22},{"s":[100,100],"t":29}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[336,272]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":13},{"s":[100],"t":19}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.941,0.894,0.91]},"r":1,"o":{"a":0,"k":100}}],"ind":3},{"ty":4,"nm":"light-L-mid","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":13},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":22},{"s":[100,100],"t":29}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[144,272]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":13},{"s":[100],"t":19}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.941,0.894,0.91]},"r":1,"o":{"a":0,"k":100}}],"ind":4},{"ty":4,"nm":"pink-far-R","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":10},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":19},{"s":[100,100],"t":26}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[432,272]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":10},{"s":[100],"t":16}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.91,0.416,0.612]},"r":1,"o":{"a":0,"k":100}}],"ind":5},{"ty":4,"nm":"pink-far-L","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":10},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":19},{"s":[100,100],"t":26}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[48,272]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":10},{"s":[100],"t":16}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.91,0.416,0.612]},"r":1,"o":{"a":0,"k":100}}],"ind":6},{"ty":4,"nm":"light-center","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":7},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":16},{"s":[100,100],"t":23}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[240,176]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":7},{"s":[100],"t":13}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.941,0.894,0.91]},"r":1,"o":{"a":0,"k":100}}],"ind":7},{"ty":4,"nm":"pink-R-mid","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":4},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":13},{"s":[100,100],"t":20}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[336,176]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":4},{"s":[100],"t":10}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.91,0.416,0.612]},"r":1,"o":{"a":0,"k":100}}],"ind":8},{"ty":4,"nm":"pink-L-mid","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":4},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":13},{"s":[100,100],"t":20}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[144,176]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":4},{"s":[100],"t":10}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.91,0.416,0.612]},"r":1,"o":{"a":0,"k":100}}],"ind":9},{"ty":4,"nm":"tip","sr":1,"st":0,"op":120,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":0},{"o":{"x":0.34,"y":1.56},"i":{"x":0.64,"y":1},"s":[115,115],"t":9},{"s":[100,100],"t":16}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[240,80]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[100],"t":6}]}},"shapes":[{"ty":"rc","nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[96,96]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[0.91,0.416,0.612]},"r":1,"o":{"a":0,"k":100}}],"ind":10}],"v":"5.7.0","fr":60,"op":120,"ip":0,"assets":[]}

package/template/screens/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { Pressable } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import * as Haptics from 'expo-haptics';
@@ -6,29 +6,56 @@ import {
   Animated,
   useSharedValue,
   useAnimatedStyle,
+  withDelay,
   withTiming,
   Easing,
 } from '../components/proto/gestures';
-import { Screen, Stack, Row, Text, Card, Divider } from '../components/proto';
+import { Screen, Stack, Text, Card, Divider, Lottie } from '../components/proto';
 
-const STEPS = [
+// Prototo Desktop sets EXPO_PUBLIC_PROTO_DESKTOP=1 when it runs `proto start`
+// (Metro inlines it at bundle time). In the desktop the terminal sits beside
+// this preview with Claude already running, and the simulator clipboard never
+// reaches the Mac, so the copy and the Copy affordance both change.
+const IN_DESKTOP = process.env.EXPO_PUBLIC_PROTO_DESKTOP === '1';
+
+const EXAMPLES = [
+  {
+    label: 'A whole screen',
+    prompt: 'Make me a music player home screen',
+  },
   {
-    n: '1',
-    title: 'Change background color',
-    prompt: 'Fill background to light teal covering safe area top and bottom.',
+    label: 'Native feel',
+    prompt: 'Add a liquid glass tab bar with Home, Search, Profile',
   },
   {
-    n: '2',
-    title: 'Add a native component',
-    prompt: 'add a liquid glass bottom tab bar with Home, Explore, About tabs',
+    label: 'A quick change',
+    prompt: 'Make the background sunset orange',
   },
 ];
 
-function TutorialCard({ step }: { step: (typeof STEPS)[number] }) {
+function Enter({ delay, children }: { delay: number; children: ReactNode }) {
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(12);
+
+  useEffect(() => {
+    const timing = { duration: 500, easing: Easing.out(Easing.quad) };
+    opacity.value = withDelay(delay, withTiming(1, timing));
+    translateY.value = withDelay(delay, withTiming(0, timing));
+  }, [delay, opacity, translateY]);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return <Animated.View style={style}>{children}</Animated.View>;
+}
+
+function ExampleCard({ example }: { example: (typeof EXAMPLES)[number] }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
-    await Clipboard.setStringAsync(step.prompt);
+    await Clipboard.setStringAsync(example.prompt);
     await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
@@ -36,59 +63,66 @@ function TutorialCard({ step }: { step: (typeof STEPS)[number] }) {
 
   return (
     <Card padding={20}>
-      <Stack gap={10}>
-        <Row gap={10} align="center">
-          <Text size="headline">{step.n}.</Text>
-          <Text size="headline">{step.title}</Text>
-        </Row>
-        <Text size="body" color="secondary">{step.prompt}</Text>
-        <Pressable onPress={handleCopy} style={{ alignSelf: 'flex-end', marginTop: 4 }}>
-          <Text size="caption" color="accent">{copied ? 'Copied' : 'Copy'}</Text>
-        </Pressable>
+      <Stack gap={6}>
+        <Text size="label" color="accent">
+          {example.label}
+        </Text>
+        <Text size="headline">{`"${example.prompt}"`}</Text>
+        {IN_DESKTOP ? null : (
+          <Pressable onPress={handleCopy} style={{ alignSelf: 'flex-end', marginTop: 4 }}>
+            <Text size="caption" color="accent">
+              {copied ? 'Copied' : 'Copy'}
+            </Text>
+          </Pressable>
+        )}
       </Stack>
     </Card>
   );
 }
 
 export default function Home() {
-  const opacity = useSharedValue(0);
-  const translateY = useSharedValue(12);
-
-  useEffect(() => {
-    opacity.value = withTiming(1, { duration: 600, easing: Easing.out(Easing.quad) });
-    translateY.value = withTiming(0, { duration: 600, easing: Easing.out(Easing.quad) });
-  }, [opacity, translateY]);
-
-  const heroStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ translateY: translateY.value }],
-  }));
-
   return (
     <Screen scrollable>
       <Stack gap={24}>
-        <Animated.View style={heroStyle}>
+        <Enter delay={0}>
+          <Lottie
+            source={require('../assets/lottie/logo-prototo.json')}
+            style={{ width: 56, height: 56, alignSelf: 'center' }}
+          />
+        </Enter>
+
+        <Enter delay={80}>
           <Card glass padding={24}>
             <Stack gap={8}>
               <Text size="headline">You're in.</Text>
               <Text size="body" color="secondary">
-                {`In a terminal: cd {{APP_NAME}} && claude. Paste a prompt below.`}
+                {IN_DESKTOP
+                  ? 'Type your first prompt in the terminal beside this preview, and watch it appear here.'
+                  : `In a terminal: cd {{APP_NAME}} && claude. Then paste a prompt below.`}
               </Text>
             </Stack>
           </Card>
-        </Animated.View>
-
-        <Stack gap={12}>
-          {STEPS.map((step) => (
-            <TutorialCard key={step.n} step={step} />
-          ))}
-        </Stack>
+        </Enter>
 
-        <Divider />
+        <Enter delay={160}>
+          <Stack gap={12}>
+            <Text size="label" color="secondary">
+              Try one of these
+            </Text>
+            {EXAMPLES.map((example) => (
+              <ExampleCard key={example.label} example={example} />
+            ))}
+          </Stack>
+        </Enter>
 
-        <Text size="caption" color="secondary">
-          Each prompt builds on the last. Prototo reads DESIGN.md before every change.
-        </Text>
+        <Enter delay={240}>
+          <Stack gap={16}>
+            <Divider />
+            <Text size="caption" color="secondary">
+              Each prompt builds on the last. Prototo reads DESIGN.md before every change.
+            </Text>
+          </Stack>
+        </Enter>
       </Stack>
     </Screen>
   );