import React, {  useState,  useEffect,  useRef,  useCallback,  useMemo,  useContext,  Fragment,  createContext,} from "react";import { transform } from "sucrase"; import {  infiniteQueryOptions,  mutationOptions,  queryOptions,  skipToken,  useInfiniteQuery,  useMutation,  useQuery,  useQueryClient,} from "./hooks";import * as Components from "./components";import * as QueryHooks from "./hooks"; export type EvaluatedComponent =  | { component: React.ComponentType; config: Record<string, unknown> }  | { error: string }; const createGeneratedCodeRequire =  () =>  (specifier: string): unknown => {    if (specifier === "react") return React;    if (specifier === "@tanstack/react-query") return QueryHooks;    if (specifier === "recharts" || specifier === "lucide-react" || specifier === "./components") {      return Components;    }    throw new Error(      `Generated UI cannot import "${specifier}". Everything needed is already in scope; remove the import.`,    );  }; const blockedNetworkPrimitive = (name: string) =>  function blockedNetworkPrimitive() {    throw new Error(`${name} is disabled in generated UI. Use tools.* via useQuery/useMutation.`);  }; /** Compile JSX source to plain JS using Sucrase. */export function compileJsx(code: string): string {  const result = transform(code, {    transforms: ["jsx", "typescript", "imports"],    jsxRuntime: "classic",    production: true,  });  return result.code;} /** * Evaluate compiled JS in a scoped context providing React, hooks, * components, tools proxy, useQuery/useMutation, and Lucide icons. */export function evaluateComponent(  compiled: string,  tools: Record<string, unknown>,): EvaluatedComponent {  const module = { exports: {} as Record<string, unknown> | React.ComponentType };  const exports = module.exports;   const scope: Record<string, unknown> = buildGeneratedCodeScope({ module, exports, tools });   const scopeKeys = Object.keys(scope);  const scopeValues = scopeKeys.map((k) => scope[k]);   // Execute the compiled code and look for a component + optional config.  // We check well-known names and common module export shapes so generated  // code stays resilient to `export default function App()` and friends.  const wrappedCode = `    "use strict";    ${compiled}    var __moduleExports = module && module.exports;    var __defaultExport =      __moduleExports && typeof __moduleExports === "object" && "default" in __moduleExports        ? __moduleExports.default        : exports && exports.default;    var __comp = null;    if (typeof App === "function") __comp = App;    else if (typeof Component === "function") __comp = Component;    else if (typeof Main === "function") __comp = Main;    else if (typeof __defaultExport === "function") __comp = __defaultExport;    else if (typeof __moduleExports === "function") __comp = __moduleExports;    else if (exports && typeof exports.App === "function") __comp = exports.App;    else if (exports && typeof exports.Component === "function") __comp = exports.Component;    else if (exports && typeof exports.Main === "function") __comp = exports.Main;    var __cfg = typeof config === "object" && config !== null ? config : {};    return { component: __comp, config: __cfg };  `;   try {    // eslint-disable-next-line no-new-func    const factory = new Function(...scopeKeys, wrappedCode);    const result = factory(...scopeValues) as {      component: React.ComponentType | null;      config: Record<string, unknown>;    };    if (!result.component) {      return { error: "No component found. Export a function named App." };    }    return { component: result.component, config: result.config };  } catch (err) {    const msg = err instanceof Error ? err.message : String(err);    console.error("[executor-shell] Failed to evaluate component:", err);    return { error: `Evaluation error: ${msg}` };  }} /** * The single source of truth for what generated code may reference without * declaring it. `evaluateComponent` passes these as the `new Function` * parameter list, so a name here IS in scope in the iframe and a name missing * here is NOT — which is why `create-artifact`'s redeclaration validator is pinned * against `PROVIDED_SCOPE_NAMES` by test rather than hand-maintained twice. */function buildGeneratedCodeScope(bindings: {  module: unknown;  exports: unknown;  tools: Record<string, unknown>;}): Record<string, unknown> {  const { module, exports, tools } = bindings;  return {    // React core    React,    useState,    useEffect,    useRef,    useCallback,    useMemo,    useContext,    Fragment,    createContext,     // Common module globals for resilient generated code evaluation.    module,    exports,    require: createGeneratedCodeRequire(),     // Defense in depth for direct network attempts. The inner iframe CSP is    // the browser boundary; these shadows produce clearer runtime errors.    fetch: blockedNetworkPrimitive("fetch"),    XMLHttpRequest: blockedNetworkPrimitive("XMLHttpRequest"),    WebSocket: blockedNetworkPrimitive("WebSocket"),    EventSource: blockedNetworkPrimitive("EventSource"),    Worker: blockedNetworkPrimitive("Worker"),    SharedWorker: blockedNetworkPrimitive("SharedWorker"),     // Data fetching    useQuery,    useInfiniteQuery,    useMutation,    useQueryClient,    queryOptions,    infiniteQueryOptions,    mutationOptions,    skipToken,     // The tools proxy is the ONLY way generated code reaches an integration.    // There is deliberately no `run(code)` escape hatch: arbitrary code is    // opaque to the invalidation helpers (a hand-rolled `queryKey` defeats    // `queryFilter`) and to artifact analysis, which reads `tools.<path>`    // references out of the source. Pagination, the one thing `run` was    // reached for, is declarative through `.infiniteQueryOptions(...)`.    tools,     // All UI components, icons, chart primitives    ...Components,  };} /** * Every name generated code may use without declaring it, derived from the * real evaluation scope rather than re-listed by hand. `create-artifact`'s * redeclaration guard consumes this, so adding a component to `components.ts` * automatically protects it from being shadowed. */export const PROVIDED_SCOPE_NAMES: readonly string[] = Object.keys(  buildGeneratedCodeScope({    module: { exports: {} },    exports: {},    tools: {},  }),);