@structyl/api-client 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 your-lib contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# @structyl/api-client
+
+> Framework-agnostic React data fetching — an Axios client with a built-in query cache.
+
+![npm](https://img.shields.io/npm/v/@structyl/api-client)
+![license](https://img.shields.io/npm/l/@structyl/api-client)
+
+`@structyl/api-client` is a lightweight data-fetching layer for React. It pairs a configured Axios client with its own query cache and a set of hooks for queries, mutations, infinite lists, and Suspense — no separate query library required. It works identically in Vite/CRA, Next.js (App and Pages Router), Remix, Astro, and React Native, and is part of the [structyl](https://github.com/imirfanul/structyl) ecosystem.
+
+## Installation
+
+```bash
+# pnpm
+pnpm add @structyl/api-client axios
+
+# npm
+npm install @structyl/api-client axios
+
+# yarn
+yarn add @structyl/api-client axios
+```
+
+`axios` and `react` (18 or 19) are peer dependencies and are not bundled.
+
+## Usage
+
+```tsx
+import {
+  createApiClient,
+  ApiProvider,
+  useApiQuery,
+  useApiMutation,
+} from '@structyl/api-client';
+
+// 1. Create a client once, at the app root.
+const api = createApiClient({
+  baseURL: 'https://api.example.com',
+  getAuthToken: () => localStorage.getItem('token'),
+});
+
+// 2. Provide it to your tree.
+export default function App() {
+  return (
+    <ApiProvider client={api}>
+      <UserList />
+      <CreateUser />
+    </ApiProvider>
+  );
+}
+
+// 3. Query data.
+type User = { id: string; name: string };
+
+function UserList() {
+  const { data, isLoading, error } = useApiQuery<User[]>('/users');
+
+  if (isLoading) return <p>Loading…</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <ul>
+      {data?.map((u) => (
+        <li key={u.id}>{u.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+// 4. Mutate data and invalidate the cache.
+function CreateUser() {
+  const { mutate, isPending } = useApiMutation<User, { name: string }>('/users', {
+    method: 'POST',
+    invalidates: [['/users']],
+  });
+
+  return (
+    <button disabled={isPending} onClick={() => mutate({ name: 'Alice' })}>
+      Create user
+    </button>
+  );
+}
+```
+
+### Server-side prefetching (SSR)
+
+The `@structyl/api-client/server` entry point lets you prefetch on the server and hydrate the client to avoid a loading flicker.
+
+```tsx
+import { QueryClient, prefetchApiQuery, dehydrate } from '@structyl/api-client/server';
+
+const queryClient = new QueryClient();
+await prefetchApiQuery(queryClient, api, '/users');
+
+// Pass dehydrate(queryClient) to <ApiProvider hydratedState={...}> on the client.
+const hydratedState = dehydrate(queryClient);
+```
+
+## Features
+
+- **Configured Axios client** — `createApiClient` with `baseURL`, custom headers, timeout, bearer-token injection (`getAuthToken`), and automatic 401 token refresh (`refreshToken`).
+- **Built-in query cache** — request deduplication, stale-while-revalidate, garbage collection, and external invalidation. No separate query library to install.
+- **Complete hook set** — queries, mutations, infinite/cursor pagination, parallel queries, Suspense, and prefetching.
+- **Smart fetching** — `staleTime`/`gcTime`, retries, polling, refetch-on-focus, debouncing, `keepPreviousData`, `placeholderData`, and `select` transforms.
+- **Optimistic mutations** — apply optimistic updates with automatic rollback on error, plus upload-progress reporting.
+- **SSR-ready** — prefetch, dehydrate, and hydrate via the `/server` entry; safe in the Next.js App Router.
+- **Devtools** — an optional cache inspector via the `/devtools` entry.
+- **Typed and tree-shakeable** — first-class TypeScript types, ESM + CJS builds, no side effects.
+
+## API
+
+### Core (`@structyl/api-client`)
+
+| Export | Description |
+| --- | --- |
+| `createApiClient(config)` | Creates an Axios-backed `ApiClient` with auth, refresh, and timeout handling. |
+| `ApiClient` | The client class wrapping the configured Axios instance. |
+| `ApiProvider` | Context provider that supplies the client and query cache to hooks. |
+| `useApiClient()` / `useApiContext()` | Access the `ApiClient` / full context from within the provider. |
+| `useApiQuery(key, urlOrFn?, options?)` | Fetch and cache data, with retries, polling, focus refetch, and `select`. |
+| `useApiMutation(urlOrFn, options?)` | POST/PUT/PATCH/DELETE with cache invalidation and optimistic updates. |
+| `useInfiniteApiQuery(...)` | Cursor/page-based infinite queries. |
+| `useApiQueries(...)` | Run multiple queries in parallel. |
+| `useSuspenseApiQuery(...)` | Suspense-enabled query with non-nullable data. |
+| `usePrefetch()` | Imperatively warm the cache for a query. |
+| `persistCache(queryClient, config)` | Persist and restore the cache to any storage backend. |
+| `QueryClient` | The query cache instance used by the provider. |
+
+### Server (`@structyl/api-client/server`)
+
+| Export | Description |
+| --- | --- |
+| `prefetchApiQuery(queryClient, apiClient, keyOrUrl, urlOrFn?, options?)` | Prefetch a query on the server. |
+| `dehydrate(queryClient)` / `hydrate(queryClient, state)` | Serialize/restore cache state for SSR. |
+| `QueryClient` | Re-exported for server usage. |
+
+### Devtools (`@structyl/api-client/devtools`)
+
+| Export | Description |
+| --- | --- |
+| `ApiDevTools` | Floating cache inspector component for development. |
+
+Exported types include `ApiError`, `ApiClientConfig`, `UseApiQueryOptions`, `UseApiMutationOptions`, `OptimisticConfig`, `ApiQueryResult`, `ApiMutationResult`, `QueryStatus`, `QueryClientConfig`, `UseInfiniteApiQueryOptions`, `InfiniteData`, `InfiniteApiQueryResult`, `ApiQueryConfig`, `SuspenseApiQueryResult`, `PersistenceConfig`, and `PersistenceStorage`.
+
+## Part of structyl
+
+Part of the [structyl](https://github.com/imirfanul/structyl) component library. Read the full docs at [structyl.dev](https://structyl.dev).
+
+## License
+
+MIT

package/dist/devtools.cjs

@@ -0,0 +1,181 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ApiContext = react.createContext(null);
+function useApiContext() {
+  const ctx = react.useContext(ApiContext);
+  if (!ctx) {
+    throw new Error(
+      "[api-client] Hooks must be used within <ApiProvider>. Wrap your app root with <ApiProvider client={api}>."
+    );
+  }
+  return ctx;
+}
+function ApiDevTools() {
+  const [open, setOpen] = react.useState(false);
+  const [entries, setEntries] = react.useState([]);
+  const { queryClient } = useApiContext();
+  react.useEffect(() => {
+    const update = () => {
+      const snapshot = queryClient.cache.snapshot();
+      setEntries(
+        Object.entries(snapshot).map(([key, entry]) => ({ key, entry }))
+      );
+    };
+    update();
+    return queryClient.cache.subscribeGlobal(update);
+  }, [queryClient]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        zIndex: 9999,
+        fontFamily: "monospace",
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setOpen((o) => !o),
+            style: {
+              background: "#1a1a2e",
+              color: "#e94560",
+              border: "1px solid #e94560",
+              borderRadius: 6,
+              padding: "6px 12px",
+              cursor: "pointer",
+              fontFamily: "monospace"
+            },
+            children: open ? "\u2715 DevTools" : "\u{1F50D} API Cache"
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              background: "#16213e",
+              border: "1px solid #0f3460",
+              borderRadius: 8,
+              padding: 12,
+              width: 420,
+              maxHeight: 500,
+              overflowY: "auto",
+              color: "#e0e0e0"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: "#e94560" }, children: [
+                      "API Cache (",
+                      entries.length,
+                      " keys)"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => queryClient.cache.clear(),
+                        style: {
+                          background: "transparent",
+                          border: "1px solid #e94560",
+                          color: "#e94560",
+                          borderRadius: 4,
+                          padding: "2px 8px",
+                          cursor: "pointer",
+                          fontSize: 11
+                        },
+                        children: "Clear"
+                      }
+                    )
+                  ]
+                }
+              ),
+              entries.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", textAlign: "center", padding: 16 }, children: "Cache is empty" }),
+              entries.map(({ key, entry }) => {
+                const age = entry.updatedAt ? Math.round((Date.now() - entry.updatedAt) / 1e3) : null;
+                const statusColor = {
+                  success: "#4caf50",
+                  error: "#f44336",
+                  loading: "#ff9800",
+                  idle: "#888"
+                }[entry.status] ?? "#888";
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginBottom: 8,
+                      background: "#0f3460",
+                      borderRadius: 6,
+                      padding: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            marginBottom: 4
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "code",
+                              {
+                                style: {
+                                  color: "#e0e0e0",
+                                  wordBreak: "break-all",
+                                  fontSize: 11
+                                },
+                                children: key.length > 60 ? key.slice(0, 57) + "\u2026" : key
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "span",
+                              {
+                                style: { color: statusColor, marginLeft: 8, flexShrink: 0 },
+                                children: [
+                                  "\u25CF ",
+                                  entry.status
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#888", fontSize: 10 }, children: [
+                        age !== null ? `age: ${age}s` : "no data",
+                        " \xB7 ",
+                        "stale: ",
+                        entry.staleTime > 0 ? `${entry.staleTime / 1e3}s` : "always",
+                        entry.updatedAt === 0 && " \xB7 \u26A0 invalidated"
+                      ] })
+                    ]
+                  },
+                  key
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+ApiDevTools.displayName = "ApiDevTools";
+
+exports.ApiDevTools = ApiDevTools;
+//# sourceMappingURL=devtools.cjs.map
+//# sourceMappingURL=devtools.cjs.map

package/dist/devtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/devtools/ApiDevTools.tsx"],"names":["createContext","useContext","useState","useEffect","jsxs","jsx"],"mappings":"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","file":"devtools.cjs","sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { QueryClient } from './cache';\nimport type { ApiClient } from './client';\nimport type { DehydratedState } from './server';\nimport type { QueryClientConfig } from './types';\n\ninterface ApiContextValue {\n  apiClient: ApiClient;\n  queryClient: QueryClient;\n}\n\nconst ApiContext = createContext<ApiContextValue | null>(null);\n\nexport function useApiContext(): ApiContextValue {\n  const ctx = useContext(ApiContext);\n  if (!ctx) {\n    throw new Error(\n      '[api-client] Hooks must be used within <ApiProvider>. ' +\n        'Wrap your app root with <ApiProvider client={api}>.',\n    );\n  }\n  return ctx;\n}\n\nexport function useApiClient(): ApiClient {\n  return useApiContext().apiClient;\n}\n\nfunction makeQueryClient(config?: QueryClientConfig): QueryClient {\n  return new QueryClient(config);\n}\n\nlet browserQueryClient: QueryClient | undefined;\n\nfunction getQueryClient(config?: QueryClientConfig): QueryClient {\n  if (typeof window === 'undefined') return makeQueryClient(config);\n  if (!browserQueryClient) browserQueryClient = makeQueryClient(config);\n  return browserQueryClient;\n}\n\nexport interface ApiProviderProps {\n  client: ApiClient;\n  children: ReactNode;\n  /** Inject a pre-built QueryClient (advanced / testing) */\n  queryClient?: QueryClient;\n  /** Override the GC time for entries with no active subscriber (ms, default 5 min) */\n  gcTime?: number;\n  /** Hydrate from server-prefetched state (SSR) */\n  hydratedState?: DehydratedState;\n  /** Global QueryClient configuration (callbacks etc.) */\n  queryClientConfig?: QueryClientConfig;\n}\n\nexport function ApiProvider({\n  client,\n  children,\n  queryClient,\n  gcTime,\n  hydratedState,\n  queryClientConfig,\n}: ApiProviderProps): React.JSX.Element {\n  const qcRef = useRef<QueryClient | null>(null);\n  if (!qcRef.current) {\n    const config: QueryClientConfig = {\n      gcTime,\n      ...queryClientConfig,\n    };\n    qcRef.current = queryClient ?? getQueryClient(config);\n    if (hydratedState) {\n      qcRef.current.cache.restore(hydratedState.entries);\n    }\n  }\n\n  const ctxRef = useRef<ApiContextValue | null>(null);\n  if (!ctxRef.current || ctxRef.current.apiClient !== client) {\n    ctxRef.current = { apiClient: client, queryClient: qcRef.current };\n  }\n\n  return (\n    <ApiContext.Provider value={ctxRef.current}>{children}</ApiContext.Provider>\n  );\n}\n\nApiProvider.displayName = 'ApiProvider';\n","'use client'; // safe to include here — this is a UI component\n\nimport React, { useState, useEffect } from 'react';\nimport { useApiContext } from '../provider';\nimport type { CacheEntry } from '../cache';\n\ninterface CacheSnapshot {\n  key: string;\n  entry: CacheEntry;\n}\n\nexport function ApiDevTools(): React.JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [entries, setEntries] = useState<CacheSnapshot[]>([]);\n  const { queryClient } = useApiContext();\n\n  useEffect(() => {\n    const update = () => {\n      const snapshot = queryClient.cache.snapshot();\n      setEntries(\n        Object.entries(snapshot).map(([key, entry]) => ({ key, entry })),\n      );\n    };\n    update();\n    return queryClient.cache.subscribeGlobal(update);\n  }, [queryClient]);\n\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        bottom: 16,\n        right: 16,\n        zIndex: 9999,\n        fontFamily: 'monospace',\n        fontSize: 12,\n      }}\n    >\n      <button\n        onClick={() => setOpen((o) => !o)}\n        style={{\n          background: '#1a1a2e',\n          color: '#e94560',\n          border: '1px solid #e94560',\n          borderRadius: 6,\n          padding: '6px 12px',\n          cursor: 'pointer',\n          fontFamily: 'monospace',\n        }}\n      >\n        {open ? '✕ DevTools' : '🔍 API Cache'}\n      </button>\n\n      {open && (\n        <div\n          style={{\n            marginTop: 8,\n            background: '#16213e',\n            border: '1px solid #0f3460',\n            borderRadius: 8,\n            padding: 12,\n            width: 420,\n            maxHeight: 500,\n            overflowY: 'auto',\n            color: '#e0e0e0',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              marginBottom: 8,\n            }}\n          >\n            <strong style={{ color: '#e94560' }}>\n              API Cache ({entries.length} keys)\n            </strong>\n            <button\n              onClick={() => queryClient.cache.clear()}\n              style={{\n                background: 'transparent',\n                border: '1px solid #e94560',\n                color: '#e94560',\n                borderRadius: 4,\n                padding: '2px 8px',\n                cursor: 'pointer',\n                fontSize: 11,\n              }}\n            >\n              Clear\n            </button>\n          </div>\n\n          {entries.length === 0 && (\n            <div style={{ color: '#888', textAlign: 'center', padding: 16 }}>\n              Cache is empty\n            </div>\n          )}\n\n          {entries.map(({ key, entry }) => {\n            const age =\n              entry.updatedAt\n                ? Math.round((Date.now() - entry.updatedAt) / 1000)\n                : null;\n            const statusColor =\n              {\n                success: '#4caf50',\n                error: '#f44336',\n                loading: '#ff9800',\n                idle: '#888',\n              }[entry.status] ?? '#888';\n            return (\n              <div\n                key={key}\n                style={{\n                  marginBottom: 8,\n                  background: '#0f3460',\n                  borderRadius: 6,\n                  padding: 8,\n                }}\n              >\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    marginBottom: 4,\n                  }}\n                >\n                  <code\n                    style={{\n                      color: '#e0e0e0',\n                      wordBreak: 'break-all',\n                      fontSize: 11,\n                    }}\n                  >\n                    {key.length > 60 ? key.slice(0, 57) + '…' : key}\n                  </code>\n                  <span\n                    style={{ color: statusColor, marginLeft: 8, flexShrink: 0 }}\n                  >\n                    ● {entry.status}\n                  </span>\n                </div>\n                <div style={{ color: '#888', fontSize: 10 }}>\n                  {age !== null ? `age: ${age}s` : 'no data'}\n                  {' · '}\n                  stale: {entry.staleTime > 0 ? `${entry.staleTime / 1000}s` : 'always'}\n                  {entry.updatedAt === 0 && ' · ⚠ invalidated'}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nApiDevTools.displayName = 'ApiDevTools';\n"]}

package/dist/devtools.d.cts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+declare function ApiDevTools(): React.JSX.Element;
+declare namespace ApiDevTools {
+    var displayName: string;
+}
+
+export { ApiDevTools };

package/dist/devtools.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+declare function ApiDevTools(): React.JSX.Element;
+declare namespace ApiDevTools {
+    var displayName: string;
+}
+
+export { ApiDevTools };

package/dist/devtools.mjs

@@ -0,0 +1,179 @@
+import { createContext, useState, useEffect, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ApiContext = createContext(null);
+function useApiContext() {
+  const ctx = useContext(ApiContext);
+  if (!ctx) {
+    throw new Error(
+      "[api-client] Hooks must be used within <ApiProvider>. Wrap your app root with <ApiProvider client={api}>."
+    );
+  }
+  return ctx;
+}
+function ApiDevTools() {
+  const [open, setOpen] = useState(false);
+  const [entries, setEntries] = useState([]);
+  const { queryClient } = useApiContext();
+  useEffect(() => {
+    const update = () => {
+      const snapshot = queryClient.cache.snapshot();
+      setEntries(
+        Object.entries(snapshot).map(([key, entry]) => ({ key, entry }))
+      );
+    };
+    update();
+    return queryClient.cache.subscribeGlobal(update);
+  }, [queryClient]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        zIndex: 9999,
+        fontFamily: "monospace",
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOpen((o) => !o),
+            style: {
+              background: "#1a1a2e",
+              color: "#e94560",
+              border: "1px solid #e94560",
+              borderRadius: 6,
+              padding: "6px 12px",
+              cursor: "pointer",
+              fontFamily: "monospace"
+            },
+            children: open ? "\u2715 DevTools" : "\u{1F50D} API Cache"
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              background: "#16213e",
+              border: "1px solid #0f3460",
+              borderRadius: 8,
+              padding: 12,
+              width: 420,
+              maxHeight: 500,
+              overflowY: "auto",
+              color: "#e0e0e0"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("strong", { style: { color: "#e94560" }, children: [
+                      "API Cache (",
+                      entries.length,
+                      " keys)"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => queryClient.cache.clear(),
+                        style: {
+                          background: "transparent",
+                          border: "1px solid #e94560",
+                          color: "#e94560",
+                          borderRadius: 4,
+                          padding: "2px 8px",
+                          cursor: "pointer",
+                          fontSize: 11
+                        },
+                        children: "Clear"
+                      }
+                    )
+                  ]
+                }
+              ),
+              entries.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "#888", textAlign: "center", padding: 16 }, children: "Cache is empty" }),
+              entries.map(({ key, entry }) => {
+                const age = entry.updatedAt ? Math.round((Date.now() - entry.updatedAt) / 1e3) : null;
+                const statusColor = {
+                  success: "#4caf50",
+                  error: "#f44336",
+                  loading: "#ff9800",
+                  idle: "#888"
+                }[entry.status] ?? "#888";
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginBottom: 8,
+                      background: "#0f3460",
+                      borderRadius: 6,
+                      padding: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            marginBottom: 4
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "code",
+                              {
+                                style: {
+                                  color: "#e0e0e0",
+                                  wordBreak: "break-all",
+                                  fontSize: 11
+                                },
+                                children: key.length > 60 ? key.slice(0, 57) + "\u2026" : key
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: { color: statusColor, marginLeft: 8, flexShrink: 0 },
+                                children: [
+                                  "\u25CF ",
+                                  entry.status
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { style: { color: "#888", fontSize: 10 }, children: [
+                        age !== null ? `age: ${age}s` : "no data",
+                        " \xB7 ",
+                        "stale: ",
+                        entry.staleTime > 0 ? `${entry.staleTime / 1e3}s` : "always",
+                        entry.updatedAt === 0 && " \xB7 \u26A0 invalidated"
+                      ] })
+                    ]
+                  },
+                  key
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+ApiDevTools.displayName = "ApiDevTools";
+
+export { ApiDevTools };
+//# sourceMappingURL=devtools.mjs.map
+//# sourceMappingURL=devtools.mjs.map

package/dist/devtools.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/devtools/ApiDevTools.tsx"],"names":["jsx"],"mappings":"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","file":"devtools.mjs","sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { QueryClient } from './cache';\nimport type { ApiClient } from './client';\nimport type { DehydratedState } from './server';\nimport type { QueryClientConfig } from './types';\n\ninterface ApiContextValue {\n  apiClient: ApiClient;\n  queryClient: QueryClient;\n}\n\nconst ApiContext = createContext<ApiContextValue | null>(null);\n\nexport function useApiContext(): ApiContextValue {\n  const ctx = useContext(ApiContext);\n  if (!ctx) {\n    throw new Error(\n      '[api-client] Hooks must be used within <ApiProvider>. ' +\n        'Wrap your app root with <ApiProvider client={api}>.',\n    );\n  }\n  return ctx;\n}\n\nexport function useApiClient(): ApiClient {\n  return useApiContext().apiClient;\n}\n\nfunction makeQueryClient(config?: QueryClientConfig): QueryClient {\n  return new QueryClient(config);\n}\n\nlet browserQueryClient: QueryClient | undefined;\n\nfunction getQueryClient(config?: QueryClientConfig): QueryClient {\n  if (typeof window === 'undefined') return makeQueryClient(config);\n  if (!browserQueryClient) browserQueryClient = makeQueryClient(config);\n  return browserQueryClient;\n}\n\nexport interface ApiProviderProps {\n  client: ApiClient;\n  children: ReactNode;\n  /** Inject a pre-built QueryClient (advanced / testing) */\n  queryClient?: QueryClient;\n  /** Override the GC time for entries with no active subscriber (ms, default 5 min) */\n  gcTime?: number;\n  /** Hydrate from server-prefetched state (SSR) */\n  hydratedState?: DehydratedState;\n  /** Global QueryClient configuration (callbacks etc.) */\n  queryClientConfig?: QueryClientConfig;\n}\n\nexport function ApiProvider({\n  client,\n  children,\n  queryClient,\n  gcTime,\n  hydratedState,\n  queryClientConfig,\n}: ApiProviderProps): React.JSX.Element {\n  const qcRef = useRef<QueryClient | null>(null);\n  if (!qcRef.current) {\n    const config: QueryClientConfig = {\n      gcTime,\n      ...queryClientConfig,\n    };\n    qcRef.current = queryClient ?? getQueryClient(config);\n    if (hydratedState) {\n      qcRef.current.cache.restore(hydratedState.entries);\n    }\n  }\n\n  const ctxRef = useRef<ApiContextValue | null>(null);\n  if (!ctxRef.current || ctxRef.current.apiClient !== client) {\n    ctxRef.current = { apiClient: client, queryClient: qcRef.current };\n  }\n\n  return (\n    <ApiContext.Provider value={ctxRef.current}>{children}</ApiContext.Provider>\n  );\n}\n\nApiProvider.displayName = 'ApiProvider';\n","'use client'; // safe to include here — this is a UI component\n\nimport React, { useState, useEffect } from 'react';\nimport { useApiContext } from '../provider';\nimport type { CacheEntry } from '../cache';\n\ninterface CacheSnapshot {\n  key: string;\n  entry: CacheEntry;\n}\n\nexport function ApiDevTools(): React.JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [entries, setEntries] = useState<CacheSnapshot[]>([]);\n  const { queryClient } = useApiContext();\n\n  useEffect(() => {\n    const update = () => {\n      const snapshot = queryClient.cache.snapshot();\n      setEntries(\n        Object.entries(snapshot).map(([key, entry]) => ({ key, entry })),\n      );\n    };\n    update();\n    return queryClient.cache.subscribeGlobal(update);\n  }, [queryClient]);\n\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        bottom: 16,\n        right: 16,\n        zIndex: 9999,\n        fontFamily: 'monospace',\n        fontSize: 12,\n      }}\n    >\n      <button\n        onClick={() => setOpen((o) => !o)}\n        style={{\n          background: '#1a1a2e',\n          color: '#e94560',\n          border: '1px solid #e94560',\n          borderRadius: 6,\n          padding: '6px 12px',\n          cursor: 'pointer',\n          fontFamily: 'monospace',\n        }}\n      >\n        {open ? '✕ DevTools' : '🔍 API Cache'}\n      </button>\n\n      {open && (\n        <div\n          style={{\n            marginTop: 8,\n            background: '#16213e',\n            border: '1px solid #0f3460',\n            borderRadius: 8,\n            padding: 12,\n            width: 420,\n            maxHeight: 500,\n            overflowY: 'auto',\n            color: '#e0e0e0',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              marginBottom: 8,\n            }}\n          >\n            <strong style={{ color: '#e94560' }}>\n              API Cache ({entries.length} keys)\n            </strong>\n            <button\n              onClick={() => queryClient.cache.clear()}\n              style={{\n                background: 'transparent',\n                border: '1px solid #e94560',\n                color: '#e94560',\n                borderRadius: 4,\n                padding: '2px 8px',\n                cursor: 'pointer',\n                fontSize: 11,\n              }}\n            >\n              Clear\n            </button>\n          </div>\n\n          {entries.length === 0 && (\n            <div style={{ color: '#888', textAlign: 'center', padding: 16 }}>\n              Cache is empty\n            </div>\n          )}\n\n          {entries.map(({ key, entry }) => {\n            const age =\n              entry.updatedAt\n                ? Math.round((Date.now() - entry.updatedAt) / 1000)\n                : null;\n            const statusColor =\n              {\n                success: '#4caf50',\n                error: '#f44336',\n                loading: '#ff9800',\n                idle: '#888',\n              }[entry.status] ?? '#888';\n            return (\n              <div\n                key={key}\n                style={{\n                  marginBottom: 8,\n                  background: '#0f3460',\n                  borderRadius: 6,\n                  padding: 8,\n                }}\n              >\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    marginBottom: 4,\n                  }}\n                >\n                  <code\n                    style={{\n                      color: '#e0e0e0',\n                      wordBreak: 'break-all',\n                      fontSize: 11,\n                    }}\n                  >\n                    {key.length > 60 ? key.slice(0, 57) + '…' : key}\n                  </code>\n                  <span\n                    style={{ color: statusColor, marginLeft: 8, flexShrink: 0 }}\n                  >\n                    ● {entry.status}\n                  </span>\n                </div>\n                <div style={{ color: '#888', fontSize: 10 }}>\n                  {age !== null ? `age: ${age}s` : 'no data'}\n                  {' · '}\n                  stale: {entry.staleTime > 0 ? `${entry.staleTime / 1000}s` : 'always'}\n                  {entry.updatedAt === 0 && ' · ⚠ invalidated'}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nApiDevTools.displayName = 'ApiDevTools';\n"]}