sanity-plugin-r2-video 0.1.0 → 0.1.1

package/README.md

@@ -1,12 +1,13 @@
 # sanity-plugin-r2-video
 
-Video for Sanity Studio, stored in Cloudflare R2 as a ladder of plain MP4s.
+Video for Sanity Studio. Encodes in the browser, stores plain MP4s in Cloudflare
+R2.
 
-Encoding happens **in the browser** with [mediabunny](https://mediabunny.dev) —
-WebCodecs, in a Web Worker. Each source becomes one MP4 per rendition tier, and
-the first frame is uploaded to Sanity as a native image, so posters get the
-Sanity CDN, `srcset`, `auto=format` and LQIP for free. A rendition is picked
-once at load from the element's size, and never swapped.
+Encoding runs on the editor's machine through [mediabunny](https://mediabunny.dev),
+using WebCodecs in a Web Worker. One MP4 comes out per height you ask for. The
+first frame is uploaded to Sanity as an ordinary image, so posters get the Sanity
+CDN, `srcset`, `auto=format` and LQIP without any extra work. Players pick one
+rendition when they load and keep it.
 
 ## Installing
 
@@ -18,7 +19,8 @@ pnpm add sanity-plugin-r2-video
 `styled-components` are peer dependencies. `mediabunny` is the only real
 dependency.
 
-Then add the plugin, and a Worker for it to talk to:
+Add the plugin, pointing it at a Worker you've deployed (see [Setting up a
+Worker](#setting-up-a-worker)):
 
 ```ts
 // sanity.config.ts
@@ -29,31 +31,99 @@ export default defineConfig({
     r2Video({
       endpointUrl: "https://….workers.dev",  // deployed Worker
       token: "…",                            // matches the Worker's UPLOAD_TOKEN
-      bucketUrl: "https://….r2.dev",         // origin renditions are served from
+      bucketUrl: "https://….r2.dev",         // where renditions are served from
     }),
   ],
 });
 ```
 
+That registers two schema types and a tool. Add video to a document with the
+`r2Video` type:
+
+```ts
+defineField({ name: "video", title: "Video", type: "r2Video" })
+```
+
 ## Using it
 
-Everything happens in the **R2 Video** tool in the Studio.
+Videos live in the **R2 Video** tool.
 
-**Upload** — drop files onto the library, or press Upload. Files stage in a
-list first; nothing encodes until you confirm.
+**Upload** — drop files onto the library, or press Upload. Files stage in a list
+first and nothing encodes until you confirm.
 
-**Settings** — collapsed by default. Open it to change the folder, keep audio,
-or adjust quality for this batch only. **Preview** encodes just the tallest tier,
-so you can see the size and quality those settings produce before committing.
+**Settings** — collapsed by default. Open it to change the folder, keep audio, or
+adjust quality for one batch. **Preview** encodes only the tallest tier, so you
+can check size and quality before running the whole ladder.
 
-**Details** — click a card. Plays the video, lists every rendition with its
-size, and lets you rename it, move it to another folder, or delete it.
+**Details** — click a card to play the video and see every rendition with its
+size. Rename it, move it to another folder, or delete it from here.
 
-**Sync** — beside Upload. Compares the bucket against the library and offers to
+**Sync** — next to Upload. Compares the bucket against the library and offers to
 remove anything no document points at.
 
-In a document, add a video through any `asset` field: pick one from the library,
-or upload without leaving the page.
+Inside a document, an `r2Video` field lets you pick from the library or upload
+without leaving the page.
+
+## What you get back
+
+An `r2Video` field stores a reference and nothing else, so the same video can be
+used on many documents without encoding it twice:
+
+```json
+{ "_type": "r2Video", "asset": { "_type": "reference", "_ref": "hK3n…" } }
+```
+
+Follow the reference and you get an `r2Video.asset` document. It holds metadata
+only. The MP4s are in R2 and the poster is a normal Sanity image asset:
+
+```ts
+type R2VideoAsset = {
+  _id: string;
+  _type: "r2Video.asset";
+  filename: string;                       // display name, safe to change
+  folder?: { _type: "reference"; _ref: string };
+  poster: { _type: "image"; asset: { _type: "reference"; _ref: string } };
+  duration: number;                        // seconds
+  hasAudio: boolean;
+  uploadedAt: string;                      // ISO 8601
+  renditions: {
+    width: number;
+    height: number;
+    key: string;                           // R2 object key, e.g. "j6w3wy2bd0jq/720.mp4"
+    size: number;                          // bytes
+  }[];
+};
+```
+
+Every type here is exported from `sanity-plugin-r2-video/studio`.
+
+A rendition's `key` is the whole story for playback. Join it to your `bucketUrl`
+and you have a source URL:
+
+```ts
+const src = `${bucketUrl}/${rendition.key}`;
+```
+
+`renditions` only ever contains heights that were actually encoded. A 480p source
+never produces a 1080p entry, so you can pick from this array without checking
+whether a tier exists.
+
+If you'd rather store the video's id than a list of keys, take it off any key and
+rebuild the rest with `resolveRenditionPath`. Keys are `<id>/<height>.mp4`, so the
+id is the part before the slash:
+
+```ts
+import { resolveRenditionPath } from "sanity-plugin-r2-video/storage";
+
+const src = `${bucketUrl}/${resolveRenditionPath(id, 720)}`;
+```
+
+```groq
+"id": string::split(renditions[0].key, "/")[0]
+```
+
+Note that the id is not the document's `_id`. It's generated at upload time for
+the R2 key, so a video keeps its objects even if the document is recreated.
 
 ## Configuring
 
@@ -84,25 +154,25 @@ r2Video({
 
 ### Encoding
 
-**`heights`** is the tier ladder. A source shorter than a tier skips it; every
-tier it does reach is another full encode.
+**`heights`** is the tier ladder. A source shorter than a tier skips it. Every
+tier it does reach is another full encode, so the list is what upload time costs.
 
-**`quality`** maps to a **quantizer** for h264, not a bitrate: constant quality,
-variable file size. `0.75` is QP 22, where h264 stops being distinguishable from
-the source. `1` is QP 16, near-lossless, and routinely produces files **larger
-than the source**.
+**`quality`** sets a quantizer for h264 rather than a bitrate, so quality stays
+constant and file size varies. `0.75` is QP 22, where h264 stops being
+distinguishable from the source. `1` is QP 16, near-lossless, and routinely
+produces files **larger than the source**.
 
-**`preferBitrate`** flips that trade: predictable size, variable quality. A
+**`preferBitrate`** flips that trade for predictable size and variable quality. A
 1080p tier lands near 6.1 Mbps at `0.75` whatever the footage.
 
 **`nativeTopTier`** copies the top rendition instead of re-encoding it, when its
-height and codec already match the source — instant and bit-identical. Its size
-is then whatever the source was exported at.
+height and codec already match the source. That's instant and bit-identical, and
+its size is whatever the source was exported at.
 
 ## Setting up a Worker
 
-The Worker holds the R2 binding. Scaffold one — the binding name, entry point
-and compatibility date are fixed, and the CLI fills in the rest:
+The Worker holds the R2 binding. Scaffold one and the binding name, entry point
+and compatibility date come out right:
 
 ```bash
 pnpx sanity-plugin-r2-video setup worker
@@ -126,8 +196,8 @@ Give `r2Video()` the deployed URL as `endpointUrl`, the same secret as `token`,
 and the bucket's public URL as `bucketUrl`.
 
 The generated entry point re-exports this package's handler, so upgrading the
-package upgrades the deployed Worker. Only deployment identity — name, account,
-bucket, origins — is written out.
+package upgrades the deployed Worker. Only deployment identity gets written out:
+name, account, bucket and origins.
 
 ## How it works
 
@@ -138,14 +208,14 @@ Studio ──encoded renditions──▶ Worker ──binding──▶ R2 bucket
 ```
 
 The Worker holds the only R2 binding, so **no R2 credentials exist outside
-Cloudflare**. Uploads go through it as plain request bodies — nothing is signed,
-and the bucket needs no CORS policy. A rendition has to fit in one request body,
-which caps an upload at 100 MB.
+Cloudflare**. Uploads go through it as plain request bodies, which means nothing
+is signed and the bucket needs no CORS policy. A rendition has to fit in one
+request body, capping an upload at 100 MB.
 
-`UPLOAD_TOKEN` ships inside the Studio bundle, since the browser is what sends
-the upload — **anyone who can load the Studio can read it**. The Worker's origin
-allowlist is what restricts access. Put Cloudflare Access in front of the Worker
-if you need authentication.
+`UPLOAD_TOKEN` ships inside the Studio bundle, because the browser is what sends
+the upload. **Anyone who can load the Studio can read it.** What actually
+restricts access is the Worker's origin allowlist. Put Cloudflare Access in front
+of the Worker if you need real authentication.
 
 ### Entry points
 
@@ -157,18 +227,12 @@ Three, each with its own tsconfig and its own type universe:
 ./storage    where files live       nothing
 ```
 
-`./storage` has no dependencies. A web app imports it to build source URLs
-without pulling the Studio UI, or `sanity` and `react`, into its bundle.
-
-```ts
-import { resolveRenditionPath } from "sanity-plugin-r2-video/storage";
-
-const src = `${bucketUrl}/${resolveRenditionPath(asset._id, 720)}`;
-```
+`./storage` has no dependencies. A web app can import it to build source URLs
+without pulling the Studio UI, `sanity` or `react` into its bundle.
 
 ### Keys
 
-One directory per video, one object per tier, no folder segment:
+One directory per video, one object per tier, and no folder segment:
 
 ```
 j6w3wy2bd0jq/270.mp4
@@ -178,75 +242,59 @@ j6w3wy2bd0jq/720.mp4
 j6w3wy2bd0jq/1080.mp4
 ```
 
-Documents store the id and the heights, not URLs — both the Studio and the web
-build sources from `bucketUrl` plus the key. Moving the bucket behind a custom
-domain is a config change, not a migration.
+Documents store keys and heights rather than URLs, and both the Studio and your
+front end build sources from `bucketUrl`. Moving the bucket behind a custom
+domain is a config change rather than a migration.
 
 ### Folders
 
-Videos are filed in the **same folder documents the image library uses**, not a
-parallel set. Create a folder in the Media tool and it appears in the video
-picker; rename it there and every video moves with it.
+Videos are filed in the same folder documents your image library uses, rather
+than a parallel set. Create a folder in the Media tool and it shows up in the
+video picker. Rename it there and every video moves with it.
 
-The type is `folders.type`, defaulting to `sanity-plugin-media`'s
-`media.folder`. The plugin never imports that package — it reads a document type
+The type is `folders.type`, which defaults to `sanity-plugin-media`'s
+`media.folder`. The plugin never imports that package. It reads a document type
 by name, so `folders.type` can point anywhere.
 
-Keys carry no folder, so renaming or moving a video never touches the bucket.
-The tool's filter lists only folders holding video; the upload dialog offers all
-of them.
+Keys carry no folder, so renaming or moving a video never touches the bucket. The
+tool's filter lists only folders holding video, while the upload dialog offers
+all of them.
 
-Generated posters go to their own folder (`folders.poster`), created on first
-upload, so they stay out of the folders holding real images.
+Generated posters go to their own folder, set by `folders.poster` and created on
+first upload, so they stay out of the folders holding real images.
 
 ### Deleting
 
-Order matters, and `delete-video.ts` documents it:
+Order matters here, and `delete-video.ts` documents it:
 
-1. Preflight `*[references($id)]` — anything found blocks the delete.
-2. Delete the document. This releases the strong reference to the poster.
-3. Delete the poster asset. Now unreferenced, so no `409`.
+1. Preflight `*[references($id)]`. Anything found blocks the delete.
+2. Delete the document, which releases the strong reference to the poster.
+3. Delete the poster asset, now unreferenced, so no `409`.
 4. Delete the R2 objects, batched.
 
-Sanity goes before R2: an orphaned object is invisible and costs pennies, a
+Sanity goes before R2. An orphaned object is invisible and costs pennies, while a
 document pointing at deleted media breaks the site.
 
 ### When an upload fails
 
-The document is written **last**, so a failure can never leave a video in the
-library pointing at files that aren't there.
+The document is written last, so a failure can't leave a video in the library
+pointing at files that aren't there.
 
-Anything created before that point is rolled back. Keys are recorded *before*
-each upload, since a request that times out may still have stored the object.
-Rollback never throws — the failure that started it is what surfaces.
+Anything created before that point is rolled back. Keys are recorded before each
+upload rather than after, since a request that times out may still have stored
+the object. Rollback never throws, so the failure that started it is what you
+see.
 
-**A closed tab or a crash skips rollback entirely**, and encoded renditions live
-only in memory, so there's no resume. Whatever either case leaves behind is
-unreferenced — **Sync** in the tool finds and removes it.
+A closed tab or a crash skips rollback, and encoded renditions live only in
+memory, so there's no resume. Whatever either case leaves behind is unreferenced,
+and **Sync** in the tool finds and removes it.
 
 ## Limitations
 
-### Chrome only, for uploading
-
-Uploading needs WebCodecs h264 encoding, which Safari doesn't reliably provide.
-The gate is a capability check — mediabunny's own `canEncodeVideo('avc')`, not
-user-agent sniffing — and unsupported browsers get told so before they pick a
-file. **Playback is unaffected everywhere.**
-
-### The encoder runs in a Web Worker
-
-`transcode.worker.js` is loaded with `new URL(…, import.meta.url)`. Vite serves
-that straight from the package, but if it ever pre-bundles the plugin the URL
-goes stale — if uploads fail to start, exclude the package from dependency
-optimisation:
-
-```ts
-// sanity.cli.ts
-vite: (config) => ({
-  ...config,
-  optimizeDeps: { exclude: ["sanity-plugin-r2-video"] },
-});
-```
+Uploading needs WebCodecs h264 encoding, which Safari doesn't reliably provide,
+so uploads are effectively Chrome-only today. The gate is a capability check
+using mediabunny's `canEncodeVideo('avc')` rather than user-agent sniffing, and
+unsupported browsers are told before they pick a file. Playback works everywhere.
 
 ## Developing
 
@@ -256,7 +304,7 @@ pnpm run type-check
 pnpm run build      # tsup: ESM + types into dist
 ```
 
-`./worker` ships as TypeScript: wrangler compiles it, and the generated Worker
+`./worker` ships as TypeScript. Wrangler compiles it, and the generated Worker
 extends `worker/tsconfig.json` for the compiler options it was written against.
 
 ## License

package/dist/studio/index.d.ts

@@ -7,6 +7,11 @@ import * as react from 'react';
 
 /** A single encoded MP4 rendition, stored as one object in R2. */
 type R2VideoRendition = {
+    /**
+     * Sanity's array item key, set to the height. Optional because documents
+     * written before it was added don't carry one.
+     */
+    _key?: string;
     width: number;
     height: number;
     key: string;
@@ -223,7 +228,7 @@ declare const r2Video: sanity.Plugin<R2VideoPluginConfig>;
 
 /**
  * The library document. Everything but `filename` and `folder` is written by the
- * upload pipeline and read-only — there is nothing an editor can usefully
+ * upload pipeline and read-only - there is nothing an editor can usefully
  * correct by hand, and a stale `renditions` entry would point at an object that
  * isn't in the bucket.
  */

package/dist/studio/index.js

@@ -615,6 +615,9 @@ var uploadVideo = async ({
       written.keys.push(key);
       const stored = await uploadObject(config, key, rendition.data);
       renditions.push({
+        // One rendition per height, so the height is already the unique key
+        // Sanity needs on an array item
+        _key: String(rendition.height),
         width: rendition.width,
         height: rendition.height,
         key: stored.key,
@@ -991,6 +994,63 @@ var VideoPreview = ({ renditions, posterUrl }) => {
     }
   );
 };
+var Fact = ({ label, value }) => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: label }),
+    /* @__PURE__ */ jsx(Text, { size: 1, children: value })
+  ] });
+};
+var VideoSummary = ({
+  renditions,
+  duration,
+  hasAudio,
+  uploadedAt
+}) => {
+  const totalBytes = renditions.reduce((total, rendition) => {
+    return total + rendition.size;
+  }, 0);
+  const ordered = [...renditions].sort((a, b) => b.height - a.height);
+  const largest = ordered[0];
+  return /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+    /* @__PURE__ */ jsx(Card, { border: true, padding: 4, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs(Grid, { gap: 4, gridTemplateColumns: [2, 4], children: [
+      /* @__PURE__ */ jsx(
+        Fact,
+        {
+          label: "Source",
+          value: largest ? `${largest.width} \xD7 ${largest.height}` : "Unknown"
+        }
+      ),
+      /* @__PURE__ */ jsx(Fact, { label: "Duration", value: formatDuration(duration) }),
+      /* @__PURE__ */ jsx(Fact, { label: "Audio", value: hasAudio ? "Kept" : "Stripped" }),
+      /* @__PURE__ */ jsx(Fact, { label: "Total", value: formatSize(totalBytes) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: "Renditions" }),
+      /* @__PURE__ */ jsx(Card, { border: true, radius: 2, children: ordered.map((rendition, index) => /* @__PURE__ */ jsx(
+        Card,
+        {
+          borderTop: index > 0,
+          padding: 3,
+          radius: 0,
+          children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+              rendition.width,
+              " \xD7 ",
+              rendition.height
+            ] }) }),
+            /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: formatSize(rendition.size) })
+          ] })
+        },
+        rendition.key
+      )) })
+    ] }),
+    uploadedAt && /* @__PURE__ */ jsxs(Text, { muted: true, size: 0, children: [
+      "Uploaded ",
+      new Date(uploadedAt).toLocaleString()
+    ] })
+  ] });
+};
+var EDITABLE_FIELDS = /* @__PURE__ */ new Set(["filename", "folder"]);
 var isRendition = (value) => {
   return typeof value === "object" && value !== null && "key" in value && "width" in value && "height" in value;
 };
@@ -1004,11 +1064,43 @@ var readRenditions = (value) => {
   }
   return renditions.filter(isRendition);
 };
+var read = (value, key, is) => {
+  if (typeof value !== "object" || value === null) {
+    return void 0;
+  }
+  const raw = Reflect.get(value, key);
+  return is(raw) ? raw : void 0;
+};
+var memberField = (member) => {
+  if (member.kind === "field") {
+    return member.name;
+  }
+  if (member.kind === "error") {
+    return member.fieldName;
+  }
+  return void 0;
+};
+var isNumber = (value) => typeof value === "number";
+var isBoolean = (value) => typeof value === "boolean";
+var isString = (value) => typeof value === "string";
 var InputVideoAsset = (props) => {
   const renditions = readRenditions(props.value);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+  const members = props.members.filter((member) => {
+    const field = memberField(member);
+    return field === void 0 || EDITABLE_FIELDS.has(field);
+  });
+  return /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
     renditions.length > 0 && /* @__PURE__ */ jsx(VideoPreview, { renditions }),
-    props.renderDefault(props)
+    props.renderDefault({ ...props, members }),
+    renditions.length > 0 && /* @__PURE__ */ jsx(
+      VideoSummary,
+      {
+        duration: read(props.value, "duration", isNumber) ?? 0,
+        hasAudio: read(props.value, "hasAudio", isBoolean) ?? false,
+        renditions,
+        uploadedAt: read(props.value, "uploadedAt", isString)
+      }
+    )
   ] });
 };
 
@@ -1024,7 +1116,7 @@ var createVideoAssetSchema = (config) => {
         title: "Filename",
         name: "filename",
         type: "string",
-        description: "The name shown everywhere in the Studio. Renaming is safe \u2014 object keys carry no name, so nothing in storage depends on it.",
+        description: "The name shown everywhere in the Studio. Renaming is safe - object keys carry no name, so nothing in storage depends on it.",
         validation: (Rule) => Rule.required()
       }),
       defineField({
@@ -1223,12 +1315,6 @@ var Field2 = ({ label, children }) => {
     children
   ] });
 };
-var Fact = ({ label, value }) => {
-  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-    /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: label }),
-    /* @__PURE__ */ jsx(Text, { size: 1, children: value })
-  ] });
-};
 var DialogDetails = ({
   asset,
   onChanged,
@@ -1247,11 +1333,6 @@ var DialogDetails = ({
   useEffect(() => {
     fetchFolders(client, config.folders.type).then(setFolders);
   }, [client, config.folders.type]);
-  const totalBytes = asset.renditions.reduce((total, rendition) => {
-    return total + rendition.size;
-  }, 0);
-  const ordered = [...asset.renditions].sort((a, b) => b.height - a.height);
-  const largest = ordered[0];
   const paths = resolveFolderPaths(folders);
   const trimmed = filename.trim();
   const savedFolderId = asset.folder ? asset.folder._ref : "";
@@ -1374,48 +1455,15 @@ var DialogDetails = ({
           ) }) })
         ] }),
         error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
-        /* @__PURE__ */ jsx(Card, { border: true, padding: 4, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs(Grid, { gap: 4, gridTemplateColumns: [2, 4], children: [
-          /* @__PURE__ */ jsx(
-            Fact,
-            {
-              label: "Source",
-              value: largest ? `${largest.width} \xD7 ${largest.height}` : "Unknown"
-            }
-          ),
-          /* @__PURE__ */ jsx(Fact, { label: "Duration", value: formatDuration(asset.duration) }),
-          /* @__PURE__ */ jsx(
-            Fact,
-            {
-              label: "Audio",
-              value: asset.hasAudio ? "Kept" : "Stripped"
-            }
-          ),
-          /* @__PURE__ */ jsx(Fact, { label: "Total", value: formatSize(totalBytes) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: "Renditions" }),
-          /* @__PURE__ */ jsx(Card, { border: true, radius: 2, children: ordered.map((rendition, index) => /* @__PURE__ */ jsx(
-            Card,
-            {
-              borderTop: index > 0,
-              padding: 3,
-              radius: 0,
-              children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
-                /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-                  rendition.width,
-                  " \xD7 ",
-                  rendition.height
-                ] }) }),
-                /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: formatSize(rendition.size) })
-              ] })
-            },
-            rendition.key
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs(Text, { muted: true, size: 0, children: [
-          "Uploaded ",
-          new Date(asset.uploadedAt).toLocaleString()
-        ] })
+        /* @__PURE__ */ jsx(
+          VideoSummary,
+          {
+            duration: asset.duration,
+            hasAudio: asset.hasAudio,
+            renditions: asset.renditions,
+            uploadedAt: asset.uploadedAt
+          }
+        )
       ] }) })
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanity-plugin-r2-video",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Video for Sanity Studio, encoded in the browser and stored in Cloudflare R2 as a ladder of plain MP4s.",
 	"keywords": [
 		"sanity",
@@ -51,6 +51,7 @@
 	},
 	"scripts": {
 		"build": "tsup",
+		"dev": "tsup --watch",
 		"type-check": "tsc --noEmit -p studio/tsconfig.json && tsc --noEmit -p worker/tsconfig.check.json",
 		"prepublishOnly": "pnpm run type-check && pnpm run build",
 		"setup:worker": "node bin/cli.js setup worker"
@@ -61,7 +62,7 @@
 	"peerDependencies": {
 		"@cloudflare/workers-types": "^5",
 		"@sanity/icons": "^5",
-		"@sanity/ui": "^4",
+		"@sanity/ui": "^4 || ^5",
 		"react": "^19",
 		"react-dom": "^19",
 		"sanity": "^6",
@@ -73,16 +74,16 @@
 		}
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^5.0.0",
-		"@sanity/icons": "^5.0.0",
-		"@sanity/ui": "^4.0.0",
-		"@types/react": "^19.0.0",
-		"@types/react-dom": "^19.0.0",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"sanity": "^6.0.0",
-		"styled-components": "^6.0.0",
-		"tsup": "^8.5.0",
-		"typescript": "^5.9.0"
+		"@cloudflare/workers-types": "^5",
+		"@sanity/icons": "^5",
+		"@sanity/ui": "^4",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
+		"react": "^19",
+		"react-dom": "^19",
+		"sanity": "^6",
+		"styled-components": "^6",
+		"tsup": "^8",
+		"typescript": "^5"
 	}
 }