theme-ops-sdk 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# theme-ops-sdk
+
+React SDK for Theme Ops — fetch and apply themes dynamically from CDN.
+
+## Installation
+
+```bash
+npm install theme-ops-sdk
+# or
+pnpm add theme-ops-sdk
+# or
+yarn add theme-ops-sdk
+```
+
+**Peer dependencies** (must be installed in your project):
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+```tsx
+import { useThemeOps } from 'theme-ops-sdk';
+
+function App() {
+  const { isLoading, theme, insertStyles } = useThemeOps({
+    organizationId: 'your-org-id',
+    appId: 'your-app-id', // optional
+  });
+
+  // Insert CSS stylesheet into the document head
+  insertStyles();
+
+  if (isLoading) return <div>Loading theme...</div>;
+
+  // Use theme tokens with your design system (e.g. Ant Design)
+  const lightTokens = theme('light');
+  const darkTokens = theme('dark');
+
+  return (
+    <ConfigProvider theme={lightTokens}>
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+## API
+
+### `useThemeOps(options)`
+
+Main hook that fetches theme assets from the Theme Ops CDN.
+
+#### Options
+
+| Parameter        | Type     | Required | Description                                |
+| ---------------- | -------- | -------- | ------------------------------------------ |
+| `organizationId` | `string` | Yes      | Your organization identifier               |
+| `appId`          | `string` | No       | App-specific identifier within the org     |
+
+#### Returns
+
+| Property       | Type                                         | Description                                              |
+| -------------- | -------------------------------------------- | -------------------------------------------------------- |
+| `isLoading`    | `boolean`                                    | `true` while fetching theme assets from the CDN          |
+| `theme`        | `(mode: 'light' \| 'dark') => ThemeConfig`   | Returns design tokens for the given color mode           |
+| `insertStyles` | `() => void`                                 | Inserts a `<link>` stylesheet into `document.head`       |
+
+## Types
+
+```ts
+import type {
+  ThemeConfig,
+  ThemeTokens,
+  UseThemeOpsOptions,
+  UseThemeOpsResult,
+} from 'theme-ops-sdk';
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+var react = require('react');
+
+// src/useThemeOps.ts
+
+// src/buildCdnUrls.ts
+var CDN_BASE_URL = "https://cdn.themeops.xyz";
+function buildBasePath(organizationId, appId) {
+  return appId ? `${organizationId}/${appId}` : organizationId;
+}
+function buildCdnUrls({
+  organizationId,
+  appId
+}) {
+  const assetPath = buildBasePath(organizationId, appId);
+  return {
+    theme: `${CDN_BASE_URL}/${assetPath}/theme.json`,
+    themeFallback: `${CDN_BASE_URL}/${assetPath}/theme-fallback.json`,
+    css: `${CDN_BASE_URL}/${assetPath}/css.css`
+  };
+}
+
+// src/fetchThemeAssets.ts
+async function fetchJson(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
+function extractThemesFromJson(json) {
+  return {
+    themeLight: json?.light ?? null,
+    themeDark: json?.dark ?? null
+  };
+}
+function isThemeJsonValid(json) {
+  return json !== null && (json.light !== void 0 || json.dark !== void 0);
+}
+async function fetchThemeAssets(urls) {
+  const activeJson = await fetchJson(urls.theme);
+  if (isThemeJsonValid(activeJson)) {
+    const { themeLight: themeLight2, themeDark } = extractThemesFromJson(activeJson);
+    return { themeLight: themeLight2, themeDark, cssUrl: urls.css, usingFallback: false };
+  }
+  const fallbackJson = await fetchJson(urls.themeFallback);
+  const { themeLight } = extractThemesFromJson(fallbackJson);
+  return {
+    themeLight,
+    themeDark: null,
+    cssUrl: urls.css,
+    usingFallback: true
+  };
+}
+
+// src/insertStylesIntoDOM.ts
+var STYLE_ELEMENT_ID = "theme-ops-css";
+function findExistingStyleElement() {
+  return document.getElementById(STYLE_ELEMENT_ID);
+}
+function createStyleElement(href) {
+  const link = document.createElement("link");
+  link.id = STYLE_ELEMENT_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  return link;
+}
+function insertStylesIntoDOM(cssUrl) {
+  const existing = findExistingStyleElement();
+  if (existing) {
+    existing.href = cssUrl;
+    return;
+  }
+  const link = createStyleElement(cssUrl);
+  document.head.appendChild(link);
+}
+
+// src/useThemeOps.ts
+function hookReducer(_state, action) {
+  switch (action.type) {
+    case "FETCH_START":
+      return { status: "loading" };
+    case "FETCH_SUCCESS":
+      return { status: "ready", themeState: action.payload };
+  }
+}
+var EMPTY_THEME_STATE = {
+  themeLight: null,
+  themeDark: null,
+  cssUrl: null
+};
+function resolveThemeTokens(mode, themeState) {
+  const tokens = mode === "dark" ? themeState.themeDark : themeState.themeLight;
+  if (!tokens) return {};
+  return { token: tokens };
+}
+function useThemeOps({
+  organizationId,
+  appId
+}) {
+  const [state, dispatch] = react.useReducer(hookReducer, { status: "loading" });
+  const isMountedRef = react.useRef(true);
+  react.useEffect(() => {
+    isMountedRef.current = true;
+    dispatch({ type: "FETCH_START" });
+    const urls = buildCdnUrls({ organizationId, appId });
+    fetchThemeAssets(urls).then((assets) => {
+      if (!isMountedRef.current) return;
+      dispatch({
+        type: "FETCH_SUCCESS",
+        payload: {
+          themeLight: assets.themeLight,
+          themeDark: assets.themeDark,
+          cssUrl: assets.cssUrl
+        }
+      });
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [organizationId, appId]);
+  const resolvedThemeState = state.status === "ready" ? state.themeState : EMPTY_THEME_STATE;
+  const theme = react.useCallback(
+    (mode) => resolveThemeTokens(mode, resolvedThemeState),
+    [resolvedThemeState]
+  );
+  const insertStyles = react.useCallback(() => {
+    if (resolvedThemeState.cssUrl) {
+      insertStylesIntoDOM(resolvedThemeState.cssUrl);
+    }
+  }, [resolvedThemeState.cssUrl]);
+  return { isLoading: state.status === "loading", theme, insertStyles };
+}
+
+exports.useThemeOps = useThemeOps;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/buildCdnUrls.ts","../src/fetchThemeAssets.ts","../src/insertStylesIntoDOM.ts","../src/useThemeOps.ts"],"names":["themeLight","useReducer","useRef","useEffect","useCallback"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { BuildCdnUrlsOptions, CdnUrls } from \"./types\";\n\nconst CDN_BASE_URL = \"https://cdn.themeops.xyz\";\n\nfunction buildBasePath(organizationId: string, appId?: string): string {\n  return appId ? `${organizationId}/${appId}` : organizationId;\n}\n\nexport function buildCdnUrls({\n  organizationId,\n  appId,\n}: BuildCdnUrlsOptions): CdnUrls {\n  const assetPath = buildBasePath(organizationId, appId);\n\n  return {\n    theme: `${CDN_BASE_URL}/${assetPath}/theme.json`,\n    themeFallback: `${CDN_BASE_URL}/${assetPath}/theme-fallback.json`,\n    css: `${CDN_BASE_URL}/${assetPath}/css.css`,\n  };\n}\n","import type { CdnUrls, ThemeAssets, ThemeJson, ThemeTokens } from \"./types\";\n\nasync function fetchJson<T>(url: string): Promise<T | null> {\n  try {\n    const response = await fetch(url);\n    if (!response.ok) return null;\n\n    return (await response.json()) as T;\n  } catch {\n    return null;\n  }\n}\n\nfunction extractThemesFromJson(json: ThemeJson | null): {\n  themeLight: ThemeTokens | null;\n  themeDark: ThemeTokens | null;\n} {\n  return {\n    themeLight: json?.light ?? null,\n    themeDark: json?.dark ?? null,\n  };\n}\n\nfunction isThemeJsonValid(json: ThemeJson | null): boolean {\n  return json !== null && (json.light !== undefined || json.dark !== undefined);\n}\n\nexport async function fetchThemeAssets(urls: CdnUrls): Promise<ThemeAssets> {\n  const activeJson = await fetchJson<ThemeJson>(urls.theme);\n\n  if (isThemeJsonValid(activeJson)) {\n    const { themeLight, themeDark } = extractThemesFromJson(activeJson);\n    return { themeLight, themeDark, cssUrl: urls.css, usingFallback: false };\n  }\n\n  const fallbackJson = await fetchJson<ThemeJson>(urls.themeFallback);\n  const { themeLight } = extractThemesFromJson(fallbackJson);\n\n  return {\n    themeLight,\n    themeDark: null,\n    cssUrl: urls.css,\n    usingFallback: true,\n  };\n}\n","const STYLE_ELEMENT_ID = \"theme-ops-css\";\n\nfunction findExistingStyleElement(): HTMLLinkElement | null {\n  return document.getElementById(STYLE_ELEMENT_ID) as HTMLLinkElement | null;\n}\n\nfunction createStyleElement(href: string): HTMLLinkElement {\n  const link = document.createElement(\"link\");\n  link.id = STYLE_ELEMENT_ID;\n  link.rel = \"stylesheet\";\n  link.href = href;\n  return link;\n}\n\nexport function insertStylesIntoDOM(cssUrl: string): void {\n  const existing = findExistingStyleElement();\n\n  if (existing) {\n    existing.href = cssUrl;\n    return;\n  }\n\n  const link = createStyleElement(cssUrl);\n  document.head.appendChild(link);\n}\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\nimport { buildCdnUrls } from \"./buildCdnUrls\";\nimport { fetchThemeAssets } from \"./fetchThemeAssets\";\nimport { insertStylesIntoDOM } from \"./insertStylesIntoDOM\";\nimport type {\n  ThemeConfig,\n  ThemeState,\n  UseThemeOpsOptions,\n  UseThemeOpsResult,\n} from \"./types\";\n\ntype HookState =\n  | { status: \"loading\" }\n  | { status: \"ready\"; themeState: ThemeState };\n\ntype HookAction =\n  | { type: \"FETCH_START\" }\n  | { type: \"FETCH_SUCCESS\"; payload: ThemeState };\n\nfunction hookReducer(_state: HookState, action: HookAction): HookState {\n  switch (action.type) {\n    case \"FETCH_START\":\n      return { status: \"loading\" };\n    case \"FETCH_SUCCESS\":\n      return { status: \"ready\", themeState: action.payload };\n  }\n}\n\nconst EMPTY_THEME_STATE: ThemeState = {\n  themeLight: null,\n  themeDark: null,\n  cssUrl: null,\n};\n\nfunction resolveThemeTokens(\n  mode: \"light\" | \"dark\",\n  themeState: ThemeState,\n): ThemeConfig {\n  const tokens = mode === \"dark\" ? themeState.themeDark : themeState.themeLight;\n  if (!tokens) return {};\n\n  return { token: tokens };\n}\n\nexport function useThemeOps({\n  organizationId,\n  appId,\n}: UseThemeOpsOptions): UseThemeOpsResult {\n  const [state, dispatch] = useReducer(hookReducer, { status: \"loading\" });\n\n  const isMountedRef = useRef(true);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n\n    dispatch({ type: \"FETCH_START\" });\n\n    const urls = buildCdnUrls({ organizationId, appId });\n\n    fetchThemeAssets(urls).then((assets) => {\n      if (!isMountedRef.current) return;\n\n      dispatch({\n        type: \"FETCH_SUCCESS\",\n        payload: {\n          themeLight: assets.themeLight,\n          themeDark: assets.themeDark,\n          cssUrl: assets.cssUrl,\n        },\n      });\n    });\n\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, [organizationId, appId]);\n\n  const resolvedThemeState =\n    state.status === \"ready\" ? state.themeState : EMPTY_THEME_STATE;\n\n  const theme = useCallback(\n    (mode: \"light\" | \"dark\"): ThemeConfig =>\n      resolveThemeTokens(mode, resolvedThemeState),\n    [resolvedThemeState],\n  );\n\n  const insertStyles = useCallback(() => {\n    if (resolvedThemeState.cssUrl) {\n      insertStylesIntoDOM(resolvedThemeState.cssUrl);\n    }\n  }, [resolvedThemeState.cssUrl]);\n\n  return { isLoading: state.status === \"loading\", theme, insertStyles };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+type ThemeTokens = Record<string, unknown>;
+interface ThemeConfig {
+    token?: ThemeTokens;
+}
+interface UseThemeOpsOptions {
+    organizationId: string;
+    appId?: string;
+}
+interface UseThemeOpsResult {
+    isLoading: boolean;
+    theme: (mode: "light" | "dark") => ThemeConfig;
+    insertStyles: () => void;
+}
+
+declare function useThemeOps({ organizationId, appId, }: UseThemeOpsOptions): UseThemeOpsResult;
+
+export { type ThemeConfig, type ThemeTokens, type UseThemeOpsOptions, type UseThemeOpsResult, useThemeOps };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+type ThemeTokens = Record<string, unknown>;
+interface ThemeConfig {
+    token?: ThemeTokens;
+}
+interface UseThemeOpsOptions {
+    organizationId: string;
+    appId?: string;
+}
+interface UseThemeOpsResult {
+    isLoading: boolean;
+    theme: (mode: "light" | "dark") => ThemeConfig;
+    insertStyles: () => void;
+}
+
+declare function useThemeOps({ organizationId, appId, }: UseThemeOpsOptions): UseThemeOpsResult;
+
+export { type ThemeConfig, type ThemeTokens, type UseThemeOpsOptions, type UseThemeOpsResult, useThemeOps };

package/dist/index.js

@@ -0,0 +1,138 @@
+import { useReducer, useRef, useEffect, useCallback } from 'react';
+
+// src/useThemeOps.ts
+
+// src/buildCdnUrls.ts
+var CDN_BASE_URL = "https://cdn.themeops.xyz";
+function buildBasePath(organizationId, appId) {
+  return appId ? `${organizationId}/${appId}` : organizationId;
+}
+function buildCdnUrls({
+  organizationId,
+  appId
+}) {
+  const assetPath = buildBasePath(organizationId, appId);
+  return {
+    theme: `${CDN_BASE_URL}/${assetPath}/theme.json`,
+    themeFallback: `${CDN_BASE_URL}/${assetPath}/theme-fallback.json`,
+    css: `${CDN_BASE_URL}/${assetPath}/css.css`
+  };
+}
+
+// src/fetchThemeAssets.ts
+async function fetchJson(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
+function extractThemesFromJson(json) {
+  return {
+    themeLight: json?.light ?? null,
+    themeDark: json?.dark ?? null
+  };
+}
+function isThemeJsonValid(json) {
+  return json !== null && (json.light !== void 0 || json.dark !== void 0);
+}
+async function fetchThemeAssets(urls) {
+  const activeJson = await fetchJson(urls.theme);
+  if (isThemeJsonValid(activeJson)) {
+    const { themeLight: themeLight2, themeDark } = extractThemesFromJson(activeJson);
+    return { themeLight: themeLight2, themeDark, cssUrl: urls.css, usingFallback: false };
+  }
+  const fallbackJson = await fetchJson(urls.themeFallback);
+  const { themeLight } = extractThemesFromJson(fallbackJson);
+  return {
+    themeLight,
+    themeDark: null,
+    cssUrl: urls.css,
+    usingFallback: true
+  };
+}
+
+// src/insertStylesIntoDOM.ts
+var STYLE_ELEMENT_ID = "theme-ops-css";
+function findExistingStyleElement() {
+  return document.getElementById(STYLE_ELEMENT_ID);
+}
+function createStyleElement(href) {
+  const link = document.createElement("link");
+  link.id = STYLE_ELEMENT_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  return link;
+}
+function insertStylesIntoDOM(cssUrl) {
+  const existing = findExistingStyleElement();
+  if (existing) {
+    existing.href = cssUrl;
+    return;
+  }
+  const link = createStyleElement(cssUrl);
+  document.head.appendChild(link);
+}
+
+// src/useThemeOps.ts
+function hookReducer(_state, action) {
+  switch (action.type) {
+    case "FETCH_START":
+      return { status: "loading" };
+    case "FETCH_SUCCESS":
+      return { status: "ready", themeState: action.payload };
+  }
+}
+var EMPTY_THEME_STATE = {
+  themeLight: null,
+  themeDark: null,
+  cssUrl: null
+};
+function resolveThemeTokens(mode, themeState) {
+  const tokens = mode === "dark" ? themeState.themeDark : themeState.themeLight;
+  if (!tokens) return {};
+  return { token: tokens };
+}
+function useThemeOps({
+  organizationId,
+  appId
+}) {
+  const [state, dispatch] = useReducer(hookReducer, { status: "loading" });
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    dispatch({ type: "FETCH_START" });
+    const urls = buildCdnUrls({ organizationId, appId });
+    fetchThemeAssets(urls).then((assets) => {
+      if (!isMountedRef.current) return;
+      dispatch({
+        type: "FETCH_SUCCESS",
+        payload: {
+          themeLight: assets.themeLight,
+          themeDark: assets.themeDark,
+          cssUrl: assets.cssUrl
+        }
+      });
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [organizationId, appId]);
+  const resolvedThemeState = state.status === "ready" ? state.themeState : EMPTY_THEME_STATE;
+  const theme = useCallback(
+    (mode) => resolveThemeTokens(mode, resolvedThemeState),
+    [resolvedThemeState]
+  );
+  const insertStyles = useCallback(() => {
+    if (resolvedThemeState.cssUrl) {
+      insertStylesIntoDOM(resolvedThemeState.cssUrl);
+    }
+  }, [resolvedThemeState.cssUrl]);
+  return { isLoading: state.status === "loading", theme, insertStyles };
+}
+
+export { useThemeOps };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/buildCdnUrls.ts","../src/fetchThemeAssets.ts","../src/insertStylesIntoDOM.ts","../src/useThemeOps.ts"],"names":["themeLight"],"mappings":"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","file":"index.js","sourcesContent":["import type { BuildCdnUrlsOptions, CdnUrls } from \"./types\";\n\nconst CDN_BASE_URL = \"https://cdn.themeops.xyz\";\n\nfunction buildBasePath(organizationId: string, appId?: string): string {\n  return appId ? `${organizationId}/${appId}` : organizationId;\n}\n\nexport function buildCdnUrls({\n  organizationId,\n  appId,\n}: BuildCdnUrlsOptions): CdnUrls {\n  const assetPath = buildBasePath(organizationId, appId);\n\n  return {\n    theme: `${CDN_BASE_URL}/${assetPath}/theme.json`,\n    themeFallback: `${CDN_BASE_URL}/${assetPath}/theme-fallback.json`,\n    css: `${CDN_BASE_URL}/${assetPath}/css.css`,\n  };\n}\n","import type { CdnUrls, ThemeAssets, ThemeJson, ThemeTokens } from \"./types\";\n\nasync function fetchJson<T>(url: string): Promise<T | null> {\n  try {\n    const response = await fetch(url);\n    if (!response.ok) return null;\n\n    return (await response.json()) as T;\n  } catch {\n    return null;\n  }\n}\n\nfunction extractThemesFromJson(json: ThemeJson | null): {\n  themeLight: ThemeTokens | null;\n  themeDark: ThemeTokens | null;\n} {\n  return {\n    themeLight: json?.light ?? null,\n    themeDark: json?.dark ?? null,\n  };\n}\n\nfunction isThemeJsonValid(json: ThemeJson | null): boolean {\n  return json !== null && (json.light !== undefined || json.dark !== undefined);\n}\n\nexport async function fetchThemeAssets(urls: CdnUrls): Promise<ThemeAssets> {\n  const activeJson = await fetchJson<ThemeJson>(urls.theme);\n\n  if (isThemeJsonValid(activeJson)) {\n    const { themeLight, themeDark } = extractThemesFromJson(activeJson);\n    return { themeLight, themeDark, cssUrl: urls.css, usingFallback: false };\n  }\n\n  const fallbackJson = await fetchJson<ThemeJson>(urls.themeFallback);\n  const { themeLight } = extractThemesFromJson(fallbackJson);\n\n  return {\n    themeLight,\n    themeDark: null,\n    cssUrl: urls.css,\n    usingFallback: true,\n  };\n}\n","const STYLE_ELEMENT_ID = \"theme-ops-css\";\n\nfunction findExistingStyleElement(): HTMLLinkElement | null {\n  return document.getElementById(STYLE_ELEMENT_ID) as HTMLLinkElement | null;\n}\n\nfunction createStyleElement(href: string): HTMLLinkElement {\n  const link = document.createElement(\"link\");\n  link.id = STYLE_ELEMENT_ID;\n  link.rel = \"stylesheet\";\n  link.href = href;\n  return link;\n}\n\nexport function insertStylesIntoDOM(cssUrl: string): void {\n  const existing = findExistingStyleElement();\n\n  if (existing) {\n    existing.href = cssUrl;\n    return;\n  }\n\n  const link = createStyleElement(cssUrl);\n  document.head.appendChild(link);\n}\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\nimport { buildCdnUrls } from \"./buildCdnUrls\";\nimport { fetchThemeAssets } from \"./fetchThemeAssets\";\nimport { insertStylesIntoDOM } from \"./insertStylesIntoDOM\";\nimport type {\n  ThemeConfig,\n  ThemeState,\n  UseThemeOpsOptions,\n  UseThemeOpsResult,\n} from \"./types\";\n\ntype HookState =\n  | { status: \"loading\" }\n  | { status: \"ready\"; themeState: ThemeState };\n\ntype HookAction =\n  | { type: \"FETCH_START\" }\n  | { type: \"FETCH_SUCCESS\"; payload: ThemeState };\n\nfunction hookReducer(_state: HookState, action: HookAction): HookState {\n  switch (action.type) {\n    case \"FETCH_START\":\n      return { status: \"loading\" };\n    case \"FETCH_SUCCESS\":\n      return { status: \"ready\", themeState: action.payload };\n  }\n}\n\nconst EMPTY_THEME_STATE: ThemeState = {\n  themeLight: null,\n  themeDark: null,\n  cssUrl: null,\n};\n\nfunction resolveThemeTokens(\n  mode: \"light\" | \"dark\",\n  themeState: ThemeState,\n): ThemeConfig {\n  const tokens = mode === \"dark\" ? themeState.themeDark : themeState.themeLight;\n  if (!tokens) return {};\n\n  return { token: tokens };\n}\n\nexport function useThemeOps({\n  organizationId,\n  appId,\n}: UseThemeOpsOptions): UseThemeOpsResult {\n  const [state, dispatch] = useReducer(hookReducer, { status: \"loading\" });\n\n  const isMountedRef = useRef(true);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n\n    dispatch({ type: \"FETCH_START\" });\n\n    const urls = buildCdnUrls({ organizationId, appId });\n\n    fetchThemeAssets(urls).then((assets) => {\n      if (!isMountedRef.current) return;\n\n      dispatch({\n        type: \"FETCH_SUCCESS\",\n        payload: {\n          themeLight: assets.themeLight,\n          themeDark: assets.themeDark,\n          cssUrl: assets.cssUrl,\n        },\n      });\n    });\n\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, [organizationId, appId]);\n\n  const resolvedThemeState =\n    state.status === \"ready\" ? state.themeState : EMPTY_THEME_STATE;\n\n  const theme = useCallback(\n    (mode: \"light\" | \"dark\"): ThemeConfig =>\n      resolveThemeTokens(mode, resolvedThemeState),\n    [resolvedThemeState],\n  );\n\n  const insertStyles = useCallback(() => {\n    if (resolvedThemeState.cssUrl) {\n      insertStylesIntoDOM(resolvedThemeState.cssUrl);\n    }\n  }, [resolvedThemeState.cssUrl]);\n\n  return { isLoading: state.status === \"loading\", theme, insertStyles };\n}\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "theme-ops-sdk",
+  "version": "0.1.0",
+  "description": "React SDK for Theme Ops — fetch and apply themes from CDN",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "theme",
+    "design-tokens",
+    "cdn",
+    "sdk"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ffernandomoraes/theme-ops-monorepo"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@theme-ops/eslint-config": "workspace:*",
+    "@theme-ops/tsconfig": "workspace:*",
+    "@types/react": "^19.0.0",
+    "eslint": "^10.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}