create-proto 0.1.0

package/template/components/proto/useTheme.ts

@@ -0,0 +1,35 @@
+import config from '../../proto.config.js';
+import { liquidGlass } from './tokens/liquidGlass';
+import { materialYou } from './tokens/materialYou';
+import type { ProtoConfig, Theme, ThemeName, ThemeOverrides } from './types';
+
+const themes: Record<ThemeName, Theme> = {
+  liquidGlass,
+  materialYou,
+};
+
+function mergeTheme(base: Theme, overrides?: ThemeOverrides): Theme {
+  if (!overrides) return base;
+  return {
+    surface: { ...base.surface, ...overrides.surface },
+    text: { ...base.text, ...overrides.text },
+    blur: { ...base.blur, ...overrides.blur },
+    border: { ...base.border, ...overrides.border },
+    radius: { ...base.radius, ...overrides.radius },
+    space: { ...base.space, ...overrides.space },
+  };
+}
+
+const cfg = config as ProtoConfig;
+
+// Named `use*` for ergonomics but reads module-level config; safe to call outside React.
+export function useTheme(): Theme {
+  const name: ThemeName = cfg.theme ?? 'liquidGlass';
+  const base = themes[name] ?? themes.liquidGlass;
+  return mergeTheme(base, cfg.tokens);
+}
+
+// Named `use*` for ergonomics but reads module-level config; safe to call outside React.
+export function useAccent(): string {
+  return cfg.accentColor ?? '#007AFF';
+}

package/template/metro.config.js

@@ -0,0 +1,5 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = config;

package/template/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "proto": "proto"
+  },
+  "dependencies": {
+    "@expo/ui": "55.0.17",
+    "expo": "~55.0.26",
+    "expo-blur": "~55.0.14",
+    "expo-glass-effect": "~55.0.11",
+    "expo-haptics": "~55.0.14",
+    "expo-router": "~55.0.16",
+    "expo-status-bar": "~55.0.6",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "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-worklets": "0.7.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@sherizan/proto-cli": "^0.1.0",
+    "@types/react": "~19.2.15",
+    "babel-preset-expo": "~55.0.22",
+    "typescript": "^5.9.2"
+  }
+}

package/template/pnpm-workspace.yaml

@@ -0,0 +1 @@
+node-linker: hoisted

package/template/proto.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  name: '{{name}}',
+  theme: 'liquidGlass',
+  accentColor: '#007AFF',
+  screens: { initial: 'Home' },
+};

package/template/screens/Home.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { Screen, Stack, Text, Card, Divider } from '../components/proto';
+
+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 title="Proto" scrollable>
+      <Stack gap={24} padding={20}>
+        <Animated.View style={heroStyle}>
+          <Card glass padding={24}>
+            <Stack gap={12}>
+              <Text size="title">You're in.</Text>
+              <Text size="body" color="secondary">
+                Every change you make appears here instantly — no refresh, no waiting.
+              </Text>
+            </Stack>
+          </Card>
+        </Animated.View>
+
+        <Stack gap={12}>
+          <Text size="headline">Next</Text>
+          <Text size="body">Open a new terminal and run</Text>
+          <Card padding={16}>
+            <Text size="body" color="accent">claude</Text>
+          </Card>
+          <Text size="body">Then describe what you want</Text>
+          <Card padding={16}>
+            <Text size="body" color="accent">
+              Add liquid glass bottom toolbar with placeholder screens
+            </Text>
+          </Card>
+        </Stack>
+
+        <Divider />
+
+        <Text size="caption" color="secondary">
+          Proto reads DESIGN.md before every change.
+        </Text>
+      </Stack>
+    </Screen>
+  );
+}