@aquiles-ai/renderize 1.8.0 → 2.0.0

package/README.md

@@ -1,2 +1,132 @@
+<div align="center">
+
 # Renderize
+
+<img src="https://res.cloudinary.com/dmtomxyvm/image/upload/v1772919461/renderize_z4qlyx.png" alt="Renderize" width="800"/>
+
 Drop-in sandbox component that executes AI-generated React code with zero configuration.
+
+```tsx
+<Renderize code={llmGeneratedCode} />
+```
+
+</div>
+
+## How it works
+
+Renderize injects LLM-generated code into a `srcdoc` iframe that comes pre-loaded with React 18, Tailwind CSS, Babel standalone, and a curated set of UI libraries. The iframe runs without `allow-same-origin`, so it can't access the parent page's cookies, storage, or DOM.
+
+A built-in fetch proxy bridges the null-origin restriction: the iframe posts fetch requests to the parent window, which executes them and sends the response back. This means AI-generated code can call external APIs without any CORS configuration.
+
+```
+Parent window
+│
+├── <Renderize />                  mounts the iframe, owns the message bus
+│   ├── fetch proxy                relays fetch calls from iframe → real network
+│   └── error forwarding           surfaces runtime errors via onError()
+│
+└── srcdoc iframe (sandboxed)
+    ├── React 18 + ReactDOM
+    ├── Tailwind CSS (CDN)
+    ├── Babel standalone           transpiles JSX + modern JS at runtime
+    ├── importmap                  resolves lucide-react, @radix-ui/*, etc.
+    └── App()                      your LLM-generated component
+```
+
+## Installation
+
+```bash
+npm i @aquiles-ai/renderize
+# or
+pnpm add @aquiles-ai/renderize
+```
+
+## Usage
+
+```tsx
+import { Renderize } from "@aquiles-ai/renderize";
+
+export default function Playground() {
+  const code = `
+    function App() {
+      const [count, setCount] = useState(0);
+      return (
+        <div className="flex flex-col items-center gap-4 p-8">
+          <h1 className="text-2xl font-bold">{count}</h1>
+          <button
+            onClick={() => setCount(c => c + 1)}
+            className="px-4 py-2 bg-blue-600 text-white rounded"
+          >
+            Increment
+          </button>
+        </div>
+      );
+    }
+  `;
+
+  return <Renderize code={code} height={400} />;
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | | React code generated by the LLM. Must define a function component named `App`. |
+| `height` | `string \| number` | `"100%"` | Height of the sandbox iframe. |
+| `width` | `string \| number` | `"100%"` | Width of the sandbox iframe. |
+| `className` | `string` | | Class name for the wrapper `<div>`. |
+| `style` | `React.CSSProperties` | | Inline styles for the wrapper `<div>`. |
+| `onError` | `(error: string) => void` | | Called when the sandbox encounters a runtime error. |
+
+## Available libraries
+
+The sandbox importmap includes the following packages. Imports from any other module are stripped by `sanitizeCode`.
+
+| Package | Notes |
+|---------|-------|
+| `react` | v18, hooks already in global scope |
+| `react-dom` | v18 |
+| `lucide-react` | Icon library |
+| `clsx` | Class name utility |
+| `tailwind-merge` | Tailwind class merging |
+| `class-variance-authority` | CVA, variant-based styling |
+| `@radix-ui/react-*` | Full Radix UI primitives suite |
+
+React hooks (`useState`, `useEffect`, `useRef`, `useCallback`, `useMemo`, `useReducer`, `useContext`, `createContext`, `forwardRef`, `Fragment`) are already imported and available in global scope. The LLM does not need to import them.
+
+## Requirements for LLM-generated code
+
+The component name must be `App`. The template calls `React.createElement(App)` directly, so:
+
+```tsx
+// Correct
+function App() { ... }
+
+// Also correct (sanitizeCode will fix these automatically)
+export default function App() { ... }
+export default function Dashboard() { ... }
+function MyComponent() { ... }  // if it's the only PascalCase component
+```
+
+## Sandbox security
+
+The iframe uses this `sandbox` attribute:
+
+```
+allow-scripts allow-forms allow-modals allow-popups allow-downloads
+```
+
+`allow-same-origin` is intentionally omitted. This means:
+
+- No access to `localStorage` or `sessionStorage`
+- No access to `document.cookie`
+- No access to `indexedDB`
+- No access to the parent page's DOM
+
+The fetch proxy is the only bridge between the iframe and the outside world.
+
+
+## License
+
+Apache 2.0

package/dist/index.cjs

@@ -83,6 +83,28 @@ function buildTemplate(code) {
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; padding: 0; }
+
+    /* Scrollbar personalizada: fina y semi-transparente */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.35);
+      border-radius: 999px;
+      transition: background 0.2s ease;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.55);
+    }
+    /* Firefox */
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+    }
   </style>
 </head>
 <body>
@@ -95,7 +117,7 @@ function buildTemplate(code) {
     // the parent has a real origin and can make fetch calls freely.
     window.fetch = function(url, options = {}) {
       return new Promise((resolve, reject) => {
-        const id = crypto.randomUUID();
+        const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
 
         // Serialize body \u2014 postMessage can't transfer Request objects
         const serializedOptions = {
@@ -166,6 +188,178 @@ function buildTemplate(code) {
 </html>`;
 }
 
+// src/sanitize.ts
+var TEMPLATE_PROVIDED_MODULES = /* @__PURE__ */ new Set([
+  "react",
+  "react-dom",
+  "react-dom/client",
+  "react/jsx-runtime"
+]);
+var TEMPLATE_PROVIDED_NAMES = /* @__PURE__ */ new Set([
+  "React",
+  "useState",
+  "useEffect",
+  "useRef",
+  "useCallback",
+  "useMemo",
+  "useReducer",
+  "useContext",
+  "createContext",
+  "forwardRef",
+  "Fragment",
+  "createRoot"
+]);
+var IMPORTMAP_MODULES = /* @__PURE__ */ new Set([
+  "react",
+  "react/jsx-runtime",
+  "react-dom",
+  "react-dom/client",
+  "lucide-react",
+  "clsx",
+  "class-variance-authority",
+  "tailwind-merge",
+  "@radix-ui/react-accordion",
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-avatar",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-collapsible",
+  "@radix-ui/react-context-menu",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-menubar",
+  "@radix-ui/react-navigation-menu",
+  "@radix-ui/react-popover",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-radio-group",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-toggle",
+  "@radix-ui/react-toggle-group",
+  "@radix-ui/react-toolbar",
+  "@radix-ui/react-tooltip"
+]);
+function findMatchingBrace(code, openIndex) {
+  let depth = 0;
+  let inSingle = false;
+  let inDouble = false;
+  let inTemplate = 0;
+  for (let i = openIndex; i < code.length; i++) {
+    const ch = code[i];
+    const prev = i > 0 ? code[i - 1] : "";
+    if (prev === "\\") continue;
+    if (!inDouble && !inTemplate && ch === "'") {
+      inSingle = !inSingle;
+      continue;
+    }
+    if (!inSingle && !inTemplate && ch === '"') {
+      inDouble = !inDouble;
+      continue;
+    }
+    if (!inSingle && !inDouble && ch === "`") {
+      inTemplate = inTemplate ? inTemplate - 1 : inTemplate + 1;
+      continue;
+    }
+    if (inSingle || inDouble || inTemplate) continue;
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i + 1;
+    }
+  }
+  return -1;
+}
+function stripTypeScriptDeclarations(code) {
+  const blockKeywords = /(?:export\s+)?(?:interface|enum)\s+\w[\w<,\s>]*\s*\{/g;
+  let match;
+  while ((match = blockKeywords.exec(code)) !== null) {
+    const openBrace = code.indexOf("{", match.index + match[0].length - 1);
+    if (openBrace === -1) continue;
+    const end = findMatchingBrace(code, openBrace);
+    if (end === -1) continue;
+    const tail = code[end] === ";" ? end + 1 : end;
+    code = code.slice(0, match.index) + code.slice(tail);
+    blockKeywords.lastIndex = match.index;
+  }
+  code = code.replace(
+    /^(?:export\s+)?type\s+\w[\w<,\s>]*\s*=\s*/gm,
+    (_header, offset, fullCode) => {
+      const rest = fullCode.slice(offset + _header.length);
+      const trimmed = rest.trimStart();
+      if (trimmed.startsWith("{")) {
+        const relOpen = rest.indexOf("{");
+        const end = findMatchingBrace(rest, relOpen);
+        if (end !== -1) {
+          code = fullCode.slice(0, offset) + fullCode.slice(offset + _header.length + end);
+        }
+      }
+      return "";
+    }
+  );
+  return code;
+}
+function stripAsAssertions(code) {
+  return code.replace(
+    /(?<![{,]\s*\w+)\s+as\s+[A-Z]\w*(?:<[^>]*>)?(?:\[\])?(?=\s*[),;}\n])/g,
+    ""
+  );
+}
+function detectMainComponentName(code) {
+  const fnExport = code.match(/export\s+default\s+function\s+([A-Z]\w*)/);
+  if (fnExport && fnExport[1] !== "App") return fnExport[1];
+  const constExport = code.match(/export\s+default\s+(?:const|let)\s+([A-Z]\w*)/);
+  if (constExport && constExport[1] !== "App") return constExport[1];
+  const allDefs = [
+    ...code.matchAll(
+      /^(?:function|const|let)\s+([A-Z]\w*)\s*(?:=\s*(?:\(|React\.memo\()|[\(<(])/gm
+    )
+  ].map((m) => m[1]).filter((n) => n !== "App");
+  if (allDefs.length === 1) return allDefs[0];
+  return null;
+}
+function sanitizeCode(raw) {
+  let code = raw;
+  code = code.replace(/^```[a-zA-Z]*\r?\n?/, "").replace(/\r?\n?```\s*$/, "");
+  code = code.replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\r/g, "\r");
+  code = code.replace(/^\s*['"]use (client|server)['"]\s*;?\s*\n?/gm, "");
+  code = stripTypeScriptDeclarations(code);
+  code = stripAsAssertions(code);
+  const originalName = detectMainComponentName(code);
+  if (originalName) {
+    code = code.replace(new RegExp(`\\b${originalName}\\b`, "g"), "App");
+  }
+  code = code.replace(/\bexport\s+default\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+default\s+((?:const|let)\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+((?:const|let)\s+App\b)/, "$1");
+  const importLineRegex = /^import\s+(?:type\s+)?(?:[^"'\n]+\s+from\s+)?["']([^"']+)["'];?\s*$/gm;
+  code = code.replace(importLineRegex, (line, modulePath) => {
+    if (TEMPLATE_PROVIDED_MODULES.has(modulePath)) return "";
+    if (!IMPORTMAP_MODULES.has(modulePath)) return "";
+    const namedMatch = line.match(/\{([^}]+)\}/);
+    if (namedMatch) {
+      const names = namedMatch[1].split(",").map((n) => n.trim().split(/\s+as\s+/)[0].trim()).filter(Boolean);
+      if (names.length > 0 && names.every((n) => TEMPLATE_PROVIDED_NAMES.has(n))) {
+        return "";
+      }
+    }
+    return line;
+  });
+  code = code.replace(
+    /^(?:const|let|var)\s+[\w\s,{}]+\s*=\s*require\s*\(["'][^"']+["']\)\s*;?\s*$/gm,
+    ""
+  );
+  code = code.replace(/\n{3,}/g, "\n\n");
+  return code.trim();
+}
+
 // src/Renderize.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Renderize({
@@ -180,7 +374,7 @@ function Renderize({
   const [srcDoc, setSrcDoc] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     if (!code?.trim()) return;
-    setSrcDoc(buildTemplate(code));
+    setSrcDoc(buildTemplate(sanitizeCode(code)));
   }, [code]);
   (0, import_react.useEffect)(() => {
     const handler = async (event) => {

package/dist/index.js

@@ -57,6 +57,28 @@ function buildTemplate(code) {
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; padding: 0; }
+
+    /* Scrollbar personalizada: fina y semi-transparente */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.35);
+      border-radius: 999px;
+      transition: background 0.2s ease;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.55);
+    }
+    /* Firefox */
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+    }
   </style>
 </head>
 <body>
@@ -69,7 +91,7 @@ function buildTemplate(code) {
     // the parent has a real origin and can make fetch calls freely.
     window.fetch = function(url, options = {}) {
       return new Promise((resolve, reject) => {
-        const id = crypto.randomUUID();
+        const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
 
         // Serialize body \u2014 postMessage can't transfer Request objects
         const serializedOptions = {
@@ -140,6 +162,178 @@ function buildTemplate(code) {
 </html>`;
 }
 
+// src/sanitize.ts
+var TEMPLATE_PROVIDED_MODULES = /* @__PURE__ */ new Set([
+  "react",
+  "react-dom",
+  "react-dom/client",
+  "react/jsx-runtime"
+]);
+var TEMPLATE_PROVIDED_NAMES = /* @__PURE__ */ new Set([
+  "React",
+  "useState",
+  "useEffect",
+  "useRef",
+  "useCallback",
+  "useMemo",
+  "useReducer",
+  "useContext",
+  "createContext",
+  "forwardRef",
+  "Fragment",
+  "createRoot"
+]);
+var IMPORTMAP_MODULES = /* @__PURE__ */ new Set([
+  "react",
+  "react/jsx-runtime",
+  "react-dom",
+  "react-dom/client",
+  "lucide-react",
+  "clsx",
+  "class-variance-authority",
+  "tailwind-merge",
+  "@radix-ui/react-accordion",
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-avatar",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-collapsible",
+  "@radix-ui/react-context-menu",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-menubar",
+  "@radix-ui/react-navigation-menu",
+  "@radix-ui/react-popover",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-radio-group",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-toggle",
+  "@radix-ui/react-toggle-group",
+  "@radix-ui/react-toolbar",
+  "@radix-ui/react-tooltip"
+]);
+function findMatchingBrace(code, openIndex) {
+  let depth = 0;
+  let inSingle = false;
+  let inDouble = false;
+  let inTemplate = 0;
+  for (let i = openIndex; i < code.length; i++) {
+    const ch = code[i];
+    const prev = i > 0 ? code[i - 1] : "";
+    if (prev === "\\") continue;
+    if (!inDouble && !inTemplate && ch === "'") {
+      inSingle = !inSingle;
+      continue;
+    }
+    if (!inSingle && !inTemplate && ch === '"') {
+      inDouble = !inDouble;
+      continue;
+    }
+    if (!inSingle && !inDouble && ch === "`") {
+      inTemplate = inTemplate ? inTemplate - 1 : inTemplate + 1;
+      continue;
+    }
+    if (inSingle || inDouble || inTemplate) continue;
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i + 1;
+    }
+  }
+  return -1;
+}
+function stripTypeScriptDeclarations(code) {
+  const blockKeywords = /(?:export\s+)?(?:interface|enum)\s+\w[\w<,\s>]*\s*\{/g;
+  let match;
+  while ((match = blockKeywords.exec(code)) !== null) {
+    const openBrace = code.indexOf("{", match.index + match[0].length - 1);
+    if (openBrace === -1) continue;
+    const end = findMatchingBrace(code, openBrace);
+    if (end === -1) continue;
+    const tail = code[end] === ";" ? end + 1 : end;
+    code = code.slice(0, match.index) + code.slice(tail);
+    blockKeywords.lastIndex = match.index;
+  }
+  code = code.replace(
+    /^(?:export\s+)?type\s+\w[\w<,\s>]*\s*=\s*/gm,
+    (_header, offset, fullCode) => {
+      const rest = fullCode.slice(offset + _header.length);
+      const trimmed = rest.trimStart();
+      if (trimmed.startsWith("{")) {
+        const relOpen = rest.indexOf("{");
+        const end = findMatchingBrace(rest, relOpen);
+        if (end !== -1) {
+          code = fullCode.slice(0, offset) + fullCode.slice(offset + _header.length + end);
+        }
+      }
+      return "";
+    }
+  );
+  return code;
+}
+function stripAsAssertions(code) {
+  return code.replace(
+    /(?<![{,]\s*\w+)\s+as\s+[A-Z]\w*(?:<[^>]*>)?(?:\[\])?(?=\s*[),;}\n])/g,
+    ""
+  );
+}
+function detectMainComponentName(code) {
+  const fnExport = code.match(/export\s+default\s+function\s+([A-Z]\w*)/);
+  if (fnExport && fnExport[1] !== "App") return fnExport[1];
+  const constExport = code.match(/export\s+default\s+(?:const|let)\s+([A-Z]\w*)/);
+  if (constExport && constExport[1] !== "App") return constExport[1];
+  const allDefs = [
+    ...code.matchAll(
+      /^(?:function|const|let)\s+([A-Z]\w*)\s*(?:=\s*(?:\(|React\.memo\()|[\(<(])/gm
+    )
+  ].map((m) => m[1]).filter((n) => n !== "App");
+  if (allDefs.length === 1) return allDefs[0];
+  return null;
+}
+function sanitizeCode(raw) {
+  let code = raw;
+  code = code.replace(/^```[a-zA-Z]*\r?\n?/, "").replace(/\r?\n?```\s*$/, "");
+  code = code.replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\r/g, "\r");
+  code = code.replace(/^\s*['"]use (client|server)['"]\s*;?\s*\n?/gm, "");
+  code = stripTypeScriptDeclarations(code);
+  code = stripAsAssertions(code);
+  const originalName = detectMainComponentName(code);
+  if (originalName) {
+    code = code.replace(new RegExp(`\\b${originalName}\\b`, "g"), "App");
+  }
+  code = code.replace(/\bexport\s+default\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+default\s+((?:const|let)\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+((?:const|let)\s+App\b)/, "$1");
+  const importLineRegex = /^import\s+(?:type\s+)?(?:[^"'\n]+\s+from\s+)?["']([^"']+)["'];?\s*$/gm;
+  code = code.replace(importLineRegex, (line, modulePath) => {
+    if (TEMPLATE_PROVIDED_MODULES.has(modulePath)) return "";
+    if (!IMPORTMAP_MODULES.has(modulePath)) return "";
+    const namedMatch = line.match(/\{([^}]+)\}/);
+    if (namedMatch) {
+      const names = namedMatch[1].split(",").map((n) => n.trim().split(/\s+as\s+/)[0].trim()).filter(Boolean);
+      if (names.length > 0 && names.every((n) => TEMPLATE_PROVIDED_NAMES.has(n))) {
+        return "";
+      }
+    }
+    return line;
+  });
+  code = code.replace(
+    /^(?:const|let|var)\s+[\w\s,{}]+\s*=\s*require\s*\(["'][^"']+["']\)\s*;?\s*$/gm,
+    ""
+  );
+  code = code.replace(/\n{3,}/g, "\n\n");
+  return code.trim();
+}
+
 // src/Renderize.tsx
 import { jsx } from "react/jsx-runtime";
 function Renderize({
@@ -154,7 +348,7 @@ function Renderize({
   const [srcDoc, setSrcDoc] = useState(null);
   useEffect(() => {
     if (!code?.trim()) return;
-    setSrcDoc(buildTemplate(code));
+    setSrcDoc(buildTemplate(sanitizeCode(code)));
   }, [code]);
   useEffect(() => {
     const handler = async (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiles-ai/renderize",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "Drop-in sandbox component that executes AI-generated React code with zero configuration.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Renderize.tsx

@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 import React, { useEffect, useRef, useState } from "react";
 import { buildTemplate } from "./template.js";
+import { sanitizeCode } from "./sanitize.js";
 
 export interface RenderizeProps {
   /** React code generated by the LLM. Must define a function component named App. */
@@ -30,7 +31,7 @@ export function Renderize({
 
   useEffect(() => {
     if (!code?.trim()) return;
-    setSrcDoc(buildTemplate(code));
+    setSrcDoc(buildTemplate(sanitizeCode(code)));
   }, [code]);
 
   // Central message handler — handles both fetch proxying and error forwarding

package/src/sanitize.ts

@@ -0,0 +1,297 @@
+// ── Constants ────────────────────────────────────────────────────────────────
+
+/**
+ * Modules already injected by the sandbox template (react, react-dom, etc.).
+ * Imports from these are always stripped.
+ */
+const TEMPLATE_PROVIDED_MODULES = new Set([
+  "react",
+  "react-dom",
+  "react-dom/client",
+  "react/jsx-runtime",
+]);
+
+/**
+ * Named bindings already in scope thanks to the template's explicit imports.
+ * If an import only pulls names from this set, the whole line is stripped.
+ */
+const TEMPLATE_PROVIDED_NAMES = new Set([
+  "React",
+  "useState",
+  "useEffect",
+  "useRef",
+  "useCallback",
+  "useMemo",
+  "useReducer",
+  "useContext",
+  "createContext",
+  "forwardRef",
+  "Fragment",
+  "createRoot",
+]);
+
+/**
+ * Every module present in the template's importmap.
+ * Imports from modules NOT in this set are stripped (they'd cause a network
+ * error or a module-resolution failure inside the srcdoc iframe).
+ */
+const IMPORTMAP_MODULES = new Set([
+  "react",
+  "react/jsx-runtime",
+  "react-dom",
+  "react-dom/client",
+  "lucide-react",
+  "clsx",
+  "class-variance-authority",
+  "tailwind-merge",
+  "@radix-ui/react-accordion",
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-avatar",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-collapsible",
+  "@radix-ui/react-context-menu",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-menubar",
+  "@radix-ui/react-navigation-menu",
+  "@radix-ui/react-popover",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-radio-group",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-toggle",
+  "@radix-ui/react-toggle-group",
+  "@radix-ui/react-toolbar",
+  "@radix-ui/react-tooltip",
+]);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/**
+ * Given a string and the index of an opening brace, returns the index
+ * immediately AFTER the matching closing brace (or -1 if not found).
+ * Handles nesting and ignores braces inside string literals.
+ */
+function findMatchingBrace(code: string, openIndex: number): number {
+  let depth = 0;
+  let inSingle = false;
+  let inDouble = false;
+  let inTemplate = 0;
+
+  for (let i = openIndex; i < code.length; i++) {
+    const ch = code[i];
+    const prev = i > 0 ? code[i - 1] : "";
+
+    if (prev === "\\") continue; // escaped — skip
+
+    if (!inDouble && !inTemplate && ch === "'") { inSingle = !inSingle; continue; }
+    if (!inSingle && !inTemplate && ch === '"')  { inDouble = !inDouble; continue; }
+    if (!inSingle && !inDouble && ch === "`") {
+      inTemplate = inTemplate ? inTemplate - 1 : inTemplate + 1;
+      continue;
+    }
+    if (inSingle || inDouble || inTemplate) continue;
+
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i + 1;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Strips top-level TypeScript block declarations (interface / enum)
+ * that Babel standalone cannot parse without @babel/preset-typescript.
+ * Also strips `type X = ...` aliases (block or inline).
+ */
+function stripTypeScriptDeclarations(code: string): string {
+  // ── interface Foo { ... } and enum Foo { ... } ─────────────────────────
+  const blockKeywords = /(?:export\s+)?(?:interface|enum)\s+\w[\w<,\s>]*\s*\{/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = blockKeywords.exec(code)) !== null) {
+    const openBrace = code.indexOf("{", match.index + match[0].length - 1);
+    if (openBrace === -1) continue;
+    const end = findMatchingBrace(code, openBrace);
+    if (end === -1) continue;
+    const tail = code[end] === ";" ? end + 1 : end;
+    code = code.slice(0, match.index) + code.slice(tail);
+    blockKeywords.lastIndex = match.index;
+  }
+
+  // ── type Foo = { ... } or type Foo = string | number; ──────────────────
+  // Strip the header and then either the brace block or the rest of the line.
+  code = code.replace(
+    /^(?:export\s+)?type\s+\w[\w<,\s>]*\s*=\s*/gm,
+    (_header, offset, fullCode) => {
+      const rest = fullCode.slice(offset + _header.length);
+      const trimmed = rest.trimStart();
+      if (trimmed.startsWith("{")) {
+        const relOpen = rest.indexOf("{");
+        const end = findMatchingBrace(rest, relOpen);
+        if (end !== -1) {
+          code = fullCode.slice(0, offset) + fullCode.slice(offset + _header.length + end);
+        }
+      }
+      // For inline types, removing the header is enough; the value
+      // (e.g. "string | number;\n") becomes a no-op expression statement
+      // which Babel tolerates, so we don't need to strip it.
+      return "";
+    }
+  );
+
+  return code;
+}
+
+/**
+ * Strips TypeScript `as` type assertions from expressions.
+ * Carefully avoids import/export aliases like `import { x as y }`.
+ *
+ *   (value as string)        →  (value)
+ *   setState(count as number) →  setState(count)
+ *   const x = foo as Bar;    →  const x = foo;
+ *
+ * NOT touched:
+ *   import { foo as bar } from "..."
+ *   export { baz as default }
+ */
+function stripAsAssertions(code: string): string {
+  return code.replace(
+    /(?<![{,]\s*\w+)\s+as\s+[A-Z]\w*(?:<[^>]*>)?(?:\[\])?(?=\s*[),;}\n])/g,
+    ""
+  );
+}
+
+/**
+ * Detects the name of the main React component the LLM defined, if it is not
+ * already "App". Returns null when renaming is not necessary.
+ *
+ * Priority order:
+ *   1. export default function X  →  X
+ *   2. export default const/let X = ...  →  X
+ *   3. Only PascalCase function/const visible at the top level  →  X
+ */
+function detectMainComponentName(code: string): string | null {
+  const fnExport = code.match(/export\s+default\s+function\s+([A-Z]\w*)/);
+  // @ts-ignore
+  if (fnExport && fnExport[1] !== "App") return fnExport[1];
+
+  const constExport = code.match(/export\s+default\s+(?:const|let)\s+([A-Z]\w*)/);
+  // @ts-ignore
+  if (constExport && constExport[1] !== "App") return constExport[1];
+
+  // Fallback: single PascalCase function/const that is not App
+  const allDefs = [
+    ...code.matchAll(
+      /^(?:function|const|let)\s+([A-Z]\w*)\s*(?:=\s*(?:\(|React\.memo\()|[\(<(])/gm
+    ),
+  ].map((m) => m[1]).filter((n) => n !== "App");
+
+  // @ts-ignore
+  if (allDefs.length === 1) return allDefs[0];
+
+  return null;
+}
+
+// ── Main export ───────────────────────────────────────────────────────────────
+
+/**
+ * Sanitizes LLM-generated React code before passing it to buildTemplate().
+ *
+ * Steps (in order):
+ *  1. Strip markdown code fences
+ *  2. Fix literal escape sequences (\\n, \\t, \\r)
+ *  3. Strip Next.js / RSC directives ('use client', 'use server')
+ *  4. Strip TypeScript-only syntax (interface, type, enum, `as` assertions)
+ *  5. Ensure the main component is named App and has no export keyword
+ *  6. Strip imports from modules outside the importmap
+ *  7. Strip CommonJS require() calls
+ *  8. Collapse excessive blank lines
+ */
+export function sanitizeCode(raw: string): string {
+  let code = raw;
+
+  // ── 1. Strip markdown code fences ───────────────────────────────────────
+  code = code.replace(/^```[a-zA-Z]*\r?\n?/, "").replace(/\r?\n?```\s*$/, "");
+
+  // ── 2. Fix literal escape sequences ─────────────────────────────────────
+  code = code
+    .replace(/\\n/g, "\n")
+    .replace(/\\t/g, "\t")
+    .replace(/\\r/g, "\r");
+
+  // ── 3. Strip Next.js / RSC directives ───────────────────────────────────
+  code = code.replace(/^\s*['"]use (client|server)['"]\s*;?\s*\n?/gm, "");
+
+  // ── 4. Strip TypeScript-only syntax ─────────────────────────────────────
+  code = stripTypeScriptDeclarations(code);
+  code = stripAsAssertions(code);
+
+  // ── 5. Fix component name and remove export keywords ────────────────────
+  // The template calls React.createElement(App), so App must be a plain
+  // function in global scope — no export keyword.
+
+  const originalName = detectMainComponentName(code);
+  if (originalName) {
+    // Rename all occurrences of the original name to "App"
+    code = code.replace(new RegExp(`\\b${originalName}\\b`, "g"), "App");
+  }
+
+  // Strip "export default" prefix from the App declaration
+  code = code.replace(/\bexport\s+default\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+default\s+((?:const|let)\s+App\b)/, "$1");
+
+  // Strip "export" (non-default) prefix from the App declaration
+  code = code.replace(/\bexport\s+(function\s+App\b)/, "$1");
+  code = code.replace(/\bexport\s+((?:const|let)\s+App\b)/, "$1");
+
+  // ── 6. Strip imports from modules outside the importmap ─────────────────
+  const importLineRegex =
+    /^import\s+(?:type\s+)?(?:[^"'\n]+\s+from\s+)?["']([^"']+)["'];?\s*$/gm;
+
+  code = code.replace(importLineRegex, (line, modulePath) => {
+    // Always strip template-provided modules (already in global scope)
+    if (TEMPLATE_PROVIDED_MODULES.has(modulePath)) return "";
+
+    // Strip anything outside the importmap (would cause a fetch/resolve error)
+    if (!IMPORTMAP_MODULES.has(modulePath)) return "";
+
+    // Strip if all named imports are already in scope from the template
+    const namedMatch = line.match(/\{([^}]+)\}/);
+    if (namedMatch) {
+        // @ts-ignore
+      const names = namedMatch[1]
+        .split(",")
+        // @ts-ignore
+        .map((n) => n.trim().split(/\s+as\s+/)[0].trim())
+        .filter(Boolean);
+      if (names.length > 0 && names.every((n) => TEMPLATE_PROVIDED_NAMES.has(n))) {
+        return "";
+      }
+    }
+
+    return line;
+  });
+
+  // ── 7. Strip CommonJS require() calls ───────────────────────────────────
+  // The sandbox runs as ESM; require() is undefined.
+  code = code.replace(
+    /^(?:const|let|var)\s+[\w\s,{}]+\s*=\s*require\s*\(["'][^"']+["']\)\s*;?\s*$/gm,
+    ""
+  );
+
+  // ── 8. Collapse excessive blank lines ────────────────────────────────────
+  code = code.replace(/\n{3,}/g, "\n\n");
+
+  return code.trim();
+}

package/src/template.ts

@@ -53,6 +53,28 @@ export function buildTemplate(code: string): string {
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; padding: 0; }
+
+    /* Scrollbar personalizada: fina y semi-transparente */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.35);
+      border-radius: 999px;
+      transition: background 0.2s ease;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.55);
+    }
+    /* Firefox */
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+    }
   <\/style>
 <\/head>
 <body>
@@ -65,7 +87,7 @@ export function buildTemplate(code: string): string {
     // the parent has a real origin and can make fetch calls freely.
     window.fetch = function(url, options = {}) {
       return new Promise((resolve, reject) => {
-        const id = crypto.randomUUID();
+        const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
 
         // Serialize body — postMessage can't transfer Request objects
         const serializedOptions = {