jazz-tools 0.18.16 → 0.18.17

package/dist/svelte/media/image.svelte

@@ -1,118 +1,122 @@
 <script lang="ts">
-import { ImageDefinition } from "jazz-tools";
-import { highestResAvailable } from "jazz-tools/media";
-import { onDestroy } from "svelte";
-import { CoState } from "../jazz.class.svelte";
-import type { ImageProps } from "./image.types.js";
-
-const { imageId, width, height, ...rest }: ImageProps = $props();
-
-const imageState = new CoState(ImageDefinition, () => imageId);
-let lastBestImage: [string, string] | null = null;
-
-/**
- * For lazy loading, we use the browser's strategy for images with loading="lazy".
- * We use an empty image, and when the browser triggers the load event, we load the best available image.
- * On page loading, if the image url is already in browser's cache, the load event is triggered immediately.
- * This is why we need to use a different blob url for every image.
- */
-let waitingLazyLoading = $state(rest.loading === "lazy");
-const lazyPlaceholder = $derived.by(() =>
-  waitingLazyLoading ? URL.createObjectURL(emptyPixelBlob) : undefined,
-);
-
-const dimensions = $derived.by<{
-  width: number | undefined;
-  height: number | undefined;
-}>(() => {
-  const originalWidth = imageState.current?.originalSize?.[0];
-  const originalHeight = imageState.current?.originalSize?.[1];
-
-  // Both width and height are "original"
-  if (width === "original" && height === "original") {
-    return { width: originalWidth, height: originalHeight };
-  }
+  import { ImageDefinition } from "jazz-tools";
+  import { highestResAvailable } from "jazz-tools/media";
+  import { onDestroy } from "svelte";
+  import { CoState } from "../jazz.class.svelte";
+  import type { ImageProps } from "./image.types.js";
+
+  const { imageId, width, height, ...rest }: ImageProps = $props();
+
+  const imageState = new CoState(ImageDefinition, () => imageId);
+  let lastBestImage: [string, string] | null = null;
+
+  /**
+   * For lazy loading, we use the browser's strategy for images with loading="lazy".
+   * We use an empty image, and when the browser triggers the load event, we load the best available image.
+   * On page loading, if the image url is already in browser's cache, the load event is triggered immediately.
+   * This is why we need to use a different blob url for every image.
+   */
+  let waitingLazyLoading = $state(rest.loading === "lazy");
+  const lazyPlaceholder = $derived.by(() =>
+    waitingLazyLoading ? URL.createObjectURL(emptyPixelBlob) : undefined,
+  );
+
+  const dimensions = $derived.by<{
+    width: number | undefined;
+    height: number | undefined;
+  }>(() => {
+    const originalWidth = imageState.current?.originalSize?.[0];
+    const originalHeight = imageState.current?.originalSize?.[1];
 
-  // Width is "original", height is a number
-  if (width === "original" && typeof height === "number") {
-    if (originalWidth && originalHeight) {
-      return {
-        width: Math.round((height * originalWidth) / originalHeight),
-        height,
-      };
+    // Both width and height are "original"
+    if (width === "original" && height === "original") {
+      return { width: originalWidth, height: originalHeight };
     }
-    return { width: undefined, height };
-  }
 
-  // Height is "original", width is a number
-  if (height === "original" && typeof width === "number") {
-    if (originalWidth && originalHeight) {
-      return {
-        width,
-        height: Math.round((width * originalHeight) / originalWidth),
-      };
+    // Width is "original", height is a number
+    if (width === "original" && typeof height === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width: Math.round((height * originalWidth) / originalHeight),
+          height,
+        };
+      }
+      return { width: undefined, height };
     }
-    return { width, height: undefined };
-  }
 
-  // In all other cases, use the property value:
-  return {
-    width: width === "original" ? originalWidth : width,
-    height: height === "original" ? originalHeight : height,
-  };
-});
+    // Height is "original", width is a number
+    if (height === "original" && typeof width === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width,
+          height: Math.round((width * originalHeight) / originalWidth),
+        };
+      }
+      return { width, height: undefined };
+    }
 
-const src = $derived.by(() => {
-  if (waitingLazyLoading) {
-    return lazyPlaceholder;
-  }
+    // In all other cases, use the property value:
+    return {
+      width: width === "original" ? originalWidth : width,
+      height: height === "original" ? originalHeight : height,
+    };
+  });
 
-  const image = imageState.current;
-  if (!image) return undefined;
+  const src = $derived.by(() => {
+    if (waitingLazyLoading) {
+      return lazyPlaceholder;
+    }
 
-  const bestImage = highestResAvailable(
-    image,
-    dimensions.width || dimensions.height || 9999,
-    dimensions.height || dimensions.width || 9999,
-  );
+    const image = imageState.current;
+    if (image === undefined)
+      return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
 
-  if (!bestImage) return image.placeholderDataURL;
-  if (lastBestImage?.[0] === bestImage.image.$jazz.id) return lastBestImage?.[1];
+    if (!image) return undefined;
 
-  const blob = bestImage.image.toBlob();
+    const bestImage = highestResAvailable(
+      image,
+      dimensions.width || dimensions.height || 9999,
+      dimensions.height || dimensions.width || 9999,
+    );
 
-  if (blob) {
-    const url = URL.createObjectURL(blob);
-    revokeObjectURL(lastBestImage?.[1]);
-    lastBestImage = [bestImage.image.$jazz.id, url];
-    return url;
-  }
+    if (!bestImage) return image.placeholderDataURL;
+    if (lastBestImage?.[0] === bestImage.image.$jazz.id)
+      return lastBestImage?.[1];
+
+    const blob = bestImage.image.toBlob();
+
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      revokeObjectURL(lastBestImage?.[1]);
+      lastBestImage = [bestImage.image.$jazz.id, url];
+      return url;
+    }
 
-  return image.placeholderDataURL;
-});
+    return image.placeholderDataURL;
+  });
 
-// Cleanup object URL on component destroy
-onDestroy(() => {
-  revokeObjectURL(lastBestImage?.[1]);
-});
+  // Cleanup object URL on component destroy
+  onDestroy(() => {
+    revokeObjectURL(lastBestImage?.[1]);
+  });
 
-function revokeObjectURL(url: string | undefined) {
-  if (url && url.startsWith("blob:")) {
-    URL.revokeObjectURL(url);
+  function revokeObjectURL(url: string | undefined) {
+    if (url && url.startsWith("blob:")) {
+      URL.revokeObjectURL(url);
+    }
   }
-}
 
-const emptyPixelBlob = new Blob(
-  [
-    Uint8Array.from(
-      atob(
-        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+  const emptyPixelBlob = new Blob(
+    [
+      Uint8Array.from(
+        atob(
+          "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+        ),
+        (c) => c.charCodeAt(0),
       ),
-      (c) => c.charCodeAt(0),
-    ),
-  ],
-  { type: "image/png" },
-);
+    ],
+    { type: "image/png" },
+  );
 </script>
 
 <img
@@ -120,6 +124,8 @@ const emptyPixelBlob = new Blob(
   width={dimensions.width}
   height={dimensions.height}
   alt={rest.alt}
-  onload={() => {waitingLazyLoading = false}}
+  onload={() => {
+    waitingLazyLoading = false;
+  }}
   {...rest}
 />

package/dist/svelte/media/image.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/media/image.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA2HnD,QAAA,MAAM,KAAK,gDAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"image.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/media/image.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAiInD,QAAA,MAAM,KAAK,gDAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/tests/media/image.svelte.test.js

@@ -10,7 +10,7 @@ describe("Image", async () => {
     });
     const renderWithAccount = (props) => render(Image, props, { account });
     describe("initial rendering", () => {
-        it("should render nothing if coValue is not found", async () => {
+        it("should render a blank placeholder while waiting for the coValue to load", async () => {
             const { container } = renderWithAccount({
                 imageId: "co_zMTubMby3QiKDYnW9e2BEXW7Xaq",
                 alt: "test",
@@ -20,7 +20,21 @@ describe("Image", async () => {
             expect(img.getAttribute("width")).toBe(null);
             expect(img.getAttribute("height")).toBe(null);
             expect(img.alt).toBe("test");
-            expect(img.src).toBe("");
+            expect(img.src).toBe("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
+        });
+        it("should render nothing if coValue is not found", async () => {
+            const { container } = renderWithAccount({
+                imageId: "co_zMTubMby3QiKDYnW9e2BEXW7Xaq",
+                alt: "test",
+            });
+            await waitFor(() => {
+                const img = container.querySelector("img");
+                expect(img).toBeDefined();
+                expect(img.getAttribute("width")).toBe(null);
+                expect(img.getAttribute("height")).toBe(null);
+                expect(img.alt).toBe("test");
+                expect(img.src).toBe("");
+            });
         });
         it("should render an empty image if the image is not loaded yet", async () => {
             const original = FileStream.create({ owner: account.$jazz.owner });

package/dist/testing.js

@@ -6,7 +6,7 @@ import {
   createAnonymousJazzContext,
   createJazzContext,
   randomSessionProvider
-} from "./chunk-GRN6OAUX.js";
+} from "./chunk-OTWWOZMB.js";
 
 // src/tools/testing.ts
 import { LocalNode } from "cojson";

package/dist/tools/implementation/refs.d.ts

@@ -1,5 +1,5 @@
 import { type Account } from "../coValues/account.js";
-import type { AnonymousJazzAgent, CoValue, ID, RefEncoded } from "../internal.js";
+import { AnonymousJazzAgent, CoValue, ID, RefEncoded } from "../internal.js";
 export declare class Ref<out V extends CoValue> {
     readonly id: ID<V>;
     readonly controlledAccount: Account | AnonymousJazzAgent;

package/dist/tools/implementation/refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../src/tools/implementation/refs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,kBAAkB,EAClB,OAAO,EACP,EAAE,EACF,UAAU,EACX,MAAM,gBAAgB,CAAC;AAOxB,qBAAa,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,OAAO;IAElC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAClB,QAAQ,CAAC,iBAAiB,EAAE,OAAO,GAAG,kBAAkB;IACxD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO;gBAHf,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EACT,iBAAiB,EAAE,OAAO,GAAG,kBAAkB,EAC/C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,MAAM,EAAE,OAAO;IAOpB,IAAI,IAAI,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;IAiC/B,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAEhC;CACF;AAED,wBAAgB,QAAQ,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,EACnD,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,EAAE,CAAC,OAAO,CAAC,GAAG,SAAS,EACnD,cAAc,EAAE,MAAM,IAAI,EAAE,EAC5B,iBAAiB,EAAE,OAAO,GAAG,kBAAkB,EAC/C,eAAe,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,UAAU,CAAC,OAAO,CAAC,GAClD;KAAG,CAAC,IAAI,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;CAAE,GAAG;IACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACxD,MAAM,EAAE,MAAM,CAAC;CAChB,CAgDA;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,SAAS,OAAO,GACxD,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GACnB,KAAK,CAAC"}
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../src/tools/implementation/refs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EACL,kBAAkB,EAClB,OAAO,EACP,EAAE,EACF,UAAU,EAEX,MAAM,gBAAgB,CAAC;AAOxB,qBAAa,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,OAAO;IAElC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAClB,QAAQ,CAAC,iBAAiB,EAAE,OAAO,GAAG,kBAAkB;IACxD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO;gBAHf,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EACT,iBAAiB,EAAE,OAAO,GAAG,kBAAkB,EAC/C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,MAAM,EAAE,OAAO;IAOpB,IAAI,IAAI,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;IAwD/B,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAEhC;CACF;AAED,wBAAgB,QAAQ,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,EACnD,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,EAAE,CAAC,OAAO,CAAC,GAAG,SAAS,EACnD,cAAc,EAAE,MAAM,IAAI,EAAE,EAC5B,iBAAiB,EAAE,OAAO,GAAG,kBAAkB,EAC/C,eAAe,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,UAAU,CAAC,OAAO,CAAC,GAClD;KAAG,CAAC,IAAI,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;CAAE,GAAG;IACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACxD,MAAM,EAAE,MAAM,CAAC;CAChB,CAgDA;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,SAAS,OAAO,GACxD,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GACnB,KAAK,CAAC"}

package/dist/tools/subscribe/CoValueCoreSubscription.d.ts

@@ -16,6 +16,10 @@ export declare class CoValueCoreSubscription {
     private listener;
     private skipRetry?;
     constructor(localNode: LocalNode, id: string, listener: (value: RawCoValue | "unavailable") => void, skipRetry?: boolean, branch?: BranchDefinition);
+    /**
+     * Rehydrates the subscription by resetting the unsubscribed flag and initializing the subscription again
+     */
+    pullValue(): void;
     /**
      * Main entry point for subscription initialization.
      * Determines the subscription strategy based on current availability and branch requirements.

package/dist/tools/subscribe/CoValueCoreSubscription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoValueCoreSubscription.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/CoValueCoreSubscription.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAET,UAAU,EACX,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;GAKG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,aAAa,CAAC,CAAU;IAChC,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,SAAS,CAAC,CAAU;gBAG1B,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,EACrD,SAAS,CAAC,EAAE,OAAO,EACnB,MAAM,CAAC,EAAE,gBAAgB;IAY3B;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAmB9B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAqB5B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;;OAGG;IACH,OAAO,CAAC,WAAW;IAsBnB;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IA6BpC;;;OAGG;IACH,OAAO,CAAC,SAAS;IASjB,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;IAM7C;;;OAGG;IACH,WAAW,IAAI,IAAI;CAKpB"}
+{"version":3,"file":"CoValueCoreSubscription.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/CoValueCoreSubscription.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAET,UAAU,EACX,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;GAKG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,aAAa,CAAC,CAAU;IAChC,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,SAAS,CAAC,CAAU;gBAG1B,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,EACrD,SAAS,CAAC,EAAE,OAAO,EACnB,MAAM,CAAC,EAAE,gBAAgB;IAY3B;;OAEG;IACH,SAAS;IAWT;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAmB9B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAqB5B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;;OAGG;IACH,OAAO,CAAC,WAAW;IAsBnB;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IA6BpC;;;OAGG;IACH,OAAO,CAAC,SAAS;IASjB,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;IAM7C;;;OAGG;IACH,WAAW,IAAI,IAAI;CAKpB"}

package/dist/tools/subscribe/SubscriptionScope.d.ts

@@ -34,6 +34,7 @@ export declare class SubscriptionScope<D extends CoValue> {
     totalValidTransactions: number;
     migrated: boolean;
     migrating: boolean;
+    closed: boolean;
     silenceUpdates: boolean;
     constructor(node: LocalNode, resolve: RefsToResolve<D>, id: ID<D>, schema: RefEncoded<D>, skipRetry?: boolean, bestEffortResolution?: boolean, unstable_branch?: BranchDefinition | undefined);
     updateValue(value: SubscriptionValue<D, any>): void;
@@ -50,6 +51,12 @@ export declare class SubscriptionScope<D extends CoValue> {
     setListener(listener: (value: SubscriptionValue<D, any>) => void): void;
     subscribeToKey(key: string): void;
     isSubscribedToId(id: string): boolean;
+    /**
+     * Checks if the currently unloaded value has got some updates
+     *
+     * Used to make the autoload work on closed subscription scopes
+     */
+    pullValue(listener: (value: SubscriptionValue<D, any>) => void): void;
     subscribeToId(id: string, descriptor: RefEncoded<any>): void;
     loadChildren(): boolean;
     loadCoMapKey(map: CoMap, key: string, depth: Record<string, any> | true): string | undefined;

package/dist/tools/subscribe/SubscriptionScope.d.ts.map

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

package/dist/tools/subscribe/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAgB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,EAAE,KAAK,EAAE,CAAC,qDAwB/D;AAED,yBAAyB;AAEzB;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,MAAM,OAeZ;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,OAAO,EAC/C,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,OAa5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAgB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,EAAE,KAAK,EAAE,CAAC,qDA0B/D;AAED,yBAAyB;AAEzB;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,MAAM,OAqBZ;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,OAAO,EAC/C,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,OAa5B"}

package/package.json

@@ -177,7 +177,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.18.16",
+  "version": "0.18.17",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@scure/base": "1.2.1",
@@ -194,9 +194,9 @@
     "prosemirror-transform": "^1.9.0",
     "use-sync-external-store": "^1.5.0",
     "zod": "3.25.76",
-    "cojson": "0.18.16",
-    "cojson-storage-indexeddb": "0.18.16",
-    "cojson-transport-ws": "0.18.16"
+    "cojson": "0.18.17",
+    "cojson-storage-indexeddb": "0.18.17",
+    "cojson-transport-ws": "0.18.17"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",

package/src/react/media/image.tsx

@@ -140,6 +140,8 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
       return lazyPlaceholder;
     }
 
+    if (image === undefined)
+      return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
     if (!image) return undefined;
 
     const bestImage = highestResAvailable(

package/src/react/tests/media/image.test.tsx

@@ -13,17 +13,35 @@ describe("Image", async () => {
   vi.spyOn(Account, "getMe").mockReturnValue(account);
 
   describe("initial rendering", () => {
-    it("should render nothing if coValue is not found", async () => {
+    it("should render a blank placeholder while waiting for the coValue to load", async () => {
       const { container } = render(
         <Image imageId="co_zMTubMby3QiKDYnW9e2BEXW7Xaq" alt="test" />,
         { account },
       );
+
       const img = container.querySelector("img");
       expect(img).toBeDefined();
       expect(img!.getAttribute("width")).toBe(null);
       expect(img!.getAttribute("height")).toBe(null);
       expect(img!.alt).toBe("test");
-      expect(img!.src).toBe("");
+      expect(img!.src).toBe(
+        "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
+      );
+    });
+
+    it("should render nothing if coValue is not found", async () => {
+      const { container } = render(
+        <Image imageId="co_zMTubMby3QiKDYnW9e2BEXW7Xaq" alt="test" />,
+        { account },
+      );
+      await waitFor(() => {
+        const img = container.querySelector("img");
+        expect(img).toBeDefined();
+        expect(img!.getAttribute("width")).toBe(null);
+        expect(img!.getAttribute("height")).toBe(null);
+        expect(img!.alt).toBe("test");
+        expect(img!.src).toBe("");
+      });
     });
 
     it("should render an empty image if the image is not loaded yet", async () => {

package/src/react-native-core/media/image.tsx

@@ -69,7 +69,10 @@ export const Image = forwardRef<RNImage, ImageProps>(function Image(
   ref,
 ) {
   const image = useCoState(ImageDefinition, imageId);
-  const [src, setSrc] = useState<string | undefined>(image?.placeholderDataURL);
+  const [src, setSrc] = useState<string | undefined>(
+    image?.placeholderDataURL ??
+      "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
+  );
 
   const dimensions: { width: number | undefined; height: number | undefined } =
     useMemo(() => {