create-proto 0.6.0 → 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.6.0",
+  "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",

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,14 +119,11 @@ 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.
 
-## Two fidelity tiers — local vs shared
-
-Everything here runs at full fidelity on the designer's device. But when a prototype is **shared**, it renders from a lightweight description (a manifest) inside a tiny native viewer — so a shared prototype can only show what that viewer already contains. Two tiers, on purpose:
+## Sharing your prototype
 
-- **Shared fidelity** maps cleanly to the core building blocks — `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Divider`, `Modal` — with interactions limited to: go to another screen, go back, flip a toggle, open/close a modal. Prefer these for screens the designer will share.
-- **Local-only fidelity** is everything richer: gestures, `motion`/`gestures`/`canvas`/`svg`/`lottie`, live data fetching, anything with custom logic. Great on-device; it just won't appear in a shared link.
+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.
 
-You don't have to limit yourself — build what the designer asks for. Just know that the more a screen leans on local-only fidelity, the less of it survives into a shared prototype. When in doubt, keep shared-bound screens close to the core building blocks and their simple interactions.
+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
 

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';
 }