@llmnative/react 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.0.0",
+  "version": "1.2.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",
@@ -15,18 +15,20 @@
     "./vite": "./dist/vite.mjs",
     "./dist/index.css": "./dist/index.css"
   },
-  "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",
+  "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": "npx playwright test",
     "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:integration": "npx firebase emulators:exec --only database,firestore,storage --project demo-test \"npx vitest run --config vitest.integration.config.mts\"",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
   },
@@ -63,18 +65,22 @@
   ],
   "author": "wolfgan",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=24.18.0 <25"
+  },
+  "packageManager": "npm@11.11.0",
   "bugs": {
     "url": "https://github.com/sherpadvisorylab/llmnative-react/issues"
   },
   "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": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^6.30.0"
+    "@phosphor-icons/react": "^2.1.0",
+    "@supabase/supabase-js": "^2.110.0",
+    "firebase": "^12.16.0",
+    "lucide-react": "^1.26.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.18.1"
   },
   "peerDependenciesMeta": {
     "@phosphor-icons/react": {
@@ -85,70 +91,68 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.25.7",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.25.7",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
+    "@firebase/rules-unit-testing": "^5.0.1",
     "@phosphor-icons/react": "^2.1.10",
-    "@supabase/supabase-js": "^2.107.0",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@playwright/test": "^1.62.0",
+    "@supabase/supabase-js": "^2.110.8",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/papaparse": "^5.3.16",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitest/coverage-v8": "2.1",
-    "autoprefixer": "^10.5.0",
-    "googleapis": "^171.4.0",
-    "happy-dom": "^20.9.0",
+    "@types/papaparse": "^5.5.2",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "4.1",
+    "autoprefixer": "^10.5.4",
+    "firebase": "^12.16.0",
+    "happy-dom": "^20.11.1",
     "jsdom": "^29.1.1",
-    "lucide-react": "^1.14.0",
-    "postcss": "^8.5.14",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-router-dom": "^6.30.3",
-    "tailwindcss": "^4.2.4",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.21",
-    "vitest": "2.1"
+    "lucide-react": "^1.26.0",
+    "postcss": "^8.5.23",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "6.0.3",
+    "vite": "^8.1.5",
+    "vitest": "4.1",
+    "ws": "^8.21.1"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.3",
+    "@codemirror/commands": "^6.10.4",
     "@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/language": "^6.12.4",
     "@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",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@tiptap/extension-character-count": "^3.29.0",
+    "@tiptap/extension-image": "^3.29.0",
+    "@tiptap/extension-link": "^3.29.0",
+    "@tiptap/extension-placeholder": "^3.29.0",
+    "@tiptap/extension-table": "^3.29.0",
+    "@tiptap/extension-underline": "^3.29.0",
+    "@tiptap/react": "^3.29.0",
+    "@tiptap/starter-kit": "^3.29.0",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
-    "liquidjs": "^10.27.0",
-    "papaparse": "^5.5.3",
+    "liquidjs": "^10.27.2",
+    "papaparse": "^5.5.4",
     "prismjs": "^1.30.0",
     "react-markdown": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "tui-image-editor": "^3.15.3"
   },
   "publishConfig": {

package/scripts/cli/setup-devtools.js

@@ -61,18 +61,19 @@ function createViteConfig(proxyProvider) {
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 ${importBlock}
-export default defineConfig(({ mode }) => {
+export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
 
-  return {
-    plugins: [
+    return {
+        plugins: [
       react(),
 ${pluginBlock}    ].filter(Boolean),
     resolve: {
       dedupe: ['react', 'react-dom', 'react-router-dom'],
     },
-    build: {
-      cssMinify: false,
+    build: {
+      target: 'baseline-widely-available',
+      cssMinify: false,
       chunkSizeWarningLimit: 10000,
     },
     define: {
@@ -91,9 +92,9 @@ function setupDevTools(options = {}) {
     ensureFile(path.join(root, 'tsconfig.json'), `
 {
   "compilerOptions": {
-    "target": "ES2021",
+    "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,

package/scripts/cli/setup-project.js

@@ -172,8 +172,12 @@ function createPackageJson(params) {
     ensureFile(path.join(root, 'package.json'), JSON.stringify({
         name: normalizeFirebaseProjectId(params.projectname) || 'llmnative-app',
         version: '0.1.0',
-        private: true,
-        type: 'module',
+        private: true,
+        type: 'module',
+        engines: {
+            node: '>=24.18.0 <25',
+        },
+        packageManager: 'npm@11.11.0',
         scripts: {
             dev: 'vite',
             build: 'vite build',
@@ -181,23 +185,23 @@ function createPackageJson(params) {
             typecheck: 'tsc --noEmit',
         },
         dependencies: {
-            '@phosphor-icons/react': '^2.0.0',
-            '@vitejs/plugin-react': '^4.3.4',
-            firebase: '^10.14.0',
-            'lucide-react': '^0.400.0',
-            react: '^18.2.0',
-            'react-dom': '^18.2.0',
-            '@llmnative/react': `^${version}`,
-            'react-router-dom': '^6.22.0',
-        },
-        devDependencies: {
-            '@tailwindcss/postcss': '^4.2.4',
-            '@types/react': '^18.2.0',
-            '@types/react-dom': '^18.2.0',
-            autoprefixer: '^10.5.0',
-            postcss: '^8.5.14',
-            typescript: '^5.6.2',
-            vite: '^5.4.21',
+            '@phosphor-icons/react': '^2.1.10',
+            firebase: '^12.16.0',
+            'lucide-react': '^1.26.0',
+            react: '^19.2.8',
+            'react-dom': '^19.2.8',
+            '@llmnative/react': `^${version}`,
+            'react-router-dom': '^7.18.1',
+        },
+        devDependencies: {
+            '@tailwindcss/postcss': '^4.3.3',
+            '@types/react': '^19.2.17',
+            '@types/react-dom': '^19.2.3',
+            '@vitejs/plugin-react': '^6.0.4',
+            autoprefixer: '^10.5.4',
+            postcss: '^8.5.23',
+            typescript: '6.0.3',
+            vite: '^8.1.5',
         },
     }, null, 2));
 }

package/themes/cyber.ts

@@ -125,16 +125,17 @@ export const motion: MotionRegistry = {
 
 export const components: Theme = {
     Grid: {
+        // REVERT NOTE (2026-07-15): see themes/default.ts for the full rationale/before-state.
         Card: {
             wrapperClassName: '',
-            className: '',
-            headerClassName: 'flex justify-between',
-            bodyClassName: 'p-0',
-            footerClassName: '',
+            className: 'rounded-none border-0 bg-transparent shadow-none',
+            headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
+            bodyClassName: 'p-0 mt-2',
+            footerClassName: 'border-t-0 bg-transparent px-0 py-2',
             loading: false,
         },
         Table: {
-            wrapperClassName: '',
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
             className: '',
             headerClassName: '',
             bodyClassName: '',
@@ -143,7 +144,7 @@ export const components: Theme = {
             selectedClassName: 'bg-primary/10',
         },
         Gallery: {
-            wrapperClassName: '',
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
             className: '',
             scrollClassName: '',
             headerClassName: '',
@@ -224,7 +225,7 @@ export const components: Theme = {
     Loader: {
         wrapperClassName: '',
         className: '',
-        icon: 'custom-loader',
+        icon: 'loader-2',
         title: 'Loading..',
         description: '',
     },

package/themes/default.ts

@@ -125,16 +125,30 @@ export const motion: MotionRegistry = {
 
 export const components: Theme = {
     Grid: {
+        // REVERT NOTE (2026-07-15): before this change, `Card.className` was 'border-0' only
+        // (outer border removed, but bg-card/rounded/shadow kept — header+footer still sat in
+        // a white rounded box), `Table.wrapperClassName`/`Gallery.wrapperClassName` were both
+        // ''. The change moves the "raised card" surface (border+bg+shadow+radius) from the
+        // Card wrapper (which held header+body+footer together) down into Table/Gallery's own
+        // wrapper — so the toolbar row (view toggle, column picker, New component…) sits
+        // directly on the page's floor background with no box of its own, and only the actual
+        // data surface reads as a raised panel. To revert: restore the four blocks below to
+        // the values in this note.
         Card: {
             wrapperClassName: '',
-            className: '',
-            headerClassName: 'flex justify-between',
-            bodyClassName: 'p-0',
-            footerClassName: '',
+            // Fully transparent/borderless/shapeless now — header and footer (when used) are
+            // meant to float on the page's own background, not sit inside a card of their own;
+            // the "raised surface" look lives in Table/Gallery's wrapperClassName instead.
+            className: 'rounded-none border-0 bg-transparent shadow-none',
+            headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
+            bodyClassName: 'p-0 mt-2',
+            footerClassName: 'border-t-0 bg-transparent px-0 py-2',
             loading: false,
         },
         Table: {
-            wrapperClassName: '',
+            // The table's own raised surface — previously this border+bg lived on the
+            // shared Card wrapper (see revert note above).
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
             className: '',
             headerClassName: '',
             bodyClassName: '',
@@ -143,7 +157,8 @@ export const components: Theme = {
             selectedClassName: 'bg-primary/10',
         },
         Gallery: {
-            wrapperClassName: '',
+            // Same rationale as Table above; `p-3` so cards don't sit flush against the border.
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
             className: '',
             scrollClassName: '',
             headerClassName: '',
@@ -224,7 +239,7 @@ export const components: Theme = {
     Loader: {
         wrapperClassName: '',
         className: '',
-        icon: 'custom-loader',
+        icon: 'loader-2',
         title: 'Loading..',
         description: '',
     },

package/themes/flat.ts

@@ -125,16 +125,17 @@ export const motion: MotionRegistry = {
 
 export const components: Theme = {
     Grid: {
+        // REVERT NOTE (2026-07-15): see themes/default.ts for the full rationale/before-state.
         Card: {
             wrapperClassName: '',
-            className: '',
-            headerClassName: 'flex justify-between',
-            bodyClassName: 'p-0',
-            footerClassName: '',
+            className: 'rounded-none border-0 bg-transparent shadow-none',
+            headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
+            bodyClassName: 'p-0 mt-2',
+            footerClassName: 'border-t-0 bg-transparent px-0 py-2',
             loading: false,
         },
         Table: {
-            wrapperClassName: '',
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
             className: '',
             headerClassName: '',
             bodyClassName: '',
@@ -143,7 +144,7 @@ export const components: Theme = {
             selectedClassName: 'bg-primary/10',
         },
         Gallery: {
-            wrapperClassName: '',
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
             className: '',
             scrollClassName: '',
             headerClassName: '',
@@ -224,7 +225,7 @@ export const components: Theme = {
     Loader: {
         wrapperClassName: '',
         className: '',
-        icon: 'custom-loader',
+        icon: 'loader-2',
         title: 'Loading..',
         description: '',
     },