@lyeve-labs/client-react 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LyEve Labs
+
+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,211 @@
+# @lyeve/cms-client-react
+
+React hooks for the LyEve Core. Typed, reactive data fetching built on
+`@lyeve/cms-client`.
+
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![React](https://img.shields.io/badge/React-18+-61dafb.svg)](https://react.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-3178c6.svg)](https://www.typescriptlang.org)
+
+```bash
+pnpm add @lyeve/cms-client @lyeve/cms-client-react
+```
+
+```tsx
+import { CmsProvider, useQuery, useMutation } from "@lyeve/cms-client-react";
+import { getSchemas, createSchema } from "@lyeve/cms-client-rest";
+
+function App() {
+  return (
+    <CmsProvider config={{ baseUrl: "https://cms.example.com" }}>
+      <SchemaManager />
+    </CmsProvider>
+  );
+}
+
+function SchemaManager() {
+  const { data, loading } = useQuery((client) => getSchemas(client));
+  const [create, { loading: creating }] = useMutation(
+    (client, vars: { name: string }) => createSchema(client, vars),
+  );
+  // ...
+}
+```
+
+One provider at the root, typed hooks everywhere else. No boilerplate.
+
+---
+
+## What's in the box
+
+- **CmsProvider:** context provider that wraps your component tree with CMS client
+  configuration. `getHeaders` is called on every request so auth tokens stay fresh.
+- **useQuery:** reactive data fetching hook. Runs on mount, returns `{ data, error,
+loading, refetch }`. Preserves existing data on fetch errors to prevent UI flash.
+- **useMutation:** mutation hook returning `[trigger, state]`. Loading/error/data
+  tracked per invocation.
+- **Stale-closure safe:** client re-creates when `baseUrl` or `getHeaders` change,
+  so hooks always see the latest config.
+
+## Requirements
+
+- **Node 20** or newer
+- **React 18** or newer
+- **[@lyeve/cms-client](https://www.npmjs.com/package/@lyeve/cms-client)** `>=0.1.0`
+
+## Install
+
+```bash
+pnpm add @lyeve/cms-client @lyeve/cms-client-react
+# or npm install @lyeve/cms-client @lyeve/cms-client-react
+# or yarn add @lyeve/cms-client @lyeve/cms-client-react
+```
+
+## Use
+
+### Provider
+
+Wrap your app once at the root:
+
+```tsx
+import { CmsProvider } from "@lyeve/cms-client-react";
+
+function App() {
+  return (
+    <CmsProvider
+      config={{
+        baseUrl: "https://cms.example.com",
+        getHeaders: () => ({ Authorization: `Bearer ${getToken()}` }),
+      }}
+    >
+      <YourRoutes />
+    </CmsProvider>
+  );
+}
+```
+
+### useQuery
+
+```tsx
+import { useQuery } from "@lyeve/cms-client-react";
+import { getSchemas } from "@lyeve/cms-client-rest";
+
+function SchemaList() {
+  const { data, error, loading, refetch } = useQuery((client) =>
+    getSchemas(client),
+  );
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <ul>
+      {data?.map((s) => (
+        <li key={s.id}>{s.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### useMutation
+
+```tsx
+import { useMutation } from "@lyeve/cms-client-react";
+import { createSchema } from "@lyeve/cms-client-rest";
+
+function CreateForm() {
+  const [create, { loading, error }] = useMutation(
+    (client, vars: { name: string }) => createSchema(client, vars),
+  );
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    await create({ name: "articles" });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={loading}>
+        {loading ? "Creating..." : "Create"}
+      </button>
+      {error && <p>{error.message}</p>}
+    </form>
+  );
+}
+```
+
+## API
+
+### CmsProvider
+
+```ts
+interface CmsConfig {
+  baseUrl?: string;
+  getHeaders?: () => Record<string, string>;
+}
+
+<CmsProvider config={config}>{children}</CmsProvider>
+```
+
+### useQuery
+
+```ts
+function useQuery<T>(
+  fetcher: (client: HttpClient) => Promise<T>,
+  deps?: unknown[],
+): {
+  data: T | null;
+  error: Error | null;
+  loading: boolean;
+  refetch: () => void;
+};
+```
+
+Runs `fetcher` on mount and whenever `deps` change. Returns `refetch` for manual
+re-execution.
+
+### useMutation
+
+```ts
+function useMutation<T, V>(
+  mutator: (client: HttpClient, vars: V) => Promise<T>,
+): [
+  (vars: V) => Promise<T>,
+  { data: T | null; error: Error | null; loading: boolean },
+];
+```
+
+Returns a trigger function and the current state.
+
+## Local development
+
+```bash
+pnpm install            # install dependencies
+pnpm test               # run unit tests
+pnpm check              # type-check
+pnpm build              # tsup + publint -> dist/
+```
+
+## Project layout
+
+```
+src/
+  index.tsx          # CmsProvider, useQuery, useMutation
+tests/               # vitest test suite
+```
+
+## Versioning
+
+`@lyeve/cms-client-react` follows [SemVer](https://semver.org). While under `1.0`,
+breaking changes bump the **minor** version; additive changes bump the **patch**.
+Every release is logged in [`CHANGELOG.md`](CHANGELOG.md).
+
+## Contributing
+
+Bug reports and feature requests are welcome. See
+[`CONTRIBUTING.md`](CONTRIBUTING.md) for the development setup and conventions.
+
+## License
+
+MIT. See [`LICENSE`](LICENSE).

package/dist/index.cjs

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  CmsProvider: () => CmsProvider,
+  useMutation: () => useMutation,
+  useQuery: () => useQuery
+});
+module.exports = __toCommonJS(src_exports);
+var import_cms_client = require("@lyeve/cms-client");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CmsContext = (0, import_react.createContext)(null);
+function CmsProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CmsContext.Provider, { value: config, children });
+}
+function useClient() {
+  const config = (0, import_react.useContext)(CmsContext);
+  if (!config) {
+    throw new Error("CmsProvider must wrap your component tree");
+  }
+  return (0, import_react.useMemo)(() => {
+    const base = config.baseUrl ?? "";
+    return (0, import_cms_client.createClient)((url, init) => {
+      const fullUrl = typeof url === "string" ? `${base}${url}` : url;
+      return fetch(fullUrl, {
+        ...init,
+        headers: { ...init?.headers, ...config.getHeaders?.() }
+      });
+    });
+  }, [config.baseUrl, config.getHeaders]);
+}
+function useQuery(fetcher, deps = []) {
+  const client = useClient();
+  const [state, setState] = (0, import_react.useState)({
+    data: null,
+    error: null,
+    loading: true
+  });
+  const run = (0, import_react.useCallback)(() => {
+    setState((s) => ({ ...s, loading: true }));
+    fetcher(client).then((data) => setState({ data, error: null, loading: false })).catch(
+      (error) => setState((s) => ({ ...s, error, loading: false }))
+    );
+  }, [client, ...deps]);
+  (0, import_react.useEffect)(() => {
+    run();
+  }, [run]);
+  return { ...state, refetch: run };
+}
+function useMutation(mutator) {
+  const client = useClient();
+  const [state, setState] = (0, import_react.useState)({
+    data: null,
+    error: null,
+    loading: false
+  });
+  const run = (0, import_react.useCallback)(
+    async (vars) => {
+      setState((s) => ({ ...s, loading: true }));
+      try {
+        const data = await mutator(client, vars);
+        setState({ data, error: null, loading: false });
+        return data;
+      } catch (error) {
+        setState({ data: null, error, loading: false });
+        throw error;
+      }
+    },
+    [client]
+  );
+  return [run, state];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CmsProvider,
+  useMutation,
+  useQuery
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * LyEve CMS React hooks - typed, reactive data fetching.\n *\n * Thin wrapper around {@link @lyeve/cms-client} that makes the client\n * available via context and provides `useQuery` / `useMutation` hooks.\n *\n * @example\n * ```tsx\n * import { CmsProvider, useQuery } from '@lyeve/cms-client-react';\n * import { getSchemas } from '@lyeve/cms-client-rest';\n *\n * function App() {\n *   return (\n *     <CmsProvider config={{ baseUrl: 'https://cms.example.com', getHeaders: () => ({ Authorization: `Bearer ${token}` }) }}>\n *       <SchemaManager />\n *     </CmsProvider>\n *   );\n * }\n *\n * function SchemaManager() {\n *   const { data: schemas, loading } = useQuery((client) => getSchemas(client));\n *   // ...\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { createClient, type HttpClient } from '@lyeve/cms-client';\nimport {\n  createContext,\n  useContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\n// Provider\n\nexport interface CmsConfig {\n  /** Base URL prepended to every request path. */\n  baseUrl?: string;\n  /**\n   * Callback returning headers added to every request.\n   * Called on every request so auth tokens can be refreshed without\n   * recreating the provider.\n   */\n  getHeaders?: () => Record<string, string>;\n}\n\nconst CmsContext = createContext<CmsConfig | null>(null);\n\n/**\n * Context provider that makes the CMS client available to all descendant\n * hooks.\n *\n * @example\n * ```tsx\n * <CmsProvider config={{ baseUrl: 'https://cms.example.com' }}>\n *   <App />\n * </CmsProvider>\n * ```\n */\nexport function CmsProvider({\n  config,\n  children,\n}: {\n  config: CmsConfig;\n  children: ReactNode;\n}) {\n  return <CmsContext.Provider value={config}>{children}</CmsContext.Provider>;\n}\n\n/**\n * Returns a memoized HttpClient instance configured from the nearest\n * {@link CmsProvider}.\n */\nfunction useClient(): HttpClient {\n  const config = useContext(CmsContext);\n  if (!config) {\n    throw new Error('CmsProvider must wrap your component tree');\n  }\n  // Re-create when config changes so getHeaders/auth tokens stay current.\n  return useMemo(() => {\n    const base = config.baseUrl ?? '';\n    return createClient((url, init) => {\n      const fullUrl = typeof url === 'string' ? `${base}${url}` : url;\n      return fetch(fullUrl, {\n        ...init,\n        headers: { ...init?.headers, ...config.getHeaders?.() },\n      });\n    });\n  }, [config.baseUrl, config.getHeaders]);\n}\n\n// Hooks\n\nexport interface AsyncState<T> {\n  data: T | null;\n  error: Error | null;\n  loading: boolean;\n}\n\n/**\n * Reactive query hook. Runs `fetcher` on mount and whenever `deps` change.\n *\n * @param fetcher - Function that receives the configured HttpClient and returns a promise.\n * @param deps - Optional dependency array controlling when to refetch (default: `[]`).\n *\n * @example\n * ```ts\n * const { data, error, loading, refetch } = useQuery(\n *   (client) => getSchemas(client),\n * );\n * ```\n */\nexport function useQuery<T>(\n  fetcher: (client: HttpClient) => Promise<T>,\n  deps: unknown[] = [],\n): AsyncState<T> & { refetch: () => void } {\n  const client = useClient();\n  const [state, setState] = useState<AsyncState<T>>({\n    data: null,\n    error: null,\n    loading: true,\n  });\n\n  const run = useCallback(() => {\n    setState((s) => ({ ...s, loading: true }));\n\n    fetcher(client)\n      .then((data) => setState({ data, error: null, loading: false }))\n      .catch((error) =>\n        setState((s) => ({ ...s, error: error as Error, loading: false })),\n      );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [client, ...deps]);\n\n  useEffect(() => {\n    run();\n  }, [run]);\n\n  return { ...state, refetch: run };\n}\n\n/**\n * Mutation hook. Returns a trigger function and the current state.\n *\n * @param mutator - Function that receives the configured HttpClient and variables.\n *\n * @example\n * ```ts\n * const [create, { loading, error }] = useMutation(\n *   (client, vars: { title: string }) => createArticle(client, vars),\n * );\n * // await create({ title: 'Hello' })\n * ```\n */\nexport function useMutation<T, V>(\n  mutator: (client: HttpClient, vars: V) => Promise<T>,\n): [(vars: V) => Promise<T>, AsyncState<T>] {\n  const client = useClient();\n  const [state, setState] = useState<AsyncState<T>>({\n    data: null,\n    error: null,\n    loading: false,\n  });\n\n  const run = useCallback(\n    async (vars: V) => {\n      setState((s) => ({ ...s, loading: true }));\n      try {\n        const data = await mutator(client, vars);\n        setState({ data, error: null, loading: false });\n        return data;\n      } catch (error) {\n        setState({ data: null, error: error as Error, loading: false });\n        throw error;\n      }\n    },\n    [client],\n  );\n\n  return [run, state];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BA,wBAA8C;AAC9C,mBAQO;AAmCE;AApBT,IAAM,iBAAa,4BAAgC,IAAI;AAahD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,SAAO,4CAAC,WAAW,UAAX,EAAoB,OAAO,QAAS,UAAS;AACvD;AAMA,SAAS,YAAwB;AAC/B,QAAM,aAAS,yBAAW,UAAU;AACpC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AAEA,aAAO,sBAAQ,MAAM;AACnB,UAAM,OAAO,OAAO,WAAW;AAC/B,eAAO,gCAAa,CAAC,KAAK,SAAS;AACjC,YAAM,UAAU,OAAO,QAAQ,WAAW,GAAG,IAAI,GAAG,GAAG,KAAK;AAC5D,aAAO,MAAM,SAAS;AAAA,QACpB,GAAG;AAAA,QACH,SAAS,EAAE,GAAG,MAAM,SAAS,GAAG,OAAO,aAAa,EAAE;AAAA,MACxD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,SAAS,OAAO,UAAU,CAAC;AACxC;AAuBO,SAAS,SACd,SACA,OAAkB,CAAC,GACsB;AACzC,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB;AAAA,IAChD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,QAAM,UAAM,0BAAY,MAAM;AAC5B,aAAS,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,KAAK,EAAE;AAEzC,YAAQ,MAAM,EACX,KAAK,CAAC,SAAS,SAAS,EAAE,MAAM,OAAO,MAAM,SAAS,MAAM,CAAC,CAAC,EAC9D;AAAA,MAAM,CAAC,UACN,SAAS,CAAC,OAAO,EAAE,GAAG,GAAG,OAAuB,SAAS,MAAM,EAAE;AAAA,IACnE;AAAA,EAEJ,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI;AAAA,EACN,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,EAAE,GAAG,OAAO,SAAS,IAAI;AAClC;AAeO,SAAS,YACd,SAC0C;AAC1C,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB;AAAA,IAChD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,QAAM,UAAM;AAAA,IACV,OAAO,SAAY;AACjB,eAAS,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,KAAK,EAAE;AACzC,UAAI;AACF,cAAM,OAAO,MAAM,QAAQ,QAAQ,IAAI;AACvC,iBAAS,EAAE,MAAM,OAAO,MAAM,SAAS,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,SAAS,OAAO;AACd,iBAAS,EAAE,MAAM,MAAM,OAAuB,SAAS,MAAM,CAAC;AAC9D,cAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { HttpClient } from '@lyeve/cms-client';
+
+interface CmsConfig {
+    /** Base URL prepended to every request path. */
+    baseUrl?: string;
+    /**
+     * Callback returning headers added to every request.
+     * Called on every request so auth tokens can be refreshed without
+     * recreating the provider.
+     */
+    getHeaders?: () => Record<string, string>;
+}
+/**
+ * Context provider that makes the CMS client available to all descendant
+ * hooks.
+ *
+ * @example
+ * ```tsx
+ * <CmsProvider config={{ baseUrl: 'https://cms.example.com' }}>
+ *   <App />
+ * </CmsProvider>
+ * ```
+ */
+declare function CmsProvider({ config, children, }: {
+    config: CmsConfig;
+    children: ReactNode;
+}): react.JSX.Element;
+interface AsyncState<T> {
+    data: T | null;
+    error: Error | null;
+    loading: boolean;
+}
+/**
+ * Reactive query hook. Runs `fetcher` on mount and whenever `deps` change.
+ *
+ * @param fetcher - Function that receives the configured HttpClient and returns a promise.
+ * @param deps - Optional dependency array controlling when to refetch (default: `[]`).
+ *
+ * @example
+ * ```ts
+ * const { data, error, loading, refetch } = useQuery(
+ *   (client) => getSchemas(client),
+ * );
+ * ```
+ */
+declare function useQuery<T>(fetcher: (client: HttpClient) => Promise<T>, deps?: unknown[]): AsyncState<T> & {
+    refetch: () => void;
+};
+/**
+ * Mutation hook. Returns a trigger function and the current state.
+ *
+ * @param mutator - Function that receives the configured HttpClient and variables.
+ *
+ * @example
+ * ```ts
+ * const [create, { loading, error }] = useMutation(
+ *   (client, vars: { title: string }) => createArticle(client, vars),
+ * );
+ * // await create({ title: 'Hello' })
+ * ```
+ */
+declare function useMutation<T, V>(mutator: (client: HttpClient, vars: V) => Promise<T>): [(vars: V) => Promise<T>, AsyncState<T>];
+
+export { type AsyncState, type CmsConfig, CmsProvider, useMutation, useQuery };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { HttpClient } from '@lyeve/cms-client';
+
+interface CmsConfig {
+    /** Base URL prepended to every request path. */
+    baseUrl?: string;
+    /**
+     * Callback returning headers added to every request.
+     * Called on every request so auth tokens can be refreshed without
+     * recreating the provider.
+     */
+    getHeaders?: () => Record<string, string>;
+}
+/**
+ * Context provider that makes the CMS client available to all descendant
+ * hooks.
+ *
+ * @example
+ * ```tsx
+ * <CmsProvider config={{ baseUrl: 'https://cms.example.com' }}>
+ *   <App />
+ * </CmsProvider>
+ * ```
+ */
+declare function CmsProvider({ config, children, }: {
+    config: CmsConfig;
+    children: ReactNode;
+}): react.JSX.Element;
+interface AsyncState<T> {
+    data: T | null;
+    error: Error | null;
+    loading: boolean;
+}
+/**
+ * Reactive query hook. Runs `fetcher` on mount and whenever `deps` change.
+ *
+ * @param fetcher - Function that receives the configured HttpClient and returns a promise.
+ * @param deps - Optional dependency array controlling when to refetch (default: `[]`).
+ *
+ * @example
+ * ```ts
+ * const { data, error, loading, refetch } = useQuery(
+ *   (client) => getSchemas(client),
+ * );
+ * ```
+ */
+declare function useQuery<T>(fetcher: (client: HttpClient) => Promise<T>, deps?: unknown[]): AsyncState<T> & {
+    refetch: () => void;
+};
+/**
+ * Mutation hook. Returns a trigger function and the current state.
+ *
+ * @param mutator - Function that receives the configured HttpClient and variables.
+ *
+ * @example
+ * ```ts
+ * const [create, { loading, error }] = useMutation(
+ *   (client, vars: { title: string }) => createArticle(client, vars),
+ * );
+ * // await create({ title: 'Hello' })
+ * ```
+ */
+declare function useMutation<T, V>(mutator: (client: HttpClient, vars: V) => Promise<T>): [(vars: V) => Promise<T>, AsyncState<T>];
+
+export { type AsyncState, type CmsConfig, CmsProvider, useMutation, useQuery };

package/dist/index.js

@@ -0,0 +1,81 @@
+// src/index.tsx
+import { createClient } from "@lyeve/cms-client";
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var CmsContext = createContext(null);
+function CmsProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CmsContext.Provider, { value: config, children });
+}
+function useClient() {
+  const config = useContext(CmsContext);
+  if (!config) {
+    throw new Error("CmsProvider must wrap your component tree");
+  }
+  return useMemo(() => {
+    const base = config.baseUrl ?? "";
+    return createClient((url, init) => {
+      const fullUrl = typeof url === "string" ? `${base}${url}` : url;
+      return fetch(fullUrl, {
+        ...init,
+        headers: { ...init?.headers, ...config.getHeaders?.() }
+      });
+    });
+  }, [config.baseUrl, config.getHeaders]);
+}
+function useQuery(fetcher, deps = []) {
+  const client = useClient();
+  const [state, setState] = useState({
+    data: null,
+    error: null,
+    loading: true
+  });
+  const run = useCallback(() => {
+    setState((s) => ({ ...s, loading: true }));
+    fetcher(client).then((data) => setState({ data, error: null, loading: false })).catch(
+      (error) => setState((s) => ({ ...s, error, loading: false }))
+    );
+  }, [client, ...deps]);
+  useEffect(() => {
+    run();
+  }, [run]);
+  return { ...state, refetch: run };
+}
+function useMutation(mutator) {
+  const client = useClient();
+  const [state, setState] = useState({
+    data: null,
+    error: null,
+    loading: false
+  });
+  const run = useCallback(
+    async (vars) => {
+      setState((s) => ({ ...s, loading: true }));
+      try {
+        const data = await mutator(client, vars);
+        setState({ data, error: null, loading: false });
+        return data;
+      } catch (error) {
+        setState({ data: null, error, loading: false });
+        throw error;
+      }
+    },
+    [client]
+  );
+  return [run, state];
+}
+export {
+  CmsProvider,
+  useMutation,
+  useQuery
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * LyEve CMS React hooks - typed, reactive data fetching.\n *\n * Thin wrapper around {@link @lyeve/cms-client} that makes the client\n * available via context and provides `useQuery` / `useMutation` hooks.\n *\n * @example\n * ```tsx\n * import { CmsProvider, useQuery } from '@lyeve/cms-client-react';\n * import { getSchemas } from '@lyeve/cms-client-rest';\n *\n * function App() {\n *   return (\n *     <CmsProvider config={{ baseUrl: 'https://cms.example.com', getHeaders: () => ({ Authorization: `Bearer ${token}` }) }}>\n *       <SchemaManager />\n *     </CmsProvider>\n *   );\n * }\n *\n * function SchemaManager() {\n *   const { data: schemas, loading } = useQuery((client) => getSchemas(client));\n *   // ...\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { createClient, type HttpClient } from '@lyeve/cms-client';\nimport {\n  createContext,\n  useContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\n// Provider\n\nexport interface CmsConfig {\n  /** Base URL prepended to every request path. */\n  baseUrl?: string;\n  /**\n   * Callback returning headers added to every request.\n   * Called on every request so auth tokens can be refreshed without\n   * recreating the provider.\n   */\n  getHeaders?: () => Record<string, string>;\n}\n\nconst CmsContext = createContext<CmsConfig | null>(null);\n\n/**\n * Context provider that makes the CMS client available to all descendant\n * hooks.\n *\n * @example\n * ```tsx\n * <CmsProvider config={{ baseUrl: 'https://cms.example.com' }}>\n *   <App />\n * </CmsProvider>\n * ```\n */\nexport function CmsProvider({\n  config,\n  children,\n}: {\n  config: CmsConfig;\n  children: ReactNode;\n}) {\n  return <CmsContext.Provider value={config}>{children}</CmsContext.Provider>;\n}\n\n/**\n * Returns a memoized HttpClient instance configured from the nearest\n * {@link CmsProvider}.\n */\nfunction useClient(): HttpClient {\n  const config = useContext(CmsContext);\n  if (!config) {\n    throw new Error('CmsProvider must wrap your component tree');\n  }\n  // Re-create when config changes so getHeaders/auth tokens stay current.\n  return useMemo(() => {\n    const base = config.baseUrl ?? '';\n    return createClient((url, init) => {\n      const fullUrl = typeof url === 'string' ? `${base}${url}` : url;\n      return fetch(fullUrl, {\n        ...init,\n        headers: { ...init?.headers, ...config.getHeaders?.() },\n      });\n    });\n  }, [config.baseUrl, config.getHeaders]);\n}\n\n// Hooks\n\nexport interface AsyncState<T> {\n  data: T | null;\n  error: Error | null;\n  loading: boolean;\n}\n\n/**\n * Reactive query hook. Runs `fetcher` on mount and whenever `deps` change.\n *\n * @param fetcher - Function that receives the configured HttpClient and returns a promise.\n * @param deps - Optional dependency array controlling when to refetch (default: `[]`).\n *\n * @example\n * ```ts\n * const { data, error, loading, refetch } = useQuery(\n *   (client) => getSchemas(client),\n * );\n * ```\n */\nexport function useQuery<T>(\n  fetcher: (client: HttpClient) => Promise<T>,\n  deps: unknown[] = [],\n): AsyncState<T> & { refetch: () => void } {\n  const client = useClient();\n  const [state, setState] = useState<AsyncState<T>>({\n    data: null,\n    error: null,\n    loading: true,\n  });\n\n  const run = useCallback(() => {\n    setState((s) => ({ ...s, loading: true }));\n\n    fetcher(client)\n      .then((data) => setState({ data, error: null, loading: false }))\n      .catch((error) =>\n        setState((s) => ({ ...s, error: error as Error, loading: false })),\n      );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [client, ...deps]);\n\n  useEffect(() => {\n    run();\n  }, [run]);\n\n  return { ...state, refetch: run };\n}\n\n/**\n * Mutation hook. Returns a trigger function and the current state.\n *\n * @param mutator - Function that receives the configured HttpClient and variables.\n *\n * @example\n * ```ts\n * const [create, { loading, error }] = useMutation(\n *   (client, vars: { title: string }) => createArticle(client, vars),\n * );\n * // await create({ title: 'Hello' })\n * ```\n */\nexport function useMutation<T, V>(\n  mutator: (client: HttpClient, vars: V) => Promise<T>,\n): [(vars: V) => Promise<T>, AsyncState<T>] {\n  const client = useClient();\n  const [state, setState] = useState<AsyncState<T>>({\n    data: null,\n    error: null,\n    loading: false,\n  });\n\n  const run = useCallback(\n    async (vars: V) => {\n      setState((s) => ({ ...s, loading: true }));\n      try {\n        const data = await mutator(client, vars);\n        setState({ data, error: null, loading: false });\n        return data;\n      } catch (error) {\n        setState({ data: null, error: error as Error, loading: false });\n        throw error;\n      }\n    },\n    [client],\n  );\n\n  return [run, state];\n}\n"],"mappings":";AA4BA,SAAS,oBAAqC;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAmCE;AApBT,IAAM,aAAa,cAAgC,IAAI;AAahD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,WAAW,UAAX,EAAoB,OAAO,QAAS,UAAS;AACvD;AAMA,SAAS,YAAwB;AAC/B,QAAM,SAAS,WAAW,UAAU;AACpC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AAEA,SAAO,QAAQ,MAAM;AACnB,UAAM,OAAO,OAAO,WAAW;AAC/B,WAAO,aAAa,CAAC,KAAK,SAAS;AACjC,YAAM,UAAU,OAAO,QAAQ,WAAW,GAAG,IAAI,GAAG,GAAG,KAAK;AAC5D,aAAO,MAAM,SAAS;AAAA,QACpB,GAAG;AAAA,QACH,SAAS,EAAE,GAAG,MAAM,SAAS,GAAG,OAAO,aAAa,EAAE;AAAA,MACxD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,SAAS,OAAO,UAAU,CAAC;AACxC;AAuBO,SAAS,SACd,SACA,OAAkB,CAAC,GACsB;AACzC,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB;AAAA,IAChD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,QAAM,MAAM,YAAY,MAAM;AAC5B,aAAS,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,KAAK,EAAE;AAEzC,YAAQ,MAAM,EACX,KAAK,CAAC,SAAS,SAAS,EAAE,MAAM,OAAO,MAAM,SAAS,MAAM,CAAC,CAAC,EAC9D;AAAA,MAAM,CAAC,UACN,SAAS,CAAC,OAAO,EAAE,GAAG,GAAG,OAAuB,SAAS,MAAM,EAAE;AAAA,IACnE;AAAA,EAEJ,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI;AAAA,EACN,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,EAAE,GAAG,OAAO,SAAS,IAAI;AAClC;AAeO,SAAS,YACd,SAC0C;AAC1C,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB;AAAA,IAChD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,QAAM,MAAM;AAAA,IACV,OAAO,SAAY;AACjB,eAAS,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,KAAK,EAAE;AACzC,UAAI;AACF,cAAM,OAAO,MAAM,QAAQ,QAAQ,IAAI;AACvC,iBAAS,EAAE,MAAM,OAAO,MAAM,SAAS,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,SAAS,OAAO;AACd,iBAAS,EAAE,MAAM,MAAM,OAAuB,SAAS,MAAM,CAAC;AAC9D,cAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@lyeve-labs/client-react",
+  "version": "0.2.1",
+  "description": "React hooks for LyEve Core - typed, reactive data fetching",
+  "license": "MIT",
+  "author": "LyEve Labs <hello@lyeve.com>",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@lyeve-labs/client-react": ">=0.1.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@lyeve-labs/client-react": "^0.1.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.4.0",
+    "publint": "^0.3.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
+  },
+  "scripts": {
+    "build": "tsup && publint",
+    "check": "tsc --noEmit",
+    "test": "vitest run",
+    "dev": "tsup --watch",
+    "test:watch": "vitest",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}