zelune 1.5.5 → 1.5.7

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.5.7] - 2026-10-24
+
+### Added
+- **Universal NativeWind v2/v4 (`styled`, `cssInterop`, `remapProps`), `twrnc` (`tw`, `createTw`), & TypeScript `tailwind.config.ts` Support (`src/runtime/nativewindShim.ts`, `src/runtime/MockNavigationContext.tsx`, `vite.config.ts`)**:
+  - Added `styled(Component, baseClassName)` (NativeWind v2), `cssInterop` / `remapProps` (NativeWind v4), and `tw` / `createTw` (`twrnc` tagged templates and `.style()` helper) to `MockNavigationContext.tsx` so any React Native project worldwide using NativeWind v2, NativeWind v4, or `twrnc` works out-of-the-box.
+  - Added dynamic `fontFamily` token resolution from `window.__ZELUNE_TAILWIND_THEME__.fontFamily` in `src/runtime/nativewindShim.ts` and TypeScript type-stripping (`const config: Config =`, `satisfies Config`, `as const`) in `loadProjectTailwindTheme` (`vite.config.ts`).
+
+## [1.5.6] - 2026-10-24
+
+### Added
+- **NativeWind / Tailwind CSS `className` Runtime Engine (`src/runtime/nativewindShim.ts`, `src/runtime/reactNativeShim.ts`, `src/runtime/MockNavigationContext.tsx`, `vite.config.ts`)**:
+  - Automatically loads the target project's `tailwind.config.js` / `tailwind.config.ts` (`colors`, `fontSize`, `borderRadius`, `spacing`, `opacity`, `fontFamily`) in `vite.config.ts` and injects `window.__ZELUNE_TAILWIND_THEME__`.
+  - Added `resolveTailwindClassNameToStyle` and `withNativeWind` wrapper across all React Native and Expo primitives (`View`, `Text`, `Pressable`, `TouchableOpacity`, `ScrollView`, `FlatList`, `KeyboardAvoidingView`, `TextInput`, `Image`, `SafeAreaView`, `LinearGradient`, `BlurView`, `createAnimatedComponent`) so screens and UI components styled with NativeWind `className="..."` (including M3 semantic tokens like `bg-surface-container-high`, `text-on-surface`, `text-headline-md`, `text-title-sm`, `bg-primary/10`, etc.) render with full CSS styles instead of unstyled stacks.
+
+### Fixed
+- **Pinned Mobile Artboard `Dimensions` (`src/runtime/reactNativeShim.ts`, `src/runtime/MockNavigationContext.tsx`)**: Overrode `Dimensions.get('window' | 'screen')` and `useWindowDimensions()` to return `{ width: 393, height: 852, scale: 3, fontScale: 1 }` instead of the desktop browser window's `1440×900` dimensions, and upgraded the `expo-image` `<Image>` shim to use CSS `object-fit` inside an `overflow: hidden` container so carousel cards and hero images (e.g., on `HomeScreen`) size to exact 393×852 mobile proportions.
+- **Wide Zoom-Out Range (`MIN_ZOOM = 0.08`), Multi-Row Grid Layout & Zero-Re-Render Pinch Zoom (`src/canvas/CanvasApp.tsx`)**:
+  - Lowered `MIN_ZOOM` from `25%` (`0.25`) to `8%` (`0.08`), updated `buildDefaultLayout` ("Grid" button) to arrange 6+ screens into a balanced multi-row grid, and enabled automatic fit-all on initial load so all screens can be viewed at once.
+  - Updated `applyFocalZoom` to keep full floating-point precision during active trackpad pinch/Ctrl-wheel zoom (eliminating subpixel focal-point oscillation), mutate `worldContainerRef.current.style.transform` and `zoomLabelRef.current.textContent` directly on the DOM without triggering 120Hz React re-renders of `<ScreenArtboard />`, and removed `willChange: 'transform'` bitmap caching so zooming in and out is completely smooth and vibration-free.
+
 ## [1.5.5] - 2026-10-23
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zelune",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "private": false,
   "license": "MIT",
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "zelune",
   "displayName": "Zelune — React Native Visual Canvas",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Zelune MCP & Figma-style multi-screen React Native visual canvas with live surgical AST patching and navigation flow visualization for Google Antigravity.",
   "logo": "assets/logo.svg",
   "suggestedPrompts": [

package/plugins/viteReactNativeFallbackPlugin.ts

@@ -495,7 +495,7 @@ export function viteReactNativeFallbackPlugin(
         `      });`,
         `    }`,
         `    const content = typeof props?.children === 'function' ? props.children(SAFE_CHAINABLE_PROXY) : props?.children;`,
-        `    return React.createElement(View, { style: props?.style, ref }, content);`,
+        `    return React.createElement(View, { style: props?.style, className: props?.className, ref }, content);`,
         `  });`,
         `  Comp.displayName = displayName;`,
         `  return new Proxy(Comp, {`,

package/src/canvas/CanvasApp.tsx

@@ -36,13 +36,14 @@ import type { PatchPayload, ReorderPayload } from '../server/astEngine';
 const DEFAULT_WIDTH = 393;
 const DEFAULT_HEIGHT = 852;
 const ARTBOARD_GAP = 130;
+const ARTBOARD_ROW_GAP = 140;
 const INITIAL_OFFSET_X = 80;
 const INITIAL_OFFSET_Y = 70;
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 1.75;
+const MIN_ZOOM = 0.08;
+const MAX_ZOOM = 2.0;
 
 function clampZoom(z: number): number {
-  return Number(Math.min(Math.max(z, MIN_ZOOM), MAX_ZOOM).toFixed(3));
+  return Math.min(Math.max(z, MIN_ZOOM), MAX_ZOOM);
 }
 
 function snapToDevicePixel(v: number): number {
@@ -52,10 +53,16 @@ function snapToDevicePixel(v: number): number {
 
 function buildDefaultLayout(screens: ScreenMetadata[]): ArtboardLayoutMap {
   const map: ArtboardLayoutMap = {};
+  const cols =
+    screens.length <= 5
+      ? Math.max(1, screens.length)
+      : Math.min(7, Math.ceil(Math.sqrt(screens.length * 1.6)));
   screens.forEach((screen, idx) => {
+    const col = idx % cols;
+    const row = Math.floor(idx / cols);
     map[screen.id] = {
-      x: INITIAL_OFFSET_X + idx * (DEFAULT_WIDTH + ARTBOARD_GAP),
-      y: INITIAL_OFFSET_Y,
+      x: INITIAL_OFFSET_X + col * (DEFAULT_WIDTH + ARTBOARD_GAP),
+      y: INITIAL_OFFSET_Y + row * (DEFAULT_HEIGHT + ARTBOARD_ROW_GAP),
       width: DEFAULT_WIDTH,
       height: DEFAULT_HEIGHT,
     };
@@ -134,19 +141,43 @@ export const CanvasApp: React.FC = () => {
 
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const worldContainerRef = useRef<HTMLDivElement | null>(null);
+  const zoomLabelRef = useRef<HTMLSpanElement | null>(null);
   const cameraTimerRef = useRef<number | null>(null);
   const panSyncTimerRef = useRef<number | null>(null);
+  const hasInitialFitRef = useRef<boolean>(false);
 
   // Refs for synchronous access inside non-passive native wheel/gesture listeners
   const zoomRef = useRef<number>(zoom);
   const panRef = useRef<{ x: number; y: number }>(pan);
   useEffect(() => {
     zoomRef.current = zoom;
+    if (zoomLabelRef.current) {
+      zoomLabelRef.current.textContent = `${Math.round(zoom * 100)}%`;
+    }
   }, [zoom]);
   useEffect(() => {
     panRef.current = pan;
   }, [pan]);
 
+  const scheduleCameraStateSync = useCallback((commitImmediately = false) => {
+    if (panSyncTimerRef.current) {
+      window.clearTimeout(panSyncTimerRef.current);
+      panSyncTimerRef.current = null;
+    }
+    if (commitImmediately) {
+      setIsCameraAnimating(false);
+      setZoom(zoomRef.current);
+      setPan(panRef.current);
+    } else {
+      panSyncTimerRef.current = window.setTimeout(() => {
+        panSyncTimerRef.current = null;
+        setIsCameraAnimating(false);
+        setZoom(zoomRef.current);
+        setPan(panRef.current);
+      }, 140);
+    }
+  }, []);
+
   const applyDirectPanTransform = useCallback(
     (rawX: number, rawY: number, commitImmediately = false) => {
       const nextPan = {
@@ -161,23 +192,9 @@ export const CanvasApp: React.FC = () => {
         worldEl.style.transform = `translate3d(${nextPan.x}px, ${nextPan.y}px, 0) scale(${zoomRef.current})`;
       }
 
-      if (panSyncTimerRef.current) {
-        window.clearTimeout(panSyncTimerRef.current);
-        panSyncTimerRef.current = null;
-      }
-
-      if (commitImmediately) {
-        setIsCameraAnimating(false);
-        setPan(nextPan);
-      } else {
-        panSyncTimerRef.current = window.setTimeout(() => {
-          panSyncTimerRef.current = null;
-          setIsCameraAnimating(false);
-          setPan(panRef.current);
-        }, 120);
-      }
+      scheduleCameraStateSync(commitImmediately);
     },
-    []
+    [scheduleCameraStateSync]
   );
 
   const triggerCameraTransition = useCallback(() => {
@@ -231,7 +248,34 @@ export const CanvasApp: React.FC = () => {
         setLayout((prev) => {
           const base = buildDefaultLayout(sorted);
           const saved = layoutJson.ok && layoutJson.layout ? layoutJson.layout : {};
-          return { ...base, ...saved, ...prev };
+          const merged = { ...base, ...saved, ...prev };
+          if (!hasInitialFitRef.current && sorted.length > 0 && canvasViewportRef.current) {
+            hasInitialFitRef.current = true;
+            const rect = canvasViewportRef.current.getBoundingClientRect();
+            const positions = Object.values(merged);
+            if (positions.length > 0 && rect.width > 0 && rect.height > 0) {
+              const minX = Math.min(...positions.map((p) => p.x));
+              const minY = Math.min(...positions.map((p) => p.y));
+              const maxX = Math.max(...positions.map((p) => p.x + p.width));
+              const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
+              const contentWidth = maxX - minX + 140;
+              const contentHeight = maxY - minY + 140;
+              const nextZoom = clampZoom(
+                Math.min(rect.width / contentWidth, rect.height / contentHeight, 0.85)
+              );
+              const centerX = (minX + maxX) / 2;
+              const centerY = (minY + maxY) / 2;
+              const nextPan = {
+                x: Math.round(rect.width / 2 - centerX * nextZoom),
+                y: Math.round(rect.height / 2 - centerY * nextZoom),
+              };
+              zoomRef.current = nextZoom;
+              panRef.current = nextPan;
+              setZoom(nextZoom);
+              setPan(nextPan);
+            }
+          }
+          return merged;
         });
       }
     } catch (err) {
@@ -496,25 +540,27 @@ export const CanvasApp: React.FC = () => {
       if (nextZoom === prevZoom) return;
 
       // Pin the world coordinate directly under the user's cursor during two-finger pinch
+      // Keep full floating-point precision during active zoom gesture so (cursorX - worldX * nextZoom) never oscillates
       const cursorX = clientX - rect.left;
       const cursorY = clientY - rect.top;
       const worldX = (cursorX - prevPan.x) / prevZoom;
       const worldY = (cursorY - prevPan.y) / prevZoom;
 
       const nextPan = {
-        x: snapToDevicePixel(cursorX - worldX * nextZoom),
-        y: snapToDevicePixel(cursorY - worldY * nextZoom),
+        x: cursorX - worldX * nextZoom,
+        y: cursorY - worldY * nextZoom,
       };
 
-      setIsCameraAnimating(false);
       zoomRef.current = nextZoom;
       panRef.current = nextPan;
       if (worldContainerRef.current) {
         worldContainerRef.current.style.transition = 'none';
         worldContainerRef.current.style.transform = `translate3d(${nextPan.x}px, ${nextPan.y}px, 0) scale(${nextZoom})`;
       }
-      setZoom(nextZoom);
-      setPan(nextPan);
+      if (zoomLabelRef.current) {
+        zoomLabelRef.current.textContent = `${Math.round(nextZoom * 100)}%`;
+      }
+      scheduleCameraStateSync(false);
     };
 
     // 1. Non-passive wheel listener on the canvas viewport for 0ms pan & focal pinch-zoom
@@ -579,7 +625,7 @@ export const CanvasApp: React.FC = () => {
       document.removeEventListener('gesturechange', handleGestureChange);
       document.removeEventListener('gestureend', handleGestureEnd);
     };
-  }, [applyDirectPanTransform]);
+  }, [applyDirectPanTransform, scheduleCameraStateSync]);
 
   // Center viewport on a specific screen artboard using Emil Kowalski ease-out-expo camera physics
   const focusOnScreen = useCallback(
@@ -604,48 +650,58 @@ export const CanvasApp: React.FC = () => {
   );
 
   // Fit all screens in viewport
-  const handleFitAllScreens = useCallback(() => {
-    const viewport = canvasViewportRef.current;
-    if (!viewport || screens.length === 0) return;
-    const rect = viewport.getBoundingClientRect();
+  const fitCameraToLayout = useCallback(
+    (targetLayout: ArtboardLayoutMap) => {
+      const viewport = canvasViewportRef.current;
+      if (!viewport) return;
+      const rect = viewport.getBoundingClientRect();
 
-    const positions = Object.values(layout);
-    if (positions.length === 0) return;
+      const positions = Object.values(targetLayout);
+      if (positions.length === 0) return;
 
-    const minX = Math.min(...positions.map((p) => p.x));
-    const minY = Math.min(...positions.map((p) => p.y));
-    const maxX = Math.max(...positions.map((p) => p.x + p.width));
-    const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
+      const minX = Math.min(...positions.map((p) => p.x));
+      const minY = Math.min(...positions.map((p) => p.y));
+      const maxX = Math.max(...positions.map((p) => p.x + p.width));
+      const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
 
-    const contentWidth = maxX - minX + 140;
-    const contentHeight = maxY - minY + 140;
+      const contentWidth = maxX - minX + 140;
+      const contentHeight = maxY - minY + 140;
 
-    const scaleX = rect.width / contentWidth;
-    const scaleY = rect.height / contentHeight;
-    const nextZoom = Number(Math.min(Math.max(Math.min(scaleX, scaleY), 0.28), 1.0).toFixed(2));
+      const scaleX = rect.width / contentWidth;
+      const scaleY = rect.height / contentHeight;
+      const nextZoom = clampZoom(Math.min(scaleX, scaleY, 1.0));
 
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
+      const centerX = (minX + maxX) / 2;
+      const centerY = (minY + maxY) / 2;
+      const nextPan = {
+        x: Math.round(rect.width / 2 - centerX * nextZoom),
+        y: Math.round(rect.height / 2 - centerY * nextZoom),
+      };
 
-    triggerCameraTransition();
-    setZoom(nextZoom);
-    setPan({
-      x: Math.round(rect.width / 2 - centerX * nextZoom),
-      y: Math.round(rect.height / 2 - centerY * nextZoom),
-    });
-  }, [layout, screens.length, triggerCameraTransition]);
+      triggerCameraTransition();
+      zoomRef.current = nextZoom;
+      panRef.current = nextPan;
+      setZoom(nextZoom);
+      setPan(nextPan);
+    },
+    [triggerCameraTransition]
+  );
+
+  const handleFitAllScreens = useCallback(() => {
+    fitCameraToLayout(layout);
+  }, [fitCameraToLayout, layout]);
 
-  // Reset layout to clean horizontal grid
+  // Reset layout to clean multi-row grid and fit in viewport
   const handleResetGridLayout = useCallback(() => {
     const reset = buildDefaultLayout(screens);
-    triggerCameraTransition();
     setLayout(reset);
+    fitCameraToLayout(reset);
     void fetch('/api/layout', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(reset),
     });
-  }, [screens, triggerCameraTransition]);
+  }, [screens, fitCameraToLayout]);
 
   // Move single artboard
   const handleMoveArtboard = useCallback((screenId: string, nextX: number, nextY: number) => {
@@ -962,6 +1018,7 @@ export const CanvasApp: React.FC = () => {
           </button>
 
           <span
+            ref={zoomLabelRef}
             className="tabular-nums"
             style={{
               minWidth: 46,
@@ -1355,8 +1412,6 @@ export const CanvasApp: React.FC = () => {
               left: 0,
               transform: `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})`,
               transformOrigin: '0 0',
-              willChange: 'transform',
-              backfaceVisibility: 'hidden',
               transition: isCameraAnimating
                 ? 'transform var(--duration-camera) var(--ease-out-expo)'
                 : 'none',

package/src/runtime/MockNavigationContext.tsx

@@ -11,6 +11,7 @@ import {
   ScrollView as RNScrollView,
   FlatList as RNFlatList,
 } from 'react-native';
+import { withNativeWind, resolveTailwindClassNameToStyle } from './nativewindShim';
 
 export interface NavigationController {
   navigate: (targetRoute: string, params?: Record<string, unknown>) => void;
@@ -291,16 +292,26 @@ export const SplashScreen = {
 // ============================================================================
 // 3. React Native Safe Area Context Shims (react-native-safe-area-context)
 // ============================================================================
-export const SafeAreaProvider: React.FC<{ children?: React.ReactNode; style?: unknown }> = ({
-  children,
-  style,
-}) => <View style={[{ flex: 1 }, style as never]}>{children}</View>;
+export const SafeAreaProvider: React.FC<{
+  children?: React.ReactNode;
+  style?: unknown;
+  className?: string;
+}> = ({ children, style, className, ...rest }) => (
+  <View className={className as never} style={[{ flex: 1 }, style as never]} {...rest}>
+    {children}
+  </View>
+);
 
 export const SafeAreaView: React.FC<{
   children?: React.ReactNode;
   style?: unknown;
+  className?: string;
   edges?: string[];
-}> = ({ children, style }) => <View style={[{ flex: 1 }, style as never]}>{children}</View>;
+}> = ({ children, style, className, edges: _edges, ...rest }) => (
+  <View className={className as never} style={[{ flex: 1 }, style as never]} {...rest}>
+    {children}
+  </View>
+);
 
 export function useSafeAreaInsets(): { top: number; right: number; bottom: number; left: number } {
   return { top: 0, right: 0, bottom: 0, left: 0 };
@@ -478,16 +489,27 @@ export function createIconSetFromFontello() {
 // 6. Expo Linear Gradient, Blur, Image & FlashList Shims
 // ============================================================================
 export const LinearGradient: React.FC<{
-  colors?: string[];
-  locations?: number[];
+  colors?: readonly string[] | string[];
+  locations?: readonly number[] | number[];
   start?: { x: number; y: number } | [number, number];
   end?: { x: number; y: number } | [number, number];
   style?: unknown;
+  className?: string;
   children?: React.ReactNode;
-}> = ({ colors = ['#1E293B', '#0F172A'], style, children }) => {
+}> = ({
+  colors = ['#1E293B', '#0F172A'],
+  locations: _locations,
+  start: _start,
+  end: _end,
+  style,
+  className,
+  children,
+  ...rest
+}) => {
   const safeColors = Array.isArray(colors) && colors.length >= 2 ? colors : ['#1E293B', '#0F172A'];
   return (
     <View
+      className={className as never}
       style={[
         {
           backgroundColor: safeColors[0],
@@ -495,6 +517,7 @@ export const LinearGradient: React.FC<{
         } as never,
         style as never,
       ]}
+      {...rest}
     >
       {children}
     </View>
@@ -505,11 +528,13 @@ export const BlurView: React.FC<{
   intensity?: number;
   tint?: string;
   style?: unknown;
+  className?: string;
   children?: React.ReactNode;
-}> = ({ intensity = 40, tint = 'dark', style, children }) => {
+}> = ({ intensity = 40, tint = 'dark', style, className, children, ...rest }) => {
   const bg = tint === 'light' ? 'rgba(255, 255, 255, 0.65)' : 'rgba(15, 23, 42, 0.65)';
   return (
     <View
+      className={className as never}
       style={[
         {
           backgroundColor: bg,
@@ -517,6 +542,7 @@ export const BlurView: React.FC<{
         } as never,
         style as never,
       ]}
+      {...rest}
     >
       {children}
     </View>
@@ -527,15 +553,52 @@ export const Image: React.FC<Record<string, unknown>> = ({
   contentFit,
   resizeMode,
   source,
+  placeholder,
+  transition: _transition,
+  className,
+  style,
   ...rest
 }) => {
-  const resolvedSource = typeof source === 'string' ? { uri: source } : source;
+  let uri = '';
+  if (typeof source === 'string') {
+    uri = source;
+  } else if (Array.isArray(source) && source[0] && typeof source[0] === 'object') {
+    uri = String((source[0] as Record<string, unknown>).uri ?? '');
+  } else if (source && typeof source === 'object') {
+    uri = String((source as Record<string, unknown>).uri ?? '');
+  }
+  const placeholderBg =
+    placeholder && typeof placeholder === 'object' && 'color' in placeholder
+      ? String((placeholder as Record<string, unknown>).color ?? 'transparent')
+      : undefined;
+  const fit = String(contentFit ?? resizeMode ?? 'cover') as React.CSSProperties['objectFit'];
+
   return (
-    <RNImage
-      source={resolvedSource as never}
-      resizeMode={(contentFit ?? resizeMode ?? 'cover') as never}
+    <View
+      className={className as never}
+      style={[
+        {
+          overflow: 'hidden',
+          ...(placeholderBg ? { backgroundColor: placeholderBg } : {}),
+        } as never,
+        style as never,
+      ]}
       {...(rest as Record<string, unknown>)}
-    />
+    >
+      {uri ? (
+        <img
+          src={uri}
+          alt=""
+          draggable={false}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: fit,
+            display: 'block',
+          }}
+        />
+      ) : null}
+    </View>
   );
 };
 
@@ -730,7 +793,9 @@ export const Easing = {
 };
 
 export function createAnimatedComponent<P extends object>(Component: React.ComponentType<P>) {
-  return Component;
+  return withNativeWind(
+    Component as unknown as React.ComponentType<Record<string, unknown>>
+  ) as unknown as React.ComponentType<P>;
 }
 
 export const Animated = {
@@ -755,10 +820,15 @@ export const Animated = {
 };
 
 // React Native Gesture Handler Shims
-export const GestureHandlerRootView: React.FC<{ children?: React.ReactNode; style?: unknown }> = ({
-  children,
-  style,
-}) => <View style={[{ flex: 1 }, style as never]}>{children}</View>;
+export const GestureHandlerRootView: React.FC<{
+  children?: React.ReactNode;
+  style?: unknown;
+  className?: string;
+}> = ({ children, style, className, ...rest }) => (
+  <View className={className as never} style={[{ flex: 1 }, style as never]} {...rest}>
+    {children}
+  </View>
+);
 
 export const ScrollView = RNScrollView;
 export const FlatList = RNFlatList;
@@ -1151,6 +1221,53 @@ export const clsx = (...args: unknown[]) =>
 export const cn = clsx;
 export const twMerge = clsx;
 
+// NativeWind (v2 / v4) & twrnc Universal Shims
+export function styled<P extends Record<string, unknown>>(
+  Component: React.ComponentType<P>,
+  baseClassName?: string
+): React.ComponentType<P> {
+  const Wrapped = withNativeWind(Component as unknown as React.ComponentType<Record<string, unknown>>);
+  if (!baseClassName) return Wrapped as unknown as React.ComponentType<P>;
+  return React.forwardRef<unknown, P>((props, ref) => {
+    const combinedClass = [baseClassName, props?.className].filter(Boolean).join(' ');
+    return React.createElement(Wrapped, { ...props, className: combinedClass, ref });
+  }) as unknown as React.ComponentType<P>;
+}
+
+export function cssInterop<P extends Record<string, unknown>>(
+  Component: React.ComponentType<P>
+): React.ComponentType<P> {
+  return withNativeWind(Component as unknown as React.ComponentType<Record<string, unknown>>) as unknown as React.ComponentType<P>;
+}
+
+export const remapProps = cssInterop;
+
+function twFn(stringsOrClass: TemplateStringsArray | string, ...values: unknown[]): Record<string, unknown> {
+  if (typeof stringsOrClass === 'string') {
+    return resolveTailwindClassNameToStyle(stringsOrClass) ?? {};
+  }
+  if (Array.isArray(stringsOrClass)) {
+    const built = stringsOrClass.reduce(
+      (acc, str, idx) => acc + str + (values[idx] !== undefined ? String(values[idx]) : ''),
+      ''
+    );
+    return resolveTailwindClassNameToStyle(built) ?? {};
+  }
+  return {};
+}
+
+twFn.style = (...args: unknown[]) => {
+  const mergedClass = args.filter((a): a is string => typeof a === 'string' && a.length > 0).join(' ');
+  return resolveTailwindClassNameToStyle(mergedClass) ?? {};
+};
+twFn.color = (token: string) => {
+  const s = resolveTailwindClassNameToStyle(`text-${token}`);
+  return (s?.color as string | undefined) ?? '#0F172A';
+};
+
+export const tw = twFn;
+export const createTw = () => twFn;
+
 // React Hook Form Shims (react-hook-form)
 export function useForm(config?: { defaultValues?: Record<string, unknown> }) {
   const defaults = config?.defaultValues ?? {};