@tldraw/utils 4.5.0-canary.bcdd9cbff7ae → 4.5.0-canary.bf934d531d1e

package/dist-cjs/index.d.ts

@@ -1016,6 +1016,7 @@ export declare class MediaHelpers {
      */
     static getImageSize(blob: Blob): Promise<{
         h: number;
+        pixelRatio: number;
         w: number;
     }>;
     /**

package/dist-cjs/index.js

@@ -169,7 +169,7 @@ var import_version2 = require("./lib/version");
 var import_warn = require("./lib/warn");
 (0, import_version.registerTldrawLibraryVersion)(
   "@tldraw/utils",
-  "4.5.0-canary.bcdd9cbff7ae",
+  "4.5.0-canary.bf934d531d1e",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/media/media.js

@@ -237,21 +237,31 @@ class MediaHelpers {
           if (physChunk) {
             const physData = import_png.PngHelpers.parsePhys(view, physChunk.dataOffset);
             if (physData.unit === 1 && physData.ppux === physData.ppuy) {
-              const pixelsPerMeter = 72 / 0.0254;
-              const pixelRatio = Math.max(physData.ppux / pixelsPerMeter, 1);
-              return {
-                w: Math.round(w / pixelRatio),
-                h: Math.round(h / pixelRatio)
-              };
+              const dpi = Math.round(physData.ppux * 0.0254);
+              const r96 = dpi / 96;
+              const r72 = dpi / 72;
+              let pixelRatio = 1;
+              if (Number.isInteger(r96) && r96 > 1) {
+                pixelRatio = r96;
+              } else if (Number.isInteger(r72) && r72 > 1) {
+                pixelRatio = r72;
+              }
+              if (pixelRatio > 1) {
+                return {
+                  w: Math.ceil(w / pixelRatio),
+                  h: Math.ceil(h / pixelRatio),
+                  pixelRatio
+                };
+              }
             }
           }
         }
       }
     } catch (err) {
       console.error(err);
-      return { w, h };
+      return { w, h, pixelRatio: 1 };
     }
-    return { w, h };
+    return { w, h, pixelRatio: 1 };
   }
   /**
    * Check if a media file blob contains animation data.

package/dist-cjs/lib/media/media.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/media/media.ts"],
-  "sourcesContent": ["import { promiseWithResolve } from '../control'\nimport { Image } from '../network'\nimport { isApngAnimated } from './apng'\nimport { isAvifAnimated } from './avif'\nimport { isGifAnimated } from './gif'\nimport { PngHelpers } from './png'\nimport { isWebpAnimated } from './webp'\n\n/**\n * Array of supported vector image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSvg = DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes('image/svg+xml')\n * console.log(isSvg) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES = Object.freeze(['image/svg+xml' as const])\n/**\n * Array of supported static (non-animated) image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isStatic = DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes('image/jpeg')\n * console.log(isStatic) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES = Object.freeze([\n\t'image/jpeg' as const,\n\t'image/png' as const,\n\t'image/webp' as const,\n])\n/**\n * Array of supported animated image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isAnimated = DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes('image/gif')\n * console.log(isAnimated) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES = Object.freeze([\n\t'image/gif' as const,\n\t'image/apng' as const,\n\t'image/avif' as const,\n])\n/**\n * Array of all supported image MIME types, combining static, vector, and animated types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSupported = DEFAULT_SUPPORTED_IMAGE_TYPES.includes('image/png')\n * console.log(isSupported) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_IMAGE_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES,\n])\n/**\n * Array of supported video MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORT_VIDEO_TYPES } from '@tldraw/utils'\n *\n * const isVideo = DEFAULT_SUPPORT_VIDEO_TYPES.includes('video/mp4')\n * console.log(isVideo) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORT_VIDEO_TYPES = Object.freeze([\n\t'video/mp4' as const,\n\t'video/webm' as const,\n\t'video/quicktime' as const,\n])\n/**\n * Array of all supported media MIME types, combining images and videos.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPES } from '@tldraw/utils'\n *\n * const isMediaFile = DEFAULT_SUPPORTED_MEDIA_TYPES.includes('video/mp4')\n * console.log(isMediaFile) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t...DEFAULT_SUPPORT_VIDEO_TYPES,\n])\n/**\n * Comma-separated string of all supported media MIME types, useful for HTML file input accept attributes.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPE_LIST } from '@tldraw/utils'\n *\n * // Use in HTML file input for media uploads\n * const input = document.createElement('input')\n * input.type = 'file'\n * input.accept = DEFAULT_SUPPORTED_MEDIA_TYPE_LIST\n * input.addEventListener('change', (e) => {\n *   const files = (e.target as HTMLInputElement).files\n *   if (files) console.log(`Selected ${files.length} file(s)`)\n * })\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPE_LIST = DEFAULT_SUPPORTED_MEDIA_TYPES.join(',')\n\n/**\n * Helpers for media\n *\n * @public\n */\nexport class MediaHelpers {\n\t/**\n\t * Load a video element from a URL with cross-origin support.\n\t *\n\t * @param src - The URL of the video to load\n\t * @returns Promise that resolves to the loaded HTMLVideoElement\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * console.log(`Video dimensions: ${video.videoWidth}x${video.videoHeight}`)\n\t * ```\n\t * @public\n\t */\n\tstatic loadVideo(src: string): Promise<HTMLVideoElement> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst video = document.createElement('video')\n\t\t\tvideo.onloadeddata = () => resolve(video)\n\t\t\tvideo.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load video'))\n\t\t\t}\n\t\t\tvideo.crossOrigin = 'anonymous'\n\t\t\tvideo.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Extract a frame from a video element as a data URL.\n\t *\n\t * @param video - The HTMLVideoElement to extract frame from\n\t * @param time - The time in seconds to extract the frame from (default: 0)\n\t * @returns Promise that resolves to a data URL of the video frame\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * const frameDataUrl = await MediaHelpers.getVideoFrameAsDataUrl(video, 5.0)\n\t * // Use frameDataUrl as image thumbnail\n\t * const img = document.createElement('img')\n\t * img.src = frameDataUrl\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoFrameAsDataUrl(video: HTMLVideoElement, time = 0): Promise<string> {\n\t\tconst promise = promiseWithResolve<string>()\n\t\tlet didSetTime = false\n\n\t\tconst onReadyStateChanged = () => {\n\t\t\tif (!didSetTime) {\n\t\t\t\tif (video.readyState >= video.HAVE_METADATA) {\n\t\t\t\t\tdidSetTime = true\n\t\t\t\t\tvideo.currentTime = time\n\t\t\t\t} else {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (video.readyState >= video.HAVE_CURRENT_DATA) {\n\t\t\t\tconst canvas = document.createElement('canvas')\n\t\t\t\tcanvas.width = video.videoWidth\n\t\t\t\tcanvas.height = video.videoHeight\n\t\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\t\tif (!ctx) {\n\t\t\t\t\tthrow new Error('Could not get 2d context')\n\t\t\t\t}\n\t\t\t\tctx.drawImage(video, 0, 0)\n\t\t\t\tpromise.resolve(canvas.toDataURL())\n\t\t\t}\n\t\t}\n\t\tconst onError = (e: Event) => {\n\t\t\tconsole.error(e)\n\t\t\tpromise.reject(new Error('Could not get video frame'))\n\t\t}\n\n\t\tvideo.addEventListener('loadedmetadata', onReadyStateChanged)\n\t\tvideo.addEventListener('loadeddata', onReadyStateChanged)\n\t\tvideo.addEventListener('canplay', onReadyStateChanged)\n\t\tvideo.addEventListener('seeked', onReadyStateChanged)\n\n\t\tvideo.addEventListener('error', onError)\n\t\tvideo.addEventListener('stalled', onError)\n\n\t\tonReadyStateChanged()\n\n\t\ttry {\n\t\t\treturn await promise\n\t\t} finally {\n\t\t\tvideo.removeEventListener('loadedmetadata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('loadeddata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('canplay', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('seeked', onReadyStateChanged)\n\n\t\t\tvideo.removeEventListener('error', onError)\n\t\t\tvideo.removeEventListener('stalled', onError)\n\t\t}\n\t}\n\n\t/**\n\t * Load an image from a URL and get its dimensions along with the image element.\n\t *\n\t * @param src - The URL of the image to load\n\t * @returns Promise that resolves to an object with width, height, and the image element\n\t * @example\n\t * ```ts\n\t * const { w, h, image } = await MediaHelpers.getImageAndDimensions('https://example.com/image.png')\n\t * console.log(`Image size: ${w}x${h}`)\n\t * // Image is ready to use\n\t * document.body.appendChild(image)\n\t * ```\n\t * @public\n\t */\n\tstatic getImageAndDimensions(\n\t\tsrc: string\n\t): Promise<{ w: number; h: number; image: HTMLImageElement }> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst img = Image()\n\t\t\timg.onload = () => {\n\t\t\t\tlet dimensions\n\t\t\t\tif (img.naturalWidth) {\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.naturalWidth,\n\t\t\t\t\t\th: img.naturalHeight,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Sigh, Firefox doesn't have naturalWidth or naturalHeight for SVGs. :-/\n\t\t\t\t\t// We have to attach to dom and use clientWidth/clientHeight.\n\t\t\t\t\tdocument.body.appendChild(img)\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.clientWidth,\n\t\t\t\t\t\th: img.clientHeight,\n\t\t\t\t\t}\n\t\t\t\t\tdocument.body.removeChild(img)\n\t\t\t\t}\n\t\t\t\tresolve({ ...dimensions, image: img })\n\t\t\t}\n\t\t\timg.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load image'))\n\t\t\t}\n\t\t\timg.crossOrigin = 'anonymous'\n\t\t\timg.referrerPolicy = 'strict-origin-when-cross-origin'\n\t\t\timg.style.visibility = 'hidden'\n\t\t\timg.style.position = 'absolute'\n\t\t\timg.style.opacity = '0'\n\t\t\timg.style.zIndex = '-9999'\n\t\t\timg.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of a video blob\n\t *\n\t * @param blob - A Blob containing the video\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'video.mp4', { type: 'video/mp4' })\n\t * const { w, h } = await MediaHelpers.getVideoSize(file)\n\t * console.log(`Video dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\treturn MediaHelpers.usingObjectURL(blob, async (url) => {\n\t\t\tconst video = await MediaHelpers.loadVideo(url)\n\t\t\treturn { w: video.videoWidth, h: video.videoHeight }\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of an image blob\n\t *\n\t * @param blob - A Blob containing the image\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'image.png', { type: 'image/png' })\n\t * const { w, h } = await MediaHelpers.getImageSize(file)\n\t * console.log(`Image dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getImageSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\tconst { w, h } = await MediaHelpers.usingObjectURL(blob, MediaHelpers.getImageAndDimensions)\n\n\t\ttry {\n\t\t\tif (blob.type === 'image/png') {\n\t\t\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\t\t\tif (PngHelpers.isPng(view, 0)) {\n\t\t\t\t\tconst physChunk = PngHelpers.findChunk(view, 'pHYs')\n\t\t\t\t\tif (physChunk) {\n\t\t\t\t\t\tconst physData = PngHelpers.parsePhys(view, physChunk.dataOffset)\n\t\t\t\t\t\tif (physData.unit === 1 && physData.ppux === physData.ppuy) {\n\t\t\t\t\t\t\t// Calculate pixels per meter:\n\t\t\t\t\t\t\t// - 1 inch = 0.0254 meters\n\t\t\t\t\t\t\t// - 72 DPI is 72 dots per inch\n\t\t\t\t\t\t\t// - pixels per meter = 72 / 0.0254\n\t\t\t\t\t\t\tconst pixelsPerMeter = 72 / 0.0254\n\t\t\t\t\t\t\tconst pixelRatio = Math.max(physData.ppux / pixelsPerMeter, 1)\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tw: Math.round(w / pixelRatio),\n\t\t\t\t\t\t\t\th: Math.round(h / pixelRatio),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(err)\n\t\t\treturn { w, h }\n\t\t}\n\t\treturn { w, h }\n\t}\n\n\t/**\n\t * Check if a media file blob contains animation data.\n\t *\n\t * @param file - The Blob to check for animation\n\t * @returns Promise that resolves to true if the file is animated, false otherwise\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'animation.gif', { type: 'image/gif' })\n\t * const animated = await MediaHelpers.isAnimated(file)\n\t * console.log(animated ? 'Animated' : 'Static')\n\t * ```\n\t * @public\n\t */\n\tstatic async isAnimated(file: Blob): Promise<boolean> {\n\t\tif (file.type === 'image/gif') {\n\t\t\treturn isGifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/avif') {\n\t\t\treturn isAvifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/webp') {\n\t\t\treturn isWebpAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/apng') {\n\t\t\treturn isApngAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\treturn false\n\t}\n\n\t/**\n\t * Check if a MIME type represents an animated image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is an animated image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isAnimated = MediaHelpers.isAnimatedImageType('image/gif')\n\t * console.log(isAnimated) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isAnimatedImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a static (non-animated) image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a static image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isStatic = MediaHelpers.isStaticImageType('image/jpeg')\n\t * console.log(isStatic) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isStaticImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a vector image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a vector image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isVector = MediaHelpers.isVectorImageType('image/svg+xml')\n\t * console.log(isVector) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isVectorImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents any supported image format (static, animated, or vector).\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a supported image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isImage = MediaHelpers.isImageType('image/png')\n\t * console.log(isImage) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isImageType(mimeType: string): boolean {\n\t\treturn DEFAULT_SUPPORTED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Utility function to create an object URL from a blob, execute a function with it, and automatically clean it up.\n\t *\n\t * @param blob - The Blob to create an object URL for\n\t * @param fn - Function to execute with the object URL\n\t * @returns Promise that resolves to the result of the function\n\t * @example\n\t * ```ts\n\t * const result = await MediaHelpers.usingObjectURL(imageBlob, async (url) => {\n\t *   const { w, h } = await MediaHelpers.getImageAndDimensions(url)\n\t *   return { width: w, height: h }\n\t * })\n\t * // Object URL is automatically revoked after function completes\n\t * console.log(`Image dimensions: ${result.width}x${result.height}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async usingObjectURL<T>(blob: Blob, fn: (url: string) => Promise<T>): Promise<T> {\n\t\tconst url = URL.createObjectURL(blob)\n\t\ttry {\n\t\t\treturn await fn(url)\n\t\t} finally {\n\t\t\tURL.revokeObjectURL(url)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { promiseWithResolve } from '../control'\nimport { Image } from '../network'\nimport { isApngAnimated } from './apng'\nimport { isAvifAnimated } from './avif'\nimport { isGifAnimated } from './gif'\nimport { PngHelpers } from './png'\nimport { isWebpAnimated } from './webp'\n\n/**\n * Array of supported vector image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSvg = DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes('image/svg+xml')\n * console.log(isSvg) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES = Object.freeze(['image/svg+xml' as const])\n/**\n * Array of supported static (non-animated) image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isStatic = DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes('image/jpeg')\n * console.log(isStatic) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES = Object.freeze([\n\t'image/jpeg' as const,\n\t'image/png' as const,\n\t'image/webp' as const,\n])\n/**\n * Array of supported animated image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isAnimated = DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes('image/gif')\n * console.log(isAnimated) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES = Object.freeze([\n\t'image/gif' as const,\n\t'image/apng' as const,\n\t'image/avif' as const,\n])\n/**\n * Array of all supported image MIME types, combining static, vector, and animated types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSupported = DEFAULT_SUPPORTED_IMAGE_TYPES.includes('image/png')\n * console.log(isSupported) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_IMAGE_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES,\n])\n/**\n * Array of supported video MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORT_VIDEO_TYPES } from '@tldraw/utils'\n *\n * const isVideo = DEFAULT_SUPPORT_VIDEO_TYPES.includes('video/mp4')\n * console.log(isVideo) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORT_VIDEO_TYPES = Object.freeze([\n\t'video/mp4' as const,\n\t'video/webm' as const,\n\t'video/quicktime' as const,\n])\n/**\n * Array of all supported media MIME types, combining images and videos.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPES } from '@tldraw/utils'\n *\n * const isMediaFile = DEFAULT_SUPPORTED_MEDIA_TYPES.includes('video/mp4')\n * console.log(isMediaFile) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t...DEFAULT_SUPPORT_VIDEO_TYPES,\n])\n/**\n * Comma-separated string of all supported media MIME types, useful for HTML file input accept attributes.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPE_LIST } from '@tldraw/utils'\n *\n * // Use in HTML file input for media uploads\n * const input = document.createElement('input')\n * input.type = 'file'\n * input.accept = DEFAULT_SUPPORTED_MEDIA_TYPE_LIST\n * input.addEventListener('change', (e) => {\n *   const files = (e.target as HTMLInputElement).files\n *   if (files) console.log(`Selected ${files.length} file(s)`)\n * })\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPE_LIST = DEFAULT_SUPPORTED_MEDIA_TYPES.join(',')\n\n/**\n * Helpers for media\n *\n * @public\n */\nexport class MediaHelpers {\n\t/**\n\t * Load a video element from a URL with cross-origin support.\n\t *\n\t * @param src - The URL of the video to load\n\t * @returns Promise that resolves to the loaded HTMLVideoElement\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * console.log(`Video dimensions: ${video.videoWidth}x${video.videoHeight}`)\n\t * ```\n\t * @public\n\t */\n\tstatic loadVideo(src: string): Promise<HTMLVideoElement> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst video = document.createElement('video')\n\t\t\tvideo.onloadeddata = () => resolve(video)\n\t\t\tvideo.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load video'))\n\t\t\t}\n\t\t\tvideo.crossOrigin = 'anonymous'\n\t\t\tvideo.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Extract a frame from a video element as a data URL.\n\t *\n\t * @param video - The HTMLVideoElement to extract frame from\n\t * @param time - The time in seconds to extract the frame from (default: 0)\n\t * @returns Promise that resolves to a data URL of the video frame\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * const frameDataUrl = await MediaHelpers.getVideoFrameAsDataUrl(video, 5.0)\n\t * // Use frameDataUrl as image thumbnail\n\t * const img = document.createElement('img')\n\t * img.src = frameDataUrl\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoFrameAsDataUrl(video: HTMLVideoElement, time = 0): Promise<string> {\n\t\tconst promise = promiseWithResolve<string>()\n\t\tlet didSetTime = false\n\n\t\tconst onReadyStateChanged = () => {\n\t\t\tif (!didSetTime) {\n\t\t\t\tif (video.readyState >= video.HAVE_METADATA) {\n\t\t\t\t\tdidSetTime = true\n\t\t\t\t\tvideo.currentTime = time\n\t\t\t\t} else {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (video.readyState >= video.HAVE_CURRENT_DATA) {\n\t\t\t\tconst canvas = document.createElement('canvas')\n\t\t\t\tcanvas.width = video.videoWidth\n\t\t\t\tcanvas.height = video.videoHeight\n\t\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\t\tif (!ctx) {\n\t\t\t\t\tthrow new Error('Could not get 2d context')\n\t\t\t\t}\n\t\t\t\tctx.drawImage(video, 0, 0)\n\t\t\t\tpromise.resolve(canvas.toDataURL())\n\t\t\t}\n\t\t}\n\t\tconst onError = (e: Event) => {\n\t\t\tconsole.error(e)\n\t\t\tpromise.reject(new Error('Could not get video frame'))\n\t\t}\n\n\t\tvideo.addEventListener('loadedmetadata', onReadyStateChanged)\n\t\tvideo.addEventListener('loadeddata', onReadyStateChanged)\n\t\tvideo.addEventListener('canplay', onReadyStateChanged)\n\t\tvideo.addEventListener('seeked', onReadyStateChanged)\n\n\t\tvideo.addEventListener('error', onError)\n\t\tvideo.addEventListener('stalled', onError)\n\n\t\tonReadyStateChanged()\n\n\t\ttry {\n\t\t\treturn await promise\n\t\t} finally {\n\t\t\tvideo.removeEventListener('loadedmetadata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('loadeddata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('canplay', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('seeked', onReadyStateChanged)\n\n\t\t\tvideo.removeEventListener('error', onError)\n\t\t\tvideo.removeEventListener('stalled', onError)\n\t\t}\n\t}\n\n\t/**\n\t * Load an image from a URL and get its dimensions along with the image element.\n\t *\n\t * @param src - The URL of the image to load\n\t * @returns Promise that resolves to an object with width, height, and the image element\n\t * @example\n\t * ```ts\n\t * const { w, h, image } = await MediaHelpers.getImageAndDimensions('https://example.com/image.png')\n\t * console.log(`Image size: ${w}x${h}`)\n\t * // Image is ready to use\n\t * document.body.appendChild(image)\n\t * ```\n\t * @public\n\t */\n\tstatic getImageAndDimensions(\n\t\tsrc: string\n\t): Promise<{ w: number; h: number; image: HTMLImageElement }> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst img = Image()\n\t\t\timg.onload = () => {\n\t\t\t\tlet dimensions\n\t\t\t\tif (img.naturalWidth) {\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.naturalWidth,\n\t\t\t\t\t\th: img.naturalHeight,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Sigh, Firefox doesn't have naturalWidth or naturalHeight for SVGs. :-/\n\t\t\t\t\t// We have to attach to dom and use clientWidth/clientHeight.\n\t\t\t\t\tdocument.body.appendChild(img)\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.clientWidth,\n\t\t\t\t\t\th: img.clientHeight,\n\t\t\t\t\t}\n\t\t\t\t\tdocument.body.removeChild(img)\n\t\t\t\t}\n\t\t\t\tresolve({ ...dimensions, image: img })\n\t\t\t}\n\t\t\timg.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load image'))\n\t\t\t}\n\t\t\timg.crossOrigin = 'anonymous'\n\t\t\timg.referrerPolicy = 'strict-origin-when-cross-origin'\n\t\t\timg.style.visibility = 'hidden'\n\t\t\timg.style.position = 'absolute'\n\t\t\timg.style.opacity = '0'\n\t\t\timg.style.zIndex = '-9999'\n\t\t\timg.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of a video blob\n\t *\n\t * @param blob - A Blob containing the video\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'video.mp4', { type: 'video/mp4' })\n\t * const { w, h } = await MediaHelpers.getVideoSize(file)\n\t * console.log(`Video dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\treturn MediaHelpers.usingObjectURL(blob, async (url) => {\n\t\t\tconst video = await MediaHelpers.loadVideo(url)\n\t\t\treturn { w: video.videoWidth, h: video.videoHeight }\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of an image blob\n\t *\n\t * @param blob - A Blob containing the image\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'image.png', { type: 'image/png' })\n\t * const { w, h } = await MediaHelpers.getImageSize(file)\n\t * console.log(`Image dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getImageSize(blob: Blob): Promise<{ w: number; h: number; pixelRatio: number }> {\n\t\tconst { w, h } = await MediaHelpers.usingObjectURL(blob, MediaHelpers.getImageAndDimensions)\n\n\t\ttry {\n\t\t\tif (blob.type === 'image/png') {\n\t\t\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\t\t\tif (PngHelpers.isPng(view, 0)) {\n\t\t\t\t\tconst physChunk = PngHelpers.findChunk(view, 'pHYs')\n\t\t\t\t\tif (physChunk) {\n\t\t\t\t\t\tconst physData = PngHelpers.parsePhys(view, physChunk.dataOffset)\n\t\t\t\t\t\tif (physData.unit === 1 && physData.ppux === physData.ppuy) {\n\t\t\t\t\t\t\tconst dpi = Math.round(physData.ppux * 0.0254)\n\t\t\t\t\t\t\t// Try both standard baselines: Windows/web = 96, macOS = 72.\n\t\t\t\t\t\t\t// Pick whichever yields a clean integer ratio > 1.\n\t\t\t\t\t\t\tconst r96 = dpi / 96\n\t\t\t\t\t\t\tconst r72 = dpi / 72\n\t\t\t\t\t\t\tlet pixelRatio = 1\n\t\t\t\t\t\t\tif (Number.isInteger(r96) && r96 > 1) {\n\t\t\t\t\t\t\t\tpixelRatio = r96\n\t\t\t\t\t\t\t} else if (Number.isInteger(r72) && r72 > 1) {\n\t\t\t\t\t\t\t\tpixelRatio = r72\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (pixelRatio > 1) {\n\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\tw: Math.ceil(w / pixelRatio),\n\t\t\t\t\t\t\t\t\th: Math.ceil(h / pixelRatio),\n\t\t\t\t\t\t\t\t\tpixelRatio,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(err)\n\t\t\treturn { w, h, pixelRatio: 1 }\n\t\t}\n\t\treturn { w, h, pixelRatio: 1 }\n\t}\n\n\t/**\n\t * Check if a media file blob contains animation data.\n\t *\n\t * @param file - The Blob to check for animation\n\t * @returns Promise that resolves to true if the file is animated, false otherwise\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'animation.gif', { type: 'image/gif' })\n\t * const animated = await MediaHelpers.isAnimated(file)\n\t * console.log(animated ? 'Animated' : 'Static')\n\t * ```\n\t * @public\n\t */\n\tstatic async isAnimated(file: Blob): Promise<boolean> {\n\t\tif (file.type === 'image/gif') {\n\t\t\treturn isGifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/avif') {\n\t\t\treturn isAvifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/webp') {\n\t\t\treturn isWebpAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/apng') {\n\t\t\treturn isApngAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\treturn false\n\t}\n\n\t/**\n\t * Check if a MIME type represents an animated image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is an animated image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isAnimated = MediaHelpers.isAnimatedImageType('image/gif')\n\t * console.log(isAnimated) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isAnimatedImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a static (non-animated) image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a static image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isStatic = MediaHelpers.isStaticImageType('image/jpeg')\n\t * console.log(isStatic) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isStaticImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a vector image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a vector image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isVector = MediaHelpers.isVectorImageType('image/svg+xml')\n\t * console.log(isVector) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isVectorImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents any supported image format (static, animated, or vector).\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a supported image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isImage = MediaHelpers.isImageType('image/png')\n\t * console.log(isImage) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isImageType(mimeType: string): boolean {\n\t\treturn DEFAULT_SUPPORTED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Utility function to create an object URL from a blob, execute a function with it, and automatically clean it up.\n\t *\n\t * @param blob - The Blob to create an object URL for\n\t * @param fn - Function to execute with the object URL\n\t * @returns Promise that resolves to the result of the function\n\t * @example\n\t * ```ts\n\t * const result = await MediaHelpers.usingObjectURL(imageBlob, async (url) => {\n\t *   const { w, h } = await MediaHelpers.getImageAndDimensions(url)\n\t *   return { width: w, height: h }\n\t * })\n\t * // Object URL is automatically revoked after function completes\n\t * console.log(`Image dimensions: ${result.width}x${result.height}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async usingObjectURL<T>(blob: Blob, fn: (url: string) => Promise<T>): Promise<T> {\n\t\tconst url = URL.createObjectURL(blob)\n\t\ttry {\n\t\t\treturn await fn(url)\n\t\t} finally {\n\t\t\tURL.revokeObjectURL(url)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/index.d.mts

@@ -1016,6 +1016,7 @@ export declare class MediaHelpers {
      */
     static getImageSize(blob: Blob): Promise<{
         h: number;
+        pixelRatio: number;
         w: number;
     }>;
     /**

package/dist-esm/index.mjs

@@ -101,7 +101,7 @@ import { registerTldrawLibraryVersion as registerTldrawLibraryVersion2 } from ".
 import { warnDeprecatedGetter, warnOnce } from "./lib/warn.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/utils",
-  "4.5.0-canary.bcdd9cbff7ae",
+  "4.5.0-canary.bf934d531d1e",
   "esm"
 );
 export {

package/dist-esm/lib/media/media.mjs

@@ -207,21 +207,31 @@ class MediaHelpers {
           if (physChunk) {
             const physData = PngHelpers.parsePhys(view, physChunk.dataOffset);
             if (physData.unit === 1 && physData.ppux === physData.ppuy) {
-              const pixelsPerMeter = 72 / 0.0254;
-              const pixelRatio = Math.max(physData.ppux / pixelsPerMeter, 1);
-              return {
-                w: Math.round(w / pixelRatio),
-                h: Math.round(h / pixelRatio)
-              };
+              const dpi = Math.round(physData.ppux * 0.0254);
+              const r96 = dpi / 96;
+              const r72 = dpi / 72;
+              let pixelRatio = 1;
+              if (Number.isInteger(r96) && r96 > 1) {
+                pixelRatio = r96;
+              } else if (Number.isInteger(r72) && r72 > 1) {
+                pixelRatio = r72;
+              }
+              if (pixelRatio > 1) {
+                return {
+                  w: Math.ceil(w / pixelRatio),
+                  h: Math.ceil(h / pixelRatio),
+                  pixelRatio
+                };
+              }
             }
           }
         }
       }
     } catch (err) {
       console.error(err);
-      return { w, h };
+      return { w, h, pixelRatio: 1 };
     }
-    return { w, h };
+    return { w, h, pixelRatio: 1 };
   }
   /**
    * Check if a media file blob contains animation data.

package/dist-esm/lib/media/media.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/media/media.ts"],
-  "sourcesContent": ["import { promiseWithResolve } from '../control'\nimport { Image } from '../network'\nimport { isApngAnimated } from './apng'\nimport { isAvifAnimated } from './avif'\nimport { isGifAnimated } from './gif'\nimport { PngHelpers } from './png'\nimport { isWebpAnimated } from './webp'\n\n/**\n * Array of supported vector image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSvg = DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes('image/svg+xml')\n * console.log(isSvg) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES = Object.freeze(['image/svg+xml' as const])\n/**\n * Array of supported static (non-animated) image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isStatic = DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes('image/jpeg')\n * console.log(isStatic) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES = Object.freeze([\n\t'image/jpeg' as const,\n\t'image/png' as const,\n\t'image/webp' as const,\n])\n/**\n * Array of supported animated image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isAnimated = DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes('image/gif')\n * console.log(isAnimated) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES = Object.freeze([\n\t'image/gif' as const,\n\t'image/apng' as const,\n\t'image/avif' as const,\n])\n/**\n * Array of all supported image MIME types, combining static, vector, and animated types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSupported = DEFAULT_SUPPORTED_IMAGE_TYPES.includes('image/png')\n * console.log(isSupported) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_IMAGE_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES,\n])\n/**\n * Array of supported video MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORT_VIDEO_TYPES } from '@tldraw/utils'\n *\n * const isVideo = DEFAULT_SUPPORT_VIDEO_TYPES.includes('video/mp4')\n * console.log(isVideo) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORT_VIDEO_TYPES = Object.freeze([\n\t'video/mp4' as const,\n\t'video/webm' as const,\n\t'video/quicktime' as const,\n])\n/**\n * Array of all supported media MIME types, combining images and videos.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPES } from '@tldraw/utils'\n *\n * const isMediaFile = DEFAULT_SUPPORTED_MEDIA_TYPES.includes('video/mp4')\n * console.log(isMediaFile) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t...DEFAULT_SUPPORT_VIDEO_TYPES,\n])\n/**\n * Comma-separated string of all supported media MIME types, useful for HTML file input accept attributes.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPE_LIST } from '@tldraw/utils'\n *\n * // Use in HTML file input for media uploads\n * const input = document.createElement('input')\n * input.type = 'file'\n * input.accept = DEFAULT_SUPPORTED_MEDIA_TYPE_LIST\n * input.addEventListener('change', (e) => {\n *   const files = (e.target as HTMLInputElement).files\n *   if (files) console.log(`Selected ${files.length} file(s)`)\n * })\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPE_LIST = DEFAULT_SUPPORTED_MEDIA_TYPES.join(',')\n\n/**\n * Helpers for media\n *\n * @public\n */\nexport class MediaHelpers {\n\t/**\n\t * Load a video element from a URL with cross-origin support.\n\t *\n\t * @param src - The URL of the video to load\n\t * @returns Promise that resolves to the loaded HTMLVideoElement\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * console.log(`Video dimensions: ${video.videoWidth}x${video.videoHeight}`)\n\t * ```\n\t * @public\n\t */\n\tstatic loadVideo(src: string): Promise<HTMLVideoElement> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst video = document.createElement('video')\n\t\t\tvideo.onloadeddata = () => resolve(video)\n\t\t\tvideo.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load video'))\n\t\t\t}\n\t\t\tvideo.crossOrigin = 'anonymous'\n\t\t\tvideo.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Extract a frame from a video element as a data URL.\n\t *\n\t * @param video - The HTMLVideoElement to extract frame from\n\t * @param time - The time in seconds to extract the frame from (default: 0)\n\t * @returns Promise that resolves to a data URL of the video frame\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * const frameDataUrl = await MediaHelpers.getVideoFrameAsDataUrl(video, 5.0)\n\t * // Use frameDataUrl as image thumbnail\n\t * const img = document.createElement('img')\n\t * img.src = frameDataUrl\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoFrameAsDataUrl(video: HTMLVideoElement, time = 0): Promise<string> {\n\t\tconst promise = promiseWithResolve<string>()\n\t\tlet didSetTime = false\n\n\t\tconst onReadyStateChanged = () => {\n\t\t\tif (!didSetTime) {\n\t\t\t\tif (video.readyState >= video.HAVE_METADATA) {\n\t\t\t\t\tdidSetTime = true\n\t\t\t\t\tvideo.currentTime = time\n\t\t\t\t} else {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (video.readyState >= video.HAVE_CURRENT_DATA) {\n\t\t\t\tconst canvas = document.createElement('canvas')\n\t\t\t\tcanvas.width = video.videoWidth\n\t\t\t\tcanvas.height = video.videoHeight\n\t\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\t\tif (!ctx) {\n\t\t\t\t\tthrow new Error('Could not get 2d context')\n\t\t\t\t}\n\t\t\t\tctx.drawImage(video, 0, 0)\n\t\t\t\tpromise.resolve(canvas.toDataURL())\n\t\t\t}\n\t\t}\n\t\tconst onError = (e: Event) => {\n\t\t\tconsole.error(e)\n\t\t\tpromise.reject(new Error('Could not get video frame'))\n\t\t}\n\n\t\tvideo.addEventListener('loadedmetadata', onReadyStateChanged)\n\t\tvideo.addEventListener('loadeddata', onReadyStateChanged)\n\t\tvideo.addEventListener('canplay', onReadyStateChanged)\n\t\tvideo.addEventListener('seeked', onReadyStateChanged)\n\n\t\tvideo.addEventListener('error', onError)\n\t\tvideo.addEventListener('stalled', onError)\n\n\t\tonReadyStateChanged()\n\n\t\ttry {\n\t\t\treturn await promise\n\t\t} finally {\n\t\t\tvideo.removeEventListener('loadedmetadata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('loadeddata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('canplay', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('seeked', onReadyStateChanged)\n\n\t\t\tvideo.removeEventListener('error', onError)\n\t\t\tvideo.removeEventListener('stalled', onError)\n\t\t}\n\t}\n\n\t/**\n\t * Load an image from a URL and get its dimensions along with the image element.\n\t *\n\t * @param src - The URL of the image to load\n\t * @returns Promise that resolves to an object with width, height, and the image element\n\t * @example\n\t * ```ts\n\t * const { w, h, image } = await MediaHelpers.getImageAndDimensions('https://example.com/image.png')\n\t * console.log(`Image size: ${w}x${h}`)\n\t * // Image is ready to use\n\t * document.body.appendChild(image)\n\t * ```\n\t * @public\n\t */\n\tstatic getImageAndDimensions(\n\t\tsrc: string\n\t): Promise<{ w: number; h: number; image: HTMLImageElement }> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst img = Image()\n\t\t\timg.onload = () => {\n\t\t\t\tlet dimensions\n\t\t\t\tif (img.naturalWidth) {\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.naturalWidth,\n\t\t\t\t\t\th: img.naturalHeight,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Sigh, Firefox doesn't have naturalWidth or naturalHeight for SVGs. :-/\n\t\t\t\t\t// We have to attach to dom and use clientWidth/clientHeight.\n\t\t\t\t\tdocument.body.appendChild(img)\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.clientWidth,\n\t\t\t\t\t\th: img.clientHeight,\n\t\t\t\t\t}\n\t\t\t\t\tdocument.body.removeChild(img)\n\t\t\t\t}\n\t\t\t\tresolve({ ...dimensions, image: img })\n\t\t\t}\n\t\t\timg.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load image'))\n\t\t\t}\n\t\t\timg.crossOrigin = 'anonymous'\n\t\t\timg.referrerPolicy = 'strict-origin-when-cross-origin'\n\t\t\timg.style.visibility = 'hidden'\n\t\t\timg.style.position = 'absolute'\n\t\t\timg.style.opacity = '0'\n\t\t\timg.style.zIndex = '-9999'\n\t\t\timg.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of a video blob\n\t *\n\t * @param blob - A Blob containing the video\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'video.mp4', { type: 'video/mp4' })\n\t * const { w, h } = await MediaHelpers.getVideoSize(file)\n\t * console.log(`Video dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\treturn MediaHelpers.usingObjectURL(blob, async (url) => {\n\t\t\tconst video = await MediaHelpers.loadVideo(url)\n\t\t\treturn { w: video.videoWidth, h: video.videoHeight }\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of an image blob\n\t *\n\t * @param blob - A Blob containing the image\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'image.png', { type: 'image/png' })\n\t * const { w, h } = await MediaHelpers.getImageSize(file)\n\t * console.log(`Image dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getImageSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\tconst { w, h } = await MediaHelpers.usingObjectURL(blob, MediaHelpers.getImageAndDimensions)\n\n\t\ttry {\n\t\t\tif (blob.type === 'image/png') {\n\t\t\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\t\t\tif (PngHelpers.isPng(view, 0)) {\n\t\t\t\t\tconst physChunk = PngHelpers.findChunk(view, 'pHYs')\n\t\t\t\t\tif (physChunk) {\n\t\t\t\t\t\tconst physData = PngHelpers.parsePhys(view, physChunk.dataOffset)\n\t\t\t\t\t\tif (physData.unit === 1 && physData.ppux === physData.ppuy) {\n\t\t\t\t\t\t\t// Calculate pixels per meter:\n\t\t\t\t\t\t\t// - 1 inch = 0.0254 meters\n\t\t\t\t\t\t\t// - 72 DPI is 72 dots per inch\n\t\t\t\t\t\t\t// - pixels per meter = 72 / 0.0254\n\t\t\t\t\t\t\tconst pixelsPerMeter = 72 / 0.0254\n\t\t\t\t\t\t\tconst pixelRatio = Math.max(physData.ppux / pixelsPerMeter, 1)\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tw: Math.round(w / pixelRatio),\n\t\t\t\t\t\t\t\th: Math.round(h / pixelRatio),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(err)\n\t\t\treturn { w, h }\n\t\t}\n\t\treturn { w, h }\n\t}\n\n\t/**\n\t * Check if a media file blob contains animation data.\n\t *\n\t * @param file - The Blob to check for animation\n\t * @returns Promise that resolves to true if the file is animated, false otherwise\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'animation.gif', { type: 'image/gif' })\n\t * const animated = await MediaHelpers.isAnimated(file)\n\t * console.log(animated ? 'Animated' : 'Static')\n\t * ```\n\t * @public\n\t */\n\tstatic async isAnimated(file: Blob): Promise<boolean> {\n\t\tif (file.type === 'image/gif') {\n\t\t\treturn isGifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/avif') {\n\t\t\treturn isAvifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/webp') {\n\t\t\treturn isWebpAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/apng') {\n\t\t\treturn isApngAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\treturn false\n\t}\n\n\t/**\n\t * Check if a MIME type represents an animated image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is an animated image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isAnimated = MediaHelpers.isAnimatedImageType('image/gif')\n\t * console.log(isAnimated) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isAnimatedImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a static (non-animated) image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a static image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isStatic = MediaHelpers.isStaticImageType('image/jpeg')\n\t * console.log(isStatic) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isStaticImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a vector image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a vector image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isVector = MediaHelpers.isVectorImageType('image/svg+xml')\n\t * console.log(isVector) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isVectorImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents any supported image format (static, animated, or vector).\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a supported image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isImage = MediaHelpers.isImageType('image/png')\n\t * console.log(isImage) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isImageType(mimeType: string): boolean {\n\t\treturn DEFAULT_SUPPORTED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Utility function to create an object URL from a blob, execute a function with it, and automatically clean it up.\n\t *\n\t * @param blob - The Blob to create an object URL for\n\t * @param fn - Function to execute with the object URL\n\t * @returns Promise that resolves to the result of the function\n\t * @example\n\t * ```ts\n\t * const result = await MediaHelpers.usingObjectURL(imageBlob, async (url) => {\n\t *   const { w, h } = await MediaHelpers.getImageAndDimensions(url)\n\t *   return { width: w, height: h }\n\t * })\n\t * // Object URL is automatically revoked after function completes\n\t * console.log(`Image dimensions: ${result.width}x${result.height}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async usingObjectURL<T>(blob: Blob, fn: (url: string) => Promise<T>): Promise<T> {\n\t\tconst url = URL.createObjectURL(blob)\n\t\ttry {\n\t\t\treturn await fn(url)\n\t\t} finally {\n\t\t\tURL.revokeObjectURL(url)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { promiseWithResolve } from '../control'\nimport { Image } from '../network'\nimport { isApngAnimated } from './apng'\nimport { isAvifAnimated } from './avif'\nimport { isGifAnimated } from './gif'\nimport { PngHelpers } from './png'\nimport { isWebpAnimated } from './webp'\n\n/**\n * Array of supported vector image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSvg = DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes('image/svg+xml')\n * console.log(isSvg) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES = Object.freeze(['image/svg+xml' as const])\n/**\n * Array of supported static (non-animated) image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isStatic = DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes('image/jpeg')\n * console.log(isStatic) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES = Object.freeze([\n\t'image/jpeg' as const,\n\t'image/png' as const,\n\t'image/webp' as const,\n])\n/**\n * Array of supported animated image MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isAnimated = DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes('image/gif')\n * console.log(isAnimated) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES = Object.freeze([\n\t'image/gif' as const,\n\t'image/apng' as const,\n\t'image/avif' as const,\n])\n/**\n * Array of all supported image MIME types, combining static, vector, and animated types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_IMAGE_TYPES } from '@tldraw/utils'\n *\n * const isSupported = DEFAULT_SUPPORTED_IMAGE_TYPES.includes('image/png')\n * console.log(isSupported) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_IMAGE_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES,\n\t...DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES,\n])\n/**\n * Array of supported video MIME types.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORT_VIDEO_TYPES } from '@tldraw/utils'\n *\n * const isVideo = DEFAULT_SUPPORT_VIDEO_TYPES.includes('video/mp4')\n * console.log(isVideo) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORT_VIDEO_TYPES = Object.freeze([\n\t'video/mp4' as const,\n\t'video/webm' as const,\n\t'video/quicktime' as const,\n])\n/**\n * Array of all supported media MIME types, combining images and videos.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPES } from '@tldraw/utils'\n *\n * const isMediaFile = DEFAULT_SUPPORTED_MEDIA_TYPES.includes('video/mp4')\n * console.log(isMediaFile) // true\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPES = Object.freeze([\n\t...DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t...DEFAULT_SUPPORT_VIDEO_TYPES,\n])\n/**\n * Comma-separated string of all supported media MIME types, useful for HTML file input accept attributes.\n *\n * @example\n * ```ts\n * import { DEFAULT_SUPPORTED_MEDIA_TYPE_LIST } from '@tldraw/utils'\n *\n * // Use in HTML file input for media uploads\n * const input = document.createElement('input')\n * input.type = 'file'\n * input.accept = DEFAULT_SUPPORTED_MEDIA_TYPE_LIST\n * input.addEventListener('change', (e) => {\n *   const files = (e.target as HTMLInputElement).files\n *   if (files) console.log(`Selected ${files.length} file(s)`)\n * })\n * ```\n * @public\n */\nexport const DEFAULT_SUPPORTED_MEDIA_TYPE_LIST = DEFAULT_SUPPORTED_MEDIA_TYPES.join(',')\n\n/**\n * Helpers for media\n *\n * @public\n */\nexport class MediaHelpers {\n\t/**\n\t * Load a video element from a URL with cross-origin support.\n\t *\n\t * @param src - The URL of the video to load\n\t * @returns Promise that resolves to the loaded HTMLVideoElement\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * console.log(`Video dimensions: ${video.videoWidth}x${video.videoHeight}`)\n\t * ```\n\t * @public\n\t */\n\tstatic loadVideo(src: string): Promise<HTMLVideoElement> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst video = document.createElement('video')\n\t\t\tvideo.onloadeddata = () => resolve(video)\n\t\t\tvideo.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load video'))\n\t\t\t}\n\t\t\tvideo.crossOrigin = 'anonymous'\n\t\t\tvideo.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Extract a frame from a video element as a data URL.\n\t *\n\t * @param video - The HTMLVideoElement to extract frame from\n\t * @param time - The time in seconds to extract the frame from (default: 0)\n\t * @returns Promise that resolves to a data URL of the video frame\n\t * @example\n\t * ```ts\n\t * const video = await MediaHelpers.loadVideo('https://example.com/video.mp4')\n\t * const frameDataUrl = await MediaHelpers.getVideoFrameAsDataUrl(video, 5.0)\n\t * // Use frameDataUrl as image thumbnail\n\t * const img = document.createElement('img')\n\t * img.src = frameDataUrl\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoFrameAsDataUrl(video: HTMLVideoElement, time = 0): Promise<string> {\n\t\tconst promise = promiseWithResolve<string>()\n\t\tlet didSetTime = false\n\n\t\tconst onReadyStateChanged = () => {\n\t\t\tif (!didSetTime) {\n\t\t\t\tif (video.readyState >= video.HAVE_METADATA) {\n\t\t\t\t\tdidSetTime = true\n\t\t\t\t\tvideo.currentTime = time\n\t\t\t\t} else {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (video.readyState >= video.HAVE_CURRENT_DATA) {\n\t\t\t\tconst canvas = document.createElement('canvas')\n\t\t\t\tcanvas.width = video.videoWidth\n\t\t\t\tcanvas.height = video.videoHeight\n\t\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\t\tif (!ctx) {\n\t\t\t\t\tthrow new Error('Could not get 2d context')\n\t\t\t\t}\n\t\t\t\tctx.drawImage(video, 0, 0)\n\t\t\t\tpromise.resolve(canvas.toDataURL())\n\t\t\t}\n\t\t}\n\t\tconst onError = (e: Event) => {\n\t\t\tconsole.error(e)\n\t\t\tpromise.reject(new Error('Could not get video frame'))\n\t\t}\n\n\t\tvideo.addEventListener('loadedmetadata', onReadyStateChanged)\n\t\tvideo.addEventListener('loadeddata', onReadyStateChanged)\n\t\tvideo.addEventListener('canplay', onReadyStateChanged)\n\t\tvideo.addEventListener('seeked', onReadyStateChanged)\n\n\t\tvideo.addEventListener('error', onError)\n\t\tvideo.addEventListener('stalled', onError)\n\n\t\tonReadyStateChanged()\n\n\t\ttry {\n\t\t\treturn await promise\n\t\t} finally {\n\t\t\tvideo.removeEventListener('loadedmetadata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('loadeddata', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('canplay', onReadyStateChanged)\n\t\t\tvideo.removeEventListener('seeked', onReadyStateChanged)\n\n\t\t\tvideo.removeEventListener('error', onError)\n\t\t\tvideo.removeEventListener('stalled', onError)\n\t\t}\n\t}\n\n\t/**\n\t * Load an image from a URL and get its dimensions along with the image element.\n\t *\n\t * @param src - The URL of the image to load\n\t * @returns Promise that resolves to an object with width, height, and the image element\n\t * @example\n\t * ```ts\n\t * const { w, h, image } = await MediaHelpers.getImageAndDimensions('https://example.com/image.png')\n\t * console.log(`Image size: ${w}x${h}`)\n\t * // Image is ready to use\n\t * document.body.appendChild(image)\n\t * ```\n\t * @public\n\t */\n\tstatic getImageAndDimensions(\n\t\tsrc: string\n\t): Promise<{ w: number; h: number; image: HTMLImageElement }> {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst img = Image()\n\t\t\timg.onload = () => {\n\t\t\t\tlet dimensions\n\t\t\t\tif (img.naturalWidth) {\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.naturalWidth,\n\t\t\t\t\t\th: img.naturalHeight,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Sigh, Firefox doesn't have naturalWidth or naturalHeight for SVGs. :-/\n\t\t\t\t\t// We have to attach to dom and use clientWidth/clientHeight.\n\t\t\t\t\tdocument.body.appendChild(img)\n\t\t\t\t\tdimensions = {\n\t\t\t\t\t\tw: img.clientWidth,\n\t\t\t\t\t\th: img.clientHeight,\n\t\t\t\t\t}\n\t\t\t\t\tdocument.body.removeChild(img)\n\t\t\t\t}\n\t\t\t\tresolve({ ...dimensions, image: img })\n\t\t\t}\n\t\t\timg.onerror = (e) => {\n\t\t\t\tconsole.error(e)\n\t\t\t\treject(new Error('Could not load image'))\n\t\t\t}\n\t\t\timg.crossOrigin = 'anonymous'\n\t\t\timg.referrerPolicy = 'strict-origin-when-cross-origin'\n\t\t\timg.style.visibility = 'hidden'\n\t\t\timg.style.position = 'absolute'\n\t\t\timg.style.opacity = '0'\n\t\t\timg.style.zIndex = '-9999'\n\t\t\timg.src = src\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of a video blob\n\t *\n\t * @param blob - A Blob containing the video\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'video.mp4', { type: 'video/mp4' })\n\t * const { w, h } = await MediaHelpers.getVideoSize(file)\n\t * console.log(`Video dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getVideoSize(blob: Blob): Promise<{ w: number; h: number }> {\n\t\treturn MediaHelpers.usingObjectURL(blob, async (url) => {\n\t\t\tconst video = await MediaHelpers.loadVideo(url)\n\t\t\treturn { w: video.videoWidth, h: video.videoHeight }\n\t\t})\n\t}\n\n\t/**\n\t * Get the size of an image blob\n\t *\n\t * @param blob - A Blob containing the image\n\t * @returns Promise that resolves to an object with width and height properties\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'image.png', { type: 'image/png' })\n\t * const { w, h } = await MediaHelpers.getImageSize(file)\n\t * console.log(`Image dimensions: ${w}x${h}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async getImageSize(blob: Blob): Promise<{ w: number; h: number; pixelRatio: number }> {\n\t\tconst { w, h } = await MediaHelpers.usingObjectURL(blob, MediaHelpers.getImageAndDimensions)\n\n\t\ttry {\n\t\t\tif (blob.type === 'image/png') {\n\t\t\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\t\t\tif (PngHelpers.isPng(view, 0)) {\n\t\t\t\t\tconst physChunk = PngHelpers.findChunk(view, 'pHYs')\n\t\t\t\t\tif (physChunk) {\n\t\t\t\t\t\tconst physData = PngHelpers.parsePhys(view, physChunk.dataOffset)\n\t\t\t\t\t\tif (physData.unit === 1 && physData.ppux === physData.ppuy) {\n\t\t\t\t\t\t\tconst dpi = Math.round(physData.ppux * 0.0254)\n\t\t\t\t\t\t\t// Try both standard baselines: Windows/web = 96, macOS = 72.\n\t\t\t\t\t\t\t// Pick whichever yields a clean integer ratio > 1.\n\t\t\t\t\t\t\tconst r96 = dpi / 96\n\t\t\t\t\t\t\tconst r72 = dpi / 72\n\t\t\t\t\t\t\tlet pixelRatio = 1\n\t\t\t\t\t\t\tif (Number.isInteger(r96) && r96 > 1) {\n\t\t\t\t\t\t\t\tpixelRatio = r96\n\t\t\t\t\t\t\t} else if (Number.isInteger(r72) && r72 > 1) {\n\t\t\t\t\t\t\t\tpixelRatio = r72\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (pixelRatio > 1) {\n\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\tw: Math.ceil(w / pixelRatio),\n\t\t\t\t\t\t\t\t\th: Math.ceil(h / pixelRatio),\n\t\t\t\t\t\t\t\t\tpixelRatio,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(err)\n\t\t\treturn { w, h, pixelRatio: 1 }\n\t\t}\n\t\treturn { w, h, pixelRatio: 1 }\n\t}\n\n\t/**\n\t * Check if a media file blob contains animation data.\n\t *\n\t * @param file - The Blob to check for animation\n\t * @returns Promise that resolves to true if the file is animated, false otherwise\n\t * @example\n\t * ```ts\n\t * const file = new File([...], 'animation.gif', { type: 'image/gif' })\n\t * const animated = await MediaHelpers.isAnimated(file)\n\t * console.log(animated ? 'Animated' : 'Static')\n\t * ```\n\t * @public\n\t */\n\tstatic async isAnimated(file: Blob): Promise<boolean> {\n\t\tif (file.type === 'image/gif') {\n\t\t\treturn isGifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/avif') {\n\t\t\treturn isAvifAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/webp') {\n\t\t\treturn isWebpAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\tif (file.type === 'image/apng') {\n\t\t\treturn isApngAnimated(await file.arrayBuffer())\n\t\t}\n\n\t\treturn false\n\t}\n\n\t/**\n\t * Check if a MIME type represents an animated image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is an animated image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isAnimated = MediaHelpers.isAnimatedImageType('image/gif')\n\t * console.log(isAnimated) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isAnimatedImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_ANIMATED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a static (non-animated) image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a static image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isStatic = MediaHelpers.isStaticImageType('image/jpeg')\n\t * console.log(isStatic) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isStaticImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents a vector image format.\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a vector image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isVector = MediaHelpers.isVectorImageType('image/svg+xml')\n\t * console.log(isVector) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isVectorImageType(mimeType: string | null): boolean {\n\t\treturn DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Check if a MIME type represents any supported image format (static, animated, or vector).\n\t *\n\t * @param mimeType - The MIME type to check\n\t * @returns True if the MIME type is a supported image format, false otherwise\n\t * @example\n\t * ```ts\n\t * const isImage = MediaHelpers.isImageType('image/png')\n\t * console.log(isImage) // true\n\t * ```\n\t * @public\n\t */\n\tstatic isImageType(mimeType: string): boolean {\n\t\treturn DEFAULT_SUPPORTED_IMAGE_TYPES.includes((mimeType as any) || '')\n\t}\n\n\t/**\n\t * Utility function to create an object URL from a blob, execute a function with it, and automatically clean it up.\n\t *\n\t * @param blob - The Blob to create an object URL for\n\t * @param fn - Function to execute with the object URL\n\t * @returns Promise that resolves to the result of the function\n\t * @example\n\t * ```ts\n\t * const result = await MediaHelpers.usingObjectURL(imageBlob, async (url) => {\n\t *   const { w, h } = await MediaHelpers.getImageAndDimensions(url)\n\t *   return { width: w, height: h }\n\t * })\n\t * // Object URL is automatically revoked after function completes\n\t * console.log(`Image dimensions: ${result.width}x${result.height}`)\n\t * ```\n\t * @public\n\t */\n\tstatic async usingObjectURL<T>(blob: Blob, fn: (url: string) => Promise<T>): Promise<T> {\n\t\tconst url = URL.createObjectURL(blob)\n\t\ttry {\n\t\t\treturn await fn(url)\n\t\t} finally {\n\t\t\tURL.revokeObjectURL(url)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/utils",
   "description": "tldraw infinite canvas SDK (private utilities).",
-  "version": "4.5.0-canary.bcdd9cbff7ae",
+  "version": "4.5.0-canary.bf934d531d1e",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"

package/src/lib/media/media.ts

@@ -309,7 +309,7 @@ export class MediaHelpers {
 	 * ```
 	 * @public
 	 */
-	static async getImageSize(blob: Blob): Promise<{ w: number; h: number }> {
+	static async getImageSize(blob: Blob): Promise<{ w: number; h: number; pixelRatio: number }> {
 		const { w, h } = await MediaHelpers.usingObjectURL(blob, MediaHelpers.getImageAndDimensions)
 
 		try {
@@ -320,15 +320,23 @@ export class MediaHelpers {
 					if (physChunk) {
 						const physData = PngHelpers.parsePhys(view, physChunk.dataOffset)
 						if (physData.unit === 1 && physData.ppux === physData.ppuy) {
-							// Calculate pixels per meter:
-							// - 1 inch = 0.0254 meters
-							// - 72 DPI is 72 dots per inch
-							// - pixels per meter = 72 / 0.0254
-							const pixelsPerMeter = 72 / 0.0254
-							const pixelRatio = Math.max(physData.ppux / pixelsPerMeter, 1)
-							return {
-								w: Math.round(w / pixelRatio),
-								h: Math.round(h / pixelRatio),
+							const dpi = Math.round(physData.ppux * 0.0254)
+							// Try both standard baselines: Windows/web = 96, macOS = 72.
+							// Pick whichever yields a clean integer ratio > 1.
+							const r96 = dpi / 96
+							const r72 = dpi / 72
+							let pixelRatio = 1
+							if (Number.isInteger(r96) && r96 > 1) {
+								pixelRatio = r96
+							} else if (Number.isInteger(r72) && r72 > 1) {
+								pixelRatio = r72
+							}
+							if (pixelRatio > 1) {
+								return {
+									w: Math.ceil(w / pixelRatio),
+									h: Math.ceil(h / pixelRatio),
+									pixelRatio,
+								}
 							}
 						}
 					}
@@ -336,9 +344,9 @@ export class MediaHelpers {
 			}
 		} catch (err) {
 			console.error(err)
-			return { w, h }
+			return { w, h, pixelRatio: 1 }
 		}
-		return { w, h }
+		return { w, h, pixelRatio: 1 }
 	}
 
 	/**