@llmnative/react 0.1.0 → 1.0.0

package/dist/vite.mjs

@@ -0,0 +1,54 @@
+const u = "x-llmnative-proxy", l = "/api/proxy", y = async (t) => {
+  const e = [];
+  for await (const r of t)
+    e.push(Buffer.isBuffer(r) ? r : Buffer.from(r));
+  return e.length === 0 ? void 0 : Buffer.concat(e);
+}, p = async (t, e, r) => {
+  const a = new URL(t.url || "/", "http://localhost").searchParams.get("url");
+  if (t.headers[u] !== "1") {
+    e.statusCode = 403, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ error: "Proxy access denied." }));
+    return;
+  }
+  if (!a) {
+    e.statusCode = 400, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ error: 'Missing "url" query parameter.' }));
+    return;
+  }
+  try {
+    const o = new URL(a);
+    if (o.pathname.startsWith(r) && ["localhost", "127.0.0.1"].includes(o.hostname)) {
+      e.statusCode = 508, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ error: "Recursive proxy target detected.", target: a }));
+      return;
+    }
+    const d = await y(t), f = new Headers(), h = /* @__PURE__ */ new Set([u, "host", "origin", "referer", "content-length", "transfer-encoding", "connection"]);
+    Object.entries(t.headers).forEach(([i, n]) => {
+      !n || h.has(i.toLowerCase()) || f.set(i, Array.isArray(n) ? n.join(", ") : n);
+    });
+    const c = await fetch(a, {
+      method: t.method || "GET",
+      headers: f,
+      body: d && !["GET", "HEAD"].includes((t.method || "GET").toUpperCase()) ? d : void 0,
+      redirect: "follow"
+    });
+    e.statusCode = c.status, c.headers.forEach((i, n) => {
+      n.toLowerCase() !== "content-encoding" && e.setHeader(n, i);
+    }), e.end(Buffer.from(await c.arrayBuffer()));
+  } catch (o) {
+    e.statusCode = 502, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ error: o instanceof Error ? o.message : "Proxy request failed." }));
+  }
+}, g = (t = l) => ({
+  name: "llmnative-dev-proxy",
+  configureServer(e) {
+    e.middlewares.use(t, (r, s) => {
+      p(r, s, t);
+    });
+  },
+  configurePreviewServer(e) {
+    e.middlewares.use(t, (r, s) => {
+      p(r, s, t);
+    });
+  }
+});
+export {
+  l as PROXY_PATH,
+  g as createProxyPlugin
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -8,26 +8,30 @@
   "style": "dist/index.css",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
+      "types": "./dist/types/src/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./vite": "./dist/vite.mjs",
     "./dist/index.css": "./dist/index.css"
   },
-  "scripts": {
-    "prebuild": "node scripts/dev/build-local.js --restore-only",
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "build:dev": "vite build --mode development && tsc --emitDeclarationOnly",
-    "watch:dev": "vite build --watch",
+  "scripts": {
+    "prebuild": "node scripts/dev/build-local.js --restore-only",
+    "themes:compile:vscode": "node scripts/themes/compile-vscode-themes.js",
+    "build": "npm run themes:compile:vscode && vite build && tsc --emitDeclarationOnly",
+    "build:dev": "npm run themes:compile:vscode && vite build --mode development && tsc --emitDeclarationOnly",
+    "watch:dev": "vite build --watch",
     "build:local": "node scripts/dev/build-local.js",
     "prepublishOnly": "npm run build",
     "updateReadme": "node scripts/dev/updateReadme.js",
     "test": "vitest run",
+    "test:e2e:proxy-scaffold": "node scripts/e2e/test-proxy-scaffold.js",
+    "test:e2e:proxy-runtime": "vitest run tests/e2e/proxy-runtime.test.ts --environment node",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
   },
   "bin": {
-    "llmnative": "./bin/cli.js"
+    "llmnative": "bin/cli.js"
   },
   "files": [
     "dist",
@@ -65,11 +69,12 @@
   "homepage": "https://github.com/sherpadvisorylab/llmnative-react#readme",
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.0",
+    "@supabase/supabase-js": "^2.107.0",
     "firebase": "^10.14.0",
     "lucide-react": "^0.400.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.30.0"
   },
   "peerDependenciesMeta": {
     "@phosphor-icons/react": {
@@ -87,6 +92,7 @@
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
     "@phosphor-icons/react": "^2.1.10",
+    "@supabase/supabase-js": "^2.107.0",
     "@tailwindcss/postcss": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -107,14 +113,36 @@
     "react-router-dom": "^6.30.3",
     "tailwindcss": "^4.2.4",
     "typescript": "^5.6.2",
-    "vite": "^5.4.21",
-    "vitest": "2.1"
+    "vite": "^5.4.21",
+    "vitest": "2.1"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-liquid": "^6.3.2",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
+    "@tiptap/extension-character-count": "^3.26.1",
+    "@tiptap/extension-image": "^3.26.1",
+    "@tiptap/extension-link": "^3.26.1",
+    "@tiptap/extension-placeholder": "^3.26.1",
+    "@tiptap/extension-table": "^3.26.1",
+    "@tiptap/extension-underline": "^3.26.1",
+    "@tiptap/react": "^3.26.1",
+    "@tiptap/starter-kit": "^3.26.1",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
+    "codemirror": "^6.0.2",
+    "liquidjs": "^10.27.0",
     "papaparse": "^5.5.3",
-    "prismjs": "^ 1.30.0",
+    "prismjs": "^1.30.0",
     "react-markdown": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-sanitize": "^6.0.0",
@@ -122,5 +150,8 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.5.0",
     "tui-image-editor": "^3.15.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/scripts/cli/proxy-templates/cloudflare.ts

@@ -0,0 +1,34 @@
+/**
+ * LLMNative proxy - Cloudflare Worker.
+ *
+ * Deploy as a Worker or use as a Pages Function at:
+ *   functions/api/proxy.ts
+ */
+export default {
+    async fetch(request: Request): Promise<Response> {
+        const { searchParams } = new URL(request.url);
+        const targetUrl = searchParams.get('url');
+
+        if (!targetUrl) {
+            return Response.json({ error: 'Missing url query parameter' }, { status: 400 });
+        }
+
+        const headers = new Headers(request.headers);
+        headers.delete('host');
+        headers.delete('x-llmnative-proxy');
+
+        const hasBody = !['GET', 'HEAD'].includes(request.method.toUpperCase());
+
+        const upstream = await fetch(targetUrl, {
+            method: request.method,
+            headers,
+            body: hasBody ? request.body : undefined,
+            ...(hasBody ? { duplex: 'half' } : {}),
+        } as RequestInit);
+
+        return new Response(upstream.body, {
+            status: upstream.status,
+            headers: upstream.headers,
+        });
+    },
+};

package/scripts/cli/proxy-templates/express.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck - scaffold template, copied to user project by CLI
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+const PROXY_CALLER_HEADER = 'x-llmnative-proxy';
+export const PROXY_PATH = '/api/proxy';
+
+type AppLike = {
+    all: (route: string, handler: (req: IncomingMessage, res: ServerResponse) => void) => unknown;
+};
+
+const readRequestBody = async (req: IncomingMessage): Promise<Buffer | undefined> => {
+    const chunks: Buffer[] = [];
+    for await (const chunk of req) {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    }
+    return chunks.length === 0 ? undefined : Buffer.concat(chunks);
+};
+
+export const proxyHandler = async (req: IncomingMessage, res: ServerResponse) => {
+    const requestUrl = new URL(req.url || '/', 'http://localhost');
+    const target = requestUrl.searchParams.get('url');
+
+    if (req.headers[PROXY_CALLER_HEADER] !== '1') {
+        res.statusCode = 403;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: 'Proxy access denied.' }));
+        return;
+    }
+
+    if (!target) {
+        res.statusCode = 400;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: 'Missing "url" query parameter.' }));
+        return;
+    }
+
+    try {
+        const targetUrl = new URL(target);
+        if (targetUrl.pathname.startsWith(PROXY_PATH) && ['localhost', '127.0.0.1'].includes(targetUrl.hostname)) {
+            res.statusCode = 508;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: 'Recursive proxy target detected.', target }));
+            return;
+        }
+
+        const body = await readRequestBody(req);
+        const headers = new Headers();
+        const skipHeaders = new Set([PROXY_CALLER_HEADER, 'host', 'origin', 'referer', 'content-length', 'transfer-encoding', 'connection']);
+
+        Object.entries(req.headers).forEach(([key, value]) => {
+            if (!value || skipHeaders.has(key.toLowerCase())) return;
+            headers.set(key, Array.isArray(value) ? value.join(', ') : value);
+        });
+
+        const upstream = await fetch(target, {
+            method: req.method || 'GET',
+            headers,
+            body: body && !['GET', 'HEAD'].includes((req.method || 'GET').toUpperCase()) ? body : undefined,
+            redirect: 'follow',
+        });
+
+        res.statusCode = upstream.status;
+        upstream.headers.forEach((value, key) => {
+            if (key.toLowerCase() === 'content-encoding') return;
+            res.setHeader(key, value);
+        });
+        res.end(Buffer.from(await upstream.arrayBuffer()));
+    } catch (error) {
+        res.statusCode = 502;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Proxy request failed.' }));
+    }
+};
+
+export const registerProxy = (app: AppLike, route = PROXY_PATH) => {
+    app.all(route, (req, res) => { void proxyHandler(req, res); });
+};

package/scripts/cli/proxy-templates/nextjs-app.ts

@@ -0,0 +1,42 @@
+/**
+ * LLMNative proxy - Next.js App Router.
+ *
+ * Place this file at:
+ *   app/api/proxy/route.ts
+ */
+
+const PASSTHROUGH_METHODS = new Set(['GET', 'HEAD']);
+
+async function handler(request: Request): Promise<Response> {
+    const { searchParams } = new URL(request.url);
+    const targetUrl = searchParams.get('url');
+
+    if (!targetUrl) {
+        return Response.json({ error: 'Missing url query parameter' }, { status: 400 });
+    }
+
+    const headers = new Headers(request.headers);
+    headers.delete('host');
+    headers.delete('x-llmnative-proxy');
+
+    const hasBody = !PASSTHROUGH_METHODS.has(request.method.toUpperCase());
+
+    const upstream = await fetch(targetUrl, {
+        method: request.method,
+        headers,
+        body: hasBody ? request.body : undefined,
+        ...(hasBody ? { duplex: 'half' } : {}),
+    } as RequestInit);
+
+    return new Response(upstream.body, {
+        status: upstream.status,
+        headers: upstream.headers,
+    });
+}
+
+export const GET     = handler;
+export const POST    = handler;
+export const PUT     = handler;
+export const PATCH   = handler;
+export const DELETE  = handler;
+export const OPTIONS = handler;

package/scripts/cli/proxy-templates/nextjs-pages.ts

@@ -0,0 +1,41 @@
+// @ts-nocheck - scaffold template, copied to user project by CLI
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+/**
+ * LLMNative proxy - Next.js Pages Router.
+ *
+ * Place this file at:
+ *   pages/api/proxy.ts
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const targetUrl = req.query.url as string | undefined;
+
+    if (!targetUrl) {
+        res.status(400).json({ error: 'Missing url query parameter' });
+        return;
+    }
+
+    const headers: Record<string, string> = {};
+    for (const [key, value] of Object.entries(req.headers)) {
+        if (key === 'host' || key === 'x-llmnative-proxy') continue;
+        if (typeof value === 'string') headers[key] = value;
+        else if (Array.isArray(value)) headers[key] = value.join(', ');
+    }
+
+    const hasBody = !['GET', 'HEAD'].includes(req.method?.toUpperCase() ?? 'GET');
+
+    const upstream = await fetch(targetUrl, {
+        method: req.method,
+        headers,
+        body: hasBody ? JSON.stringify(req.body) : undefined,
+    });
+
+    res.status(upstream.status);
+    upstream.headers.forEach((value, key) => res.setHeader(key, value));
+    const buffer = await upstream.arrayBuffer();
+    res.end(Buffer.from(buffer));
+}
+
+export const config = {
+    api: { bodyParser: true },
+};

package/scripts/cli/proxy-templates/scaffold.json

@@ -0,0 +1,33 @@
+{
+    "vite": {
+        "label": "Vite dev server",
+        "packageExport": "@llmnative/react/vite",
+        "exportName": "createProxyPlugin",
+        "outputPath": "dev/proxy.ts",
+        "hint": "Import createProxyPlugin() and add it to plugins[] in vite.config.ts"
+    },
+    "express": {
+        "label": "Express",
+        "templateFile": "express.ts",
+        "outputPath": "server/proxy.ts",
+        "hint": "Import registerProxy() and mount it with app.use() in your server entry"
+    },
+    "nextjs-app": {
+        "label": "Next.js App Router",
+        "templateFile": "nextjs-app.ts",
+        "outputPath": "app/api/proxy/route.ts",
+        "hint": "File placed at app/api/proxy/route.ts - no extra setup needed"
+    },
+    "nextjs-pages": {
+        "label": "Next.js Pages Router",
+        "templateFile": "nextjs-pages.ts",
+        "outputPath": "pages/api/proxy.ts",
+        "hint": "File placed at pages/api/proxy.ts - no extra setup needed"
+    },
+    "cloudflare": {
+        "label": "Cloudflare Worker / Pages Function",
+        "templateFile": "cloudflare.ts",
+        "outputPath": "functions/api/proxy.ts",
+        "hint": "File placed at functions/api/proxy.ts for Cloudflare Pages, or deploy as a standalone Worker"
+    }
+}

package/scripts/cli/setup-devtools.js

@@ -1,85 +1,155 @@
-const fs = require('fs');
-const path = require('path');
-
-const root = process.cwd();
-
-function ensureFile(filePath, content) {
-    if (!fs.existsSync(filePath)) {
-        fs.writeFileSync(filePath, content.trimStart());
-        console.log(`Created file: ${filePath}`);
-    }
-}
-
-function setupDevTools() {
-    console.log('Setting up Vite + React + TypeScript');
-
-    ensureFile(path.join(root, 'tsconfig.json'), `
-{
-  "compilerOptions": {
-    "target": "ES2021",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2021"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
-    `);
-
-    ensureFile(path.join(root, 'tsconfig.node.json'), `
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
-    `);
-
-    ensureFile(path.join(root, 'vite.config.ts'), `
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig(({ mode }) => {
-  return {
-    plugins: [react()],
-    resolve: {
-      dedupe: ['react', 'react-dom', 'react-router-dom'],
-    },
-    build: {
-      cssMinify: false,
-      chunkSizeWarningLimit: 10000,
-    },
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
-    },
-  };
-});
-    `);
-
-    ensureFile(path.join(root, 'postcss.config.js'), `
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
-    `);
-}
-
-module.exports = { setupDevTools };
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+// Templates and the vite/packageExport split live in scripts/cli/proxy-templates/scaffold.json —
+// the same JSON the framework's src/providers/proxy/scaffold.ts imports, so there's one shared
+// source instead of two hand-maintained maps that can drift (as they had before this fix).
+const PROXY_TEMPLATES_DIR = path.resolve(__dirname, 'proxy-templates');
+const PROXY_PROVIDERS = require(path.join(PROXY_TEMPLATES_DIR, 'scaffold.json'));
+
+function ensureFile(filePath, content) {
+    if (!fs.existsSync(filePath)) {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        fs.writeFileSync(filePath, content.trimStart());
+        console.log(`Created file: ${filePath}`);
+    }
+}
+
+function ensureDir(dirPath) {
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+        console.log(`Created directory: ${dirPath}`);
+    }
+}
+
+function copyProxyFile(proxyProvider) {
+    const descriptor = PROXY_PROVIDERS[proxyProvider];
+    if (!descriptor) return;
+
+    const dest = path.join(root, descriptor.outputPath);
+    ensureDir(path.dirname(dest));
+    if (fs.existsSync(dest)) return;
+
+    if (descriptor.packageExport) {
+        // vite only: re-export the framework's own build instead of copying a snapshot that
+        // could drift from the real implementation — see dist/vite.mjs / package.json exports.
+        fs.writeFileSync(dest, `export { ${descriptor.exportName} } from '${descriptor.packageExport}';\n`);
+        console.log(`Created file: ${dest}`);
+        return;
+    }
+
+    const src = path.join(PROXY_TEMPLATES_DIR, descriptor.templateFile);
+    if (!fs.existsSync(src)) {
+        console.warn(`Proxy template not found: ${src}`);
+        return;
+    }
+    fs.copyFileSync(src, dest);
+    console.log(`Created file: ${dest}`);
+}
+
+function createViteConfig(proxyProvider) {
+    const usesVitePlugin = proxyProvider === 'vite';
+    const importBlock = usesVitePlugin
+        ? "import { createProxyPlugin } from './dev/proxy';\n"
+        : '';
+    const pluginBlock = usesVitePlugin
+        ? "      env.VITE_PROXY_ENABLED === 'true' ? createProxyPlugin() : null,\n"
+        : '';
+
+    return `
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+${importBlock}
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [
+      react(),
+${pluginBlock}    ].filter(Boolean),
+    resolve: {
+      dedupe: ['react', 'react-dom', 'react-router-dom'],
+    },
+    build: {
+      cssMinify: false,
+      chunkSizeWarningLimit: 10000,
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+    },
+  };
+});
+`;
+}
+
+function setupDevTools(options = {}) {
+    const proxyProvider = options.proxyProvider ?? 'none';
+
+    console.log('Setting up Vite + React + TypeScript');
+
+    ensureFile(path.join(root, 'tsconfig.json'), `
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+    `);
+
+    ensureFile(path.join(root, 'tsconfig.node.json'), `
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts", "dev/**/*.ts", "server/**/*.ts"]
+}
+    `);
+
+    if (proxyProvider !== 'none') {
+        copyProxyFile(proxyProvider);
+    }
+
+    ensureFile(path.join(root, 'vite.config.ts'), createViteConfig(proxyProvider));
+
+    ensureFile(path.join(root, 'postcss.config.js'), `
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};
+    `);
+
+    if (proxyProvider !== 'none' && PROXY_PROVIDERS[proxyProvider]) {
+        console.log(`\nProxy file created: ${PROXY_PROVIDERS[proxyProvider].outputPath}`);
+        if (proxyProvider === 'express') {
+            console.log('  → Add registerProxy(app) to your server entry file.');
+        }
+        if (proxyProvider === 'vite') {
+            console.log('  → createProxyPlugin() is already wired into vite.config.ts.');
+        }
+    }
+}
+
+module.exports = { setupDevTools, PROXY_PROVIDERS };