@aquiles-ai/renderize 1.85.0 → 2.1.0

package/README.md

@@ -1,2 +1,148 @@
+<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} />;
+}
+```
+
+<div align="center">
+
+## Example of integration
+
+<img src="https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990544/Captura_de_pantalla_2157_ziyjnu.png" alt="Example1" width="600"/>
+
+<br><br>
+
+<img src="https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990545/Captura_de_pantalla_2158_b3e1up.png" alt="Example2" width="600"/>
+
+<br><br>
+
+<img src="https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990556/Captura_de_pantalla_2159_azlagy.png" alt="Example3" width="600"/>
+
+</div>
+
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiles-ai/renderize",
-  "version": "1.85.0",
+  "version": "2.1.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>

package/dist/index.cjs

@@ -1,256 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Renderize: () => Renderize
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/Renderize.tsx
-var import_react = require("react");
-
-// src/template.ts
-function buildTemplate(code) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
-  <script type="importmap">
-  {
-    "imports": {
-      "react":                              "https://esm.sh/react@18",
-      "react/jsx-runtime":                  "https://esm.sh/react@18/jsx-runtime",
-      "react-dom":                          "https://esm.sh/react-dom@18",
-      "react-dom/client":                   "https://esm.sh/react-dom@18/client",
-      "lucide-react":                       "https://esm.sh/lucide-react?external=react",
-      "clsx":                               "https://esm.sh/clsx",
-      "class-variance-authority":           "https://esm.sh/class-variance-authority",
-      "tailwind-merge":                     "https://esm.sh/tailwind-merge",
-      "@radix-ui/react-accordion":          "https://esm.sh/@radix-ui/react-accordion?external=react,react-dom",
-      "@radix-ui/react-alert-dialog":       "https://esm.sh/@radix-ui/react-alert-dialog?external=react,react-dom",
-      "@radix-ui/react-avatar":             "https://esm.sh/@radix-ui/react-avatar?external=react,react-dom",
-      "@radix-ui/react-checkbox":           "https://esm.sh/@radix-ui/react-checkbox?external=react,react-dom",
-      "@radix-ui/react-collapsible":        "https://esm.sh/@radix-ui/react-collapsible?external=react,react-dom",
-      "@radix-ui/react-context-menu":       "https://esm.sh/@radix-ui/react-context-menu?external=react,react-dom",
-      "@radix-ui/react-dialog":             "https://esm.sh/@radix-ui/react-dialog?external=react,react-dom",
-      "@radix-ui/react-dropdown-menu":      "https://esm.sh/@radix-ui/react-dropdown-menu?external=react,react-dom",
-      "@radix-ui/react-hover-card":         "https://esm.sh/@radix-ui/react-hover-card?external=react,react-dom",
-      "@radix-ui/react-label":              "https://esm.sh/@radix-ui/react-label?external=react,react-dom",
-      "@radix-ui/react-menubar":            "https://esm.sh/@radix-ui/react-menubar?external=react,react-dom",
-      "@radix-ui/react-navigation-menu":    "https://esm.sh/@radix-ui/react-navigation-menu?external=react,react-dom",
-      "@radix-ui/react-popover":            "https://esm.sh/@radix-ui/react-popover?external=react,react-dom",
-      "@radix-ui/react-progress":           "https://esm.sh/@radix-ui/react-progress?external=react,react-dom",
-      "@radix-ui/react-radio-group":        "https://esm.sh/@radix-ui/react-radio-group?external=react,react-dom",
-      "@radix-ui/react-scroll-area":        "https://esm.sh/@radix-ui/react-scroll-area?external=react,react-dom",
-      "@radix-ui/react-select":             "https://esm.sh/@radix-ui/react-select?external=react,react-dom",
-      "@radix-ui/react-separator":          "https://esm.sh/@radix-ui/react-separator?external=react,react-dom",
-      "@radix-ui/react-slider":             "https://esm.sh/@radix-ui/react-slider?external=react,react-dom",
-      "@radix-ui/react-slot":               "https://esm.sh/@radix-ui/react-slot?external=react,react-dom",
-      "@radix-ui/react-switch":             "https://esm.sh/@radix-ui/react-switch?external=react,react-dom",
-      "@radix-ui/react-tabs":               "https://esm.sh/@radix-ui/react-tabs?external=react,react-dom",
-      "@radix-ui/react-toast":              "https://esm.sh/@radix-ui/react-toast?external=react,react-dom",
-      "@radix-ui/react-toggle":             "https://esm.sh/@radix-ui/react-toggle?external=react,react-dom",
-      "@radix-ui/react-toggle-group":       "https://esm.sh/@radix-ui/react-toggle-group?external=react,react-dom",
-      "@radix-ui/react-toolbar":            "https://esm.sh/@radix-ui/react-toolbar?external=react,react-dom",
-      "@radix-ui/react-tooltip":            "https://esm.sh/@radix-ui/react-tooltip?external=react,react-dom"
-    }
-  }
-  </script>
-
-  <style>
-    * { box-sizing: border-box; }
-    body { margin: 0; padding: 0; }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-
-  <script>
-    // \u2500\u2500 FETCH PROXY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-    // Override window.fetch to proxy requests through the parent window.
-    // This solves the CORS/null-origin issue with srcdoc iframes:
-    // the parent has a real origin and can make fetch calls freely.
-    window.fetch = function(url, options = {}) {
-      return new Promise((resolve, reject) => {
-        const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
-
-        // Serialize body \u2014 postMessage can't transfer Request objects
-        const serializedOptions = {
-          method: options.method || "GET",
-          headers: options.headers || {},
-          body: options.body || null,
-        };
-
-        // Listen for the response from the parent
-        function handleMessage(event) {
-          if (
-            event.data?.source !== "renderize" ||
-            event.data?.type !== "fetch-response" ||
-            event.data?.id !== id
-          ) return;
-
-          window.removeEventListener("message", handleMessage);
-
-          if (event.data.error) {
-            reject(new Error(event.data.error));
-            return;
-          }
-
-          // Reconstruct a real Response object from the serialized data
-          const { status, statusText, headers, body } = event.data;
-          const responseBody = typeof body === "string" ? body : JSON.stringify(body);
-
-          const response = new Response(responseBody, {
-            status,
-            statusText,
-            headers: new Headers(headers),
-          });
-
-          resolve(response);
-        }
-
-        window.addEventListener("message", handleMessage);
-
-        // Ask the parent to perform the fetch on our behalf
-        window.parent.postMessage({
-          source: "renderize",
-          type: "fetch-request",
-          id,
-          url,
-          options: serializedOptions,
-        }, "*");
-      });
-    };
-    // \u2500\u2500 END FETCH PROXY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  </script>
-
-  <script type="text/babel" data-type="module">
-    import React, {
-      useState, useEffect, useRef, useCallback,
-      useMemo, useReducer, useContext, createContext,
-      forwardRef, Fragment
-    } from "react";
-    import { createRoot } from "react-dom/client";
-
-    // \u2500\u2500 USER CODE START \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-    ${code}
-    // \u2500\u2500 USER CODE END \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-    const container = document.getElementById("root");
-    createRoot(container).render(React.createElement(App));
-  </script>
-</body>
-</html>`;
-}
-
-// src/Renderize.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Renderize({
-  code,
-  height = "100%",
-  width = "100%",
-  className,
-  style,
-  onError
-}) {
-  const iframeRef = (0, import_react.useRef)(null);
-  const [srcDoc, setSrcDoc] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    if (!code?.trim()) return;
-    setSrcDoc(buildTemplate(code));
-  }, [code]);
-  (0, import_react.useEffect)(() => {
-    const handler = async (event) => {
-      if (event.data?.source !== "renderize") return;
-      if (event.data.type === "fetch-request") {
-        const { id, url, options } = event.data;
-        try {
-          const res = await fetch(url, {
-            method: options.method,
-            headers: options.headers,
-            body: options.body ?? void 0
-          });
-          const body = await res.text();
-          iframeRef.current?.contentWindow?.postMessage(
-            {
-              source: "renderize",
-              type: "fetch-response",
-              id,
-              status: res.status,
-              statusText: res.statusText,
-              // Convert Headers to a plain object for structured clone
-              headers: Object.fromEntries(res.headers.entries()),
-              body
-            },
-            "*"
-          );
-        } catch (err) {
-          iframeRef.current?.contentWindow?.postMessage(
-            {
-              source: "renderize",
-              type: "fetch-response",
-              id,
-              error: err instanceof Error ? err.message : String(err)
-            },
-            "*"
-          );
-        }
-      }
-      if (event.data.type === "error" && onError) {
-        onError(event.data.message);
-      }
-    };
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, [onError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className,
-      style: { width, height, overflow: "hidden", ...style },
-      children: srcDoc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "iframe",
-        {
-          ref: iframeRef,
-          srcDoc,
-          title: "Renderize Sandbox",
-          sandbox: "allow-scripts allow-forms allow-modals allow-popups allow-downloads",
-          style: {
-            width: "100%",
-            height: "100%",
-            border: "none",
-            display: "block"
-          }
-        },
-        srcDoc
-      )
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Renderize
-});

package/dist/index.d.cts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-interface RenderizeProps {
-    /** React code generated by the LLM. Must define a function component named App. */
-    code: string;
-    /** Height of the sandbox iframe. Defaults to "100%" */
-    height?: string | number;
-    /** Width of the sandbox iframe. Defaults to "100%" */
-    width?: string | number;
-    /** Custom class name for the wrapper element */
-    className?: string;
-    /** Custom inline styles for the wrapper element */
-    style?: React.CSSProperties;
-    /** Called when the sandbox encounters a runtime error */
-    onError?: (error: string) => void;
-}
-declare function Renderize({ code, height, width, className, style, onError, }: RenderizeProps): react_jsx_runtime.JSX.Element;
-
-export { Renderize, type RenderizeProps };

package/dist/index.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-interface RenderizeProps {
-    /** React code generated by the LLM. Must define a function component named App. */
-    code: string;
-    /** Height of the sandbox iframe. Defaults to "100%" */
-    height?: string | number;
-    /** Width of the sandbox iframe. Defaults to "100%" */
-    width?: string | number;
-    /** Custom class name for the wrapper element */
-    className?: string;
-    /** Custom inline styles for the wrapper element */
-    style?: React.CSSProperties;
-    /** Called when the sandbox encounters a runtime error */
-    onError?: (error: string) => void;
-}
-declare function Renderize({ code, height, width, className, style, onError, }: RenderizeProps): react_jsx_runtime.JSX.Element;
-
-export { Renderize, type RenderizeProps };

package/dist/index.js

@@ -1,229 +0,0 @@
-// src/Renderize.tsx
-import { useEffect, useRef, useState } from "react";
-
-// src/template.ts
-function buildTemplate(code) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
-  <script type="importmap">
-  {
-    "imports": {
-      "react":                              "https://esm.sh/react@18",
-      "react/jsx-runtime":                  "https://esm.sh/react@18/jsx-runtime",
-      "react-dom":                          "https://esm.sh/react-dom@18",
-      "react-dom/client":                   "https://esm.sh/react-dom@18/client",
-      "lucide-react":                       "https://esm.sh/lucide-react?external=react",
-      "clsx":                               "https://esm.sh/clsx",
-      "class-variance-authority":           "https://esm.sh/class-variance-authority",
-      "tailwind-merge":                     "https://esm.sh/tailwind-merge",
-      "@radix-ui/react-accordion":          "https://esm.sh/@radix-ui/react-accordion?external=react,react-dom",
-      "@radix-ui/react-alert-dialog":       "https://esm.sh/@radix-ui/react-alert-dialog?external=react,react-dom",
-      "@radix-ui/react-avatar":             "https://esm.sh/@radix-ui/react-avatar?external=react,react-dom",
-      "@radix-ui/react-checkbox":           "https://esm.sh/@radix-ui/react-checkbox?external=react,react-dom",
-      "@radix-ui/react-collapsible":        "https://esm.sh/@radix-ui/react-collapsible?external=react,react-dom",
-      "@radix-ui/react-context-menu":       "https://esm.sh/@radix-ui/react-context-menu?external=react,react-dom",
-      "@radix-ui/react-dialog":             "https://esm.sh/@radix-ui/react-dialog?external=react,react-dom",
-      "@radix-ui/react-dropdown-menu":      "https://esm.sh/@radix-ui/react-dropdown-menu?external=react,react-dom",
-      "@radix-ui/react-hover-card":         "https://esm.sh/@radix-ui/react-hover-card?external=react,react-dom",
-      "@radix-ui/react-label":              "https://esm.sh/@radix-ui/react-label?external=react,react-dom",
-      "@radix-ui/react-menubar":            "https://esm.sh/@radix-ui/react-menubar?external=react,react-dom",
-      "@radix-ui/react-navigation-menu":    "https://esm.sh/@radix-ui/react-navigation-menu?external=react,react-dom",
-      "@radix-ui/react-popover":            "https://esm.sh/@radix-ui/react-popover?external=react,react-dom",
-      "@radix-ui/react-progress":           "https://esm.sh/@radix-ui/react-progress?external=react,react-dom",
-      "@radix-ui/react-radio-group":        "https://esm.sh/@radix-ui/react-radio-group?external=react,react-dom",
-      "@radix-ui/react-scroll-area":        "https://esm.sh/@radix-ui/react-scroll-area?external=react,react-dom",
-      "@radix-ui/react-select":             "https://esm.sh/@radix-ui/react-select?external=react,react-dom",
-      "@radix-ui/react-separator":          "https://esm.sh/@radix-ui/react-separator?external=react,react-dom",
-      "@radix-ui/react-slider":             "https://esm.sh/@radix-ui/react-slider?external=react,react-dom",
-      "@radix-ui/react-slot":               "https://esm.sh/@radix-ui/react-slot?external=react,react-dom",
-      "@radix-ui/react-switch":             "https://esm.sh/@radix-ui/react-switch?external=react,react-dom",
-      "@radix-ui/react-tabs":               "https://esm.sh/@radix-ui/react-tabs?external=react,react-dom",
-      "@radix-ui/react-toast":              "https://esm.sh/@radix-ui/react-toast?external=react,react-dom",
-      "@radix-ui/react-toggle":             "https://esm.sh/@radix-ui/react-toggle?external=react,react-dom",
-      "@radix-ui/react-toggle-group":       "https://esm.sh/@radix-ui/react-toggle-group?external=react,react-dom",
-      "@radix-ui/react-toolbar":            "https://esm.sh/@radix-ui/react-toolbar?external=react,react-dom",
-      "@radix-ui/react-tooltip":            "https://esm.sh/@radix-ui/react-tooltip?external=react,react-dom"
-    }
-  }
-  </script>
-
-  <style>
-    * { box-sizing: border-box; }
-    body { margin: 0; padding: 0; }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-
-  <script>
-    // \u2500\u2500 FETCH PROXY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-    // Override window.fetch to proxy requests through the parent window.
-    // This solves the CORS/null-origin issue with srcdoc iframes:
-    // the parent has a real origin and can make fetch calls freely.
-    window.fetch = function(url, options = {}) {
-      return new Promise((resolve, reject) => {
-        const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
-
-        // Serialize body \u2014 postMessage can't transfer Request objects
-        const serializedOptions = {
-          method: options.method || "GET",
-          headers: options.headers || {},
-          body: options.body || null,
-        };
-
-        // Listen for the response from the parent
-        function handleMessage(event) {
-          if (
-            event.data?.source !== "renderize" ||
-            event.data?.type !== "fetch-response" ||
-            event.data?.id !== id
-          ) return;
-
-          window.removeEventListener("message", handleMessage);
-
-          if (event.data.error) {
-            reject(new Error(event.data.error));
-            return;
-          }
-
-          // Reconstruct a real Response object from the serialized data
-          const { status, statusText, headers, body } = event.data;
-          const responseBody = typeof body === "string" ? body : JSON.stringify(body);
-
-          const response = new Response(responseBody, {
-            status,
-            statusText,
-            headers: new Headers(headers),
-          });
-
-          resolve(response);
-        }
-
-        window.addEventListener("message", handleMessage);
-
-        // Ask the parent to perform the fetch on our behalf
-        window.parent.postMessage({
-          source: "renderize",
-          type: "fetch-request",
-          id,
-          url,
-          options: serializedOptions,
-        }, "*");
-      });
-    };
-    // \u2500\u2500 END FETCH PROXY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  </script>
-
-  <script type="text/babel" data-type="module">
-    import React, {
-      useState, useEffect, useRef, useCallback,
-      useMemo, useReducer, useContext, createContext,
-      forwardRef, Fragment
-    } from "react";
-    import { createRoot } from "react-dom/client";
-
-    // \u2500\u2500 USER CODE START \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-    ${code}
-    // \u2500\u2500 USER CODE END \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-    const container = document.getElementById("root");
-    createRoot(container).render(React.createElement(App));
-  </script>
-</body>
-</html>`;
-}
-
-// src/Renderize.tsx
-import { jsx } from "react/jsx-runtime";
-function Renderize({
-  code,
-  height = "100%",
-  width = "100%",
-  className,
-  style,
-  onError
-}) {
-  const iframeRef = useRef(null);
-  const [srcDoc, setSrcDoc] = useState(null);
-  useEffect(() => {
-    if (!code?.trim()) return;
-    setSrcDoc(buildTemplate(code));
-  }, [code]);
-  useEffect(() => {
-    const handler = async (event) => {
-      if (event.data?.source !== "renderize") return;
-      if (event.data.type === "fetch-request") {
-        const { id, url, options } = event.data;
-        try {
-          const res = await fetch(url, {
-            method: options.method,
-            headers: options.headers,
-            body: options.body ?? void 0
-          });
-          const body = await res.text();
-          iframeRef.current?.contentWindow?.postMessage(
-            {
-              source: "renderize",
-              type: "fetch-response",
-              id,
-              status: res.status,
-              statusText: res.statusText,
-              // Convert Headers to a plain object for structured clone
-              headers: Object.fromEntries(res.headers.entries()),
-              body
-            },
-            "*"
-          );
-        } catch (err) {
-          iframeRef.current?.contentWindow?.postMessage(
-            {
-              source: "renderize",
-              type: "fetch-response",
-              id,
-              error: err instanceof Error ? err.message : String(err)
-            },
-            "*"
-          );
-        }
-      }
-      if (event.data.type === "error" && onError) {
-        onError(event.data.message);
-      }
-    };
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, [onError]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: { width, height, overflow: "hidden", ...style },
-      children: srcDoc && /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          ref: iframeRef,
-          srcDoc,
-          title: "Renderize Sandbox",
-          sandbox: "allow-scripts allow-forms allow-modals allow-popups allow-downloads",
-          style: {
-            width: "100%",
-            height: "100%",
-            border: "none",
-            display: "block"
-          }
-        },
-        srcDoc
-      )
-    }
-  );
-}
-export {
-  Renderize
-};