@tanstack/ai-devtools-core 0.3.16 → 0.3.17

package/dist/Shell/{TWTNN4SQ.js → E5BETLAK.js}

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, memo, template, setAttribute } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -7452,10 +7452,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px><div>Active Conversations</div></div><div></div><div style=flex:1>`);
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/Shell/{SHJAKIOY.js → KINKIMWF.js}

@@ -1,6 +1,6 @@
 import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -6156,10 +6156,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = ["<div", "><div", ' style="', '"><div', ">Active Conversations</div>", '</div><div class="', '"></div><div', ' style="', '">', "</div></div>"];
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/dev.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 // src/index.ts

package/dist/index.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 // src/index.ts

package/dist/production/Shell/{TWTNN4SQ.js → E5BETLAK.js}

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, memo, template, setAttribute } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -7452,10 +7452,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px><div>Active Conversations</div></div><div></div><div style=flex:1>`);
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/production/Shell/{SHJAKIOY.js → KINKIMWF.js}

@@ -1,6 +1,6 @@
 import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -6156,10 +6156,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = ["<div", "><div", ' style="', '"><div', ">Active Conversations</div>", '</div><div class="', '"></div><div', ' style="', '">', "</div></div>"];
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/production/dev.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/index.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/SHJAKIOY.js')
+  () => import('./Shell/KINKIMWF.js')
 );
 
 export { AiDevtoolsCore };

package/dist/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/SHJAKIOY.js')
+  () => import('./Shell/KINKIMWF.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Core TanStack AI Devtools",
   "author": "",
   "license": "MIT",

package/src/components/Shell.tsx

@@ -1,15 +1,28 @@
 import { createSignal, onCleanup, onMount } from 'solid-js'
-import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
+import {
+  Header,
+  HeaderLogo,
+  MainPanel,
+  ThemeContextProvider,
+} from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { AIProvider } from '../store/ai-context'
 import { ConversationsList } from './ConversationsList'
 import { ConversationDetails } from './ConversationDetails'
 
-export default function Devtools() {
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolProps {
+  theme: TanStackDevtoolsTheme
+}
+
+export default function Devtools(props: DevtoolProps) {
   return (
-    <AIProvider>
-      <DevtoolsContent />
-    </AIProvider>
+    <ThemeContextProvider theme={props.theme}>
+      <AIProvider>
+        <DevtoolsContent />
+      </AIProvider>
+    </ThemeContextProvider>
   )
 }