create-proto 0.5.2 → 0.6.1

package/dist/messages.js

@@ -9,7 +9,7 @@ export const messages = {
     bootingProto: 'Booting Prototo...',
     nextSteps: (name) => `Keep this terminal running. It auto-refreshes your prototype.\n\nOpen a new terminal and run:\n  cd ${name} && claude\n\nIn Claude, press Shift+Tab to switch to Auto mode.`,
     protoCliNotFound: (name) => `Couldn't find proto-cli. Run manually: cd ${name} && npx proto start`,
-    howToRestart: (name) => `Proto stopped.\nTo restart Proto: cd ${name} && npx proto start\nTo prompt Claude: cd ${name} && claude`,
+    howToRestart: (name) => `Proto stopped.\nTo restart Proto: cd ${name} && npx proto start\nTo share a link: cd ${name} && npx proto share\nTo prompt Claude: cd ${name} && claude`,
     noNetwork: "Couldn't reach the package registry. Check your internet and try again.",
     noPermission: "Don't have permission to write here. Try a different folder.",
     noSpace: 'Out of disk space. Free some up and try again.',

package/dist/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE,CAC5C,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK;IACvF,SAAS,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,gBAAgB,OAAO,GAAG;IAC1D,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,8FAA8F,IAAI,KAAK;IACzG,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAClC,qEAAqE,IAAI,iCAAiC;IAC5G,SAAS,EAAE,4BAA4B;IACvC,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,eAAe,IAAI,mDAAmD;IACxE,YAAY,EAAE,oBAAoB;IAClC,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE,CAC1B,uGAAuG,IAAI,kEAAkE;IAC/K,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,6CAA6C,IAAI,qBAAqB;IACxE,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,wCAAwC,IAAI,6CAA6C,IAAI,YAAY;IAC3G,SAAS,EACP,yEAAyE;IAC3E,YAAY,EACV,8DAA8D;IAChE,OAAO,EAAE,gDAAgD;IACzD,aAAa,EACX,mEAAmE;CACtE,CAAC"}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE,CAC5C,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK;IACvF,SAAS,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,gBAAgB,OAAO,GAAG;IAC1D,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,8FAA8F,IAAI,KAAK;IACzG,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAClC,qEAAqE,IAAI,iCAAiC;IAC5G,SAAS,EAAE,4BAA4B;IACvC,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,eAAe,IAAI,mDAAmD;IACxE,YAAY,EAAE,oBAAoB;IAClC,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE,CAC1B,uGAAuG,IAAI,kEAAkE;IAC/K,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,6CAA6C,IAAI,qBAAqB;IACxE,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,wCAAwC,IAAI,4CAA4C,IAAI,6CAA6C,IAAI,YAAY;IAC3J,SAAS,EACP,yEAAyE;IAC3E,YAAY,EACV,8DAA8D;IAChE,OAAO,EAAE,gDAAgD;IACzD,aAAa,EACX,mEAAmE;CACtE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Designer-first native iOS prototyping environment that pairs with Claude Code.",
   "type": "module",
   "license": "MIT",
@@ -35,14 +35,14 @@
     "LICENSE"
   ],
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@sherizan/proto-cli": "^0.5.0",
+    "@sherizan/proto-cli": "^0.6.0",
     "fs-extra": "^11.2.0",
     "qrcode-terminal": "^0.12.0",
     "validate-npm-package-name": "^5.0.1"

package/template/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "prototo": {
+      "command": "npx",
+      "args": ["proto-mcp"]
+    }
+  }
+}

package/template/CLAUDE.md

@@ -76,6 +76,19 @@ You can't see the Simulator by default, so after any visual change, look at it:
 
 Do this especially after layout, color, typography, or spacing changes. If `proto shot` reports no preview is running, the designer needs to run `proto start` first.
 
+## 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.
+
+**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.
+
+(`get_simulator_screenshot` is the automated form of the `proto shot` loop above — prefer the tool when it's available.)
+
 ## Mock vs real data
 
 When a screen shows placeholder numbers that aren't yet wired to a real source, wrap them in `mock()` from `../components/proto` — `const conditions = mock({ wave: '0.8m' })`. It returns the value unchanged, so nothing breaks; it just makes stubbed data obvious and greppable so fake numbers never ship believing they're real. When you wire the value to a live source (a `fetch`), drop the `mock()` wrapper. (Don't use code comments to mark mock data — generated screens stay comment-free.)
@@ -106,6 +119,12 @@ When the designer says "use real data", follow this shape so every screen handle
 
 **Keyless APIs** (no key, CORS-open, good for prototypes): Open-Meteo (weather/marine/air), REST Countries, Open Library, PokéAPI, Art Institute of Chicago, TheMealDB, Wikipedia REST. Prefer these so "make it real" stays a one-prompt step. If a source needs a key, tell the designer that key goes in `proto.config.js`, nowhere else.
 
+## Sharing your prototype
+
+Run `proto share` to publish the prototype and get a `prototo.app/p/<token>` link. Anyone can open it in a browser — no install — and see the **real prototype running**, streamed live from a cloud iPhone. Full fidelity: gestures, `motion`/`gestures`/`canvas`/`svg`/`lottie`, live data, and custom logic all show up in the shared link exactly as they run on the designer's device. 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** (an older one won't stream — re-scaffold if prompted), and **real-hardware features** (camera, GPS) are simulated on the cloud device rather than reading a real sensor.
+
 ## When modifying
 
 Read the file first, then make precise, targeted edits to the parts that change. Keep edits scoped — don't rewrite a whole file when a few lines change.

package/template/README.md

@@ -5,4 +5,5 @@ Built with Prototo.
 Before running `proto start` on iPhone, install Prototo from the App Store.
 
 Run `proto start` to preview on the iOS Simulator (auto) or your iPhone (scan QR).
+Run `proto share` to get a link anyone can open in their browser, no install needed.
 Run `proto add "describe a screen"` to generate a new screen.

package/template/components/proto/Modal.tsx

@@ -1,4 +1,5 @@
-import { Modal as RNModal, Pressable, View } from 'react-native';
+import { Modal as RNModal, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import type { ReactNode } from 'react';
 import { useTheme } from './useTheme';
 import { Text } from './Text';
@@ -10,34 +11,27 @@ export type ModalProps = {
   children?: ReactNode;
 };
 
+/**
+ * Modal presented as iOS 26's native page sheet (UISheetPresentationController):
+ * native spring-in, backdrop dim, the screen behind receding, and swipe-to-dismiss
+ * — no hand-rolled overlay. onClose fires on both the swipe-dismiss (onRequestClose)
+ * and programmatic close.
+ */
 export function Modal({ title, visible, onClose, children }: ModalProps) {
   const theme = useTheme();
   return (
     <RNModal
       visible={visible}
-      transparent
       animationType="slide"
+      presentationStyle="pageSheet"
       onRequestClose={onClose}
     >
-      <Pressable
-        onPress={onClose}
-        style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.4)' }}
-      >
-        <Pressable
-          onPress={() => {}}
-          style={{
-            marginTop: 'auto',
-            backgroundColor: theme.surface.primary,
-            borderTopLeftRadius: theme.radius.modal,
-            borderTopRightRadius: theme.radius.modal,
-            padding: theme.space.lg,
-            gap: theme.space.md,
-          }}
-        >
+      <SafeAreaView style={{ flex: 1, backgroundColor: theme.surface.primary }} edges={['bottom']}>
+        <View style={{ flex: 1, padding: theme.space.lg, gap: theme.space.md }}>
           <Text size="headline">{title}</Text>
           {children}
-        </Pressable>
-      </Pressable>
+        </View>
+      </SafeAreaView>
     </RNModal>
   );
 }

package/template/components/proto/ProtoConfigContext.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode, createContext, useContext } from 'react';
+import defaultConfigModule from '../../proto.config.js';
+import type { ProtoConfig } from './types';
+
+// The static `proto.config.js` at the project root is the default. Scaffolded
+// projects render screens directly (no provider) and fall back to it, so their
+// behaviour is unchanged. The manifest renderer wraps its tree in
+// <ProtoConfigProvider config={manifest.app}> to drive theme from a manifest.
+const defaultConfig = defaultConfigModule as ProtoConfig;
+
+const ProtoConfigContext = createContext<ProtoConfig | null>(null);
+
+export function ProtoConfigProvider({
+  config,
+  children,
+}: {
+  config?: ProtoConfig;
+  children: ReactNode;
+}) {
+  return (
+    <ProtoConfigContext.Provider value={config ?? defaultConfig}>
+      {children}
+    </ProtoConfigContext.Provider>
+  );
+}
+
+export function useProtoConfig(): ProtoConfig {
+  return useContext(ProtoConfigContext) ?? defaultConfig;
+}

package/template/components/proto/index.ts

@@ -8,6 +8,7 @@ export { Toggle, type ToggleProps } from './Toggle';
 export { Divider } from './Divider';
 export { Modal, type ModalProps } from './Modal';
 export { useTheme, useAccent } from './useTheme';
+export { ProtoConfigProvider, useProtoConfig } from './ProtoConfigContext';
 export { mock } from './mock';
 export { a11y } from './a11y';
 export type { Theme, ThemeName, ThemeOverrides, ProtoConfig } from './types';

package/template/components/proto/useTheme.ts

@@ -1,9 +1,9 @@
 import { useColorScheme } from 'react-native';
-import config from '../../proto.config.js';
+import { useProtoConfig } from './ProtoConfigContext';
 import { base, baseDark } from './tokens/base';
 import { liquidGlass, liquidGlassDark } from './tokens/liquidGlass';
 import { materialYou, materialYouDark } from './tokens/materialYou';
-import type { ProtoConfig, Theme, ThemeName, ThemeOverrides } from './types';
+import type { Theme, ThemeName, ThemeOverrides } from './types';
 
 const lightThemes: Record<ThemeName, Theme> = {
   liquidGlass,
@@ -29,13 +29,14 @@ function mergeTheme(base: Theme, overrides?: ThemeOverrides): Theme {
   };
 }
 
-const cfg = config as ProtoConfig;
-
 // A hook — it reads the system colour scheme so screens re-render when the device
 // switches between light and dark. Call it during render, like any hook.
-// `proto.config.js` can pin a scheme with `colorScheme: 'light' | 'dark'`; the
-// default ('system') follows the device.
+// Config comes from the nearest <ProtoConfigProvider> (the manifest renderer sets
+// one) or, with no provider, the project's static `proto.config.js`. A scheme can
+// be pinned with `colorScheme: 'light' | 'dark'`; the default ('system') follows
+// the device.
 export function useTheme(): Theme {
+  const cfg = useProtoConfig();
   const systemScheme = useColorScheme();
   const preference = cfg.colorScheme ?? 'system';
   const isDark = preference === 'dark' || (preference === 'system' && systemScheme === 'dark');
@@ -47,5 +48,5 @@ export function useTheme(): Theme {
 }
 
 export function useAccent(): string {
-  return cfg.accentColor ?? '#007AFF';
+  return useProtoConfig().accentColor ?? '#007AFF';
 }

package/template/package.json

@@ -9,47 +9,49 @@
     "proto": "proto"
   },
   "dependencies": {
-    "@expo/ui": "55.0.17",
+    "@expo/ui": "~56.0.16",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@shopify/flash-list": "2.0.2",
-    "@shopify/react-native-skia": "2.4.18",
-    "expo": "~55.0.26",
-    "expo-asset": "~55.0.17",
-    "expo-audio": "~55.0.14",
-    "expo-camera": "~55.0.18",
-    "expo-clipboard": "~55.0.13",
-    "expo-dev-client": "~55.0.35",
-    "expo-font": "~55.0.8",
-    "expo-glass-effect": "~55.0.11",
-    "expo-haptics": "~55.0.14",
-    "expo-image": "~55.0.11",
-    "expo-image-picker": "~55.0.20",
-    "expo-linear-gradient": "~55.0.14",
-    "expo-location": "~55.1.10",
-    "expo-maps": "~55.0.19",
-    "expo-router": "~55.0.16",
-    "expo-status-bar": "~55.0.6",
-    "expo-symbols": "~55.0.9",
-    "expo-video": "~55.0.17",
+    "@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-status-bar": "~56.0.4",
+    "expo-symbols": "~56.0.6",
+    "expo-video": "~56.1.2",
     "lottie-react-native": "~7.3.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "react-native": "0.83.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-ease": "^0.7.2",
-    "react-native-gesture-handler": "~2.30.1",
-    "react-native-reanimated": "4.2.1",
-    "react-native-safe-area-context": "5.6.2",
-    "react-native-screens": "4.23.0",
-    "react-native-svg": "15.15.3",
-    "react-native-webview": "13.16.0",
-    "react-native-worklets": "0.7.4"
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-svg": "15.15.4",
+    "react-native-webview": "13.16.1",
+    "react-native-worklets": "0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@sherizan/proto-cli": "^0.5.0",
+    "@sherizan/proto-cli": "^0.6.0",
     "@types/react": "~19.2.15",
-    "babel-preset-expo": "~55.0.22",
+    "babel-preset-expo": "~56.0.0",
     "react-native-svg-transformer": "^1.5.0",
-    "typescript": "^5.9.2"
+    "typescript": "~6.0.3"
   }
 }