create-proto 0.7.11 → 0.8.0

package/README.md

@@ -17,7 +17,7 @@ No canvas. No IDE. No engineering concepts.
 ## What this command does
 
 1. Scaffolds the project: `DESIGN.md` (design system source-of-truth), `CLAUDE.md` (Claude Code instructions for Prototo-aware generation), Prototo component library, a starter Welcome screen
-2. Installs dependencies (Expo SDK 55, React Native, Reanimated 4, `@expo/ui`, `expo-glass-effect`, `expo-clipboard`)
+2. Installs dependencies (Expo SDK 57, React Native, Reanimated 4, `@expo/ui`, `expo-glass-effect`, `expo-clipboard`)
 3. Auto-launches Metro and opens the iOS Simulator
 
 Then in another terminal:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.7.11",
+  "version": "0.8.0",
   "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",
@@ -45,7 +45,7 @@
     "fs-extra": "^11.2.0",
     "qrcode-terminal": "^0.12.0",
     "validate-npm-package-name": "^5.0.1",
-    "@sherizan/proto-cli": "^0.7.16"
+    "@sherizan/proto-cli": "^0.8.9"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/template/AGENTS.md

@@ -45,6 +45,8 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
 
 Never import `react-native-ease`, `react-native-reanimated`, `lottie-react-native`, `@shopify/react-native-skia`, or `react-native-svg` directly in a screen — always route through the `../components/proto/<subpath>` module above. If `motion` can't express what's needed, fall back to `gestures`.
 
+**Device sensors** — `expo-sensors` (`Accelerometer`, `Gyroscope`, `DeviceMotion`, `Magnetometer`, `Barometer`, `Pedometer`) for prototypes that react to tilting, shaking, or steps. Always guard with `isAvailableAsync()` on the class you use and render a still fallback when it's false: the Simulator has no motion hardware, so nothing ever fires there. Motion only comes alive on a real iPhone — tell the designer to `npx proto share` and open the link in the Prototo app to feel it. Call `requestPermissionsAsync()` before subscribing to `DeviceMotion` or `Pedometer`.
+
 **Custom** — when none of the above fit, write the component you need with React Native. Put shared ones in `/components/shared/`. The designer's vision wins; primitives are starting points, not constraints.
 
 ## Adding a library
@@ -169,7 +171,7 @@ When the designer says "use real data", follow this shape so every screen handle
 
 Run `proto share` to publish the prototype and get a permanent `prototo.app/p/<token>` link. Recipients open it on iPhone with the free **Prototo** app (the link page walks them through installing it) and the prototype runs **natively on their device** — real gestures, haptics, and Liquid Glass, with `motion`/`gestures`/`canvas`/`svg`/`lottie`, live data, and custom logic exactly as they run on the designer's Simulator. There's nothing to dumb down — build whatever the designer asks for and it all shares.
 
-Two limits worth knowing: the prototype must be built on the **current Prototo** (opening an older share tells the recipient to ask the designer to publish it again — re-scaffold if prompted), and it can only use native modules Prototo bundles — `npx proto add` tells you when a package needs native code that isn't available.
+Two limits worth knowing: the prototype must be built on the **current Prototo runtime** — when `npx proto start` or `npx proto share` says the project is on an older runtime, run `npx proto upgrade` (it updates Prototo and moves the project to the current runtime; never run Expo or npm commands for this yourself), then `npx proto share` again so the existing link opens on the new Prototo app — and it can only use native modules Prototo bundles — `npx proto add` tells you when a package needs native code that isn't available.
 
 ## When modifying
 

package/template/components/proto/touch-dots.tsx

@@ -1,17 +1,99 @@
 // Proto-managed. Draws a round dot wherever you touch WHILE `proto record` is
 // running, so taps are visible in the recorded video (the recorder captures
-// only what the app itself renders). Dev-only twice over: everything is gated
-// on __DEV__, and published shares are production bundles where __DEV__ is
-// false — stakeholders can never see it. Safe to leave alone.
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { Animated, View, type GestureResponderEvent } from 'react-native';
+// only what the app itself renders). It also answers Prototo Desktop's
+// point-and-edit: a tapped preview element is resolved to the screen file and
+// line that renders it. And its screen-flow view: a clicked screen opens here. Dev-only twice over: everything is gated on __DEV__,
+// and published shares are production bundles where __DEV__ is false —
+// stakeholders can never see it. Safe to leave alone.
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { Animated, Dimensions, type GestureResponderEvent, View } from 'react-native';
 
-const POLL_MS = 1500;
+const POLL_MS = 500;
 const DOT = 36;
 // A quick tap must linger long enough to be readable in the video.
 const FADE_MS = 350;
 
 type Dot = { id: number; x: number; y: number };
+type InspectRequest = { id: number; x: number; y: number };
+type NavigateRequest = { id: number; path: string };
+
+// Flow view: open the route the desktop asked for, then confirm. expo-router is
+// required at run time (every Prototo project has it; this file's own package
+// doesn't), so a missing router is just a "no".
+function navigateTo(req: NavigateRequest) {
+  let ok = false;
+  try {
+    const { router } = require('expo-router') as { router: { navigate: (href: string) => void } };
+    router.navigate(req.path);
+    ok = true;
+  } catch {
+    // unknown route or no router — the desktop already pasted the file
+  }
+  fetch('http://127.0.0.1:3001/navigate/result', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: req.id, ok }),
+  }).catch(() => {});
+}
+type DebugFiber = { _debugStack?: { stack?: unknown }; _debugOwner?: DebugFiber | null };
+
+// Point-and-edit. React keeps, in dev, the JSX call site of every element on
+// its fiber (`_debugStack`); walking the owner chain from the tapped view gives
+// the designer's screen file first. `proto start` symbolicates the stacks. The
+// renderer's inspector is reached through the DevTools hook — the same thing
+// React Native's own element inspector does, without the deprecated deep import.
+type InspectorData = { hierarchy?: unknown[]; closestInstance?: DebugFiber | null };
+type Renderer = {
+  rendererConfig?: {
+    getInspectorDataForViewAtPoint?: (
+      view: View | null,
+      x: number,
+      y: number,
+      cb: (data: InspectorData) => boolean,
+    ) => void;
+  };
+};
+
+function inspectAt(view: View | null, req: InspectRequest) {
+  let answered = false;
+  const post = (stacks: string[]) => {
+    if (answered) return;
+    answered = true;
+    fetch('http://127.0.0.1:3001/inspect/result', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: req.id, stacks }),
+    }).catch(() => {});
+  };
+  try {
+    const hook = (
+      globalThis as { __REACT_DEVTOOLS_GLOBAL_HOOK__?: { renderers: Map<number, Renderer> } }
+    ).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const { width, height } = Dimensions.get('window');
+    for (const renderer of hook?.renderers.values() ?? []) {
+      renderer.rendererConfig?.getInspectorDataForViewAtPoint?.(
+        view,
+        req.x * width,
+        req.y * height,
+        (data) => {
+          if (!data.hierarchy?.length) return false;
+          const stacks: string[] = [];
+          let fiber: DebugFiber | null | undefined = data.closestInstance;
+          for (let i = 0; fiber && i < 12; i++) {
+            const stack = fiber._debugStack?.stack;
+            if (typeof stack === 'string') stacks.push(stack);
+            fiber = fiber._debugOwner;
+          }
+          post(stacks);
+          return true;
+        },
+      );
+    }
+  } catch {
+    // no renderer / not a dev build — the CLI times out and the desktop
+    // falls back to a label-only reference
+  }
+}
 type FadingDot = { key: number; x: number; y: number; opacity: Animated.Value };
 
 // Brand-pink fill + white rim: reads on light AND dark content (a white or
@@ -32,6 +114,9 @@ export default function TouchDots({ children }: { children: ReactNode }) {
   const [fading, setFading] = useState<FadingDot[]>([]);
   const dotsRef = useRef<Dot[]>([]);
   const fadeSeq = useRef(0);
+  const rootRef = useRef<View>(null);
+  const inspected = useRef(0);
+  const navigated = useRef(0);
 
   // Poll `proto start`'s local server for the record flag (the Simulator
   // shares the host loopback). Any failure just means "not recording".
@@ -41,8 +126,21 @@ export default function TouchDots({ children }: { children: ReactNode }) {
     const tick = async () => {
       try {
         const res = await fetch('http://127.0.0.1:3001/recording');
-        const body = (await res.json()) as { recording?: boolean };
-        if (alive) setRecording(body.recording === true);
+        const body = (await res.json()) as {
+          recording?: boolean;
+          inspect?: InspectRequest;
+          navigate?: NavigateRequest;
+        };
+        if (!alive) return;
+        setRecording(body.recording === true);
+        if (body.inspect && body.inspect.id !== inspected.current) {
+          inspected.current = body.inspect.id;
+          inspectAt(rootRef.current, body.inspect);
+        }
+        if (body.navigate && body.navigate.id !== navigated.current) {
+          navigated.current = body.navigate.id;
+          navigateTo(body.navigate);
+        }
       } catch {
         if (alive) setRecording(false);
       }
@@ -98,6 +196,7 @@ export default function TouchDots({ children }: { children: ReactNode }) {
     // Plain touch events bubble to this wrapper no matter which child is the
     // responder, so observing them here never steals the prototype's gestures.
     <View
+      ref={rootRef}
       style={{ flex: 1 }}
       onTouchStart={recording ? onMove : undefined}
       onTouchMove={recording ? onMove : undefined}

package/template/package.json

@@ -9,49 +9,50 @@
     "proto": "proto"
   },
   "dependencies": {
-    "@expo/ui": "~56.0.16",
+    "@expo/ui": "~57.0.18",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@shopify/flash-list": "2.0.2",
     "@shopify/react-native-skia": "2.6.2",
-    "expo": "~56.0.0",
-    "expo-asset": "~56.0.16",
-    "expo-audio": "~56.0.11",
-    "expo-camera": "~56.0.7",
-    "expo-clipboard": "~56.0.4",
-    "expo-constants": "~56.0.17",
-    "expo-dev-client": "~56.0.19",
-    "expo-font": "~56.0.5",
-    "expo-glass-effect": "~56.0.4",
-    "expo-haptics": "~56.0.3",
-    "expo-image": "~56.0.10",
-    "expo-image-picker": "~56.0.16",
-    "expo-linear-gradient": "~56.0.4",
-    "expo-linking": "~56.0.13",
-    "expo-location": "~56.0.16",
-    "expo-maps": "~56.0.6",
-    "expo-router": "~56.2.9",
-    "expo-screen-orientation": "~56.0.5",
-    "expo-status-bar": "~56.0.4",
-    "expo-symbols": "~56.0.6",
-    "expo-video": "~56.1.2",
+    "expo": "~57.0.0",
+    "expo-asset": "~57.0.17",
+    "expo-audio": "~57.0.5",
+    "expo-camera": "~57.0.5",
+    "expo-clipboard": "~57.0.2",
+    "expo-constants": "~57.0.18",
+    "expo-dev-client": "~57.0.19",
+    "expo-font": "~57.0.4",
+    "expo-glass-effect": "~57.0.3",
+    "expo-haptics": "~57.0.3",
+    "expo-image": "~57.0.5",
+    "expo-image-picker": "~57.0.18",
+    "expo-linear-gradient": "~57.0.2",
+    "expo-linking": "~57.0.10",
+    "expo-location": "~57.0.18",
+    "expo-maps": "~57.0.3",
+    "expo-router": "~57.0.21",
+    "expo-screen-orientation": "~57.0.2",
+    "expo-sensors": "~57.0.3",
+    "expo-status-bar": "~57.0.1",
+    "expo-symbols": "~57.0.3",
+    "expo-video": "~57.0.4",
     "lottie-react-native": "~7.3.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.85.3",
+    "react-native": "0.86.3",
     "react-native-ease": "^0.7.2",
-    "react-native-gesture-handler": "~2.31.1",
-    "react-native-reanimated": "4.3.1",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "4.25.2",
+    "react-native-screens": "4.26.2",
     "react-native-svg": "15.15.4",
     "react-native-webview": "13.16.1",
-    "react-native-worklets": "0.8.3"
+    "react-native-worklets": "0.10.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@sherizan/proto-cli": "^0.7.0",
+    "@sherizan/proto-cli": "^0.8.0",
     "@types/react": "~19.2.15",
-    "babel-preset-expo": "~56.0.0",
+    "babel-preset-expo": "~57.0.0",
     "react-native-svg-transformer": "^1.5.0",
     "typescript": "~6.0.3"
   }