zelune 0.0.0-stage → 1.5.1

package/src/canvas/types.ts

@@ -0,0 +1,23 @@
+import type { InspectedElement, NavigationEdge, ScreenMetadata } from '../server/astEngine';
+
+export type CanvasMode = 'inspect' | 'interact';
+
+export interface ArtboardPosition {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type ArtboardLayoutMap = Record<string, ArtboardPosition>;
+
+export interface SelectedElementRef {
+  screenId: string;
+  file: string;
+  astPath: string;
+  line: number;
+  col: number;
+  tagName: string;
+}
+
+export type { InspectedElement, NavigationEdge, ScreenMetadata };

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { CanvasApp } from './canvas/CanvasApp';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <CanvasApp />
+  </React.StrictMode>
+);

package/src/runtime/MockNavigationContext.tsx

@@ -0,0 +1,199 @@
+import React, { createContext, useContext, useMemo, useEffect } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+export interface NavigationController {
+  navigate: (targetRoute: string, params?: Record<string, unknown>) => void;
+  goBack: () => void;
+  push: (targetRoute: string, params?: Record<string, unknown>) => void;
+  replace: (targetRoute: string, params?: Record<string, unknown>) => void;
+  back: () => void;
+  setOptions: (options?: Record<string, unknown>) => void;
+  canGoBack: () => boolean;
+}
+
+interface MockNavigationContextValue {
+  currentRoute: string;
+  params: Record<string, unknown>;
+  navigation: NavigationController;
+}
+
+function normalizeNavTarget(raw: string): string {
+  const cleaned = String(raw ?? '')
+    .replace(/^\/+/, '')
+    .replace(/\([^)]+\)\/?/g, '')
+    .replace(/Screen$/, '')
+    .replace(/\/index$/, '');
+  if (!cleaned || cleaned === 'index') return 'Home';
+  if (cleaned.includes('-') || cleaned.includes('/') || cleaned === cleaned.toLowerCase()) {
+    return cleaned
+      .split(/[-_/]/)
+      .filter(Boolean)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('');
+  }
+  return cleaned;
+}
+
+const MockNavigationContext = createContext<MockNavigationContextValue>({
+  currentRoute: 'Home',
+  params: {},
+  navigation: {
+    navigate: () => undefined,
+    goBack: () => undefined,
+    push: () => undefined,
+    replace: () => undefined,
+    back: () => undefined,
+    setOptions: () => undefined,
+    canGoBack: () => true,
+  },
+});
+
+export interface MockNavigationProviderProps {
+  routeName: string;
+  params?: Record<string, unknown>;
+  onNavigate?: (fromScreen: string, toScreen: string, params?: Record<string, unknown>) => void;
+  children: React.ReactNode;
+}
+
+export const MockNavigationProvider: React.FC<MockNavigationProviderProps> = ({
+  routeName,
+  params = {},
+  onNavigate,
+  children,
+}) => {
+  const value = useMemo<MockNavigationContextValue>(() => {
+    const trigger = (targetRoute: string, navParams?: Record<string, unknown>) => {
+      onNavigate?.(routeName, normalizeNavTarget(targetRoute), navParams);
+    };
+    return {
+      currentRoute: routeName,
+      params,
+      navigation: {
+        navigate: trigger,
+        push: trigger,
+        replace: trigger,
+        goBack: () => onNavigate?.(routeName, 'Home'),
+        back: () => onNavigate?.(routeName, 'Home'),
+        setOptions: () => undefined,
+        canGoBack: () => true,
+      },
+    };
+  }, [routeName, params, onNavigate]);
+
+  return (
+    <MockNavigationContext.Provider value={value}>
+      {children}
+    </MockNavigationContext.Provider>
+  );
+};
+
+// React Navigation Shims (@react-navigation/native)
+export function useNavigation(): NavigationController {
+  return useContext(MockNavigationContext).navigation;
+}
+
+export function useRoute(): { key: string; name: string; params: Record<string, unknown> } {
+  const ctx = useContext(MockNavigationContext);
+  return {
+    key: ctx.currentRoute,
+    name: ctx.currentRoute,
+    params: ctx.params,
+  };
+}
+
+export function useFocusEffect(effect: () => void | (() => void)): void {
+  useEffect(() => {
+    return effect();
+  }, [effect]);
+}
+
+export function useIsFocused(): boolean {
+  return true;
+}
+
+export const NavigationContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <>{children}</>
+);
+
+// Expo Router Shims (expo-router)
+export function useRouter(): NavigationController {
+  return useContext(MockNavigationContext).navigation;
+}
+
+export const router: NavigationController = {
+  navigate: () => undefined,
+  push: () => undefined,
+  replace: () => undefined,
+  goBack: () => undefined,
+  back: () => undefined,
+  setOptions: () => undefined,
+  canGoBack: () => true,
+};
+
+export function useLocalSearchParams<T extends Record<string, unknown> = Record<string, string>>(): T {
+  const ctx = useContext(MockNavigationContext);
+  return ctx.params as T;
+}
+
+export function useGlobalSearchParams<T extends Record<string, unknown> = Record<string, string>>(): T {
+  const ctx = useContext(MockNavigationContext);
+  return ctx.params as T;
+}
+
+export function usePathname(): string {
+  const ctx = useContext(MockNavigationContext);
+  return `/${ctx.currentRoute.toLowerCase()}`;
+}
+
+export function useSegments(): string[] {
+  const ctx = useContext(MockNavigationContext);
+  return [ctx.currentRoute.toLowerCase()];
+}
+
+export const Link: React.FC<{
+  href: string | { pathname: string; params?: Record<string, unknown> };
+  asChild?: boolean;
+  children?: React.ReactNode;
+  style?: unknown;
+}> = ({ href, children, style }) => {
+  const nav = useContext(MockNavigationContext).navigation;
+  const target = typeof href === 'string' ? href : href.pathname;
+  return (
+    <TouchableOpacity
+      activeOpacity={0.78}
+      style={style as never}
+      onPress={() => nav.push(target)}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+const NoopLayoutScreen: React.FC<{ options?: unknown }> & {
+  Screen: React.FC<{ name?: string; options?: unknown }>;
+} = ({ children }: { children?: React.ReactNode }) => <>{children}</>;
+NoopLayoutScreen.Screen = () => null;
+
+export const Stack = NoopLayoutScreen;
+export const Tabs = NoopLayoutScreen;
+export const Slot: React.FC<{ children?: React.ReactNode }> = ({ children }) => <>{children}</>;
+
+// React Native Safe Area Context Shims (react-native-safe-area-context)
+export const SafeAreaProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <View style={{ flex: 1 }}>{children}</View>
+);
+
+export const SafeAreaView: React.FC<{
+  children?: React.ReactNode;
+  style?: unknown;
+  edges?: string[];
+}> = ({ children, style }) => (
+  <View style={[{ flex: 1 }, style as never]}>{children}</View>
+);
+
+export function useSafeAreaInsets(): { top: number; right: number; bottom: number; left: number } {
+  return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+
+// Expo Status Bar Shim (expo-status-bar)
+export const StatusBar: React.FC<{ style?: string; hidden?: boolean; backgroundColor?: string }> = () => null;

package/src/runtime/ScreenErrorBoundary.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+interface ScreenErrorBoundaryProps {
+  screenName: string;
+  children: React.ReactNode;
+}
+
+interface ScreenErrorBoundaryState {
+  hasError: boolean;
+  errorMessage: string | null;
+}
+
+export class ScreenErrorBoundary extends React.Component<
+  ScreenErrorBoundaryProps,
+  ScreenErrorBoundaryState
+> {
+  constructor(props: ScreenErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, errorMessage: null };
+  }
+
+  static getDerivedStateFromError(error: unknown): ScreenErrorBoundaryState {
+    return {
+      hasError: true,
+      errorMessage: error instanceof Error ? error.message : String(error),
+    };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            backgroundColor: '#18181B',
+            color: '#FCA5A5',
+            padding: 24,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            gap: 12,
+            fontFamily: 'JetBrains Mono, monospace',
+          }}
+        >
+          <div style={{ fontSize: 13, fontWeight: 700, color: '#F87171' }}>
+            Runtime Error in {this.props.screenName}
+          </div>
+          <div
+            style={{
+              fontSize: 12,
+              lineHeight: 1.5,
+              backgroundColor: '#09090B',
+              padding: 12,
+              borderRadius: 8,
+              border: '1px solid #7F1D1D',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}
+          >
+            {this.state.errorMessage}
+          </div>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false, errorMessage: null })}
+            style={{
+              alignSelf: 'flex-start',
+              padding: '6px 12px',
+              backgroundColor: '#EF4444',
+              color: '#FFFFFF',
+              border: 'none',
+              borderRadius: 6,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Retry Render
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/screens/CheckoutScreen.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useNavigation } from '../runtime/MockNavigationContext';
+
+export default function CheckoutScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <TouchableOpacity
+          activeOpacity={0.78}
+          style={styles.backButton}
+          onPress={() => navigation.navigate('ProductDetail')}
+        >
+          <Text style={styles.backButtonText}>← Spec Sheet</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Dispatch &amp; Settlement</Text>
+      </View>
+
+      <View style={styles.orderCard}>
+        <Text style={styles.sectionHeading}>MANIFEST // ORDER #CH-8841</Text>
+        <View style={styles.itemRow}>
+          <View>
+            <Text style={styles.itemName}>Chronos Studio Pro</Text>
+            <Text style={styles.itemVariant}>Obsidian Anodized · Unit 01</Text>
+          </View>
+          <Text style={styles.itemPrice}>$349.00</Text>
+        </View>
+
+        <View style={styles.divider} />
+
+        <View style={styles.summaryRow}>
+          <Text style={styles.summaryLabel}>Priority Courier Dispatch</Text>
+          <Text style={styles.summaryFree}>INCLUDED</Text>
+        </View>
+        <View style={styles.summaryRow}>
+          <Text style={styles.summaryLabel}>Import &amp; Acoustic Levy</Text>
+          <Text style={styles.summaryValue}>$28.80</Text>
+        </View>
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>Total Settlement</Text>
+          <Text style={styles.totalAmount}>$377.80</Text>
+        </View>
+      </View>
+
+      <View style={styles.paymentCard}>
+        <Text style={styles.sectionHeading}>CRYPTOGRAPHIC AUTHORIZATION</Text>
+        <View style={styles.cardMethodRow}>
+          <View style={styles.cardBrandBadge}>
+            <Text style={styles.cardBrandText}>G-PAY</Text>
+          </View>
+          <View>
+            <Text style={styles.cardNumber}>Hardware Token ·••• 4829</Text>
+            <Text style={styles.cardSub}>Biometric enclave signature ready</Text>
+          </View>
+        </View>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={0.78}
+        style={styles.confirmButton}
+        onPress={() => navigation.navigate('Home')}
+      >
+        <Text style={styles.confirmButtonText}>Authorize $377.80 Settlement</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0A0B0E',
+    padding: 20,
+    justifyContent: 'space-between',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 6,
+  },
+  backButton: {
+    backgroundColor: '#13161E',
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#222836',
+  },
+  backButtonText: {
+    color: '#E2E8F0',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  headerTitle: {
+    color: '#F8FAFC',
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: -0.2,
+  },
+  orderCard: {
+    backgroundColor: '#11141C',
+    borderRadius: 16,
+    padding: 18,
+    gap: 12,
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  sectionHeading: {
+    color: '#38BDF8',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  itemRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  itemName: {
+    color: '#F8FAFC',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  itemVariant: {
+    color: '#64748B',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  itemPrice: {
+    color: '#F8FAFC',
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#1E2433',
+    marginVertical: 4,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  summaryLabel: {
+    color: '#94A3B8',
+    fontSize: 13,
+  },
+  summaryFree: {
+    color: '#10B981',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+  },
+  summaryValue: {
+    color: '#E2E8F0',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  totalLabel: {
+    color: '#F8FAFC',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  totalAmount: {
+    color: '#38BDF8',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  paymentCard: {
+    backgroundColor: '#11141C',
+    borderRadius: 14,
+    padding: 16,
+    gap: 10,
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  cardMethodRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  cardBrandBadge: {
+    backgroundColor: '#161A26',
+    borderWidth: 1,
+    borderColor: '#262D3D',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 7,
+  },
+  cardBrandText: {
+    color: '#38BDF8',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.8,
+  },
+  cardNumber: {
+    color: '#F8FAFC',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  cardSub: {
+    color: '#64748B',
+    fontSize: 12,
+  },
+  confirmButton: {
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    paddingVertical: 15,
+    alignItems: 'center',
+  },
+  confirmButtonText: {
+    color: '#08090C',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});