@liiift-studio/sanity-font-manager 2.2.0 → 2.3.1

package/README.md

@@ -91,6 +91,78 @@ Updates and re-links existing script font variant references on font documents
 
 Recalculates and patches the `subfamily` field on all fonts linked to a typeface, based on the typeface's defined subfamily groups — without re-uploading any files.
 
+### `KeyValueInput`
+
+Generic ordered key-value editor where both keys and values are plain strings. Supports add, remove, and reorder (up/down arrows). Values are stored as an array of `{ key, value }` objects.
+
+```jsx
+import { KeyValueInput } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'aliases',
+  type: 'array',
+  of: [{ type: 'object', fields: [{ name: 'key', type: 'string' }, { name: 'value', type: 'string' }] }],
+  components: { input: KeyValueInput },
+}
+```
+
+### `KeyValueReferenceInput`
+
+Generic key-value editor where keys are plain strings and values are weak Sanity document references. Supports searching by title via a popover picker, add/remove/reorder, and an optional `topActions` slot for action buttons above the list.
+
+| Prop | Type | Description |
+|---|---|---|
+| `fetchReferences` | `async (client, doc) => [{_id, title}]` | Async function that returns candidate references for the picker. Receives the Sanity client and the current document. |
+| `topActions` | `ReactNode` | Optional content rendered above the key-value rows (e.g. autofill buttons). |
+| `referenceType` | `string` | Document type for the created weak references (default: `'font'`). |
+
+```jsx
+import { KeyValueReferenceInput } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'instanceMap',
+  type: 'array',
+  of: [{ type: 'object', fields: [{ name: 'key', type: 'string' }, { name: 'value', type: 'reference', weak: true, to: [{ type: 'font' }] }] }],
+  components: { input: KeyValueReferenceInput },
+  // Pass props via options or a wrapper component:
+  options: {
+    fetchReferences: async (client, doc) => client.fetch('*[_type == "font"]{_id, title}'),
+    referenceType: 'font',
+  },
+}
+```
+
+### `VariableInstanceReferencesInput`
+
+Font-specific wrapper around `KeyValueReferenceInput` for mapping variable font instance names to their matching static font documents. Provides:
+
+- A picker filtered to fonts sharing the same `typefaceName`, excluding variable fonts
+- **Autofill with Matching** — calls `parseVariableFontInstances` to match instance names to existing font documents by weight/style heuristics
+- **Autofill Keys Only** — populates instance name keys from the font's `variableInstances` metadata without resolving references
+- Autofill buttons are shown only when the document is a variable font with parsed instance data
+- Replace/merge confirmation dialog when pairs already exist
+
+```jsx
+import { VariableInstanceReferencesInput } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'variableInstanceReferences',
+  title: 'Variable Font Instances',
+  type: 'array',
+  hidden: ({ parent }) => !parent.variableFont,
+  of: [
+    {
+      type: 'object',
+      fields: [
+        { name: 'key', type: 'string', title: 'Instance Name' },
+        { name: 'value', type: 'reference', weak: true, to: [{ type: 'font' }], title: 'Matching Font' },
+      ],
+    },
+  ],
+  components: { input: VariableInstanceReferencesInput },
+}
+```
+
 ### `StatusDisplay`
 
 Shared status bar used by all components. Shows `Status: [message]` in green on success and red on error, with an optional `action` element slot on the far right (used for the advanced toggle in `SingleUploaderTool`).
@@ -209,6 +281,7 @@ const client = useSanityClient();
 | `glyphCount` | `number` | Total number of glyphs |
 | `opentypeFeatures` | `object` | Available OpenType feature tags |
 | `characterSet` | `object` | Array of Unicode code points covered by the font |
+| `variableInstanceReferences` | `array<object>` | Maps variable font instance names to static font document references — `[{ key: string, value: reference }]` |
 
 ### Typeface document (`typeface`)
 

package/dist/index.js

@@ -33,6 +33,8 @@ __export(index_exports, {
   FontScriptUploaderComponent: () => FontScriptUploaderComponent,
   GenerateCollectionsPairsComponent: () => GenerateCollectionsPairsComponent,
   HtmlDescription: () => HtmlDescription,
+  KeyValueInput: () => KeyValueInput,
+  KeyValueReferenceInput: () => KeyValueReferenceInput,
   PriceInput: () => PriceInput_default,
   RegenerateSubfamiliesComponent: () => RegenerateSubfamiliesComponent,
   SCRIPTS: () => SCRIPTS,
@@ -42,6 +44,7 @@ __export(index_exports, {
   UpdateScriptsComponent: () => UpdateScriptsComponent,
   UploadButton: () => UploadButton_default,
   UploadScriptsComponent: () => UploadScriptsComponent,
+  VariableInstanceReferencesInput: () => VariableInstanceReferencesInput,
   addItalicToFontTitle: () => addItalicToFontTitle,
   createFontObject: () => createFontObject,
   determineWeight: () => determineWeight,
@@ -2911,7 +2914,7 @@ var SingleUploaderTool = (props) => {
         }
       )
     }
-  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ import_react8.default.createElement(import_ui7.Grid, { columns: [2], gap: 2 }, /* @__PURE__ */ import_react8.default.createElement(
+  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ import_react8.default.createElement(import_ui7.Grid, { columns: [1, 2], gap: 2 }, /* @__PURE__ */ import_react8.default.createElement(
     import_ui7.Button,
     {
       mode: "ghost",
@@ -3575,6 +3578,392 @@ var UploadButton = (0, import_react12.forwardRef)(({ handleUpload }, ref) => {
 UploadButton.displayName = "UploadButton";
 var UploadButton_default = UploadButton;
 
+// src/components/KeyValueInput.jsx
+var import_react13 = __toESM(require("react"));
+var import_ui11 = require("@sanity/ui");
+var import_icons3 = require("@sanity/icons");
+var import_sanity9 = require("sanity");
+function KeyValueInput({ value = [], onChange }) {
+  const [pairs, setPairs] = (0, import_react13.useState)(value);
+  const handlePairChange = (0, import_react13.useCallback)((index, field, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+    setPairs(updatedPairs);
+    onChange((0, import_sanity9.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleAddPair = (0, import_react13.useCallback)(() => {
+    const newPair = { key: "", value: "", _key: Math.random().toString(36).substr(2, 9) };
+    const updatedPairs = [...pairs, newPair];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity9.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleRemovePair = (0, import_react13.useCallback)((index) => {
+    const updatedPairs = pairs.filter((_, idx) => idx !== index);
+    setPairs(updatedPairs);
+    onChange((0, import_sanity9.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveUp = (0, import_react13.useCallback)((index) => {
+    if (index === 0) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index - 1]] = [updatedPairs[index - 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity9.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveDown = (0, import_react13.useCallback)((index) => {
+    if (index === pairs.length - 1) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index + 1]] = [updatedPairs[index + 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity9.set)(updatedPairs));
+  }, [pairs, onChange]);
+  return /* @__PURE__ */ import_react13.default.createElement(import_ui11.Stack, { space: 3 }, pairs.map((pair, index) => /* @__PURE__ */ import_react13.default.createElement(import_ui11.Grid, { className: "manualButtonWrap", columns: [2], key: index, gap: 0, style: { position: "relative" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { position: "absolute", height: "100%", top: "0", left: "-10px", width: "min-content", transform: "translate(-100%, 0%)" } }, /* @__PURE__ */ import_react13.default.createElement("button", { className: "manualButton manualButtonUp", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveUp(index) }, /* @__PURE__ */ import_react13.default.createElement(import_icons3.ArrowUpIcon, null)), /* @__PURE__ */ import_react13.default.createElement("button", { className: "manualButton manualButtonDown", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveDown(index) }, /* @__PURE__ */ import_react13.default.createElement(import_icons3.ArrowDownIcon, null))), /* @__PURE__ */ import_react13.default.createElement(
+    import_ui11.TextInput,
+    {
+      value: pair.key,
+      onChange: (e) => handlePairChange(index, "key", e.target.value),
+      placeholder: "Key"
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement("div", { style: { marginLeft: "-1px" } }, /* @__PURE__ */ import_react13.default.createElement(
+    import_ui11.TextInput,
+    {
+      value: pair.value,
+      onChange: (e) => handlePairChange(index, "value", e.target.value),
+      placeholder: "Value"
+    }
+  )), /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      className: "manualButton",
+      onClick: () => handleRemovePair(index),
+      style: { position: "absolute", top: "0", right: "-10px", transform: "translate(100%, 0%)" }
+    },
+    /* @__PURE__ */ import_react13.default.createElement(import_icons3.TrashIcon, null)
+  ))), /* @__PURE__ */ import_react13.default.createElement(import_ui11.Button, { tone: "primary", onClick: handleAddPair, icon: import_icons3.AddIcon, text: "Add Row" }));
+}
+
+// src/components/KeyValueReferenceInput.jsx
+var import_react14 = __toESM(require("react"));
+var import_ui12 = require("@sanity/ui");
+var import_icons4 = require("@sanity/icons");
+var import_sanity10 = require("sanity");
+var import_nanoid8 = require("nanoid");
+function KeyValueReferenceInput(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { value = [], onChange, schemaType, referenceType, fetchReferences, topActions } = props;
+  const [pairs, setPairs] = (0, import_react14.useState)(value);
+  const [referenceData, setReferenceData] = (0, import_react14.useState)({});
+  const [isDialogOpen, setIsDialogOpen] = (0, import_react14.useState)(false);
+  const [editingIndex, setEditingIndex] = (0, import_react14.useState)(null);
+  const [availableReferences, setAvailableReferences] = (0, import_react14.useState)([]);
+  const sanityClient = useSanityClient();
+  const formDocument = (0, import_sanity10.useFormValue)([]);
+  (0, import_react14.useEffect)(() => {
+    const refIds = pairs.filter((p) => {
+      var _a2;
+      return (_a2 = p.value) == null ? void 0 : _a2._ref;
+    }).map((p) => p.value._ref);
+    if (refIds.length === 0) return;
+    if (!sanityClient) {
+      const fallback = {};
+      refIds.forEach((id) => {
+        fallback[id] = `Reference (${id.substring(0, 6)}...)`;
+      });
+      setReferenceData(fallback);
+      return;
+    }
+    sanityClient.fetch(`*[_id in $ids]{_id, title}`, { ids: refIds }).then((result) => {
+      const map = {};
+      result.forEach((item) => {
+        map[item._id] = item.title;
+      });
+      setReferenceData(map);
+    }).catch((err) => {
+      console.error("Error fetching reference data:", err);
+      const fallback = {};
+      refIds.forEach((id) => {
+        fallback[id] = `Reference (${id.substring(0, 6)}...)`;
+      });
+      setReferenceData(fallback);
+    });
+  }, [pairs, sanityClient]);
+  const handlePairChange = (0, import_react14.useCallback)((index, field, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+    setPairs(updatedPairs);
+    onChange((0, import_sanity10.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleAddPair = (0, import_react14.useCallback)(() => {
+    const updatedPairs = [...pairs, { key: "", value: null, _key: (0, import_nanoid8.nanoid)() }];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity10.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleRemovePair = (0, import_react14.useCallback)((index) => {
+    const updatedPairs = pairs.filter((_, idx) => idx !== index);
+    setPairs(updatedPairs);
+    onChange((0, import_sanity10.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveUp = (0, import_react14.useCallback)((index) => {
+    if (index === 0) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index - 1]] = [updatedPairs[index - 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity10.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveDown = (0, import_react14.useCallback)((index) => {
+    if (index === pairs.length - 1) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index + 1]] = [updatedPairs[index + 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange((0, import_sanity10.set)(updatedPairs));
+  }, [pairs, onChange]);
+  const openReferenceSelector = (0, import_react14.useCallback)(async (index) => {
+    setEditingIndex(index);
+    if (!sanityClient) {
+      console.error("KeyValueReferenceInput: Sanity client not available");
+      return;
+    }
+    try {
+      let refs;
+      if (fetchReferences) {
+        refs = await fetchReferences(sanityClient, formDocument);
+      } else if (referenceType) {
+        refs = await sanityClient.fetch(`*[_type == $type]{_id, title}`, { type: referenceType });
+      } else {
+        console.warn("KeyValueReferenceInput: provide a fetchReferences prop or referenceType");
+        refs = [];
+      }
+      setAvailableReferences(refs);
+      setIsDialogOpen(true);
+    } catch (err) {
+      console.error("Error fetching available references:", err);
+    }
+  }, [sanityClient, fetchReferences, referenceType, formDocument]);
+  const closeDialog = (0, import_react14.useCallback)(() => {
+    setIsDialogOpen(false);
+    setEditingIndex(null);
+  }, []);
+  const handleReferenceSelect = (0, import_react14.useCallback)((reference) => {
+    if (editingIndex === null) return;
+    handlePairChange(editingIndex, "value", { _type: "reference", _ref: reference._id, _weak: true });
+    closeDialog();
+  }, [editingIndex, handlePairChange, closeDialog]);
+  const referenceOptions = availableReferences.map((ref) => ({ value: ref._id, title: ref.title }));
+  const keyField = (_d = (_c = (_b = (_a = schemaType == null ? void 0 : schemaType.options) == null ? void 0 : _a.of) == null ? void 0 : _b[0]) == null ? void 0 : _c.fields) == null ? void 0 : _d.find((f) => f.name === "key");
+  const valueField = (_h = (_g = (_f = (_e = schemaType == null ? void 0 : schemaType.options) == null ? void 0 : _e.of) == null ? void 0 : _f[0]) == null ? void 0 : _g.fields) == null ? void 0 : _h.find((f) => f.name === "value");
+  const keyTitle = (keyField == null ? void 0 : keyField.title) || "Key";
+  const valueTitle = (valueField == null ? void 0 : valueField.title) || "Value";
+  const keyPlaceholder = (keyField == null ? void 0 : keyField.placeholder) || "Enter key";
+  const pickerLabel = referenceType || valueTitle.toLowerCase();
+  return /* @__PURE__ */ import_react14.default.createElement(import_ui12.Stack, { space: 3 }, topActions && /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, { paddingBottom: 2 }, topActions), /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, null, /* @__PURE__ */ import_react14.default.createElement(import_ui12.Stack, { space: 2 }, pairs.map((pair, index) => {
+    var _a2;
+    return /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, { key: index, style: { position: "relative" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: { position: "absolute", height: "100%", top: "0", left: "-5px", width: "min-content", transform: "translate(-100%, 0%)" } }, /* @__PURE__ */ import_react14.default.createElement("button", { className: "manualButton manualButtonUp", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveUp(index) }, /* @__PURE__ */ import_react14.default.createElement(import_icons4.ArrowUpIcon, null)), /* @__PURE__ */ import_react14.default.createElement("button", { className: "manualButton manualButtonDown", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveDown(index) }, /* @__PURE__ */ import_react14.default.createElement(import_icons4.ArrowDownIcon, null))), /* @__PURE__ */ import_react14.default.createElement(import_ui12.Flex, { gap: 2, align: "flex-start" }, /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, { flex: 1 }, /* @__PURE__ */ import_react14.default.createElement(
+      import_ui12.TextInput,
+      {
+        value: pair.key,
+        onChange: (e) => handlePairChange(index, "key", e.target.value),
+        placeholder: keyPlaceholder
+      }
+    )), /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, { flex: 1, style: { minHeight: "100%" } }, ((_a2 = pair.value) == null ? void 0 : _a2._ref) ? /* @__PURE__ */ import_react14.default.createElement(import_ui12.Card, { className: "referenceCard", radius: 2, tone: "primary", style: { paddingLeft: "1rem", height: "fit-content" } }, /* @__PURE__ */ import_react14.default.createElement(import_ui12.Flex, { align: "center", justify: "space-between" }, /* @__PURE__ */ import_react14.default.createElement(
+      import_ui12.Text,
+      {
+        size: 2,
+        style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "90%" }
+      },
+      referenceData[pair.value._ref] || "Loading..."
+    ), /* @__PURE__ */ import_react14.default.createElement(
+      import_ui12.MenuButton,
+      {
+        button: /* @__PURE__ */ import_react14.default.createElement(import_ui12.Button, { icon: import_icons4.EllipsisHorizontalIcon, mode: "bleed", title: "Options" }),
+        id: `ref-options-${index}`,
+        menu: /* @__PURE__ */ import_react14.default.createElement(import_ui12.Menu, null, /* @__PURE__ */ import_react14.default.createElement(import_ui12.MenuItem, { tone: "critical", icon: import_icons4.TrashIcon, text: "Remove", onClick: () => handlePairChange(index, "value", null) }), /* @__PURE__ */ import_react14.default.createElement(import_ui12.MenuItem, { icon: import_icons4.SyncIcon, text: "Replace", onClick: () => openReferenceSelector(index) })),
+        popover: { portal: true, tone: "default", placement: "left" }
+      }
+    ))) : /* @__PURE__ */ import_react14.default.createElement(
+      import_ui12.Box,
+      {
+        padding: 2,
+        style: { minHeight: "100%", border: "1px dashed #ccc", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
+        onClick: () => openReferenceSelector(index)
+      },
+      /* @__PURE__ */ import_react14.default.createElement(import_ui12.Text, { muted: true, size: 2 }, "Click to select a ", pickerLabel)
+    ))), /* @__PURE__ */ import_react14.default.createElement(
+      "button",
+      {
+        className: "manualButton",
+        onClick: () => handleRemovePair(index),
+        style: { position: "absolute", top: "0", right: "-7px", transform: "translate(100%, 0%)" }
+      },
+      /* @__PURE__ */ import_react14.default.createElement(import_icons4.TrashIcon, null)
+    ));
+  }))), /* @__PURE__ */ import_react14.default.createElement(import_ui12.Button, { tone: "primary", mode: "ghost", onClick: handleAddPair, icon: import_icons4.AddIcon, text: `Add ${keyTitle}` }), isDialogOpen && /* @__PURE__ */ import_react14.default.createElement(
+    import_ui12.Dialog,
+    {
+      header: `Select a ${pickerLabel}`,
+      id: "reference-selector-dialog",
+      onClose: closeDialog,
+      width: 1
+    },
+    /* @__PURE__ */ import_react14.default.createElement(import_ui12.Box, { padding: 4 }, /* @__PURE__ */ import_react14.default.createElement(
+      import_ui12.Autocomplete,
+      {
+        id: "reference-autocomplete",
+        options: referenceOptions,
+        placeholder: `Search ${pickerLabel}s...`,
+        renderOption: (option) => /* @__PURE__ */ import_react14.default.createElement(import_ui12.Card, { key: option.value, padding: 3, radius: 2, tone: "default", style: { cursor: "pointer" } }, /* @__PURE__ */ import_react14.default.createElement(import_ui12.Text, { size: 2 }, option.title)),
+        renderValue: (val) => {
+          var _a2;
+          return ((_a2 = referenceOptions.find((o) => o.value === val)) == null ? void 0 : _a2.title) || "";
+        },
+        onChange: (newValue) => {
+          const selected = availableReferences.find((r) => r._id === newValue);
+          if (selected) handleReferenceSelect(selected);
+        },
+        openButton: true,
+        fontSize: 2
+      }
+    ))
+  ));
+}
+
+// src/components/VariableInstanceReferencesInput.jsx
+var import_react15 = __toESM(require("react"));
+var import_ui13 = require("@sanity/ui");
+var import_icons5 = require("@sanity/icons");
+var import_sanity11 = require("sanity");
+var import_nanoid9 = require("nanoid");
+function VariableInstanceReferencesInput(props) {
+  const { value = [], onChange } = props;
+  const [isAutofilling, setIsAutofilling] = (0, import_react15.useState)(false);
+  const [showConfirmDialog, setShowConfirmDialog] = (0, import_react15.useState)(false);
+  const [pendingAction, setPendingAction] = (0, import_react15.useState)(null);
+  const formDocument = (0, import_sanity11.useFormValue)([]);
+  const sanityClient = useSanityClient();
+  const fetchReferences = (0, import_react15.useCallback)(async (client, doc) => {
+    const typefaceName = doc == null ? void 0 : doc.typefaceName;
+    if (!typefaceName) {
+      return client.fetch(`*[_type == 'font' && variableFont != true]{_id, title}`, {});
+    }
+    return client.fetch(
+      `*[_type == 'font' && typefaceName == $typefaceName && variableFont != true]{_id, title}`,
+      { typefaceName }
+    );
+  }, []);
+  const performAutofillWithMatching = (0, import_react15.useCallback)(async (mode) => {
+    setIsAutofilling(true);
+    try {
+      if (!(formDocument == null ? void 0 : formDocument.variableInstances)) {
+        console.warn("Cannot autofill: no variableInstances data on this document");
+        return;
+      }
+      const mappings = await parseVariableFontInstances(formDocument, sanityClient);
+      if (mappings.length === 0) {
+        console.warn("No variable instances could be parsed from this font");
+        return;
+      }
+      const updatedPairs = mode === "replace" ? mappings : [...value, ...mappings.filter((m) => !value.some((p) => p.key === m.key))];
+      onChange((0, import_sanity11.set)(updatedPairs));
+    } catch (err) {
+      console.error("Error during autofill with matching:", err);
+    } finally {
+      setIsAutofilling(false);
+    }
+  }, [formDocument, sanityClient, value, onChange]);
+  const performAutofillKeysOnly = (0, import_react15.useCallback)(async (mode) => {
+    setIsAutofilling(true);
+    try {
+      if (!(formDocument == null ? void 0 : formDocument.variableInstances)) {
+        console.warn("Cannot autofill: no variableInstances data on this document");
+        return;
+      }
+      let instances;
+      try {
+        instances = JSON.parse(formDocument.variableInstances);
+      } catch {
+        console.error("Invalid variableInstances JSON on this document");
+        return;
+      }
+      const keys = Object.keys(instances);
+      if (keys.length === 0) {
+        console.warn("No variable instances found in JSON");
+        return;
+      }
+      const keyOnlyPairs = keys.map((key) => ({ key, value: null, _key: (0, import_nanoid9.nanoid)() }));
+      const updatedPairs = mode === "replace" ? keyOnlyPairs : [...value, ...keyOnlyPairs.filter((p) => !value.some((existing) => existing.key === p.key))];
+      onChange((0, import_sanity11.set)(updatedPairs));
+    } catch (err) {
+      console.error("Error during keys-only autofill:", err);
+    } finally {
+      setIsAutofilling(false);
+    }
+  }, [formDocument, value, onChange]);
+  const handleAutofillWithMatching = (0, import_react15.useCallback)(() => {
+    if (value.length > 0) {
+      setPendingAction("matching");
+      setShowConfirmDialog(true);
+      return;
+    }
+    performAutofillWithMatching("replace");
+  }, [value, performAutofillWithMatching]);
+  const handleAutofillKeysOnly = (0, import_react15.useCallback)(() => {
+    if (value.length > 0) {
+      setPendingAction("keysOnly");
+      setShowConfirmDialog(true);
+      return;
+    }
+    performAutofillKeysOnly("replace");
+  }, [value, performAutofillKeysOnly]);
+  const handleConfirmChoice = (0, import_react15.useCallback)(async (choice) => {
+    setShowConfirmDialog(false);
+    if (pendingAction === "matching") await performAutofillWithMatching(choice);
+    else if (pendingAction === "keysOnly") await performAutofillKeysOnly(choice);
+    setPendingAction(null);
+  }, [pendingAction, performAutofillWithMatching, performAutofillKeysOnly]);
+  const handleConfirmCancel = (0, import_react15.useCallback)(() => {
+    setShowConfirmDialog(false);
+    setPendingAction(null);
+  }, []);
+  const showAutofill = !!((formDocument == null ? void 0 : formDocument.variableFont) && (formDocument == null ? void 0 : formDocument.variableInstances));
+  const topActions = showAutofill ? /* @__PURE__ */ import_react15.default.createElement(import_ui13.Flex, { gap: 2 }, /* @__PURE__ */ import_react15.default.createElement(
+    import_ui13.Button,
+    {
+      tone: "primary",
+      mode: "ghost",
+      onClick: handleAutofillWithMatching,
+      icon: import_icons5.SyncIcon,
+      text: "Autofill with Matching",
+      disabled: isAutofilling,
+      loading: isAutofilling
+    }
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    import_ui13.Button,
+    {
+      tone: "default",
+      mode: "ghost",
+      onClick: handleAutofillKeysOnly,
+      icon: import_icons5.DocumentTextIcon,
+      text: "Autofill Keys Only",
+      disabled: isAutofilling,
+      loading: isAutofilling
+    }
+  )) : null;
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
+    KeyValueReferenceInput,
+    {
+      ...props,
+      referenceType: "font",
+      fetchReferences,
+      topActions
+    }
+  ), showConfirmDialog && /* @__PURE__ */ import_react15.default.createElement(
+    import_ui13.Dialog,
+    {
+      header: "Existing entries found",
+      id: "autofill-confirm-dialog",
+      onClose: handleConfirmCancel,
+      width: 1
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_ui13.Box, { padding: 4 }, /* @__PURE__ */ import_react15.default.createElement(import_ui13.Stack, { space: 4 }, /* @__PURE__ */ import_react15.default.createElement(import_ui13.Text, null, "You already have ", value.length, " ", value.length === 1 ? "entry" : "entries", ". How would you like to proceed?"), /* @__PURE__ */ import_react15.default.createElement(import_ui13.Flex, { gap: 2, justify: "flex-end" }, /* @__PURE__ */ import_react15.default.createElement(import_ui13.Button, { text: "Cancel", mode: "ghost", onClick: handleConfirmCancel }), /* @__PURE__ */ import_react15.default.createElement(import_ui13.Button, { text: "Merge (Add New)", tone: "primary", mode: "ghost", onClick: () => handleConfirmChoice("merge") }), /* @__PURE__ */ import_react15.default.createElement(import_ui13.Button, { text: "Replace All", tone: "critical", onClick: () => handleConfirmChoice("replace") }))))
+  ));
+}
+
 // src/utils/getEmptyFontKit.js
 var fontkit7 = __toESM(require("fontkit"));
 var import_slugify4 = __toESM(require("slugify"));
@@ -3658,6 +4047,8 @@ var readFontFile2 = (file) => {
   FontScriptUploaderComponent,
   GenerateCollectionsPairsComponent,
   HtmlDescription,
+  KeyValueInput,
+  KeyValueReferenceInput,
   PriceInput,
   RegenerateSubfamiliesComponent,
   SCRIPTS,
@@ -3667,6 +4058,7 @@ var readFontFile2 = (file) => {
   UpdateScriptsComponent,
   UploadButton,
   UploadScriptsComponent,
+  VariableInstanceReferencesInput,
   addItalicToFontTitle,
   createFontObject,
   determineWeight,