zelune 1.5.5 → 1.5.7

package/src/runtime/reactNativeShim.ts

@@ -1,8 +1,89 @@
 import React, { useRef } from 'react';
 import * as RNW from 'react-native-web';
+import { withNativeWind } from './nativewindShim';
 
 export * from 'react-native-web';
 
+// Wrap core React Native primitives with NativeWind className -> style support
+export const View = withNativeWind(RNW.View as unknown as React.ComponentType<Record<string, unknown>>, 'View');
+export const Text = withNativeWind(RNW.Text as unknown as React.ComponentType<Record<string, unknown>>, 'Text');
+export const Pressable = withNativeWind(
+  RNW.Pressable as unknown as React.ComponentType<Record<string, unknown>>,
+  'Pressable'
+);
+export const TouchableOpacity = withNativeWind(
+  RNW.TouchableOpacity as unknown as React.ComponentType<Record<string, unknown>>,
+  'TouchableOpacity'
+);
+export const TouchableHighlight = withNativeWind(
+  RNW.TouchableHighlight as unknown as React.ComponentType<Record<string, unknown>>,
+  'TouchableHighlight'
+);
+export const TouchableWithoutFeedback = withNativeWind(
+  RNW.TouchableWithoutFeedback as unknown as React.ComponentType<Record<string, unknown>>,
+  'TouchableWithoutFeedback'
+);
+export const ScrollView = withNativeWind(
+  RNW.ScrollView as unknown as React.ComponentType<Record<string, unknown>>,
+  'ScrollView'
+);
+export const FlatList = withNativeWind(
+  RNW.FlatList as unknown as React.ComponentType<Record<string, unknown>>,
+  'FlatList'
+);
+export const SectionList = withNativeWind(
+  RNW.SectionList as unknown as React.ComponentType<Record<string, unknown>>,
+  'SectionList'
+);
+export const KeyboardAvoidingView = withNativeWind(
+  RNW.KeyboardAvoidingView as unknown as React.ComponentType<Record<string, unknown>>,
+  'KeyboardAvoidingView'
+);
+export const TextInput = withNativeWind(
+  RNW.TextInput as unknown as React.ComponentType<Record<string, unknown>>,
+  'TextInput'
+);
+export const Image = withNativeWind(
+  RNW.Image as unknown as React.ComponentType<Record<string, unknown>>,
+  'Image'
+);
+export const ImageBackground = withNativeWind(
+  RNW.ImageBackground as unknown as React.ComponentType<Record<string, unknown>>,
+  'ImageBackground'
+);
+export const SafeAreaView = withNativeWind(
+  RNW.SafeAreaView as unknown as React.ComponentType<Record<string, unknown>>,
+  'SafeAreaView'
+);
+export const ActivityIndicator = withNativeWind(
+  RNW.ActivityIndicator as unknown as React.ComponentType<Record<string, unknown>>,
+  'ActivityIndicator'
+);
+export const Modal = withNativeWind(
+  RNW.Modal as unknown as React.ComponentType<Record<string, unknown>>,
+  'Modal'
+);
+
+// Pin mobile artboard dimensions (393x852 iPhone 15 Pro) so Dimensions.get('window')
+// and useWindowDimensions() never return the desktop browser's 1440x900 window size.
+const ARTBOARD_DIMENSIONS = {
+  width: 393,
+  height: 852,
+  scale: 3,
+  fontScale: 1,
+};
+
+export const Dimensions = {
+  get: (_dim?: 'window' | 'screen' | string) => ARTBOARD_DIMENSIONS,
+  set: () => undefined,
+  addEventListener: () => ({ remove: () => undefined }),
+  removeEventListener: () => undefined,
+};
+
+export function useWindowDimensions() {
+  return ARTBOARD_DIMENSIONS;
+}
+
 export function useAnimatedValue(initialValue = 0): RNW.Animated.Value {
   const ref = useRef<RNW.Animated.Value | null>(null);
   if (!ref.current) {
@@ -109,6 +190,24 @@ export const Settings = {
 const ReactNativeDefault = new Proxy(
   {
     ...RNW,
+    View,
+    Text,
+    Pressable,
+    TouchableOpacity,
+    TouchableHighlight,
+    TouchableWithoutFeedback,
+    ScrollView,
+    FlatList,
+    SectionList,
+    KeyboardAvoidingView,
+    TextInput,
+    Image,
+    ImageBackground,
+    SafeAreaView,
+    ActivityIndicator,
+    Modal,
+    Dimensions,
+    useWindowDimensions,
     useAnimatedValue,
     PermissionsAndroid,
     ToastAndroid,

package/vite.config.ts

@@ -96,6 +96,65 @@ function loadPublicProjectEnv(roots: string[]): Record<string, string> {
 
 const publicProjectEnv = loadPublicProjectEnv([workspaceRoot, rawTargetRoot, targetProjectRoot]);
 
+function loadProjectTailwindTheme(roots: string[]): Record<string, unknown> {
+  const candidates = [
+    'tailwind.config.js',
+    'tailwind.config.cjs',
+    'tailwind.config.mjs',
+    'tailwind.config.ts',
+  ];
+  const uniqueRoots = Array.from(new Set(roots.map((r) => path.resolve(r))));
+  for (const rootDir of uniqueRoots) {
+    for (const fileName of candidates) {
+      const fullPath = path.join(rootDir, fileName);
+      try {
+        if (!fs.existsSync(fullPath)) continue;
+        const raw = fs.readFileSync(fullPath, 'utf-8');
+        const cleaned = raw
+          .replace(/^import\s+.*$/gm, '')
+          .replace(/\b(const|let|var)\s+([A-Za-z0-9_$]+)\s*:\s*[^=]+=/g, '$1 $2 =')
+          .replace(/\bsatisfies\s+[A-Za-z0-9_$.<>]+/g, '')
+          .replace(/\bas\s+const\b/g, '')
+          .replace(/export\s+default\s+/, 'module.exports = ');
+        const mod = { exports: {} as Record<string, unknown> };
+        const fakeRequire = () => ({});
+        const fn = new Function('module', 'exports', 'require', cleaned);
+        fn(mod, mod.exports, fakeRequire);
+        const cfg = mod.exports as {
+          theme?: Record<string, unknown> & { extend?: Record<string, unknown> };
+        };
+        if (cfg?.theme && typeof cfg.theme === 'object') {
+          const baseTheme = { ...cfg.theme };
+          const extendTheme =
+            cfg.theme.extend && typeof cfg.theme.extend === 'object' ? cfg.theme.extend : {};
+          delete baseTheme.extend;
+          const merged: Record<string, unknown> = { ...baseTheme };
+          for (const [k, v] of Object.entries(extendTheme)) {
+            if (v && typeof v === 'object' && !Array.isArray(v)) {
+              merged[k] = {
+                ...((baseTheme[k] as Record<string, unknown>) ?? {}),
+                ...(v as Record<string, unknown>),
+              };
+            } else {
+              merged[k] = v;
+            }
+          }
+          return merged;
+        }
+      } catch {
+        // Ignore tailwind config parse errors
+      }
+    }
+  }
+  return {};
+}
+
+const projectTailwindTheme = loadProjectTailwindTheme([
+  targetProjectRoot,
+  rawTargetRoot,
+  workspaceRoot,
+]);
+
 const allowedFsRoots = Array.from(
   new Set([
     __dirname,
@@ -115,8 +174,10 @@ export default defineConfig({
       name: 'vite-zelune-process-env-shim',
       transformIndexHtml(html) {
         const serializedEnv = JSON.stringify(publicProjectEnv);
+        const serializedTailwindTheme = JSON.stringify(projectTailwindTheme);
         const envScript = `<script>
 (function() {
+  window.__ZELUNE_TAILWIND_THEME__ = ${serializedTailwindTheme};
   var baseEnv = ${serializedEnv};
   var envProxy = new Proxy(baseEnv, {
     get: function(target, prop) {