@pixzle/react 0.0.30 → 0.1.0

package/README.md

@@ -10,17 +10,72 @@ npm i @pixzle/react
 
 ## Usage
 
+### PixzleImage
+
+Single image restoration component.
+
 ```tsx
 import { PixzleImage } from '@pixzle/react';
 
+// Using manifest URL
+const MyComponentWithManifest = () => {
+  return (
+    <PixzleImage
+      manifest="https://example.com/manifest.json"
+      image="https://example.com/fragment.png"
+    />
+  );
+};
+
+// Using manifest data
+const MyComponentWithManifestData = () => {
+  return (
+    <PixzleImage
+      manifestData={manifestData}
+      image="https://example.com/fragment.png"
+    />
+  );
+};
+
+// Using explicit parameters
 const MyComponent = () => {
   return (
     <PixzleImage
       blockSize={2}
       seed={72411}
-      imageInfo={ w: 500, h: 500 }
-      image="path/to/fragmented/image.png"
+      imageInfo={{ w: 500, h: 500 }}
+      image="https://example.com/fragment.png"
     />
   );
 };
 ```
+
+---
+
+### PixzleImages
+
+Multiple images restoration component using manifest.
+
+```tsx
+import { PixzleImages } from '@pixzle/react';
+
+const MyGallery = () => {
+  return (
+    <PixzleImages
+      images={[
+        'https://example.com/fragment1.png',
+        'https://example.com/fragment2.png',
+      ]}
+      manifest="https://example.com/manifest.json"
+    >
+      {({ sources }) => (
+        <div>
+          {sources.map((src, i) => (
+            <img key={i} src={src} />
+          ))}
+        </div>
+      )}
+    </PixzleImages>
+  );
+};
+```

package/dist/PixzleImage.d.ts

@@ -1,10 +1,6 @@
-import type { ImageInfo } from "@pixzle/core";
 import React from "react";
-export interface PixzleImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "onError"> {
-    blockSize: number;
-    seed: number;
-    imageInfo: ImageInfo;
-    image: string | Blob;
+import { type UsePixzleImageProps } from "./usePixzleImage";
+interface PixzleImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "onError"> {
     /**
      * Element to render while the image is being restored.
      */
@@ -23,4 +19,6 @@ export interface PixzleImageProps extends Omit<React.ImgHTMLAttributes<HTMLImage
      */
     onError?: (error: Error) => void;
 }
+export type PixzleImageProps = PixzleImageBaseProps & UsePixzleImageProps;
 export declare const PixzleImage: React.ForwardRefExoticComponent<PixzleImageProps & React.RefAttributes<HTMLImageElement>>;
+export {};

package/dist/PixzleImage.js

@@ -37,13 +37,11 @@ exports.PixzleImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const usePixzleImage_1 = require("./usePixzleImage");
-exports.PixzleImage = react_1.default.forwardRef(({ blockSize, seed, imageInfo, image, alt = "", fallback = null, errorFallback = null, protected: isProtected = true, onError, ...props }, ref) => {
-    const { src, isLoading, error } = (0, usePixzleImage_1.usePixzleImage)({
-        blockSize,
-        seed,
-        imageInfo,
-        image,
-    });
+exports.PixzleImage = react_1.default.forwardRef((props, ref) => {
+    const { image, alt = "", fallback = null, errorFallback = null, protected: isProtected = true, onError, 
+    // Extract variant-specific props to exclude from imgProps
+    blockSize: _blockSize, seed: _seed, imageInfo: _imageInfo, manifest: _manifest, manifestData: _manifestData, ...imgProps } = props;
+    const { src, isLoading, error } = (0, usePixzleImage_1.usePixzleImage)(props);
     (0, react_1.useEffect)(() => {
         if (error) {
             console.error("PixzleImage restoration error:", error);
@@ -62,14 +60,14 @@ exports.PixzleImage = react_1.default.forwardRef(({ blockSize, seed, imageInfo,
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
     }
     // biome-ignore lint/a11y/useAltText: alt is passed via props or defaults to empty string
-    return ((0, jsx_runtime_1.jsx)("img", { ref: ref, src: src, alt: alt, ...props, onContextMenu: (e) => {
+    return ((0, jsx_runtime_1.jsx)("img", { ref: ref, src: src, alt: alt, ...imgProps, onContextMenu: (e) => {
             if (isProtected)
                 e.preventDefault();
-            props.onContextMenu?.(e);
+            imgProps.onContextMenu?.(e);
         }, onDragStart: (e) => {
             if (isProtected)
                 e.preventDefault();
-            props.onDragStart?.(e);
+            imgProps.onDragStart?.(e);
         }, style: {
             ...(isProtected
                 ? {
@@ -78,7 +76,7 @@ exports.PixzleImage = react_1.default.forwardRef(({ blockSize, seed, imageInfo,
                     WebkitTouchCallout: "none",
                 }
                 : {}),
-            ...props.style,
+            ...imgProps.style,
         } }));
 });
 exports.PixzleImage.displayName = "PixzleImage";

package/dist/PixzleImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PixzleImage.js","sourceRoot":"","sources":["../src/PixzleImage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAyC;AACzC,qDAAkD;AA2BrC,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CACzC,CACE,EACE,SAAS,EACT,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,GAAG,EAAE,EACR,QAAQ,GAAG,IAAI,EACf,aAAa,GAAG,IAAI,EACpB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAA,+BAAc,EAAC;QAC/C,SAAS;QACT,IAAI;QACJ,SAAS;QACT,KAAK;KACN,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACvD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,CACL,2DACG,OAAO,aAAa,KAAK,UAAU;oBAClC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;oBACtB,CAAC,CAAC,aAAa,GAChB,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,SAAS,IAAI,CAAC,GAAG,EAAE,CAAC;QACtB,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACzB,CAAC;IAED,yFAAyF;IACzF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;YACnB,IAAI,WAAW;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;YACpC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACjB,IAAI,WAAW;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;YACpC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC,EACD,KAAK,EACH;YACE,GAAG,CAAC,WAAW;gBACb,CAAC,CAAC;oBACE,UAAU,EAAE,MAAM;oBAClB,gBAAgB,EAAE,MAAM;oBACxB,kBAAkB,EAAE,MAAM;iBAC3B;gBACH,CAAC,CAAC,EAAE,CAAC;YACP,GAAG,KAAK,CAAC,KAAK;SACQ,GAE1B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"PixzleImage.js","sourceRoot":"","sources":["../src/PixzleImage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAyC;AACzC,qDAA4E;AAyB/D,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CACzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,KAAK,EACL,GAAG,GAAG,EAAE,EACR,QAAQ,GAAG,IAAI,EACf,aAAa,GAAG,IAAI,EACpB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,OAAO;IACP,0DAA0D;IAC1D,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,SAAS,EACnB,YAAY,EAAE,aAAa,EAC3B,GAAG,QAAQ,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACvD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,CACL,2DACG,OAAO,aAAa,KAAK,UAAU;oBAClC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;oBACtB,CAAC,CAAC,aAAa,GAChB,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,SAAS,IAAI,CAAC,GAAG,EAAE,CAAC;QACtB,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACzB,CAAC;IAED,yFAAyF;IACzF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,QAAQ,EACZ,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;YACnB,IAAI,WAAW;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;YACpC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACjB,IAAI,WAAW;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;YACpC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,KAAK,EACH;YACE,GAAG,CAAC,WAAW;gBACb,CAAC,CAAC;oBACE,UAAU,EAAE,MAAM;oBAClB,gBAAgB,EAAE,MAAM;oBACxB,kBAAkB,EAAE,MAAM;iBAC3B;gBACH,CAAC,CAAC,EAAE,CAAC;YACP,GAAG,QAAQ,CAAC,KAAK;SACK,GAE1B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/PixzleImages.d.ts

@@ -0,0 +1,23 @@
+import type { ManifestData } from "@pixzle/core";
+import type React from "react";
+import { type UsePixzleImagesResult } from "./usePixzleImages";
+export type PixzleImagesChildrenProps = Pick<UsePixzleImagesResult, "sources" | "isLoading" | "error" | "progress">;
+export interface PixzleImagesProps {
+    /** Image sources - URLs or Blobs */
+    images: (string | Blob)[];
+    /** Manifest URL */
+    manifest?: string;
+    /** Manifest data object (alternative to manifest) */
+    manifestData?: ManifestData;
+    /** Render function for restored images */
+    children: (props: PixzleImagesChildrenProps) => React.ReactNode;
+    /** Fallback while loading */
+    fallback?: React.ReactNode;
+    /** Error fallback */
+    errorFallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** Error callback */
+    onError?: (error: Error) => void;
+    /** Load complete callback */
+    onLoad?: (sources: string[]) => void;
+}
+export declare const PixzleImages: React.FC<PixzleImagesProps>;

package/dist/PixzleImages.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PixzleImages = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const usePixzleImages_1 = require("./usePixzleImages");
+const PixzleImages = ({ images, manifest, manifestData, children, fallback = null, errorFallback = null, onError, onLoad, }) => {
+    const { sources, isLoading, error, progress } = (0, usePixzleImages_1.usePixzleImages)({
+        images,
+        manifest,
+        manifestData,
+    });
+    (0, react_1.useEffect)(() => {
+        if (error) {
+            console.error("PixzleImages restoration error:", error);
+            onError?.(error);
+        }
+    }, [error, onError]);
+    (0, react_1.useEffect)(() => {
+        if (!isLoading && sources.length > 0 && !error) {
+            onLoad?.(sources);
+        }
+    }, [isLoading, sources, error, onLoad]);
+    if (error) {
+        if (errorFallback) {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof errorFallback === "function"
+                    ? errorFallback(error)
+                    : errorFallback }));
+        }
+        return null;
+    }
+    if (isLoading) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ sources, isLoading, error, progress }) });
+};
+exports.PixzleImages = PixzleImages;
+exports.PixzleImages.displayName = "PixzleImages";
+//# sourceMappingURL=PixzleImages.js.map

package/dist/PixzleImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixzleImages.js","sourceRoot":"","sources":["../src/PixzleImages.tsx"],"names":[],"mappings":";;;;AAEA,iCAAkC;AAClC,uDAAgF;AA0BzE,MAAM,YAAY,GAAgC,CAAC,EACxD,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,aAAa,GAAG,IAAI,EACpB,OAAO,EACP,MAAM,GACP,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,iCAAe,EAAC;QAC9D,MAAM;QACN,QAAQ;QACR,YAAY;KACb,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;YACxD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/C,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,CACL,2DACG,OAAO,aAAa,KAAK,UAAU;oBAClC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;oBACtB,CAAC,CAAC,aAAa,GAChB,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACzB,CAAC;IAED,OAAO,2DAAG,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,GAAI,CAAC;AAClE,CAAC,CAAC;AA/CW,QAAA,YAAY,gBA+CvB;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./PixzleImage";
 export * from "./usePixzleImage";
+export * from "./PixzleImages";
+export * from "./usePixzleImages";

package/dist/index.js

@@ -16,4 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./PixzleImage"), exports);
 __exportStar(require("./usePixzleImage"), exports);
+__exportStar(require("./PixzleImages"), exports);
+__exportStar(require("./usePixzleImages"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,mDAAiC;AACjC,iDAA+B;AAC/B,oDAAkC"}

package/dist/usePixzleImage.d.ts

@@ -1,13 +1,41 @@
-import type { ImageInfo } from "@pixzle/core";
-export interface UsePixzleImageProps {
+import type { ImageInfo, ManifestData } from "@pixzle/core";
+/**
+ * Props for usePixzleImage hook with explicit parameters
+ */
+export interface UsePixzleImageExplicitProps {
     blockSize: number;
     seed: number;
     imageInfo: ImageInfo;
     image: string | Blob;
+    manifest?: never;
+    manifestData?: never;
 }
+/**
+ * Props for usePixzleImage hook with manifest URL
+ */
+export interface UsePixzleImageManifestUrlProps {
+    image: string | Blob;
+    manifest: string;
+    manifestData?: never;
+    blockSize?: never;
+    seed?: never;
+    imageInfo?: never;
+}
+/**
+ * Props for usePixzleImage hook with manifest data
+ */
+export interface UsePixzleImageManifestDataProps {
+    image: string | Blob;
+    manifestData: ManifestData;
+    manifest?: never;
+    blockSize?: never;
+    seed?: never;
+    imageInfo?: never;
+}
+export type UsePixzleImageProps = UsePixzleImageExplicitProps | UsePixzleImageManifestUrlProps | UsePixzleImageManifestDataProps;
 export interface UsePixzleImageResult {
     src: string | undefined;
     isLoading: boolean;
     error: Error | null;
 }
-export declare const usePixzleImage: ({ blockSize, seed, imageInfo, image, }: UsePixzleImageProps) => UsePixzleImageResult;
+export declare const usePixzleImage: (props: UsePixzleImageProps) => UsePixzleImageResult;

package/dist/usePixzleImage.js

@@ -1,54 +1,112 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePixzleImage = void 0;
-const browser_1 = __importDefault(require("@pixzle/browser"));
+const browser_1 = __importStar(require("@pixzle/browser"));
 const react_1 = require("react");
-const usePixzleImage = ({ blockSize, seed, imageInfo, image, }) => {
+const utils_1 = require("./utils");
+function isExplicitProps(props) {
+    return "blockSize" in props && props.blockSize !== undefined;
+}
+function isManifestUrlProps(props) {
+    return "manifest" in props && props.manifest !== undefined;
+}
+function isManifestDataProps(props) {
+    return "manifestData" in props && props.manifestData !== undefined;
+}
+const usePixzleImage = (props) => {
     const [src, setSrc] = (0, react_1.useState)(undefined);
     const [error, setError] = (0, react_1.useState)(null);
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const { image } = props;
+    // Extract dependencies based on props type
+    const blockSize = isExplicitProps(props) ? props.blockSize : undefined;
+    const seed = isExplicitProps(props) ? props.seed : undefined;
+    const imageInfo = isExplicitProps(props) ? props.imageInfo : undefined;
+    const manifest = isManifestUrlProps(props) ? props.manifest : undefined;
+    const manifestData = isManifestDataProps(props)
+        ? props.manifestData
+        : undefined;
     (0, react_1.useEffect)(() => {
         let active = true;
         setIsLoading(true);
         setError(null);
         const restore = async () => {
             try {
+                let resolvedBlockSize;
+                let resolvedSeed;
+                let resolvedImageInfo;
+                if (blockSize !== undefined && seed !== undefined && imageInfo) {
+                    // Explicit props
+                    resolvedBlockSize = blockSize;
+                    resolvedSeed = seed;
+                    resolvedImageInfo = imageInfo;
+                }
+                else if (manifest) {
+                    // Fetch manifest from URL
+                    const fetchedManifest = await (0, browser_1.fetchManifest)(manifest);
+                    resolvedBlockSize = fetchedManifest.config.blockSize;
+                    resolvedSeed = fetchedManifest.config.seed;
+                    resolvedImageInfo = fetchedManifest.images[0];
+                }
+                else if (manifestData) {
+                    // Use provided manifest data
+                    resolvedBlockSize = manifestData.config.blockSize;
+                    resolvedSeed = manifestData.config.seed;
+                    resolvedImageInfo = manifestData.images[0];
+                }
+                else {
+                    throw new Error("Either (blockSize, seed, imageInfo) or manifest/manifestData is required");
+                }
                 const restoredBitmap = await browser_1.default.restoreImage({
                     image,
-                    blockSize,
-                    seed,
-                    imageInfo,
+                    blockSize: resolvedBlockSize,
+                    seed: resolvedSeed,
+                    imageInfo: resolvedImageInfo,
                 });
                 if (!active)
                     return;
-                // Convert ImageBitmap to Blob URL to display in <img>
-                const canvas = document.createElement("canvas");
-                canvas.width = restoredBitmap.width;
-                canvas.height = restoredBitmap.height;
-                const ctx = canvas.getContext("2d");
-                if (!ctx)
-                    throw new Error("Could not get 2D context");
-                ctx.drawImage(restoredBitmap, 0, 0);
-                canvas.toBlob((blob) => {
-                    if (!active)
-                        return;
-                    if (blob) {
-                        const url = URL.createObjectURL(blob);
-                        setSrc((prev) => {
-                            if (prev)
-                                URL.revokeObjectURL(prev);
-                            return url;
-                        });
-                        setIsLoading(false);
-                    }
-                    else {
-                        setError(new Error("Failed to create blob from canvas"));
-                        setIsLoading(false);
-                    }
+                const url = await (0, utils_1.imageBitmapToBlobUrl)(restoredBitmap);
+                if (!active)
+                    return;
+                setSrc((prev) => {
+                    if (prev)
+                        URL.revokeObjectURL(prev);
+                    return url;
                 });
+                setIsLoading(false);
             }
             catch (err) {
                 if (active) {
@@ -61,7 +119,7 @@ const usePixzleImage = ({ blockSize, seed, imageInfo, image, }) => {
         return () => {
             active = false;
         };
-    }, [blockSize, seed, imageInfo, image]);
+    }, [blockSize, seed, imageInfo, image, manifest, manifestData]);
     // Cleanup URL on unmount
     (0, react_1.useEffect)(() => {
         return () => {

package/dist/usePixzleImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePixzleImage.js","sourceRoot":"","sources":["../src/usePixzleImage.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePixzleImage.js","sourceRoot":"","sources":["../src/usePixzleImage.ts"],"names":[],"mappings":"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"}

package/dist/usePixzleImages.d.ts

@@ -0,0 +1,24 @@
+import type { ManifestData } from "@pixzle/core";
+export interface UsePixzleImagesProps {
+    /** Image sources - URLs or Blobs */
+    images: (string | Blob)[];
+    /** Manifest URL */
+    manifest?: string;
+    /** Manifest data object (alternative to manifest) */
+    manifestData?: ManifestData;
+    /** Whether to auto-start restoration */
+    autoRestore?: boolean;
+}
+export interface UsePixzleImagesResult {
+    /** Restored image URLs (object URLs) */
+    sources: string[];
+    /** Loading state */
+    isLoading: boolean;
+    /** Error if restoration failed */
+    error: Error | null;
+    /** Progress (0-1) */
+    progress: number;
+    /** Manually trigger restoration */
+    restore: () => Promise<void>;
+}
+export declare const usePixzleImages: ({ images, manifest, manifestData, autoRestore, }: UsePixzleImagesProps) => UsePixzleImagesResult;

package/dist/usePixzleImages.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePixzleImages = void 0;
+const browser_1 = __importDefault(require("@pixzle/browser"));
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const usePixzleImages = ({ images, manifest, manifestData, autoRestore = true, }) => {
+    const [sources, setSources] = (0, react_1.useState)([]);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    const sourcesRef = (0, react_1.useRef)([]);
+    // Keep ref in sync with sources state
+    (0, react_1.useEffect)(() => {
+        sourcesRef.current = sources;
+    }, [sources]);
+    const restore = (0, react_1.useCallback)(async () => {
+        if (!images.length)
+            return;
+        if (!manifest && !manifestData)
+            return;
+        setIsLoading(true);
+        setError(null);
+        setProgress(0);
+        try {
+            const restoredBitmaps = await browser_1.default.restore({
+                images,
+                manifest,
+                manifestData,
+            });
+            const urls = [];
+            for (let i = 0; i < restoredBitmaps.length; i++) {
+                const bitmap = restoredBitmaps[i];
+                const url = await (0, utils_1.imageBitmapToBlobUrl)(bitmap);
+                urls.push(url);
+                setProgress((i + 1) / restoredBitmaps.length);
+            }
+            // Cleanup old URLs
+            setSources((prev) => {
+                for (const url of prev) {
+                    URL.revokeObjectURL(url);
+                }
+                return urls;
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [images, manifest, manifestData]);
+    (0, react_1.useEffect)(() => {
+        if (autoRestore) {
+            restore();
+        }
+    }, [restore, autoRestore]);
+    // Cleanup URLs on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            for (const url of sourcesRef.current) {
+                URL.revokeObjectURL(url);
+            }
+        };
+    }, []);
+    return { sources, isLoading, error, progress, restore };
+};
+exports.usePixzleImages = usePixzleImages;
+//# sourceMappingURL=usePixzleImages.js.map

package/dist/usePixzleImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePixzleImages.js","sourceRoot":"","sources":["../src/usePixzleImages.ts"],"names":[],"mappings":"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"}

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert an ImageBitmap to a Blob URL
+ * @param bitmap The ImageBitmap to convert
+ * @returns Promise resolving to a Blob URL string
+ */
+export declare function imageBitmapToBlobUrl(bitmap: ImageBitmap): Promise<string>;

package/dist/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageBitmapToBlobUrl = imageBitmapToBlobUrl;
+/**
+ * Convert an ImageBitmap to a Blob URL
+ * @param bitmap The ImageBitmap to convert
+ * @returns Promise resolving to a Blob URL string
+ */
+async function imageBitmapToBlobUrl(bitmap) {
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        throw new Error("Could not get 2D context");
+    ctx.drawImage(bitmap, 0, 0);
+    const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((b) => {
+            if (b)
+                resolve(b);
+            else
+                reject(new Error("Failed to create blob"));
+        });
+    });
+    return URL.createObjectURL(blob);
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;AAKA,oDAmBC;AAxBD;;;;GAIG;AACI,KAAK,UAAU,oBAAoB,CACxC,MAAmB;IAEnB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC9B,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAEtD,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAE5B,MAAM,IAAI,GAAG,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACvD,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,CAAC;gBAAE,OAAO,CAAC,CAAC,CAAC,CAAC;;gBACb,MAAM,CAAC,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixzle/react",
-  "version": "0.0.30",
+  "version": "0.1.0",
   "description": "React components for pixzle",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,8 +34,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@pixzle/browser": "0.0.30",
-    "@pixzle/core": "0.0.30"
+    "@pixzle/browser": "0.1.0",
+    "@pixzle/core": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",