create-proto 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@sherizan/proto-cli": "^0.1.7",
+    "@sherizan/proto-cli": "^0.1.8",
     "fs-extra": "^11.2.0",
     "qrcode-terminal": "^0.12.0",
     "validate-npm-package-name": "^5.0.1"

package/template/CLAUDE.md

@@ -11,12 +11,12 @@ You're the design tool inside a Proto project. The designer prompts you in plain
 **Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
 
 - `expo-router/unstable-native-tabs` — native `UITabBar`
-- `expo-router` `Stack` with `headerLargeTitle: true` + `headerTransparent: true` — native large-title nav bar
+- `expo-router` `Stack` with `headerLargeTitle: true` + `title` set per route — native large-title nav bar. Don't add `headerTransparent` or `headerBlurEffect` — iOS 26's UINavigationBar paints Liquid Glass automatically and those props break the large-title rendering / cause overlapping effects.
 - `expo-symbols` `SymbolView` — SF Symbol icons
 - `@expo/ui/swift-ui` — `Button`, `Toggle`, `Form`, `Section`, etc.
 - `expo-glass-effect` `GlassView` — Liquid Glass surfaces
 
-**Proto 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.
+**Proto 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.
 
 **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; the primitives are starting points, not constraints.
 

package/template/DESIGN.md

@@ -26,8 +26,7 @@ iOS system font with dynamic type defaults. Override per-size below if you need
 xs 4 · sm 8 · md 16 · lg 24 · xl 32
 
 ### Surface
-- iOS 26+: Apple Liquid Glass via `expo-glass-effect`
-- iOS < 26 + Android: system blur via `expo-blur`
+Apple Liquid Glass via `expo-glass-effect` (iOS 26+ native material). On older iOS it falls back to a plain surface — Proto targets iOS 26.
 
 (Add your own tokens below as you describe what you want. Claude rewrites this file as the design system evolves.)
 

package/template/app/_layout.tsx

@@ -2,15 +2,14 @@ import { Stack } from 'expo-router';
 
 export default function RootLayout() {
   return (
-    <Stack
-      screenOptions={{
-        headerLargeTitle: true,
-        headerTransparent: true,
-        headerBlurEffect: 'systemChromeMaterial',
-        headerLargeTitleShadowVisible: false,
-      }}
-    >
-      <Stack.Screen name="index" options={{ title: 'Proto' }} />
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Proto',
+          headerLargeTitle: true,
+        }}
+      />
     </Stack>
   );
 }

package/template/components/proto/Card.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
-import { BlurView } from 'expo-blur';
-import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+import { GlassView } from 'expo-glass-effect';
 import type { ReactNode } from 'react';
 import { useTheme } from './useTheme';
 
@@ -10,40 +9,33 @@ export type CardProps = {
   children?: ReactNode;
 };
 
+/**
+ * Card surface.
+ *
+ * glass={true}: Apple Liquid Glass via expo-glass-effect's GlassView. On
+ * iOS 26+ this paints the real native material that refracts content behind
+ * it. On older iOS GlassView falls back to a plain View — no third-party
+ * blur. Proto targets iOS 26 and only uses Apple's native material.
+ *
+ * Plain (no glass): opaque surface with theme tokens.
+ */
 export function Card({ glass = false, padding, children }: CardProps) {
   const theme = useTheme();
   const pad = padding ?? theme.space.md;
 
   if (glass) {
-    if (isLiquidGlassAvailable()) {
-      return (
-        <GlassView
-          style={{
-            borderRadius: theme.radius.card,
-            borderWidth: 1,
-            borderColor: theme.border.default,
-            padding: pad,
-            overflow: 'hidden',
-          }}
-        >
-          {children}
-        </GlassView>
-      );
-    }
     return (
-      <View
+      <GlassView
         style={{
           borderRadius: theme.radius.card,
-          overflow: 'hidden',
           borderWidth: 1,
           borderColor: theme.border.default,
-          backgroundColor: theme.surface.card,
+          padding: pad,
+          overflow: 'hidden',
         }}
       >
-        <BlurView intensity={theme.blur.card} tint="light" style={{ padding: pad }}>
-          {children}
-        </BlurView>
-      </View>
+        {children}
+      </GlassView>
     );
   }
 

package/template/components/proto/Screen.tsx

@@ -8,30 +8,42 @@ export type ScreenProps = {
   children?: ReactNode;
 };
 
+/**
+ * Screen wrapper for iOS 26+.
+ *
+ * Scrollable (default): the ScrollView is the top-level element so the native
+ * UINavigationBar can track it for large-title scroll behavior — the big
+ * title shrinks to a compact inline title as content scrolls up. iOS's
+ * automatic content insets handle the transparent nav bar and home indicator.
+ *
+ * Non-scrollable: SafeAreaView guards bottom + side edges (no scroll to track).
+ *
+ * Background lives on the outermost element so it covers bounce / inset areas.
+ * For Liquid Glass surfaces inside (cards, sheets), use Card with glass={true}
+ * — it wraps expo-glass-effect's GlassView, iOS 26's native material.
+ */
 export function Screen({ scrollable = true, children }: ScreenProps) {
   const theme = useTheme();
-  const Body = scrollable ? ScrollView : View;
+  const padding = theme.space.md;
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        style={{ flex: 1, backgroundColor: theme.surface.primary }}
+        contentContainerStyle={{ padding, gap: padding }}
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
   return (
-    <View style={{ flex: 1, backgroundColor: theme.surface.primary }}>
-      <SafeAreaView style={{ flex: 1 }} edges={['bottom', 'left', 'right']}>
-        <Body
-          style={{ flex: 1 }}
-          contentContainerStyle={
-            scrollable
-              ? { padding: theme.space.md, gap: theme.space.md }
-              : undefined
-          }
-          contentInsetAdjustmentBehavior={scrollable ? 'automatic' : undefined}
-        >
-          {scrollable ? (
-            children
-          ) : (
-            <View style={{ flex: 1, padding: theme.space.md, gap: theme.space.md }}>
-              {children}
-            </View>
-          )}
-        </Body>
-      </SafeAreaView>
-    </View>
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: theme.surface.primary }}
+      edges={['bottom', 'left', 'right']}
+    >
+      <View style={{ flex: 1, padding, gap: padding }}>{children}</View>
+    </SafeAreaView>
   );
 }

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: 'rgba(255, 255, 255, 0.6)',
+    card: '#f3f5f8',
     nav: 'rgba(255, 255, 255, 0.82)',
   },
   text: {
@@ -19,8 +19,8 @@ export const liquidGlass: Theme = {
     modal: 60,
   },
   border: {
-    default: 'rgba(255, 255, 255, 0.4)',
-    strong: 'rgba(255, 255, 255, 0.7)',
+    default: 'rgba(0, 0, 0, 0.08)',
+    strong: 'rgba(0, 0, 0, 0.16)',
   },
   radius: {
     card: 22,

package/template/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@expo/ui": "55.0.17",
     "expo": "~55.0.26",
-    "expo-blur": "~55.0.14",
+    "expo-clipboard": "~8.0.7",
     "expo-glass-effect": "~55.0.11",
     "expo-haptics": "~55.0.14",
     "expo-router": "~55.0.16",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@sherizan/proto-cli": "^0.1.7",
+    "@sherizan/proto-cli": "^0.1.8",
     "@types/react": "~19.2.15",
     "babel-preset-expo": "~55.0.22",
     "typescript": "^5.9.2"

package/template/screens/Home.tsx

@@ -1,4 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { Pressable } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -20,6 +23,32 @@ const STEPS = [
   },
 ];
 
+function TutorialCard({ step }: { step: (typeof STEPS)[number] }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await Clipboard.setStringAsync(step.prompt);
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  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>
+    </Card>
+  );
+}
+
 export default function Home() {
   const opacity = useSharedValue(0);
   const translateY = useSharedValue(12);
@@ -36,13 +65,13 @@ export default function Home() {
 
   return (
     <Screen scrollable>
-      <Stack gap={24} padding={20}>
+      <Stack gap={24}>
         <Animated.View style={heroStyle}>
           <Card glass padding={24}>
             <Stack gap={8}>
-              <Text size="title">You're in.</Text>
+              <Text size="headline">You're in.</Text>
               <Text size="body" color="secondary">
-                Try these prompts in Claude Code in Auto mode (press Shift+Tab).
+                {`In a terminal: cd {{APP_NAME}} && claude. Paste a prompt below.`}
               </Text>
             </Stack>
           </Card>
@@ -50,17 +79,7 @@ export default function Home() {
 
         <Stack gap={12}>
           {STEPS.map((step) => (
-            <Card key={step.n} padding={20}>
-              <Stack gap={10}>
-                <Row gap={10} align="center">
-                  <Text size="headline" color="accent">{step.n}.</Text>
-                  <Text size="headline">{step.title}</Text>
-                </Row>
-                <Text size="body" color="accent" style={{ fontFamily: 'Menlo' }}>
-                  {step.prompt}
-                </Text>
-              </Stack>
-            </Card>
+            <TutorialCard key={step.n} step={step} />
           ))}
         </Stack>