@llmnative/react 1.1.0 → 1.2.1

package/dist/types/src/providers/data/DataProvider.d.ts

@@ -80,5 +80,13 @@ export interface DataProviderAdapter extends ProviderConfigurable {
     readShallow?(path: string, exception?: boolean): Promise<string[]>;
     /** Write `data` to `path` in batches (useful for large imports). */
     setChunks?(path: string, data: object, options?: SetChunksOptions): Promise<void>;
+    /**
+     * Releases this adapter's underlying connection/resources. Not all providers need one
+     * (e.g. a stateless REST-backed adapter has nothing to release) — implement it when the
+     * provider holds a long-lived client/channel that should stop retrying once a caller has
+     * given up on it (see FirestoreDataProvider, where a nonexistent named database otherwise
+     * keeps reconnecting with backoff forever at the SDK level).
+     */
+    dispose?(): Promise<void>;
 }
 export {};

package/dist/types/src/providers/data/firestore.d.ts

@@ -10,6 +10,17 @@ export declare class FirestoreDataProvider implements DataProviderAdapter {
     constructor(config?: FirestoreDataProviderConfig);
     /** Same "(default)" database as before when no databaseId was configured. */
     private getDb;
+    /**
+     * Stops this instance's underlying network channel — call this once a caller has given up
+     * on this specific databaseId (e.g. after a timeout on a database that doesn't exist).
+     * `getFirestore(app, databaseId)` is a cached singleton per (app, databaseId); left alone,
+     * a client that can't connect keeps retrying with backoff FOREVER at the SDK level, fully
+     * independent of any one `read()`/`subscribe()` call already having given up on its own
+     * promise — this is what actually silences that. Safe to call even if never connected
+     * (Firestore no-ops); the cache entry is removed afterwards, so a later `new
+     * FirestoreDataProvider({databaseId})` for the same id gets a fresh client, not a dead one.
+     */
+    dispose: () => Promise<void>;
     getConfigurationState(): ProviderConfigurationState;
     isConfigured(): boolean;
     read: (path: string, { where, order, toArray, exception }?: ReadOptions) => Promise<any>;

package/dist/vite.js

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

package/dist/vite.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "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",
@@ -30,7 +30,8 @@
     "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"
+    "test:coverage": "vitest run --coverage",
+    "release:check": "node scripts/release/check-release.mjs"
   },
   "bin": {
     "llmnative": "bin/cli.js"
@@ -65,18 +66,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": {
@@ -87,75 +92,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",
-    "@playwright/test": "^1.61.1",
-    "@supabase/supabase-js": "^2.107.0",
-    "@tailwindcss/postcss": "^4.2.4",
+    "@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": "^6.9.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",
-    "firebase": "^12.0.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",
-    "ws": "^8.21.0"
+    "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: '',
     },