zelune 1.5.6 → 1.5.7

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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

package/package.json

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

package/src/runtime/MockNavigationContext.tsx

@@ -11,7 +11,7 @@ import {
   ScrollView as RNScrollView,
   FlatList as RNFlatList,
 } from 'react-native';
-import { withNativeWind } from './nativewindShim';
+import { withNativeWind, resolveTailwindClassNameToStyle } from './nativewindShim';
 
 export interface NavigationController {
   navigate: (targetRoute: string, params?: Record<string, unknown>) => void;
@@ -1221,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 ?? {};

package/src/runtime/nativewindShim.ts

@@ -376,6 +376,7 @@ export function resolveTailwindClassNameToStyle(className?: string): Record<stri
     (typeof window !== 'undefined' && window.__ZELUNE_TAILWIND_THEME__) || {};
   const themeColors = (projectTheme.colors ?? {}) as Record<string, unknown>;
   const themeFontSizes = (projectTheme.fontSize ?? {}) as Record<string, unknown>;
+  const themeFontFamilies = (projectTheme.fontFamily ?? {}) as Record<string, unknown>;
   const themeRadii = (projectTheme.borderRadius ?? {}) as Record<string, unknown>;
   const themeSpacing = (projectTheme.spacing ?? {}) as Record<string, unknown>;
 
@@ -808,6 +809,30 @@ export function resolveTailwindClassNameToStyle(className?: string): Record<stri
       style.fontFamily = 'monospace';
       continue;
     }
+    if (token.startsWith('font-')) {
+      const fontKey = token.slice(5);
+      const customFontEntry = themeFontFamilies[fontKey];
+      if (customFontEntry !== undefined) {
+        const primaryFont = Array.isArray(customFontEntry)
+          ? String(customFontEntry[0] ?? '')
+          : String(customFontEntry ?? '');
+        const lowerFont = primaryFont.toLowerCase();
+        if (lowerFont.includes('800') || lowerFont.includes('extrabold') || lowerFont.includes('black')) {
+          style.fontWeight = '800';
+        } else if (lowerFont.includes('700') || lowerFont.includes('bold')) {
+          style.fontWeight = lowerFont.includes('semibold') ? '600' : '700';
+        } else if (lowerFont.includes('600') || lowerFont.includes('semibold')) {
+          style.fontWeight = '600';
+        } else if (lowerFont.includes('500') || lowerFont.includes('medium')) {
+          style.fontWeight = '500';
+        } else if (lowerFont.includes('300') || lowerFont.includes('light')) {
+          style.fontWeight = '300';
+        } else {
+          style.fontWeight = '400';
+        }
+        continue;
+      }
+    }
 
     // Letter spacing (tracking-*)
     if (token === 'tracking-tighter') {

package/vite.config.ts

@@ -112,6 +112,9 @@ function loadProjectTailwindTheme(roots: string[]): Record<string, unknown> {
         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 = () => ({});