@jxrstudios/jxr 1.0.10 → 1.1.11

package/zzz_react_template/components/Map.tsx

@@ -0,0 +1,155 @@
+/**
+ * GOOGLE MAPS FRONTEND INTEGRATION - ESSENTIAL GUIDE
+ *
+ * USAGE FROM PARENT COMPONENT:
+ * ======
+ *
+ * const mapRef = useRef<google.maps.Map | null>(null);
+ *
+ * <MapView
+ *   initialCenter={{ lat: 40.7128, lng: -74.0060 }}
+ *   initialZoom={15}
+ *   onMapReady={(map) => {
+ *     mapRef.current = map; // Store to control map from parent anytime, google map itself is in charge of the re-rendering, not react state.
+ * </MapView>
+ *
+ * ======
+ * Available Libraries and Core Features:
+ * -------------------------------
+ * 📍 MARKER (from `marker` library)
+ * - Attaches to map using { map, position }
+ * new google.maps.marker.AdvancedMarkerElement({
+ *   map,
+ *   position: { lat: 37.7749, lng: -122.4194 },
+ *   title: "San Francisco",
+ * });
+ *
+ * -------------------------------
+ * 🏢 PLACES (from `places` library)
+ * - Does not attach directly to map; use data with your map manually.
+ * const place = new google.maps.places.Place({ id: PLACE_ID });
+ * await place.fetchFields({ fields: ["displayName", "location"] });
+ * map.setCenter(place.location);
+ * new google.maps.marker.AdvancedMarkerElement({ map, position: place.location });
+ *
+ * -------------------------------
+ * 🧭 GEOCODER (from `geocoding` library)
+ * - Standalone service; manually apply results to map.
+ * const geocoder = new google.maps.Geocoder();
+ * geocoder.geocode({ address: "New York" }, (results, status) => {
+ *   if (status === "OK" && results[0]) {
+ *     map.setCenter(results[0].geometry.location);
+ *     new google.maps.marker.AdvancedMarkerElement({
+ *       map,
+ *       position: results[0].geometry.location,
+ *     });
+ *   }
+ * });
+ *
+ * -------------------------------
+ * 📐 GEOMETRY (from `geometry` library)
+ * - Pure utility functions; not attached to map.
+ * const dist = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
+ *
+ * -------------------------------
+ * 🛣️ ROUTES (from `routes` library)
+ * - Combines DirectionsService (standalone) + DirectionsRenderer (map-attached)
+ * const directionsService = new google.maps.DirectionsService();
+ * const directionsRenderer = new google.maps.DirectionsRenderer({ map });
+ * directionsService.route(
+ *   { origin, destination, travelMode: "DRIVING" },
+ *   (res, status) => status === "OK" && directionsRenderer.setDirections(res)
+ * );
+ *
+ * -------------------------------
+ * 🌦️ MAP LAYERS (attach directly to map)
+ * - new google.maps.TrafficLayer().setMap(map);
+ * - new google.maps.TransitLayer().setMap(map);
+ * - new google.maps.BicyclingLayer().setMap(map);
+ *
+ * -------------------------------
+ * ✅ SUMMARY
+ * - “map-attached” → AdvancedMarkerElement, DirectionsRenderer, Layers.
+ * - “standalone” → Geocoder, DirectionsService, DistanceMatrixService, ElevationService.
+ * - “data-only” → Place, Geometry utilities.
+ */
+
+/// <reference types="@types/google.maps" />
+
+import { useEffect, useRef } from "react";
+import { usePersistFn } from "@/hooks/usePersistFn";
+import { cn } from "@/lib/utils";
+
+declare global {
+  interface Window {
+    google?: typeof google;
+  }
+}
+
+const API_KEY = import.meta.env.VITE_FRONTEND_FORGE_API_KEY;
+const FORGE_BASE_URL =
+  import.meta.env.VITE_FRONTEND_FORGE_API_URL ||
+  "https://forge.butterfly-effect.dev";
+const MAPS_PROXY_URL = `${FORGE_BASE_URL}/v1/maps/proxy`;
+
+function loadMapScript() {
+  return new Promise(resolve => {
+    const script = document.createElement("script");
+    script.src = `${MAPS_PROXY_URL}/maps/api/js?key=${API_KEY}&v=weekly&libraries=marker,places,geocoding,geometry`;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      resolve(null);
+      script.remove(); // Clean up immediately
+    };
+    script.onerror = () => {
+      console.error("Failed to load Google Maps script");
+    };
+    document.head.appendChild(script);
+  });
+}
+
+interface MapViewProps {
+  className?: string;
+  initialCenter?: google.maps.LatLngLiteral;
+  initialZoom?: number;
+  onMapReady?: (map: google.maps.Map) => void;
+}
+
+export function MapView({
+  className,
+  initialCenter = { lat: 37.7749, lng: -122.4194 },
+  initialZoom = 12,
+  onMapReady,
+}: MapViewProps) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<google.maps.Map | null>(null);
+
+  const init = usePersistFn(async () => {
+    await loadMapScript();
+    if (!mapContainer.current) {
+      console.error("Map container not found");
+      return;
+    }
+    map.current = new window.google.maps.Map(mapContainer.current, {
+      zoom: initialZoom,
+      center: initialCenter,
+      mapTypeControl: true,
+      fullscreenControl: true,
+      zoomControl: true,
+      streetViewControl: true,
+      mapId: "DEMO_MAP_ID",
+    });
+    if (onMapReady) {
+      onMapReady(map.current);
+    }
+  });
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  return (
+    <div ref={mapContainer} className={cn("w-full h-[500px]", className)} />
+  );
+}

package/zzz_react_template/components/jxr/CodeEditor.tsx

@@ -0,0 +1,313 @@
+/**
+ * JXR.js — Code Editor Component
+ * Design: LavaFlow OS — Thermal Precision + Edge Command
+ * Lightweight code editor with syntax highlighting and tab management
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useJXR } from '@/contexts/JXRContext';
+import { X, Save, FileCode2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+// ─── Syntax highlighter ───────────────────────────────────────────────────────
+
+function highlight(code: string, language: string): string {
+  if (!['tsx', 'ts', 'jsx', 'js'].includes(language)) {
+    return escapeHtml(code);
+  }
+
+  let result = escapeHtml(code);
+
+  // Keywords
+  result = result.replace(
+    /\b(import|export|from|default|const|let|var|function|return|if|else|for|while|class|extends|new|typeof|instanceof|async|await|try|catch|throw|interface|type|enum|implements|abstract|readonly|private|public|protected|static|override|declare|namespace|module|as|in|of|void|null|undefined|true|false|this|super)\b/g,
+    '<span class="syn-keyword">$1</span>'
+  );
+
+  // JSX tags
+  result = result.replace(
+    /(&lt;\/?[A-Z][A-Za-z0-9.]*)/g,
+    '<span class="syn-component">$1</span>'
+  );
+  result = result.replace(
+    /(&lt;\/?[a-z][a-z0-9-]*)/g,
+    '<span class="syn-tag">$1</span>'
+  );
+
+  // Strings
+  result = result.replace(
+    /(&quot;[^&]*&quot;|&#39;[^&]*&#39;|`[^`]*`)/g,
+    '<span class="syn-string">$1</span>'
+  );
+
+  // Comments
+  result = result.replace(
+    /(\/\/[^\n]*)/g,
+    '<span class="syn-comment">$1</span>'
+  );
+  result = result.replace(
+    /(\/\*[\s\S]*?\*\/)/g,
+    '<span class="syn-comment">$1</span>'
+  );
+
+  // Numbers
+  result = result.replace(
+    /\b(\d+\.?\d*)\b/g,
+    '<span class="syn-number">$1</span>'
+  );
+
+  // Function names
+  result = result.replace(
+    /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?=\()/g,
+    '<span class="syn-function">$1</span>'
+  );
+
+  // Types (PascalCase)
+  result = result.replace(
+    /\b([A-Z][A-Za-z0-9]*)\b/g,
+    '<span class="syn-type">$1</span>'
+  );
+
+  return result;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+// ─── Tab bar ──────────────────────────────────────────────────────────────────
+
+function TabBar() {
+  const { openTabs, activeFile, openFile, closeFile } = useJXR();
+
+  return (
+    <div className="flex items-center overflow-x-auto border-b border-border bg-card scrollbar-thin">
+      {openTabs.map((tab) => {
+        const isActive = tab.path === activeFile?.path;
+        const name = tab.path.split('/').pop() ?? tab.path;
+        return (
+          <div
+            key={tab.path}
+            className={cn(
+              'group flex items-center gap-1.5 px-3 py-2 border-r border-border cursor-pointer',
+              'text-xs font-mono whitespace-nowrap transition-colors duration-100 shrink-0',
+              isActive
+                ? 'bg-background text-foreground border-t-2 border-t-lava'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/40'
+            )}
+            onClick={() => openFile(tab.path)}
+          >
+            <FileCode2 className="w-3 h-3 shrink-0" />
+            <span>{name}</span>
+            {tab.dirty && (
+              <span className="w-1.5 h-1.5 rounded-full bg-lava shrink-0" />
+            )}
+            <button
+              className={cn(
+                'ml-0.5 p-0.5 rounded hover:bg-muted transition-opacity',
+                isActive ? 'opacity-60 hover:opacity-100' : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                closeFile(tab.path);
+              }}
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Editor ───────────────────────────────────────────────────────────────────
+
+export function CodeEditor() {
+  const { activeFile, saveFile, openTabs } = useJXR();
+  const [content, setContent] = useState('');
+  const [isDirty, setIsDirty] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const highlightRef = useRef<HTMLDivElement>(null);
+  const saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sync content when active file changes
+  useEffect(() => {
+    if (activeFile) {
+      setContent(activeFile.content);
+      setIsDirty(false);
+    }
+  }, [activeFile?.path]);
+
+  // Auto-save after 1.5s of inactivity
+  useEffect(() => {
+    if (!isDirty || !activeFile) return;
+    if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    saveTimeout.current = setTimeout(() => {
+      saveFile(activeFile.path, content);
+      setIsDirty(false);
+    }, 1500);
+    return () => {
+      if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    };
+  }, [content, isDirty, activeFile, saveFile]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+    setIsDirty(true);
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Tab key → insert 2 spaces
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = e.currentTarget.selectionStart;
+        const end = e.currentTarget.selectionEnd;
+        const newContent = content.substring(0, start) + '  ' + content.substring(end);
+        setContent(newContent);
+        setIsDirty(true);
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            textareaRef.current.selectionStart = start + 2;
+            textareaRef.current.selectionEnd = start + 2;
+          }
+        });
+      }
+      // Ctrl/Cmd+S → save
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        if (activeFile) {
+          saveFile(activeFile.path, content);
+          setIsDirty(false);
+          toast.success('Saved', { duration: 1000 });
+        }
+      }
+    },
+    [content, activeFile, saveFile]
+  );
+
+  // Sync scroll between textarea and highlight layer
+  const handleScroll = useCallback(() => {
+    if (highlightRef.current && textareaRef.current) {
+      highlightRef.current.scrollTop = textareaRef.current.scrollTop;
+      highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  }, []);
+
+  const lines = content.split('\n');
+  const highlighted = activeFile
+    ? highlight(content, activeFile.language)
+    : escapeHtml(content);
+
+  if (openTabs.length === 0) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="flex-1 flex items-center justify-center bg-background">
+          <div className="text-center space-y-3">
+            <FileCode2 className="w-12 h-12 text-muted-foreground/30 mx-auto" />
+            <p className="text-sm text-muted-foreground">Select a file to edit</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <TabBar />
+
+      {/* Editor area */}
+      <div className="flex-1 overflow-hidden relative">
+        {activeFile ? (
+          <div className="flex h-full">
+            {/* Line numbers */}
+            <div
+              className="select-none text-right pr-3 pl-3 py-4 text-xs font-mono text-muted-foreground/40 bg-card/50 border-r border-border overflow-hidden"
+              style={{ minWidth: '3rem', lineHeight: '1.6' }}
+            >
+              {lines.map((_, i) => (
+                <div key={i}>{i + 1}</div>
+              ))}
+            </div>
+
+            {/* Code area */}
+            <div className="flex-1 relative overflow-hidden">
+              {/* Syntax highlight layer */}
+              <div
+                ref={highlightRef}
+                className="absolute inset-0 px-4 py-4 text-xs font-mono overflow-auto pointer-events-none whitespace-pre"
+                style={{ lineHeight: '1.6', color: 'transparent' }}
+                dangerouslySetInnerHTML={{ __html: highlighted }}
+              />
+
+              {/* Actual textarea */}
+              <textarea
+                ref={textareaRef}
+                className={cn(
+                  'absolute inset-0 w-full h-full px-4 py-4',
+                  'text-xs font-mono bg-transparent text-foreground',
+                  'resize-none outline-none border-none',
+                  'caret-lava selection:bg-lava/30',
+                  'overflow-auto whitespace-pre'
+                )}
+                style={{ lineHeight: '1.6', caretColor: 'var(--lava)' }}
+                value={content}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onScroll={handleScroll}
+                spellCheck={false}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <p className="text-sm text-muted-foreground">No file selected</p>
+          </div>
+        )}
+      </div>
+
+      {/* Status bar */}
+      {activeFile && (
+        <div className="flex items-center justify-between px-4 py-1 border-t border-border bg-card text-[10px] text-muted-foreground">
+          <div className="flex items-center gap-3">
+            <span className="font-mono">{activeFile.language.toUpperCase()}</span>
+            <span>{lines.length} lines</span>
+            <span>{(activeFile.size / 1024).toFixed(1)} KB</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {isDirty && (
+              <span className="text-lava flex items-center gap-1">
+                <span className="w-1.5 h-1.5 rounded-full bg-lava inline-block" />
+                Unsaved
+              </span>
+            )}
+            <span>UTF-8</span>
+            <span>LF</span>
+          </div>
+        </div>
+      )}
+
+      {/* Syntax highlight CSS */}
+      <style>{`
+        .syn-keyword { color: #c792ea; }
+        .syn-component { color: #82aaff; }
+        .syn-tag { color: #f07178; }
+        .syn-string { color: #c3e88d; }
+        .syn-comment { color: #546e7a; font-style: italic; }
+        .syn-number { color: #f78c6c; }
+        .syn-function { color: #82aaff; }
+        .syn-type { color: #ffcb6b; }
+      `}</style>
+    </div>
+  );
+}

package/zzz_react_template/components/jxr/FileExplorer.tsx

@@ -0,0 +1,230 @@
+/**
+ * JXR.js — File Explorer Component
+ * Design: LavaFlow OS — Thermal Precision + Edge Command
+ * Sidebar file tree with context menu, drag-and-drop ready
+ */
+
+import { useState, useCallback } from 'react';
+import { useJXR } from '@/contexts/JXRContext';
+import type { VirtualFile, VirtualDirectory } from '@/lib/jxr-runtime';
+import {
+  ChevronRight,
+  ChevronDown,
+  FileCode2,
+  FileJson,
+  FileText,
+  Folder,
+  FolderOpen,
+  Plus,
+  Trash2,
+  RefreshCw,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+function isVirtualFile(node: VirtualFile | VirtualDirectory): node is VirtualFile {
+  return 'content' in node;
+}
+
+function getFileIcon(file: VirtualFile) {
+  const iconClass = 'w-3.5 h-3.5 shrink-0';
+  switch (file.language) {
+    case 'tsx':
+    case 'jsx':
+      return <FileCode2 className={cn(iconClass, 'text-cyan-400')} />;
+    case 'ts':
+    case 'js':
+      return <FileCode2 className={cn(iconClass, 'text-yellow-400')} />;
+    case 'json':
+      return <FileJson className={cn(iconClass, 'text-green-400')} />;
+    case 'css':
+      return <FileCode2 className={cn(iconClass, 'text-pink-400')} />;
+    default:
+      return <FileText className={cn(iconClass, 'text-muted-foreground')} />;
+  }
+}
+
+function getFileName(path: string): string {
+  return path.split('/').pop() ?? path;
+}
+
+interface TreeNodeProps {
+  node: VirtualFile | VirtualDirectory;
+  depth: number;
+  activePath: string | null;
+  onFileClick: (file: VirtualFile) => void;
+  onDelete: (path: string) => void;
+}
+
+function TreeNode({ node, depth, activePath, onFileClick, onDelete }: TreeNodeProps) {
+  const [expanded, setExpanded] = useState(true);
+  const indent = depth * 12;
+
+  if (isVirtualFile(node)) {
+    const isActive = node.path === activePath;
+    return (
+      <div
+        className={cn(
+          'group flex items-center gap-1.5 px-2 py-[3px] cursor-pointer rounded-sm text-xs',
+          'hover:bg-sidebar-accent/60 transition-colors duration-100',
+          isActive && 'bg-sidebar-accent text-lava border-l-2 border-lava'
+        )}
+        style={{ paddingLeft: `${indent + 8}px` }}
+        onClick={() => onFileClick(node)}
+      >
+        {getFileIcon(node)}
+        <span className={cn(
+          'flex-1 truncate font-mono',
+          isActive ? 'text-lava' : 'text-sidebar-foreground/80'
+        )}>
+          {getFileName(node.path)}
+        </span>
+        <button
+          className="opacity-0 group-hover:opacity-100 p-0.5 hover:text-destructive transition-opacity"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(node.path);
+          }}
+        >
+          <Trash2 className="w-3 h-3" />
+        </button>
+      </div>
+    );
+  }
+
+  // Directory node
+  return (
+    <div>
+      <div
+        className={cn(
+          'flex items-center gap-1.5 px-2 py-[3px] cursor-pointer rounded-sm text-xs',
+          'hover:bg-sidebar-accent/40 transition-colors duration-100'
+        )}
+        style={{ paddingLeft: `${indent + 4}px` }}
+        onClick={() => setExpanded((e) => !e)}
+      >
+        {expanded ? (
+          <ChevronDown className="w-3 h-3 text-muted-foreground shrink-0" />
+        ) : (
+          <ChevronRight className="w-3 h-3 text-muted-foreground shrink-0" />
+        )}
+        {expanded ? (
+          <FolderOpen className="w-3.5 h-3.5 text-lava shrink-0" />
+        ) : (
+          <Folder className="w-3.5 h-3.5 text-lava/70 shrink-0" />
+        )}
+        <span className="text-sidebar-foreground/90 font-medium">
+          {node.name}
+        </span>
+      </div>
+      {expanded && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={isVirtualFile(child) ? child.path : child.path}
+              node={child}
+              depth={depth + 1}
+              activePath={activePath}
+              onFileClick={onFileClick}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FileExplorer() {
+  const { fileTree, openFile, deleteFile, createFile, activeFile } = useJXR();
+  const [newFileName, setNewFileName] = useState('');
+  const [showNewFile, setShowNewFile] = useState(false);
+
+  const handleFileClick = useCallback(
+    (file: VirtualFile) => {
+      openFile(file.path);
+    },
+    [openFile]
+  );
+
+  const handleDelete = useCallback(
+    (path: string) => {
+      deleteFile(path);
+      toast.success(`Deleted ${path.split('/').pop()}`);
+    },
+    [deleteFile]
+  );
+
+  const handleCreateFile = useCallback(() => {
+    if (!newFileName.trim()) return;
+    const path = `/src/${newFileName.trim()}`;
+    const ext = newFileName.split('.').pop() ?? 'ts';
+    const templates: Record<string, string> = {
+      tsx: `export default function ${newFileName.replace('.tsx', '')}() {\n  return <div>Hello from ${newFileName}</div>;\n}\n`,
+      ts: `// ${newFileName}\nexport {};\n`,
+      css: `/* ${newFileName} */\n`,
+      json: `{}\n`,
+    };
+    createFile(path, templates[ext] ?? '');
+    setNewFileName('');
+    setShowNewFile(false);
+  }, [newFileName, createFile]);
+
+  return (
+    <div className="flex flex-col h-full bg-sidebar">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-sidebar-border">
+        <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          Explorer
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            className="p-1 hover:text-lava transition-colors rounded"
+            onClick={() => setShowNewFile((v) => !v)}
+            title="New file"
+          >
+            <Plus className="w-3.5 h-3.5" />
+          </button>
+          <button
+            className="p-1 hover:text-lava transition-colors rounded"
+            title="Refresh"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* New file input */}
+      {showNewFile && (
+        <div className="px-3 py-2 border-b border-sidebar-border">
+          <input
+            autoFocus
+            className="w-full bg-input text-xs font-mono px-2 py-1 rounded border border-border focus:border-lava outline-none"
+            placeholder="filename.tsx"
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleCreateFile();
+              if (e.key === 'Escape') setShowNewFile(false);
+            }}
+          />
+        </div>
+      )}
+
+      {/* Tree */}
+      <div className="flex-1 overflow-y-auto py-1 scrollbar-thin">
+        {fileTree ? (
+          <TreeNode
+            node={fileTree}
+            depth={0}
+            activePath={activeFile?.path ?? null}
+            onFileClick={handleFileClick}
+            onDelete={handleDelete}
+          />
+        ) : (
+          <div className="px-4 py-3 text-xs text-muted-foreground">Loading...</div>
+        )}
+      </div>
+    </div>
+  );
+}