@liiift-studio/sanity-font-manager 2.5.0 → 2.5.2

package/dist/index.mjs

@@ -12,6 +12,7 @@ import {
   UploadStep1Settings,
   UploadStep2Review,
   UploadStep3Execute,
+  UploadStep3bInstances,
   UploadSummary,
   addItalicToFontTitle,
   buildUploadPlan,
@@ -59,7 +60,7 @@ import {
   sanitizeForSanityId,
   sortFontObjects,
   updateTypefaceDocument
-} from "./chunk-646WCBRR.mjs";
+} from "./chunk-FT7YTFZW.mjs";
 
 // src/components/BatchUploadFonts.jsx
 import React3, { useCallback, useState as useState2, useMemo as useMemo2, useRef, useEffect, lazy, Suspense } from "react";
@@ -635,7 +636,7 @@ var updateTypefaceSubfamilies = async (doc_id, stylesObject, newSubfamiliesArray
 };
 
 // src/components/BatchUploadFonts.jsx
-var UploadModal2 = lazy(() => import("./UploadModal-NME2W53V.mjs"));
+var UploadModal2 = lazy(() => import("./UploadModal-DDTVJ2MA.mjs"));
 var ACCEPTED_EXTENSIONS = ["ttf", "otf", "woff", "woff2", "eot", "svg"];
 var formatElapsed = (s) => {
   const m = Math.floor(s / 60);
@@ -1020,7 +1021,7 @@ var BatchUploadFonts = () => {
           style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0 }
         },
         ext
-      ), /* @__PURE__ */ React3.createElement(Box2, { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ React3.createElement(Text3, { size: 1 }, file.name))), /* @__PURE__ */ React3.createElement(
+      ), /* @__PURE__ */ React3.createElement(Box2, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React3.createElement(Text3, { size: 1 }, file.name))), /* @__PURE__ */ React3.createElement(
         Button2,
         {
           mode: "bleed",
@@ -1937,18 +1938,18 @@ var SingleUploaderTool = (props) => {
     const formatUpper = format.toUpperCase();
     const hasFile = !!((_b2 = (_a2 = fileInput == null ? void 0 : fileInput[format]) == null ? void 0 : _a2.asset) == null ? void 0 : _b2._ref);
     const fileUrl = hasFile ? `https://cdn.sanity.io/files/${process.env.SANITY_STUDIO_PROJECT_ID}/${process.env.SANITY_STUDIO_DATASET}/${fileInput[format].asset._ref.replace("file-", "").replace("-", ".")}` : null;
-    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, formatUpper), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, (filenames == null ? void 0 : filenames[format]) || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, buildSource && (fileInput == null ? void 0 : fileInput[buildSource]) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: () => handleGenerateFontFile(format, fileInput[buildSource]), text: "Build" }), /* @__PURE__ */ React6.createElement(Button5, { as: "label", mode: "ghost", tone: "primary", fontSize: 1, padding: 2, style: { cursor: "pointer" } }, /* @__PURE__ */ React6.createElement(Text6, { size: 1 }, "Upload"), /* @__PURE__ */ React6.createElement("input", { ref, type: "file", hidden: true, onChange: (e) => handleUpload(e, format) })), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDelete(format) }))));
+    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, formatUpper), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, (filenames == null ? void 0 : filenames[format]) || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, buildSource && (fileInput == null ? void 0 : fileInput[buildSource]) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: () => handleGenerateFontFile(format, fileInput[buildSource]), text: "Build" }), /* @__PURE__ */ React6.createElement(Button5, { as: "label", mode: "ghost", tone: "primary", fontSize: 1, padding: 2, style: { cursor: "pointer" } }, /* @__PURE__ */ React6.createElement(Text6, { size: 1 }, "Upload"), /* @__PURE__ */ React6.createElement("input", { ref, type: "file", hidden: true, onChange: (e) => handleUpload(e, format) })), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDelete(format) }))));
   };
   const renderTopLevelAssetSection = (label, fieldName, assetRef, filename, onBuild) => {
     const hasFile = !!assetRef;
     const fileUrl = hasFile ? `https://cdn.sanity.io/files/${process.env.SANITY_STUDIO_PROJECT_ID}/${process.env.SANITY_STUDIO_DATASET}/${assetRef.replace("file-", "").replace("-", ".")}` : null;
-    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, label), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, filename || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, onBuild && (fileInput == null ? void 0 : fileInput.woff2) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: onBuild, text: "Build" }), /* @__PURE__ */ React6.createElement(Button5, { as: "label", mode: "ghost", tone: "primary", fontSize: 1, padding: 2, style: { cursor: "pointer" } }, /* @__PURE__ */ React6.createElement(Text6, { size: 1 }, "Upload"), /* @__PURE__ */ React6.createElement("input", { type: "file", hidden: true, onChange: (e) => handleUploadTopLevelFile(e, fieldName) })), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDeleteTopLevel(fieldName) }))));
+    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, label), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, filename || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, onBuild && (fileInput == null ? void 0 : fileInput.woff2) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: onBuild, text: "Build" }), /* @__PURE__ */ React6.createElement(Button5, { as: "label", mode: "ghost", tone: "primary", fontSize: 1, padding: 2, style: { cursor: "pointer" } }, /* @__PURE__ */ React6.createElement(Text6, { size: 1 }, "Upload"), /* @__PURE__ */ React6.createElement("input", { type: "file", hidden: true, onChange: (e) => handleUploadTopLevelFile(e, fieldName) })), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDeleteTopLevel(fieldName) }))));
   };
   const renderCssSection = () => {
     var _a2, _b2;
     const hasFile = !!((_b2 = (_a2 = fileInput == null ? void 0 : fileInput.css) == null ? void 0 : _a2.asset) == null ? void 0 : _b2._ref);
     const fileUrl = hasFile ? `https://cdn.sanity.io/files/${process.env.SANITY_STUDIO_PROJECT_ID}/${process.env.SANITY_STUDIO_DATASET}/${fileInput.css.asset._ref.replace("file-", "").replace("-", ".")}` : null;
-    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, "CSS"), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, (filenames == null ? void 0 : filenames.css) || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, (fileInput == null ? void 0 : fileInput.woff2) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: () => handleGenerateCssFile(), text: "Build" }), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDelete("css") }))));
+    return /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: hasFile ? 1 : 0.5 } }, "CSS"), hasFile ? /* @__PURE__ */ React6.createElement(Box3, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement("a", { href: fileUrl, target: "_blank", rel: "noreferrer" }, (filenames == null ? void 0 : filenames.css) || "File")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, (fileInput == null ? void 0 : fileInput.woff2) && /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: () => handleGenerateCssFile(), text: "Build" }), hasFile && /* @__PURE__ */ React6.createElement(Button5, { mode: "bleed", tone: "critical", icon: TrashIcon2, padding: 2, onClick: () => handleDelete("css") }))));
   };
   const renderDataSection = () => /* @__PURE__ */ React6.createElement(Card3, { border: true, radius: 1, paddingX: 2, paddingY: 3 }, /* @__PURE__ */ React6.createElement(Flex4, { justify: "space-between", align: "center", gap: 2 }, /* @__PURE__ */ React6.createElement(Flex4, { gap: 3, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text6, { size: 0, style: { fontFamily: "monospace", minWidth: "2.5rem", flexShrink: 0, opacity: (doc_metaData == null ? void 0 : doc_metaData.version) ? 1 : 0.5 } }, "DATA"), (doc_metaData == null ? void 0 : doc_metaData.version) ? /* @__PURE__ */ React6.createElement(Text6, { size: 1 }, "v", doc_metaData.version, " ", /* @__PURE__ */ React6.createElement(Text6, { as: "span", size: 1, muted: true }, "(", doc_metaData.genDate, ")")) : /* @__PURE__ */ React6.createElement(Text6, { size: 1, muted: true }, "\u2014")), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ React6.createElement(Flex4, { gap: 1, align: "center", style: { flexShrink: 0 } }, /* @__PURE__ */ React6.createElement(Button5, { mode: "ghost", tone: "primary", fontSize: 1, padding: 2, onClick: () => handleGenerateFontData(), text: "Build" }))));
   return /* @__PURE__ */ React6.createElement(Stack5, { space: 2 }, /* @__PURE__ */ React6.createElement(
@@ -2810,21 +2811,36 @@ function KeyValueReferenceInput(props) {
   const pickerLabel = referenceType || valueTitle.toLowerCase();
   return /* @__PURE__ */ React12.createElement(Stack9, { space: 3 }, topActions && /* @__PURE__ */ React12.createElement(Box4, { paddingBottom: 2 }, topActions), /* @__PURE__ */ React12.createElement(Box4, null, /* @__PURE__ */ React12.createElement(Stack9, { space: 2 }, pairs.map((pair, index) => {
     var _a2;
-    return /* @__PURE__ */ React12.createElement(Box4, { key: index, style: { position: "relative" } }, /* @__PURE__ */ React12.createElement("div", { style: { position: "absolute", height: "100%", top: "0", left: "-5px", width: "min-content", transform: "translate(-100%, 0%)" } }, /* @__PURE__ */ React12.createElement("button", { className: "manualButton manualButtonUp", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveUp(index) }, /* @__PURE__ */ React12.createElement(ArrowUpIcon2, null)), /* @__PURE__ */ React12.createElement("button", { className: "manualButton manualButtonDown", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveDown(index) }, /* @__PURE__ */ React12.createElement(ArrowDownIcon2, null))), /* @__PURE__ */ React12.createElement(Flex7, { gap: 2, align: "flex-start" }, /* @__PURE__ */ React12.createElement(Box4, { flex: 1 }, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React12.createElement(Flex7, { key: index, gap: 1, align: "center" }, /* @__PURE__ */ React12.createElement(Flex7, { direction: "column", style: { flexShrink: 0 } }, /* @__PURE__ */ React12.createElement(
+      Button10,
+      {
+        mode: "bleed",
+        icon: ArrowUpIcon2,
+        padding: 1,
+        fontSize: 0,
+        onClick: () => handleMoveUp(index),
+        disabled: index === 0,
+        style: { cursor: index === 0 ? "default" : "pointer" }
+      }
+    ), /* @__PURE__ */ React12.createElement(
+      Button10,
+      {
+        mode: "bleed",
+        icon: ArrowDownIcon2,
+        padding: 1,
+        fontSize: 0,
+        onClick: () => handleMoveDown(index),
+        disabled: index === pairs.length - 1,
+        style: { cursor: index === pairs.length - 1 ? "default" : "pointer" }
+      }
+    )), /* @__PURE__ */ React12.createElement(Box4, { flex: 1 }, /* @__PURE__ */ React12.createElement(
       TextInput3,
       {
         value: pair.key,
         onChange: (e) => handlePairChange(index, "key", e.target.value),
         placeholder: keyPlaceholder
       }
-    )), /* @__PURE__ */ React12.createElement(Box4, { flex: 1, style: { minHeight: "100%" } }, ((_a2 = pair.value) == null ? void 0 : _a2._ref) ? /* @__PURE__ */ React12.createElement(Card4, { className: "referenceCard", radius: 2, tone: "primary", style: { paddingLeft: "1rem", height: "fit-content" } }, /* @__PURE__ */ React12.createElement(Flex7, { align: "center", justify: "space-between" }, /* @__PURE__ */ React12.createElement(
-      Text10,
-      {
-        size: 2,
-        style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "90%" }
-      },
-      referenceData[pair.value._ref] || "Loading..."
-    ), /* @__PURE__ */ React12.createElement(
+    )), /* @__PURE__ */ React12.createElement(Box4, { flex: 1 }, ((_a2 = pair.value) == null ? void 0 : _a2._ref) ? /* @__PURE__ */ React12.createElement(Card4, { radius: 2, tone: "primary", style: { paddingLeft: "0.75rem", height: "fit-content" } }, /* @__PURE__ */ React12.createElement(Flex7, { align: "center", justify: "space-between" }, /* @__PURE__ */ React12.createElement(Text10, { size: 2, style: { whiteSpace: "nowrap" } }, referenceData[pair.value._ref] || "Loading..."), /* @__PURE__ */ React12.createElement(
       MenuButton2,
       {
         button: /* @__PURE__ */ React12.createElement(Button10, { icon: EllipsisHorizontalIcon, mode: "bleed", title: "Options" }),
@@ -2836,18 +2852,20 @@ function KeyValueReferenceInput(props) {
       Box4,
       {
         padding: 2,
-        style: { minHeight: "100%", border: "1px dashed #ccc", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
+        style: { border: "1px dashed #ccc", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
         onClick: () => openReferenceSelector(index)
       },
       /* @__PURE__ */ React12.createElement(Text10, { muted: true, size: 2 }, "Click to select a ", pickerLabel)
-    ))), /* @__PURE__ */ React12.createElement(
-      "button",
+    )), /* @__PURE__ */ React12.createElement(
+      Button10,
       {
-        className: "manualButton",
+        mode: "bleed",
+        tone: "critical",
+        icon: TrashIcon4,
+        padding: 2,
         onClick: () => handleRemovePair(index),
-        style: { position: "absolute", top: "0", right: "-7px", transform: "translate(100%, 0%)" }
-      },
-      /* @__PURE__ */ React12.createElement(TrashIcon4, null)
+        style: { flexShrink: 0, cursor: "pointer" }
+      }
     ));
   }))), /* @__PURE__ */ React12.createElement(Button10, { tone: "primary", mode: "ghost", onClick: handleAddPair, icon: AddIcon2, text: `Add ${keyTitle}` }), isDialogOpen && /* @__PURE__ */ React12.createElement(
     Dialog,
@@ -5907,7 +5925,9 @@ function createStylesField({
   subfamilyPreferredStyle = false,
   subfamilyFontFilter = false,
   subfamilyPreview = false,
-  pairs = true
+  pairs = true,
+  generateCollections = false,
+  generateFullFamilyCollection = false
 } = {}) {
   const subfamilyFields = [
     {
@@ -6051,6 +6071,28 @@ function createStylesField({
       type: "array",
       of: [subfamilyItem]
     },
+    ...field(generateCollections, {
+      title: "Generate Collections and Pairs",
+      name: "generateCollections",
+      type: "string",
+      description: "Generate Collections and Pairs from the typeface's fonts.",
+      components: { input: GenerateCollectionsPairsComponent },
+      hidden: ({ parent }) => {
+        var _a;
+        return !((_a = parent == null ? void 0 : parent.fonts) == null ? void 0 : _a.length);
+      }
+    }),
+    ...field(generateFullFamilyCollection, {
+      title: "Generate Full Family Collection",
+      name: "generateCollectionGroup",
+      type: "string",
+      description: "Generate a Collection that includes all styles from this typeface.",
+      components: { input: PrimaryCollectionGeneratorTypeface },
+      hidden: ({ parent }) => {
+        var _a;
+        return !((_a = parent == null ? void 0 : parent.fonts) == null ? void 0 : _a.length);
+      }
+    }),
     {
       title: "Collections",
       name: "collections",
@@ -6114,6 +6156,7 @@ export {
   UploadStep1Settings,
   UploadStep2Review,
   UploadStep3Execute,
+  UploadStep3bInstances,
   UploadSummary,
   VariableInstanceReferencesInput,
   addItalicToFontTitle,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.5.0",
+	"version": "2.5.2",
 	"description": "Sanity Studio plugin — full font management suite with batch upload, format conversion, metadata extraction, CSS generation, collection/pair generation, and script variant support. Supports Sanity v3, v4, and v5.",
 	"license": "MIT",
 	"author": "Liiift Studio",

package/src/components/BatchUploadFonts.jsx

@@ -459,7 +459,7 @@ export const BatchUploadFonts = () => {
 										>
 											{ext}
 										</Text>
-										<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+										<Box style={{ flex: 1, minWidth: 0 }}>
 											<Text size={1}>{file.name}</Text>
 										</Box>
 									</Flex>

package/src/components/FontReviewCard.jsx

@@ -15,9 +15,10 @@ const EXTENDED_TYPES = ['eot', 'svg', 'css', 'woff2_subset', 'woff2_web'];
  * Collapsible review card for a single font in the upload plan.
  * Table-style header row with weight/style/files/action columns.
  */
-const FontReviewCard = memo(function FontReviewCard({ entry, dispatch, allExpanded }) {
+const FontReviewCard = memo(function FontReviewCard({ entry, dispatch, allExpanded, typefaceTitle, price }) {
 	const [expanded, setExpanded] = useState(false);
 	const [showAllFileTypes, setShowAllFileTypes] = useState(false);
+	const [showDocPreview, setShowDocPreview] = useState(false);
 
 	// Sync with allExpanded toggle from BulkActions
 	useEffect(() => {
@@ -382,6 +383,45 @@ const FontReviewCard = memo(function FontReviewCard({ entry, dispatch, allExpand
 							dispatch={dispatch}
 						/>
 
+						{/* Document Preview — expandable view of all fields that will be written */}
+						<Stack space={2}>
+							<Button
+								mode="bleed"
+								fontSize={0}
+								padding={1}
+								text={showDocPreview ? 'Hide document preview' : 'Show document preview'}
+								onClick={() => setShowDocPreview(v => !v)}
+								style={{ cursor: 'pointer', alignSelf: 'flex-start' }}
+							/>
+							{showDocPreview && (
+								<Card border padding={3} radius={1} style={{ fontFamily: 'monospace', fontSize: 12 }}>
+									<Stack space={2}>
+										{[
+											['_id', entry.documentId],
+											['_type', 'font'],
+											['title', entry.title],
+											['slug', entry.documentId],
+											['typefaceName', typefaceTitle || '—'],
+											['weightName', entry.weightName || '—'],
+											['weight', entry.weight],
+											['style', entry.style],
+											['subfamily', entry.subfamily || '—'],
+											['variableFont', String(entry.variableFont)],
+											['price', price ?? '—'],
+											['sell', price > 0 ? 'true' : 'false'],
+											['normalWeight', 'true'],
+											['files', (entry.files || []).map(f => f.name).join(', ') || '—'],
+										].map(([key, value]) => (
+											<Flex key={key} gap={2}>
+												<Text size={0} muted style={{ width: 120, flexShrink: 0 }}>{key}</Text>
+												<Text size={0} style={{ wordBreak: 'break-all' }}>{String(value)}</Text>
+											</Flex>
+										))}
+									</Stack>
+								</Card>
+							)}
+						</Stack>
+
 						{/* Actions — only show reset if user has overridden suggestions */}
 						<Flex justify="flex-end" gap={2}>
 							{hasUserOverrides && (

package/src/components/KeyValueReferenceInput.jsx

@@ -148,72 +148,80 @@ export function KeyValueReferenceInput(props) {
 			<Box>
 				<Stack space={2}>
 					{pairs.map((pair, index) => (
-						<Box key={index} style={{ position: 'relative' }}>
+						<Flex key={index} gap={1} align="center">
 							{/* Reorder buttons */}
-							<div style={{ position: 'absolute', height: '100%', top: '0', left: '-5px', width: 'min-content', transform: 'translate(-100%, 0%)' }}>
-								<button className="manualButton manualButtonUp" style={{ fontSize: '15px', height: '50%' }} onClick={() => handleMoveUp(index)}>
-									<ArrowUpIcon />
-								</button>
-								<button className="manualButton manualButtonDown" style={{ fontSize: '15px', height: '50%' }} onClick={() => handleMoveDown(index)}>
-									<ArrowDownIcon />
-								</button>
-							</div>
-
-							<Flex gap={2} align="flex-start">
-								{/* Key input */}
-								<Box flex={1}>
-									<TextInput
-										value={pair.key}
-										onChange={(e) => handlePairChange(index, 'key', e.target.value)}
-										placeholder={keyPlaceholder}
-									/>
-								</Box>
-
-								{/* Reference display or empty-state picker trigger */}
-								<Box flex={1} style={{ minHeight: '100%' }}>
-									{pair.value?._ref ? (
-										<Card className="referenceCard" radius={2} tone="primary" style={{ paddingLeft: '1rem', height: 'fit-content' }}>
-											<Flex align="center" justify="space-between">
-												<Text
-													size={2}
-													style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '90%' }}
-												>
-													{referenceData[pair.value._ref] || 'Loading...'}
-												</Text>
-												<MenuButton
-													button={<Button icon={EllipsisHorizontalIcon} mode="bleed" title="Options" />}
-													id={`ref-options-${index}`}
-													menu={
-														<Menu>
-															<MenuItem tone="critical" icon={TrashIcon} text="Remove" onClick={() => handlePairChange(index, 'value', null)} />
-															<MenuItem icon={SyncIcon} text="Replace" onClick={() => openReferenceSelector(index)} />
-														</Menu>
-													}
-													popover={{ portal: true, tone: 'default', placement: 'left' }}
-												/>
-											</Flex>
-										</Card>
-									) : (
-										<Box
-											padding={2}
-											style={{ minHeight: '100%', border: '1px dashed #ccc', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
-											onClick={() => openReferenceSelector(index)}
-										>
-											<Text muted size={2}>Click to select a {pickerLabel}</Text>
-										</Box>
-									)}
-								</Box>
+							<Flex direction="column" style={{ flexShrink: 0 }}>
+								<Button
+									mode="bleed"
+									icon={ArrowUpIcon}
+									padding={1}
+									fontSize={0}
+									onClick={() => handleMoveUp(index)}
+									disabled={index === 0}
+									style={{ cursor: index === 0 ? 'default' : 'pointer' }}
+								/>
+								<Button
+									mode="bleed"
+									icon={ArrowDownIcon}
+									padding={1}
+									fontSize={0}
+									onClick={() => handleMoveDown(index)}
+									disabled={index === pairs.length - 1}
+									style={{ cursor: index === pairs.length - 1 ? 'default' : 'pointer' }}
+								/>
 							</Flex>
 
+							{/* Key input */}
+							<Box flex={1}>
+								<TextInput
+									value={pair.key}
+									onChange={(e) => handlePairChange(index, 'key', e.target.value)}
+									placeholder={keyPlaceholder}
+								/>
+							</Box>
+
+							{/* Reference display or empty-state picker trigger */}
+							<Box flex={1}>
+								{pair.value?._ref ? (
+									<Card radius={2} tone="primary" style={{ paddingLeft: '0.75rem', height: 'fit-content' }}>
+										<Flex align="center" justify="space-between">
+											<Text size={2} style={{ whiteSpace: 'nowrap' }}>
+												{referenceData[pair.value._ref] || 'Loading...'}
+											</Text>
+											<MenuButton
+												button={<Button icon={EllipsisHorizontalIcon} mode="bleed" title="Options" />}
+												id={`ref-options-${index}`}
+												menu={
+													<Menu>
+														<MenuItem tone="critical" icon={TrashIcon} text="Remove" onClick={() => handlePairChange(index, 'value', null)} />
+														<MenuItem icon={SyncIcon} text="Replace" onClick={() => openReferenceSelector(index)} />
+													</Menu>
+												}
+												popover={{ portal: true, tone: 'default', placement: 'left' }}
+											/>
+										</Flex>
+									</Card>
+								) : (
+									<Box
+										padding={2}
+										style={{ border: '1px dashed #ccc', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+										onClick={() => openReferenceSelector(index)}
+									>
+										<Text muted size={2}>Click to select a {pickerLabel}</Text>
+									</Box>
+								)}
+							</Box>
+
 							{/* Remove button */}
-							<button
-								className="manualButton"
+							<Button
+								mode="bleed"
+								tone="critical"
+								icon={TrashIcon}
+								padding={2}
 								onClick={() => handleRemovePair(index)}
-								style={{ position: 'absolute', top: '0', right: '-7px', transform: 'translate(100%, 0%)' }}
-							>
-								<TrashIcon />
-							</button>
-						</Box>
+								style={{ flexShrink: 0, cursor: 'pointer' }}
+							/>
+						</Flex>
 					))}
 				</Stack>
 			</Box>

package/src/components/SingleUploaderTool.jsx

@@ -479,7 +479,7 @@ export const SingleUploaderTool = (props) => {
 							{formatUpper}
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filenames?.[format] || 'File'}</a>
 							</Box>
 						) : (
@@ -520,7 +520,7 @@ export const SingleUploaderTool = (props) => {
 							{label}
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filename || 'File'}</a>
 							</Box>
 						) : (
@@ -561,7 +561,7 @@ export const SingleUploaderTool = (props) => {
 							CSS
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filenames?.css || 'File'}</a>
 							</Box>
 						) : (

package/src/components/UploadModal.jsx

@@ -1,4 +1,4 @@
-// Upload modal — 3-step state machine: Settings → Review → Execute
+// Upload modal — multi-step state machine: Upload Files → Review → Execute → Map Instances → Summary
 
 import React, { useReducer, useCallback, useState, useMemo, useRef, useEffect } from 'react';
 import { Dialog, Box, Flex, Text, Badge, Button } from '@sanity/ui';
@@ -9,6 +9,7 @@ import { generateStyleKeywords } from '../utils/generateKeywords';
 import UploadStep1Settings from './UploadStep1Settings';
 import UploadStep2Review from './UploadStep2Review';
 import UploadStep3Execute from './UploadStep3Execute';
+import UploadStep3bInstances from './UploadStep3bInstances';
 import UploadSummary from './UploadSummary';
 
 /** Step labels for the step indicator */
@@ -16,6 +17,7 @@ const STEPS = [
 	{ key: 1, label: 'Upload Files' },
 	{ key: 2, label: 'Review' },
 	{ key: 3, label: 'Upload' },
+	{ key: 4, label: 'Map Instances' },
 ];
 
 /** Maps plan phase to active step number */
@@ -49,11 +51,19 @@ export default function UploadModal({
 	const [processingCancelled, setProcessingCancelled] = useState(false);
 	const [executionResult, setExecutionResult] = useState(null);
 	const [retryTempIds, setRetryTempIds] = useState(null);
+	const [instanceMappingPhase, setInstanceMappingPhase] = useState(false);
+	const [instanceMappingResult, setInstanceMappingResult] = useState(null);
 	const cancelRef = useRef(false);
 	const focusRef = useRef(null);
 
 	const { weightKeywordList, italicKeywordList } = useMemo(() => generateStyleKeywords(), []);
-	const currentStep = phaseToStep(plan.phase);
+	const hasVFs = useMemo(() =>
+		Object.values(plan.fonts).some(f => f.variableFont && f.status !== 'error'),
+		[plan.fonts]
+	);
+	const baseStep = phaseToStep(plan.phase);
+	// Instance mapping is step 4 — only shown after execution completes with VFs
+	const currentStep = instanceMappingPhase ? 4 : (plan.phase === PLAN_PHASE.COMPLETE && !instanceMappingResult ? baseStep : baseStep);
 	const isExecuting = plan.phase === PLAN_PHASE.EXECUTING;
 
 	// Prevent accidental close during upload
@@ -85,7 +95,7 @@ export default function UploadModal({
 
 	/** Start processing — transition to Step 2 and build the plan */
 	const handleStartProcessing = useCallback(async (files, settings) => {
-		dispatch({ type: 'SET_SETTINGS', settings });
+		dispatch({ type: 'SET_SETTINGS', settings: { ...settings, typefaceTitle } });
 		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.PROCESSING, totalFiles: files.length });
 		cancelRef.current = false;
 		setProcessingCancelled(false);
@@ -135,10 +145,22 @@ export default function UploadModal({
 		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
 	}, []);
 
-	/** Receive execution result and mark complete */
+	/** Receive execution result — transition to instance mapping if VFs exist, otherwise complete */
 	const handleExecutionComplete = useCallback((result) => {
 		setExecutionResult(result);
-		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+		if (hasVFs && result.success !== false) {
+			// Show instance mapping step before summary
+			setInstanceMappingPhase(true);
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+		} else {
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+		}
+	}, [hasVFs]);
+
+	/** Handle instance mapping completion */
+	const handleInstanceMappingComplete = useCallback((result) => {
+		setInstanceMappingResult(result);
+		setInstanceMappingPhase(false);
 	}, []);
 
 	if (!open) return null;
@@ -163,7 +185,7 @@ export default function UploadModal({
 				<Flex direction="column" gap={3} style={{ width: '100%' }}>
 					<Text weight="semibold" size={2}>Upload Fonts</Text>
 					<Flex gap={1} style={{ width: '100%' }}>
-						{STEPS.map((step, i) => {
+						{STEPS.filter(step => step.key !== 4 || hasVFs).map((step, i) => {
 							const isActive = currentStep === step.key;
 							const isCompleted = currentStep > step.key;
 							const isClickable = !isExecuting && step.key < currentStep;
@@ -245,15 +267,29 @@ export default function UploadModal({
 					/>
 				)}
 
+				{/* Step 4: Variable Font Instance Mapping (only if VFs in batch) */}
+				{plan.phase === PLAN_PHASE.COMPLETE && instanceMappingPhase && (
+					<UploadStep3bInstances
+						plan={plan}
+						executionResult={executionResult}
+						client={client}
+						typefaceTitle={typefaceTitle}
+						onComplete={handleInstanceMappingComplete}
+					/>
+				)}
+
 				{/* Post-completion Summary */}
-				{plan.phase === PLAN_PHASE.COMPLETE && (
+				{plan.phase === PLAN_PHASE.COMPLETE && !instanceMappingPhase && (
 					<UploadSummary
 						plan={plan}
 						result={executionResult}
+						instanceMappingResult={instanceMappingResult}
 						onClose={handleClose}
 						onRetry={(failedTempIds) => {
 							setRetryTempIds(failedTempIds || null);
 							setExecutionResult(null);
+							setInstanceMappingPhase(false);
+							setInstanceMappingResult(null);
 							dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
 						}}
 						client={client}

package/src/components/UploadStep1Settings.jsx

@@ -235,7 +235,7 @@ export default function UploadStep1Settings({ settings, onStartProcessing }) {
 										>
 											{ext.toUpperCase()}
 										</Badge>
-										<Text size={1} style={{ flex: 1, textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+										<Text size={1} style={{ flex: 1 }}>
 											{file.name}
 										</Text>
 										<Button

package/src/components/UploadStep2Review.jsx

@@ -431,6 +431,8 @@ export default function UploadStep2Review({
 								entry={entry}
 								dispatch={dispatch}
 								allExpanded={allExpanded}
+								typefaceTitle={plan.settings?.typefaceTitle}
+								price={plan.settings?.price}
 							/>
 						))}
 					</Stack>

package/src/components/UploadStep3Execute.jsx

@@ -181,7 +181,7 @@ export default function UploadStep3Execute({
 						return (
 							<Card key={entry.tempId} border radius={1} padding={2}>
 								<Flex align="center" gap={2}>
-									<Text size={1} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+									<Text size={1} style={{ flex: 1 }}>
 										{entry.title}
 									</Text>
 									<Box style={{ width: 120, flexShrink: 0, textAlign: 'right' }}>