ugly-app 0.1.901 → 0.1.902

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.901";
+export declare const CLI_VERSION = "0.1.902";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.901";
+export const CLI_VERSION = "0.1.902";
 //# sourceMappingURL=version.js.map

package/dist/client/components/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/client/components/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,+DAA+D;AAC/D,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AASD,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,UAAoB,EACpB,GAAQ,EACR,SAAc,EACd,KAAK,GACN,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAalC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/client/components/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,+DAA+D;AAC/D,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AASD,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,UAAoB,EACpB,GAAQ,EACR,SAAc,EACd,KAAK,GACN,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAclC"}

package/dist/client/components/Image.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { crossOriginProps } from './crossOriginProps.js';
 const objectFitMap = {
     contain: 'contain',
     cover: 'cover',
@@ -11,6 +12,6 @@ export function Image({ src, resizeMode = 'cover', alt = '', className = '', sty
     const url = typeof src === 'string' ? src : src?.url;
     if (!url)
         return null;
-    return (_jsx("img", { src: url, alt: alt, className: className, style: { objectFit: objectFitMap[resizeMode], ...style } }));
+    return (_jsx("img", { src: url, alt: alt, className: className, ...crossOriginProps(url), style: { objectFit: objectFitMap[resizeMode], ...style } }));
 }
 //# sourceMappingURL=Image.js.map

package/dist/client/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/client/components/Image.tsx"],"names":[],"mappings":";AAsBA,MAAM,YAAY,GAAmD;IACnE,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EACpB,GAAG,EACH,UAAU,GAAG,OAAO,EACpB,GAAG,GAAG,EAAE,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACM;IACX,2EAA2E;IAC3E,oFAAoF;IACpF,MAAM,GAAG,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;IACrD,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,GACxD,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/client/components/Image.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAsBzD,MAAM,YAAY,GAAmD;IACnE,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EACpB,GAAG,EACH,UAAU,GAAG,OAAO,EACpB,GAAG,GAAG,EAAE,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACM;IACX,2EAA2E;IAC3E,oFAAoF;IACpF,MAAM,GAAG,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;IACrD,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,KAChB,gBAAgB,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,GACxD,CACH,CAAC;AACJ,CAAC"}

package/dist/client/components/UserImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserImage.d.ts","sourceRoot":"","sources":["../../../src/client/components/UserImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,CACN;IACC,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,YAAY,CA8B/B"}
+{"version":3,"file":"UserImage.d.ts","sourceRoot":"","sources":["../../../src/client/components/UserImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,CACN;IACC,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,YAAY,CAyC/B"}

package/dist/client/components/UserImage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCachedDoc } from '../cachedDoc.js';
+import { crossOriginProps } from './crossOriginProps.js';
 /**
  * Renders a user's avatar. Resolves through the framework's getter-backed
  * `userPublic` collection (cached client-side). When no avatar is available,
@@ -23,6 +24,9 @@ export function UserImage({ userId, size = 32, style, ...rest }) {
                 display: 'inline-block',
             } }));
     }
-    return _jsx("img", { src: src, style: boxStyle, alt: "", ...rest });
+    // crossOriginProps: user avatars live on blob.ugly.bot, which sends CORS but
+    // not CORP — without opting into CORS they are blocked outright on any
+    // cross-origin-isolated (COEP require-corp) page. See crossOriginProps.ts.
+    return (_jsx("img", { src: src, style: boxStyle, alt: "", ...crossOriginProps(src), ...rest }));
 }
 //# sourceMappingURL=UserImage.js.map

package/dist/client/components/UserImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserImage.js","sourceRoot":"","sources":["../../../src/client/components/UserImage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAY/C;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,IAAI,EACQ;IACf,MAAM,OAAO,GAAG,YAAY,CAC1B,YAAY,EACZ,MAAM,CACP,CAAC;IACF,MAAM,GAAG,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;IAE5C,MAAM,QAAQ,GAAkB;QAC9B,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,CAAC;QACb,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,CACL,6BACc,MAAM,EAClB,KAAK,EAAE;gBACL,GAAG,QAAQ;gBACX,UAAU,EAAE,+BAA+B;gBAC3C,OAAO,EAAE,cAAc;aACxB,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,EAAE,KAAK,IAAI,GAAI,CAAC;AAC7D,CAAC"}
+{"version":3,"file":"UserImage.js","sourceRoot":"","sources":["../../../src/client/components/UserImage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAYzD;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,IAAI,EACQ;IACf,MAAM,OAAO,GAAG,YAAY,CAC1B,YAAY,EACZ,MAAM,CACP,CAAC;IACF,MAAM,GAAG,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;IAE5C,MAAM,QAAQ,GAAkB;QAC9B,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,CAAC;QACb,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,CACL,6BACc,MAAM,EAClB,KAAK,EAAE;gBACL,GAAG,QAAQ;gBACX,UAAU,EAAE,+BAA+B;gBAC3C,OAAO,EAAE,cAAc;aACxB,GACD,CACH,CAAC;IACJ,CAAC;IAED,6EAA6E;IAC7E,uEAAuE;IACvE,2EAA2E;IAC3E,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,QAAQ,EACf,GAAG,EAAC,EAAE,KACF,gBAAgB,CAAC,GAAG,CAAC,KACrB,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/client/components/crossOriginProps.d.ts

@@ -0,0 +1,6 @@
+/** `crossOrigin`/`referrerPolicy` props for an <img>, or `{}` when same-origin. */
+export declare function crossOriginProps(url: string): {
+    crossOrigin?: 'anonymous';
+    referrerPolicy?: 'no-referrer';
+};
+//# sourceMappingURL=crossOriginProps.d.ts.map

package/dist/client/components/crossOriginProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crossOriginProps.d.ts","sourceRoot":"","sources":["../../../src/client/components/crossOriginProps.ts"],"names":[],"mappings":"AA0BA,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG;IAC7C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,CAYA"}

package/dist/client/components/crossOriginProps.js

@@ -0,0 +1,44 @@
+// Cross-origin media under COEP `require-corp`.
+//
+// Apps that enable cross-origin isolation (needed for SharedArrayBuffer) send
+// `Cross-Origin-Embedder-Policy: require-corp`. Under that policy the browser
+// BLOCKS every cross-origin subresource unless one of two things is true:
+//
+//   1. the response carries `Cross-Origin-Resource-Policy: cross-origin`, or
+//   2. the element opts into CORS (`crossorigin`) AND the response carries
+//      permissive CORS headers.
+//
+// `blob.ugly.bot` (the R2 custom domain serving user avatars and generated
+// media) sends `Access-Control-Allow-Origin: *` but NOT `Cross-Origin-Resource-
+// Policy` — CORP is not expressible through R2's bucket CORS config. So a plain
+// `<img src="https://blob.ugly.bot/…">` on a cross-origin-isolated page is
+// blocked and renders as a broken image. In prod this silently ate user avatars
+// on ugly.chat (reported as "Icon don't appear properly"); the request itself is
+// a perfectly healthy 200 image/webp, which is why it never looked like a server
+// problem.
+//
+// Opting into CORS satisfies condition 2 using the headers blob.ugly.bot
+// already sends, so this needs no infrastructure change.
+//
+// Only applied to cross-origin URLs: adding `crossorigin` to a same-origin image
+// is unnecessary, and on a server that does not emit CORS headers it would turn
+// a working image into a broken one.
+/** `crossOrigin`/`referrerPolicy` props for an <img>, or `{}` when same-origin. */
+export function crossOriginProps(url) {
+    // Relative URLs and data:/blob: are same-origin by construction.
+    if (!/^https?:\/\//i.test(url))
+        return {};
+    try {
+        if (typeof window === 'undefined')
+            return {};
+        if (new URL(url).origin === window.location.origin)
+            return {};
+    }
+    catch {
+        return {};
+    }
+    // `no-referrer` keeps the CORS preflight-free request cacheable and avoids
+    // leaking the current page path to the media host.
+    return { crossOrigin: 'anonymous', referrerPolicy: 'no-referrer' };
+}
+//# sourceMappingURL=crossOriginProps.js.map

package/dist/client/components/crossOriginProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crossOriginProps.js","sourceRoot":"","sources":["../../../src/client/components/crossOriginProps.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,0EAA0E;AAC1E,EAAE;AACF,6EAA6E;AAC7E,2EAA2E;AAC3E,gCAAgC;AAChC,EAAE;AACF,2EAA2E;AAC3E,gFAAgF;AAChF,gFAAgF;AAChF,2EAA2E;AAC3E,gFAAgF;AAChF,iFAAiF;AACjF,iFAAiF;AACjF,WAAW;AACX,EAAE;AACF,yEAAyE;AACzE,yDAAyD;AACzD,EAAE;AACF,iFAAiF;AACjF,gFAAgF;AAChF,qCAAqC;AAErC,mFAAmF;AACnF,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAI1C,iEAAiE;IACjE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,EAAE,CAAC;IAC1C,IAAI,CAAC;QACH,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,EAAE,CAAC;QAC7C,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;IAChE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,2EAA2E;IAC3E,mDAAmD;IACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;AACrE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ugly-app",
   "packageManager": "pnpm@10.34.5",
-  "version": "0.1.901",
+  "version": "0.1.902",
   "type": "module",
   "comment:files": "Allowlist what ships to npm. dist = runtime; src = sourcemap targets (dist/*.js.map reference ../../src/); templates = CLI scaffold. Everything else at repo root (.pgdata local Postgres, coverage, assets/icons sources, test/, test-results/) is excluded by omission. The !negations strip the scaffold's installed deps + cruft (templates/node_modules is 200MB+ and must never ship). package.json/README/LICENSE ship automatically.",
   "files": [

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.901";
+export const CLI_VERSION = "0.1.902";

package/src/client/components/Image.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactElement } from 'react';
+import { crossOriginProps } from './crossOriginProps.js';
 
 /** Minimal image result — compatible with app's ImageResult */
 export interface ImageSource {
@@ -43,6 +44,7 @@ export function Image({
       src={url}
       alt={alt}
       className={className}
+      {...crossOriginProps(url)}
       style={{ objectFit: objectFitMap[resizeMode], ...style }}
     />
   );

package/src/client/components/UserImage.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ImgHTMLAttributes, ReactElement } from 'react';
 import { useCachedDoc } from '../cachedDoc.js';
+import { crossOriginProps } from './crossOriginProps.js';
 
 export interface UserImageProps extends Omit<
   ImgHTMLAttributes<HTMLImageElement>,
@@ -50,5 +51,16 @@ export function UserImage({
     );
   }
 
-  return <img src={src} style={boxStyle} alt="" {...rest} />;
+  // crossOriginProps: user avatars live on blob.ugly.bot, which sends CORS but
+  // not CORP — without opting into CORS they are blocked outright on any
+  // cross-origin-isolated (COEP require-corp) page. See crossOriginProps.ts.
+  return (
+    <img
+      src={src}
+      style={boxStyle}
+      alt=""
+      {...crossOriginProps(src)}
+      {...rest}
+    />
+  );
 }

package/src/client/components/crossOriginProps.test.ts

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+//
+// Getting this wrong in either direction breaks images:
+//   - omitting `crossorigin` on a cross-origin URL leaves it blocked under COEP
+//   - adding it to a same-origin URL (or a host without CORS headers) turns a
+//     working image into a broken one
+// so both directions are pinned.
+import { describe, it, expect } from 'vitest';
+import { crossOriginProps } from './crossOriginProps.js';
+
+describe('crossOriginProps', () => {
+  it('opts a cross-origin image into CORS so COEP require-corp allows it', () => {
+    expect(crossOriginProps('https://blob.ugly.bot/user/abc/def.webp')).toEqual(
+      { crossOrigin: 'anonymous', referrerPolicy: 'no-referrer' },
+    );
+  });
+
+  it('leaves same-origin images alone', () => {
+    expect(crossOriginProps(`${window.location.origin}/logo.png`)).toEqual({});
+  });
+
+  it('leaves relative URLs alone', () => {
+    expect(crossOriginProps('/assets/logo.png')).toEqual({});
+    expect(crossOriginProps('logo.png')).toEqual({});
+  });
+
+  it('leaves data: and blob: URLs alone', () => {
+    expect(crossOriginProps('data:image/png;base64,iVBORw0KGgo=')).toEqual({});
+    expect(crossOriginProps('blob:https://example.com/abc-123')).toEqual({});
+  });
+
+  it('does not throw on a malformed URL', () => {
+    expect(crossOriginProps('https://')).toEqual({});
+  });
+});

package/src/client/components/crossOriginProps.ts

@@ -0,0 +1,43 @@
+// Cross-origin media under COEP `require-corp`.
+//
+// Apps that enable cross-origin isolation (needed for SharedArrayBuffer) send
+// `Cross-Origin-Embedder-Policy: require-corp`. Under that policy the browser
+// BLOCKS every cross-origin subresource unless one of two things is true:
+//
+//   1. the response carries `Cross-Origin-Resource-Policy: cross-origin`, or
+//   2. the element opts into CORS (`crossorigin`) AND the response carries
+//      permissive CORS headers.
+//
+// `blob.ugly.bot` (the R2 custom domain serving user avatars and generated
+// media) sends `Access-Control-Allow-Origin: *` but NOT `Cross-Origin-Resource-
+// Policy` — CORP is not expressible through R2's bucket CORS config. So a plain
+// `<img src="https://blob.ugly.bot/…">` on a cross-origin-isolated page is
+// blocked and renders as a broken image. In prod this silently ate user avatars
+// on ugly.chat (reported as "Icon don't appear properly"); the request itself is
+// a perfectly healthy 200 image/webp, which is why it never looked like a server
+// problem.
+//
+// Opting into CORS satisfies condition 2 using the headers blob.ugly.bot
+// already sends, so this needs no infrastructure change.
+//
+// Only applied to cross-origin URLs: adding `crossorigin` to a same-origin image
+// is unnecessary, and on a server that does not emit CORS headers it would turn
+// a working image into a broken one.
+
+/** `crossOrigin`/`referrerPolicy` props for an <img>, or `{}` when same-origin. */
+export function crossOriginProps(url: string): {
+  crossOrigin?: 'anonymous';
+  referrerPolicy?: 'no-referrer';
+} {
+  // Relative URLs and data:/blob: are same-origin by construction.
+  if (!/^https?:\/\//i.test(url)) return {};
+  try {
+    if (typeof window === 'undefined') return {};
+    if (new URL(url).origin === window.location.origin) return {};
+  } catch {
+    return {};
+  }
+  // `no-referrer` keeps the CORS preflight-free request cacheable and avoids
+  // leaking the current page path to the media host.
+  return { crossOrigin: 'anonymous', referrerPolicy: 'no-referrer' };
+}