zelune 0.0.0-stage → 1.4.0

package/src/canvas/ScreenArtboard.tsx

@@ -0,0 +1,451 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { GripHorizontal, Maximize2, AlertTriangle } from 'lucide-react';
+import { MockNavigationProvider } from '../runtime/MockNavigationContext';
+import { ScreenErrorBoundary } from '../runtime/ScreenErrorBoundary';
+import type {
+  ArtboardPosition,
+  CanvasMode,
+  ScreenMetadata,
+  SelectedElementRef,
+} from './types';
+
+interface ScreenArtboardProps {
+  screen: ScreenMetadata;
+  ScreenComponent: React.ComponentType | undefined;
+  position: ArtboardPosition;
+  zoom: number;
+  mode: CanvasMode;
+  isActiveScreen: boolean;
+  isHighlightedScreen: boolean;
+  selectedElement: SelectedElementRef | null;
+  onSelectElement: (ref: SelectedElementRef) => void;
+  onSelectScreen: (screenId: string) => void;
+  onFocusScreen: (screenId: string) => void;
+  onMoveArtboard: (screenId: string, nextX: number, nextY: number) => void;
+  onNavigateFlow: (fromScreen: string, toScreen: string) => void;
+}
+
+interface BoxOverlay {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  tagName: string;
+  astPath: string;
+}
+
+function findNearestAgyElement(
+  target: EventTarget | null,
+  container: HTMLElement | null
+): HTMLElement | null {
+  if (!target || !(target instanceof HTMLElement) || !container) return null;
+  let curr: HTMLElement | null = target;
+  while (curr && curr !== container && container.contains(curr)) {
+    if (curr.dataset?.agyAstPath && curr.dataset?.agyFile) {
+      return curr;
+    }
+    curr = curr.parentElement;
+  }
+  return null;
+}
+
+export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
+  screen,
+  ScreenComponent,
+  position,
+  zoom,
+  mode,
+  isActiveScreen,
+  isHighlightedScreen,
+  selectedElement,
+  onSelectElement,
+  onSelectScreen,
+  onFocusScreen,
+  onMoveArtboard,
+  onNavigateFlow,
+}) => {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [hoverBox, setHoverBox] = useState<BoxOverlay | null>(null);
+  const [selectedBox, setSelectedBox] = useState<BoxOverlay | null>(null);
+  const [isDraggingHeader, setIsDraggingHeader] = useState(false);
+
+  const computeRelativeBox = useCallback(
+    (domEl: HTMLElement): BoxOverlay | null => {
+      const container = viewportRef.current;
+      if (!container) return null;
+      const containerRect = container.getBoundingClientRect();
+      const elRect = domEl.getBoundingClientRect();
+
+      return {
+        top: (elRect.top - containerRect.top) / zoom,
+        left: (elRect.left - containerRect.left) / zoom,
+        width: elRect.width / zoom,
+        height: elRect.height / zoom,
+        tagName: domEl.dataset.agyTag || 'View',
+        astPath: domEl.dataset.agyAstPath || '0',
+      };
+    },
+    [zoom]
+  );
+
+  // Keep selected element bounding box updated when screen re-renders or styles change
+  useEffect(() => {
+    const container = viewportRef.current;
+    if (
+      !container ||
+      !selectedElement ||
+      selectedElement.screenId !== screen.id
+    ) {
+      setSelectedBox(null);
+      return;
+    }
+
+    const updateSelectionOverlay = () => {
+      const match = container.querySelector<HTMLElement>(
+        `[data-agy-ast-path="${selectedElement.astPath}"]`
+      );
+      if (match) {
+        setSelectedBox(computeRelativeBox(match));
+      } else {
+        setSelectedBox(null);
+      }
+    };
+
+    updateSelectionOverlay();
+    const timer = window.setTimeout(updateSelectionOverlay, 90);
+    return () => window.clearTimeout(timer);
+  }, [selectedElement, screen, computeRelativeBox]);
+
+  // Artboard header drag handler to reposition the screen on the infinite canvas
+  const handleHeaderPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    onSelectScreen(screen.id);
+    setIsDraggingHeader(true);
+
+    const startClientX = e.clientX;
+    const startClientY = e.clientY;
+    const initialX = position.x;
+    const initialY = position.y;
+
+    const handlePointerMove = (moveEvent: PointerEvent) => {
+      const dx = (moveEvent.clientX - startClientX) / zoom;
+      const dy = (moveEvent.clientY - startClientY) / zoom;
+      onMoveArtboard(
+        screen.id,
+        Math.round(initialX + dx),
+        Math.round(initialY + dy)
+      );
+    };
+
+    const handlePointerUp = () => {
+      setIsDraggingHeader(false);
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+  };
+
+  // Inspect Mode pointer handlers
+  const handlePointerMoveCapture = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (mode !== 'inspect') return;
+    const targetEl = findNearestAgyElement(e.target, viewportRef.current);
+    if (!targetEl) {
+      setHoverBox(null);
+      return;
+    }
+    setHoverBox(computeRelativeBox(targetEl));
+  };
+
+  const handlePointerLeave = () => {
+    setHoverBox(null);
+  };
+
+  const handleClickCapture = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (mode !== 'inspect') return;
+    e.stopPropagation();
+    e.preventDefault();
+
+    onSelectScreen(screen.id);
+    const targetEl = findNearestAgyElement(e.target, viewportRef.current);
+    if (!targetEl) return;
+
+    const file = targetEl.dataset.agyFile || screen.filePath;
+    const astPath = targetEl.dataset.agyAstPath || '0';
+    const line = Number.parseInt(targetEl.dataset.agyLine || '1', 10);
+    const col = Number.parseInt(targetEl.dataset.agyCol || '0', 10);
+    const tagName = targetEl.dataset.agyTag || 'View';
+
+    setSelectedBox(computeRelativeBox(targetEl));
+    onSelectElement({
+      screenId: screen.id,
+      file,
+      astPath,
+      line,
+      col,
+      tagName,
+    });
+  };
+
+  const borderColor = isHighlightedScreen
+    ? '#10B981'
+    : isActiveScreen
+      ? '#38BDF8'
+      : 'rgba(255, 255, 255, 0.09)';
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: position.x,
+        top: position.y,
+        width: position.width,
+        userSelect: 'none',
+        zIndex: isActiveScreen || isHighlightedScreen ? 20 : 10,
+      }}
+      onPointerDown={(e) => {
+        // Prevent background canvas pan when interacting inside an artboard
+        e.stopPropagation();
+        onSelectScreen(screen.id);
+      }}
+    >
+      {/* Minimalist Architectural Artboard Title Header */}
+      <div
+        onPointerDown={handleHeaderPointerDown}
+        style={{
+          height: 30,
+          marginBottom: 8,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 4px',
+          cursor: isDraggingHeader ? 'grabbing' : 'grab',
+          color: isActiveScreen ? '#38BDF8' : '#94A3B8',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+          <GripHorizontal size={14} style={{ opacity: 0.7 }} />
+          <span
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              letterSpacing: '-0.015em',
+              color: isActiveScreen ? '#F8FAFC' : '#CBD5E1',
+            }}
+          >
+            {screen.name}
+          </span>
+          <span
+            style={{
+              fontSize: 11,
+              fontFamily: 'var(--font-mono)',
+              color: '#64748B',
+            }}
+          >
+            /{screen.routeName}
+          </span>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span
+            className="tabular-nums"
+            style={{
+              fontSize: 10.5,
+              fontFamily: 'var(--font-mono)',
+              color: '#64748B',
+            }}
+          >
+            {position.width} × {position.height}
+          </span>
+          <button
+            type="button"
+            className="zelune-interactive"
+            onClick={(e) => {
+              e.stopPropagation();
+              onFocusScreen(screen.id);
+            }}
+            title="Center screen in viewport"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 22,
+              height: 22,
+              borderRadius: 5,
+              border: '1px solid var(--studio-border-subtle)',
+              backgroundColor: 'var(--studio-surface-2)',
+              color: '#94A3B8',
+              cursor: 'pointer',
+            }}
+          >
+            <Maximize2 size={11} />
+          </button>
+        </div>
+      </div>
+
+      {/* Pure Rectangular Screen Artboard (No Device Bezel/Frame, Soft Diffusion Shadows) */}
+      <div
+        ref={viewportRef}
+        onPointerMoveCapture={handlePointerMoveCapture}
+        onPointerLeave={handlePointerLeave}
+        onClickCapture={handleClickCapture}
+        style={{
+          position: 'relative',
+          width: position.width,
+          height: position.height,
+          backgroundColor: '#0A0B0E',
+          border: `1px solid ${borderColor}`,
+          borderRadius: 6,
+          overflow: 'hidden',
+          boxShadow: isHighlightedScreen
+            ? '0 0 0 3px rgba(16, 185, 129, 0.28), 0 28px 56px -14px rgba(0, 0, 0, 0.78)'
+            : isActiveScreen
+              ? '0 0 0 2px rgba(56, 189, 248, 0.22), 0 28px 56px -14px rgba(0, 0, 0, 0.78)'
+              : '0 22px 44px -15px rgba(0, 0, 0, 0.68)',
+          transition: 'border-color var(--duration-micro) var(--ease-out), box-shadow var(--duration-micro) var(--ease-out)',
+          display: 'flex',
+          flexDirection: 'column',
+          cursor: mode === 'inspect' ? 'crosshair' : 'default',
+        }}
+      >
+        {screen.parseError ? (
+          <div
+            style={{
+              flex: 1,
+              padding: 24,
+              backgroundColor: '#18181B',
+              color: '#FCA5A5',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gap: 10,
+              fontFamily: 'var(--font-mono)',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#F87171', fontWeight: 700, fontSize: 13 }}>
+              <AlertTriangle size={16} />
+              <span>AST Syntax Error in {screen.filePath}</span>
+            </div>
+            <div style={{ fontSize: 11, color: '#FECACA', whiteSpace: 'pre-wrap' }}>
+              {screen.parseError}
+            </div>
+          </div>
+        ) : ScreenComponent ? (
+          <ScreenErrorBoundary screenName={screen.name}>
+            <MockNavigationProvider
+              routeName={screen.routeName}
+              onNavigate={onNavigateFlow}
+            >
+              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
+                <ScreenComponent />
+              </div>
+            </MockNavigationProvider>
+          </ScreenErrorBoundary>
+        ) : (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#64748B', fontSize: 13 }}>
+            Mounting {screen.name}...
+          </div>
+        )}
+
+        {/* Figma-style Hover Bounding Box in Inspect Mode */}
+        {mode === 'inspect' &&
+          hoverBox &&
+          (!selectedBox || hoverBox.astPath !== selectedBox.astPath) && (
+            <div
+              className="zelune-box-overlay"
+              style={{
+                position: 'absolute',
+                top: hoverBox.top,
+                left: hoverBox.left,
+                width: hoverBox.width,
+                height: hoverBox.height,
+                border: '1px dashed #38BDF8',
+                backgroundColor: 'rgba(56, 189, 248, 0.06)',
+                pointerEvents: 'none',
+                zIndex: 40,
+              }}
+            >
+              <span
+                className="tabular-nums"
+                style={{
+                  position: 'absolute',
+                  top: -19,
+                  left: -1,
+                  backgroundColor: '#0284C7',
+                  color: '#FFFFFF',
+                  fontSize: 10,
+                  fontWeight: 600,
+                  fontFamily: 'var(--font-mono)',
+                  padding: '1px 5px',
+                  borderRadius: 3,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                &lt;{hoverBox.tagName}&gt;
+              </span>
+            </div>
+          )}
+
+        {/* Figma-style Active Selection Bounding Box */}
+        {selectedBox && selectedElement?.screenId === screen.id && (
+          <div
+            className="zelune-box-overlay"
+            style={{
+              position: 'absolute',
+              top: selectedBox.top,
+              left: selectedBox.left,
+              width: selectedBox.width,
+              height: selectedBox.height,
+              border: '1.5px solid #6366F1',
+              backgroundColor: 'rgba(99, 102, 241, 0.08)',
+              pointerEvents: 'none',
+              zIndex: 45,
+            }}
+          >
+            {/* Corner resize handles aesthetic */}
+            {[
+              { top: -3.5, left: -3.5 },
+              { top: -3.5, right: -3.5 },
+              { bottom: -3.5, left: -3.5 },
+              { bottom: -3.5, right: -3.5 },
+            ].map((pos, idx) => (
+              <span
+                key={idx}
+                style={{
+                  position: 'absolute',
+                  ...pos,
+                  width: 6,
+                  height: 6,
+                  backgroundColor: '#FFFFFF',
+                  border: '1.5px solid #4F46E5',
+                  borderRadius: 1,
+                }}
+              />
+            ))}
+            <span
+              className="tabular-nums"
+              style={{
+                position: 'absolute',
+                top: -21,
+                left: -1,
+                backgroundColor: '#4F46E5',
+                color: '#FFFFFF',
+                fontSize: 10,
+                fontWeight: 700,
+                fontFamily: 'var(--font-mono)',
+                padding: '2px 6px',
+                borderRadius: 3,
+                whiteSpace: 'nowrap',
+                boxShadow: '0 2px 6px rgba(0,0,0,0.4)',
+              }}
+            >
+              &lt;{selectedBox.tagName}&gt; · L{selectedElement.line}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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;