zelune 1.5.6 → 1.6.1

package/src/runtime/MockNavigationContext.tsx

@@ -11,7 +11,66 @@ import {
   ScrollView as RNScrollView,
   FlatList as RNFlatList,
 } from 'react-native';
-import { withNativeWind } from './nativewindShim';
+import { withNativeWind, resolveTailwindClassNameToStyle } from './nativewindShim';
+
+declare global {
+  interface Window {
+    __ZELUNE_PUBLIC_ENV__?: Record<string, string>;
+  }
+}
+
+if (typeof window !== 'undefined') {
+  const baseEnv: Record<string, string> = window.__ZELUNE_PUBLIC_ENV__ ?? {
+    NODE_ENV: 'development',
+    EXPO_PUBLIC_PLATFORM: 'web',
+  };
+  const envProxy = new Proxy(baseEnv, {
+    get(target, prop) {
+      if (typeof prop !== 'string') return Reflect.get(target, prop);
+      if (prop in target && target[prop] !== undefined && target[prop] !== '') {
+        return target[prop];
+      }
+      return 'zelune-preview';
+    },
+  });
+
+  const createAssetStub = (): unknown => {
+    const fn = () => proxy;
+    const proxy: unknown = new Proxy(fn, {
+      get(_t, prop) {
+        if (prop === Symbol.toPrimitive) return (hint: string) => (hint === 'number' ? 0 : '');
+        if (prop === 'valueOf') return () => 0;
+        if (prop === 'toString') return () => '';
+        if (prop === 'uri' || prop === 'default') return '';
+        return proxy;
+      },
+    });
+    return proxy;
+  };
+
+  const win = window as unknown as Record<string, unknown>;
+  win.global = window;
+  win.__DEV__ = true;
+  if (!win.process || typeof win.process !== 'object') {
+    win.process = {
+      env: envProxy,
+      platform: 'browser',
+      version: '',
+      cwd: () => '/',
+    };
+  } else {
+    (win.process as Record<string, unknown>).env = envProxy;
+  }
+  const reqProp = ['req', 'uire'].join('');
+  if (typeof win[reqProp] !== 'function') {
+    win[reqProp] = (modId: unknown) => {
+      if (typeof modId === 'string' && /\.(png|jpe?g|gif|webp|svg|avif|bmp)$/i.test(modId)) {
+        return { uri: modId, default: modId };
+      }
+      return createAssetStub();
+    };
+  }
+}
 
 export interface NavigationController {
   navigate: (targetRoute: string, params?: Record<string, unknown>) => void;
@@ -1221,6 +1280,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/src/server/apiMiddleware.ts

@@ -8,11 +8,17 @@ import {
   inspectElement,
   patchElement,
   reorderElement,
+  insertElement,
+  duplicateElement,
+  deleteElement,
   undoLastPatch,
   redoLastPatch,
   getHistoryStatus,
   type PatchPayload,
   type ReorderPayload,
+  type InsertElementPayload,
+  type DuplicateElementPayload,
+  type DeleteElementPayload,
 } from './astEngine';
 
 const MAX_BODY_BYTES = 1_000_000;
@@ -285,6 +291,48 @@ export function viteCanvasApiMiddleware(workspaceRoot: string): Plugin {
             });
           }
 
+          // POST /api/insert
+          if (req.method === 'POST' && pathname === '/api/insert') {
+            const body = await readJsonBody<InsertElementPayload>(req);
+            const result = await insertElement(workspaceRoot, body);
+            return sendJson(res, 200, {
+              ok: true,
+              element: result.element,
+              history: {
+                undoAvailable: result.undoAvailable,
+                redoAvailable: result.redoAvailable,
+              },
+            });
+          }
+
+          // POST /api/duplicate
+          if (req.method === 'POST' && pathname === '/api/duplicate') {
+            const body = await readJsonBody<DuplicateElementPayload>(req);
+            const result = await duplicateElement(workspaceRoot, body);
+            return sendJson(res, 200, {
+              ok: true,
+              element: result.element,
+              history: {
+                undoAvailable: result.undoAvailable,
+                redoAvailable: result.redoAvailable,
+              },
+            });
+          }
+
+          // POST /api/delete
+          if (req.method === 'POST' && pathname === '/api/delete') {
+            const body = await readJsonBody<DeleteElementPayload>(req);
+            const result = await deleteElement(workspaceRoot, body);
+            return sendJson(res, 200, {
+              ok: true,
+              deletedAstPath: result.deletedAstPath,
+              history: {
+                undoAvailable: result.undoAvailable,
+                redoAvailable: result.redoAvailable,
+              },
+            });
+          }
+
           // POST /api/undo
           if (req.method === 'POST' && pathname === '/api/undo') {
             const result = await undoLastPatch(workspaceRoot);