@pixelfiddler/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PixelFiddler
+
+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 @@
+TBD

package/dist/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var react = require('react');
+var core = require('@pixelfiddler/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/pixel-fiddle-image.tsx
+var PixelFiddlerContext = react.createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+function PixelFiddleImage({
+  src,
+  sizes,
+  width,
+  transformations,
+  config: configProp,
+  deviceBreakpoints,
+  imageBreakpoints,
+  responsive = true,
+  ...imgProps
+}) {
+  const context = react.useContext(PixelFiddlerContext);
+  const config = configProp ?? context?.config;
+  const imageAttrs = react.useMemo(() => {
+    const urlConfig = {
+      ...config,
+      baseUrl: src
+    };
+    if (responsive && (sizes || width)) {
+      return core.createResponsiveAttributes(urlConfig, {
+        ...sizes && { sizes },
+        ...width && { width },
+        ...deviceBreakpoints && { deviceBreakpoints },
+        ...imageBreakpoints && { imageBreakpoints },
+        ...transformations && { transformations }
+      });
+    }
+    if (!transformations || Object.keys(transformations).length === 0) {
+      return { src };
+    }
+    return {
+      src: core.buildTransformationUrl(urlConfig, transformations)
+    };
+  }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: imageAttrs.src,
+      srcSet: imageAttrs.srcSet,
+      sizes: imageAttrs.sizes,
+      width: imageAttrs.width ?? width,
+      ...imgProps
+    }
+  );
+}
+
+exports.PixelFiddleImage = PixelFiddleImage;
+exports.PixelFiddlerProvider = PixelFiddlerProvider;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddle-image.tsx"],"names":["createContext","jsx","useContext","useMemo","createResponsiveAttributes","buildTransformationUrl"],"mappings":";;;;;;;AAOO,IAAM,mBAAA,GAAsBA,oBAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACEC,cAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACYO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAOC,gCAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAKC,2BAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.cjs","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n  config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n  children: ReactNode;\n  config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n  return (\n    <PixelFiddlerContext.Provider value={{config}}>\n      {children}\n    </PixelFiddlerContext.Provider>\n  );\n}\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n  buildTransformationUrl,\n  createResponsiveAttributes,\n  TransformationOptions,\n  UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\n\nexport interface PixelFiddlerImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {\n  /** Base URL of the image (without transformations) */\n  src: string;\n  /**\n   * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n   * When provided, generates width descriptors (`w`) for fluid layouts.\n   */\n  sizes?: string;\n  /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n  width?: number;\n  /** Transformation options to apply */\n  transformations?: TransformationOptions;\n  /** Override the provider config for this image */\n  config?: UrlBuilderConfig;\n  /** Custom device breakpoints for responsive srcset */\n  deviceBreakpoints?: number[];\n  /** Custom image breakpoints for smaller images */\n  imageBreakpoints?: number[];\n  /** Enables automatic srcSet generation (default: true) */\n  responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n  src,\n  sizes,\n  width,\n  transformations,\n  config: configProp,\n  deviceBreakpoints,\n  imageBreakpoints,\n  responsive = true,\n  ...imgProps\n}: PixelFiddlerImageProps) {\n  const context = useContext(PixelFiddlerContext);\n  const config = configProp ?? context?.config;\n\n  const imageAttrs = useMemo(() => {\n    const urlConfig: UrlBuilderConfig = {\n      ...config,\n      baseUrl: src,\n    };\n\n    if (responsive && (sizes || width)) {\n      return createResponsiveAttributes(urlConfig, {\n        ...(sizes && { sizes }),\n        ...(width && { width }),\n        ...(deviceBreakpoints && { deviceBreakpoints }),\n        ...(imageBreakpoints && { imageBreakpoints }),\n        ...(transformations && { transformations }),\n      });\n    }\n\n    if (!transformations || Object.keys(transformations).length === 0) {\n      return { src };\n    }\n\n    return {\n      src: buildTransformationUrl(urlConfig, transformations),\n    };\n  }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n  return (\n    <img\n      src={imageAttrs.src}\n      srcSet={imageAttrs.srcSet}\n      sizes={imageAttrs.sizes}\n      width={imageAttrs.width ?? width}\n      {...imgProps}\n    />\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { TransformationOptions, UrlBuilderConfig, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+
+interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {
+    /** Base URL of the image (without transformations) */
+    src: string;
+    /**
+     * The sizes attribute for responsive images (e.g., "100vw", "(max-width: 768px) 100vw, 50vw").
+     * When provided, generates width descriptors (`w`) for fluid layouts.
+     */
+    sizes?: string;
+    /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */
+    width?: number;
+    /** Transformation options to apply */
+    transformations?: TransformationOptions;
+    /** Override the provider config for this image */
+    config?: UrlBuilderConfig;
+    /** Custom device breakpoints for responsive srcset */
+    deviceBreakpoints?: number[];
+    /** Custom image breakpoints for smaller images */
+    imageBreakpoints?: number[];
+    /** Enables automatic srcSet generation (default: true) */
+    responsive?: boolean;
+}
+declare function PixelFiddleImage({ src, sizes, width, transformations, config: configProp, deviceBreakpoints, imageBreakpoints, responsive, ...imgProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { PixelFiddleImage, type PixelFiddlerContextValue, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { TransformationOptions, UrlBuilderConfig, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+
+interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {
+    /** Base URL of the image (without transformations) */
+    src: string;
+    /**
+     * The sizes attribute for responsive images (e.g., "100vw", "(max-width: 768px) 100vw, 50vw").
+     * When provided, generates width descriptors (`w`) for fluid layouts.
+     */
+    sizes?: string;
+    /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */
+    width?: number;
+    /** Transformation options to apply */
+    transformations?: TransformationOptions;
+    /** Override the provider config for this image */
+    config?: UrlBuilderConfig;
+    /** Custom device breakpoints for responsive srcset */
+    deviceBreakpoints?: number[];
+    /** Custom image breakpoints for smaller images */
+    imageBreakpoints?: number[];
+    /** Enables automatic srcSet generation (default: true) */
+    responsive?: boolean;
+}
+declare function PixelFiddleImage({ src, sizes, width, transformations, config: configProp, deviceBreakpoints, imageBreakpoints, responsive, ...imgProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { PixelFiddleImage, type PixelFiddlerContextValue, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.js

@@ -0,0 +1,58 @@
+import { createContext, useContext, useMemo } from 'react';
+import { createResponsiveAttributes, buildTransformationUrl } from '@pixelfiddler/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/pixel-fiddle-image.tsx
+var PixelFiddlerContext = createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+function PixelFiddleImage({
+  src,
+  sizes,
+  width,
+  transformations,
+  config: configProp,
+  deviceBreakpoints,
+  imageBreakpoints,
+  responsive = true,
+  ...imgProps
+}) {
+  const context = useContext(PixelFiddlerContext);
+  const config = configProp ?? context?.config;
+  const imageAttrs = useMemo(() => {
+    const urlConfig = {
+      ...config,
+      baseUrl: src
+    };
+    if (responsive && (sizes || width)) {
+      return createResponsiveAttributes(urlConfig, {
+        ...sizes && { sizes },
+        ...width && { width },
+        ...deviceBreakpoints && { deviceBreakpoints },
+        ...imageBreakpoints && { imageBreakpoints },
+        ...transformations && { transformations }
+      });
+    }
+    if (!transformations || Object.keys(transformations).length === 0) {
+      return { src };
+    }
+    return {
+      src: buildTransformationUrl(urlConfig, transformations)
+    };
+  }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageAttrs.src,
+      srcSet: imageAttrs.srcSet,
+      sizes: imageAttrs.sizes,
+      width: imageAttrs.width ?? width,
+      ...imgProps
+    }
+  );
+}
+
+export { PixelFiddleImage, PixelFiddlerProvider };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddle-image.tsx"],"names":["jsx"],"mappings":";;;;;AAOO,IAAM,mBAAA,GAAsB,cAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACE,GAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACYO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAO,2BAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAK,sBAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n  config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n  children: ReactNode;\n  config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n  return (\n    <PixelFiddlerContext.Provider value={{config}}>\n      {children}\n    </PixelFiddlerContext.Provider>\n  );\n}\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n  buildTransformationUrl,\n  createResponsiveAttributes,\n  TransformationOptions,\n  UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\n\nexport interface PixelFiddlerImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {\n  /** Base URL of the image (without transformations) */\n  src: string;\n  /**\n   * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n   * When provided, generates width descriptors (`w`) for fluid layouts.\n   */\n  sizes?: string;\n  /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n  width?: number;\n  /** Transformation options to apply */\n  transformations?: TransformationOptions;\n  /** Override the provider config for this image */\n  config?: UrlBuilderConfig;\n  /** Custom device breakpoints for responsive srcset */\n  deviceBreakpoints?: number[];\n  /** Custom image breakpoints for smaller images */\n  imageBreakpoints?: number[];\n  /** Enables automatic srcSet generation (default: true) */\n  responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n  src,\n  sizes,\n  width,\n  transformations,\n  config: configProp,\n  deviceBreakpoints,\n  imageBreakpoints,\n  responsive = true,\n  ...imgProps\n}: PixelFiddlerImageProps) {\n  const context = useContext(PixelFiddlerContext);\n  const config = configProp ?? context?.config;\n\n  const imageAttrs = useMemo(() => {\n    const urlConfig: UrlBuilderConfig = {\n      ...config,\n      baseUrl: src,\n    };\n\n    if (responsive && (sizes || width)) {\n      return createResponsiveAttributes(urlConfig, {\n        ...(sizes && { sizes }),\n        ...(width && { width }),\n        ...(deviceBreakpoints && { deviceBreakpoints }),\n        ...(imageBreakpoints && { imageBreakpoints }),\n        ...(transformations && { transformations }),\n      });\n    }\n\n    if (!transformations || Object.keys(transformations).length === 0) {\n      return { src };\n    }\n\n    return {\n      src: buildTransformationUrl(urlConfig, transformations),\n    };\n  }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n  return (\n    <img\n      src={imageAttrs.src}\n      srcSet={imageAttrs.srcSet}\n      sizes={imageAttrs.sizes}\n      width={imageAttrs.width ?? width}\n      {...imgProps}\n    />\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@pixelfiddler/react",
+  "version": "0.1.0",
+  "description": "React components for PixelFiddler image transformation SDK",
+  "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"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pixelfiddler/core": "0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.18",
+    "@testing-library/react": "^16.3.2"
+  },
+  "keywords": [
+    "pixelfiddler",
+    "react",
+    "image",
+    "transformation",
+    "cdn",
+    "optimization",
+    "component"
+  ],
+  "license": "MIT",
+  "author": "PixelFiddler",
+  "homepage": "https://pixel-fiddler.com",
+  "bugs": {
+    "url": "https://github.com/pixel-fiddler/js-sdk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixel-fiddler/js-sdk.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist coverage"
+  }
+}