@liiift-studio/sanity-font-manager 2.3.6 → 2.3.8

package/dist/index.js

@@ -3592,8 +3592,8 @@ 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);
+  const handlePairChange = (0, import_react13.useCallback)((index, field2, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field2]: fieldValue } : pair);
     setPairs(updatedPairs);
     onChange((0, import_sanity9.set)(updatedPairs));
   }, [pairs, onChange]);
@@ -3692,8 +3692,8 @@ function KeyValueReferenceInput(props) {
       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);
+  const handlePairChange = (0, import_react14.useCallback)((index, field2, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field2]: fieldValue } : pair);
     setPairs(updatedPairs);
     onChange((0, import_sanity10.set)(updatedPairs));
   }, [pairs, onChange]);
@@ -6654,6 +6654,7 @@ var stylisticSetField = {
 
 // src/schema/stylesField.js
 var import_sanity_advanced_reference_array = require("sanity-advanced-reference-array");
+var field = (condition, def) => condition ? [def] : [];
 var fontsFilter = async ({ getClient, document, parent }) => {
   const client = getClient({ apiVersion: "2022-11-09" });
   const typefaceName = document.title;
@@ -6676,20 +6677,31 @@ var variableFontsFilter = async ({ getClient, document, parent }) => {
     params: { existingItems, relatedItemsFiltered }
   };
 };
+var subfamilyPreferredStyleFilter = async ({ getClient, document, parent }) => {
+  const client = getClient({ apiVersion: "2022-11-09" });
+  const typefaceName = document.title;
+  const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
+  const relatedItemsFiltered = fonts.map((f) => f._id).filter(Boolean);
+  const existingItems = parent.fonts.map((f) => f._ref).filter(Boolean);
+  return {
+    filter: "(_id in $existingItems) && (_id in $relatedItemsFiltered)",
+    params: { existingItems, relatedItemsFiltered }
+  };
+};
 function createStylesField({
-  hasFreeFlag = false,
-  displayStylesHidden = false,
-  hasSortHeaviestFirst = false,
-  hasBuySectionColumns = false,
-  hasFontSizeMultiplier = false,
-  hasSerifFlag = false,
-  hasRegenerateSubfamilies = false,
-  hasSubfamilyFontSizeMultiplier = false,
-  hasSubfamilyUseListOrder = false,
-  hasSubfamilyPreferredStyle = false,
-  hasSubfamilyFontFilter = false,
-  hasSubfamilyPreview = false,
-  pairsHidden = false
+  free = false,
+  displayStyles = true,
+  sortHeaviestFirst = false,
+  buySectionColumns = false,
+  fontSizeMultiplier = false,
+  serif = false,
+  regenerateSubfamilies: regenerateSubfamilies2 = false,
+  subfamilyFontSizeMultiplier = false,
+  subfamilyListOrder = false,
+  subfamilyPreferredStyle = false,
+  subfamilyFontFilter = false,
+  subfamilyPreview = false,
+  pairs = true
 } = {}) {
   const subfamilyFields = [
     {
@@ -6697,21 +6709,21 @@ function createStylesField({
       name: "title",
       type: "string"
     },
-    ...hasSubfamilyFontSizeMultiplier ? [{
+    ...field(subfamilyFontSizeMultiplier, {
       title: "Subfamily Font Size Multiplier",
       name: "fontSizeMultiplier",
       type: "number",
       initialValue: 1,
       description: "Adjust font size for this subfamily in the Family Overview (Design Space). Default is 1.0 (100%). Range: 0.5 to 2.0",
       validation: (Rule) => Rule.min(0.5).max(2).precision(2)
-    }] : [],
-    ...hasSubfamilyUseListOrder ? [{
+    }),
+    ...field(subfamilyListOrder, {
       title: "Use List Order",
       name: "useListOrder",
       type: "boolean",
       initialValue: false,
       description: "Display fonts in the manual order listed below, bypassing programmatic weight-based sorting in the Family Overview."
-    }] : [],
+    }),
     {
       title: "Fonts",
       name: "fonts",
@@ -6720,88 +6732,75 @@ function createStylesField({
       of: [{ type: "reference", weak: true, to: [{ type: "font" }] }],
       options: {
         sortable: true,
-        ...hasSubfamilyFontFilter ? { filter: fontsFilter } : {}
+        ...subfamilyFontFilter ? { filter: fontsFilter } : {}
       }
     },
-    ...hasSubfamilyPreferredStyle ? [{
-      title: "SubFamily Preferred Style",
+    ...field(subfamilyPreferredStyle, {
+      title: "Subfamily Preferred Style",
       name: "preferredStyle",
       type: "reference",
       weak: true,
       to: [{ type: "font" }],
-      options: {
-        filter: async ({ getClient, document, parent }) => {
-          const client = getClient({ apiVersion: "2022-11-09" });
-          const typefaceName = document.title;
-          const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
-          const relatedItemsFiltered = fonts.map((f) => f._id).filter(Boolean);
-          const existingItems = parent.fonts.map((f) => f._ref).filter(Boolean);
-          return {
-            filter: "(_id in $existingItems) && (_id in $relatedItemsFiltered)",
-            params: { existingItems, relatedItemsFiltered }
-          };
-        }
-      }
-    }] : []
+      options: { filter: subfamilyPreferredStyleFilter }
+    })
   ];
   const subfamilyItem = {
     type: "object",
     fields: subfamilyFields,
-    ...hasSubfamilyPreview ? {
+    ...subfamilyPreview ? {
       preview: {
         select: { title: "title", fonts: "fonts" },
-        prepare(props) {
-          const numFonts = Object.keys(props.fonts || {}).length;
-          return { title: props.title, subtitle: `${numFonts} fonts` };
+        prepare({ title, fonts }) {
+          return { title, subtitle: `${Object.keys(fonts || {}).length} fonts` };
         }
       }
     } : {}
   };
   const fields = [
-    ...hasFreeFlag ? [{
+    ...field(free, {
       title: "Free Typeface",
       name: "free",
       type: "boolean",
-      description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.',
-      initialValue: false
-    }] : [],
+      initialValue: false,
+      description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.'
+    }),
     {
       title: "Display All Styles",
       name: "displayStyles",
       type: "boolean",
       initialValue: true,
-      hidden: displayStylesHidden,
+      hidden: !displayStyles,
       description: "Show all Font Styles below collections in Buy Section"
     },
-    ...hasSortHeaviestFirst ? [{
+    ...field(sortHeaviestFirst, {
       title: "Sort Fonts Heaviest to Lightest",
       name: "sortHeaviestFirst",
       type: "boolean",
       initialValue: false,
       description: "Sort fonts by weight from heaviest (900) to lightest (100). Default is lightest to heaviest (industry standard)."
-    }] : [],
-    ...hasBuySectionColumns ? [{
+    }),
+    ...field(buySectionColumns, {
       title: "Multi Column Buy Section",
       name: "buySectionColumns",
       type: "boolean",
       initialValue: true,
       description: "Choose Single Column or Multi Column for the Buy Section, Default is Multi Column"
-    }] : [],
-    ...hasFontSizeMultiplier ? [{
+    }),
+    ...field(fontSizeMultiplier, {
       title: "Style Grid Font Size Multiplier",
       name: "fontSizeMultiplier",
       type: "number",
       initialValue: 1,
       description: "Adjust font size in the buy section style grid. Default is 1.0 (100%). Range: 0.5 to 2.0",
       validation: (Rule) => Rule.min(0.5).max(2).precision(2)
-    }] : [],
-    ...hasSerifFlag ? [{
+    }),
+    ...field(serif, {
       title: "Includes Serifs",
       name: "serif",
       type: "boolean",
       initialValue: false,
       description: "Check if this typeface includes serif letterforms. Used for typeface overview serif/sans filters. Frontend automatically treats non-serif typefaces as sans serif."
-    }] : [],
+    }),
     {
       title: "Fonts",
       name: "fonts",
@@ -6829,7 +6828,7 @@ function createStylesField({
       description: "Variable fonts are automatically included as a bonus when customers purchase all non-variable styles of this typeface.",
       options: { sortable: true }
     },
-    ...hasRegenerateSubfamilies ? [{
+    ...field(regenerateSubfamilies2, {
       title: "Regenerate Subfamilies",
       name: "regenerateSubfamilies",
       type: "string",
@@ -6839,9 +6838,9 @@ function createStylesField({
       },
       description: "Regenerates subfamily groups based on the fonts in this typeface.",
       components: { input: RegenerateSubfamiliesComponent }
-    }] : [],
+    }),
     {
-      title: "Sub Families",
+      title: "Subfamilies",
       name: "subfamilies",
       type: "array",
       of: [subfamilyItem]
@@ -6863,7 +6862,7 @@ function createStylesField({
       of: [{ type: "reference", weak: true, to: [{ type: "pair" }] }],
       options: { sortable: true },
       validation: (Rule) => Rule.unique(),
-      hidden: pairsHidden
+      hidden: !pairs
     }
   ];
   return {

package/dist/index.mjs

@@ -3506,8 +3506,8 @@ import { AddIcon, ArrowDownIcon, ArrowUpIcon, TrashIcon as TrashIcon3 } from "@s
 import { set as set4 } from "sanity";
 function KeyValueInput({ value = [], onChange }) {
   const [pairs, setPairs] = useState8(value);
-  const handlePairChange = useCallback7((index, field, fieldValue) => {
-    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+  const handlePairChange = useCallback7((index, field2, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field2]: fieldValue } : pair);
     setPairs(updatedPairs);
     onChange(set4(updatedPairs));
   }, [pairs, onChange]);
@@ -3606,8 +3606,8 @@ function KeyValueReferenceInput(props) {
       setReferenceData(fallback);
     });
   }, [pairs, sanityClient]);
-  const handlePairChange = useCallback8((index, field, fieldValue) => {
-    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+  const handlePairChange = useCallback8((index, field2, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field2]: fieldValue } : pair);
     setPairs(updatedPairs);
     onChange(set5(updatedPairs));
   }, [pairs, onChange]);
@@ -6568,6 +6568,7 @@ var stylisticSetField = {
 
 // src/schema/stylesField.js
 import { AdvancedRefArray } from "sanity-advanced-reference-array";
+var field = (condition, def) => condition ? [def] : [];
 var fontsFilter = async ({ getClient, document, parent }) => {
   const client = getClient({ apiVersion: "2022-11-09" });
   const typefaceName = document.title;
@@ -6590,20 +6591,31 @@ var variableFontsFilter = async ({ getClient, document, parent }) => {
     params: { existingItems, relatedItemsFiltered }
   };
 };
+var subfamilyPreferredStyleFilter = async ({ getClient, document, parent }) => {
+  const client = getClient({ apiVersion: "2022-11-09" });
+  const typefaceName = document.title;
+  const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
+  const relatedItemsFiltered = fonts.map((f) => f._id).filter(Boolean);
+  const existingItems = parent.fonts.map((f) => f._ref).filter(Boolean);
+  return {
+    filter: "(_id in $existingItems) && (_id in $relatedItemsFiltered)",
+    params: { existingItems, relatedItemsFiltered }
+  };
+};
 function createStylesField({
-  hasFreeFlag = false,
-  displayStylesHidden = false,
-  hasSortHeaviestFirst = false,
-  hasBuySectionColumns = false,
-  hasFontSizeMultiplier = false,
-  hasSerifFlag = false,
-  hasRegenerateSubfamilies = false,
-  hasSubfamilyFontSizeMultiplier = false,
-  hasSubfamilyUseListOrder = false,
-  hasSubfamilyPreferredStyle = false,
-  hasSubfamilyFontFilter = false,
-  hasSubfamilyPreview = false,
-  pairsHidden = false
+  free = false,
+  displayStyles = true,
+  sortHeaviestFirst = false,
+  buySectionColumns = false,
+  fontSizeMultiplier = false,
+  serif = false,
+  regenerateSubfamilies: regenerateSubfamilies2 = false,
+  subfamilyFontSizeMultiplier = false,
+  subfamilyListOrder = false,
+  subfamilyPreferredStyle = false,
+  subfamilyFontFilter = false,
+  subfamilyPreview = false,
+  pairs = true
 } = {}) {
   const subfamilyFields = [
     {
@@ -6611,21 +6623,21 @@ function createStylesField({
       name: "title",
       type: "string"
     },
-    ...hasSubfamilyFontSizeMultiplier ? [{
+    ...field(subfamilyFontSizeMultiplier, {
       title: "Subfamily Font Size Multiplier",
       name: "fontSizeMultiplier",
       type: "number",
       initialValue: 1,
       description: "Adjust font size for this subfamily in the Family Overview (Design Space). Default is 1.0 (100%). Range: 0.5 to 2.0",
       validation: (Rule) => Rule.min(0.5).max(2).precision(2)
-    }] : [],
-    ...hasSubfamilyUseListOrder ? [{
+    }),
+    ...field(subfamilyListOrder, {
       title: "Use List Order",
       name: "useListOrder",
       type: "boolean",
       initialValue: false,
       description: "Display fonts in the manual order listed below, bypassing programmatic weight-based sorting in the Family Overview."
-    }] : [],
+    }),
     {
       title: "Fonts",
       name: "fonts",
@@ -6634,88 +6646,75 @@ function createStylesField({
       of: [{ type: "reference", weak: true, to: [{ type: "font" }] }],
       options: {
         sortable: true,
-        ...hasSubfamilyFontFilter ? { filter: fontsFilter } : {}
+        ...subfamilyFontFilter ? { filter: fontsFilter } : {}
       }
     },
-    ...hasSubfamilyPreferredStyle ? [{
-      title: "SubFamily Preferred Style",
+    ...field(subfamilyPreferredStyle, {
+      title: "Subfamily Preferred Style",
       name: "preferredStyle",
       type: "reference",
       weak: true,
       to: [{ type: "font" }],
-      options: {
-        filter: async ({ getClient, document, parent }) => {
-          const client = getClient({ apiVersion: "2022-11-09" });
-          const typefaceName = document.title;
-          const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
-          const relatedItemsFiltered = fonts.map((f) => f._id).filter(Boolean);
-          const existingItems = parent.fonts.map((f) => f._ref).filter(Boolean);
-          return {
-            filter: "(_id in $existingItems) && (_id in $relatedItemsFiltered)",
-            params: { existingItems, relatedItemsFiltered }
-          };
-        }
-      }
-    }] : []
+      options: { filter: subfamilyPreferredStyleFilter }
+    })
   ];
   const subfamilyItem = {
     type: "object",
     fields: subfamilyFields,
-    ...hasSubfamilyPreview ? {
+    ...subfamilyPreview ? {
       preview: {
         select: { title: "title", fonts: "fonts" },
-        prepare(props) {
-          const numFonts = Object.keys(props.fonts || {}).length;
-          return { title: props.title, subtitle: `${numFonts} fonts` };
+        prepare({ title, fonts }) {
+          return { title, subtitle: `${Object.keys(fonts || {}).length} fonts` };
         }
       }
     } : {}
   };
   const fields = [
-    ...hasFreeFlag ? [{
+    ...field(free, {
       title: "Free Typeface",
       name: "free",
       type: "boolean",
-      description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.',
-      initialValue: false
-    }] : [],
+      initialValue: false,
+      description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.'
+    }),
     {
       title: "Display All Styles",
       name: "displayStyles",
       type: "boolean",
       initialValue: true,
-      hidden: displayStylesHidden,
+      hidden: !displayStyles,
       description: "Show all Font Styles below collections in Buy Section"
     },
-    ...hasSortHeaviestFirst ? [{
+    ...field(sortHeaviestFirst, {
       title: "Sort Fonts Heaviest to Lightest",
       name: "sortHeaviestFirst",
       type: "boolean",
       initialValue: false,
       description: "Sort fonts by weight from heaviest (900) to lightest (100). Default is lightest to heaviest (industry standard)."
-    }] : [],
-    ...hasBuySectionColumns ? [{
+    }),
+    ...field(buySectionColumns, {
       title: "Multi Column Buy Section",
       name: "buySectionColumns",
       type: "boolean",
       initialValue: true,
       description: "Choose Single Column or Multi Column for the Buy Section, Default is Multi Column"
-    }] : [],
-    ...hasFontSizeMultiplier ? [{
+    }),
+    ...field(fontSizeMultiplier, {
       title: "Style Grid Font Size Multiplier",
       name: "fontSizeMultiplier",
       type: "number",
       initialValue: 1,
       description: "Adjust font size in the buy section style grid. Default is 1.0 (100%). Range: 0.5 to 2.0",
       validation: (Rule) => Rule.min(0.5).max(2).precision(2)
-    }] : [],
-    ...hasSerifFlag ? [{
+    }),
+    ...field(serif, {
       title: "Includes Serifs",
       name: "serif",
       type: "boolean",
       initialValue: false,
       description: "Check if this typeface includes serif letterforms. Used for typeface overview serif/sans filters. Frontend automatically treats non-serif typefaces as sans serif."
-    }] : [],
+    }),
     {
       title: "Fonts",
       name: "fonts",
@@ -6743,7 +6742,7 @@ function createStylesField({
       description: "Variable fonts are automatically included as a bonus when customers purchase all non-variable styles of this typeface.",
       options: { sortable: true }
     },
-    ...hasRegenerateSubfamilies ? [{
+    ...field(regenerateSubfamilies2, {
       title: "Regenerate Subfamilies",
       name: "regenerateSubfamilies",
       type: "string",
@@ -6753,9 +6752,9 @@ function createStylesField({
       },
       description: "Regenerates subfamily groups based on the fonts in this typeface.",
       components: { input: RegenerateSubfamiliesComponent }
-    }] : [],
+    }),
     {
-      title: "Sub Families",
+      title: "Subfamilies",
       name: "subfamilies",
       type: "array",
       of: [subfamilyItem]
@@ -6777,7 +6776,7 @@ function createStylesField({
       of: [{ type: "reference", weak: true, to: [{ type: "pair" }] }],
       options: { sortable: true },
       validation: (Rule) => Rule.unique(),
-      hidden: pairsHidden
+      hidden: !pairs
     }
   ];
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.3.6",
+	"version": "2.3.8",
 	"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/schema/stylesField.js

@@ -2,7 +2,10 @@
 import { AdvancedRefArray } from 'sanity-advanced-reference-array';
 import { RegenerateSubfamiliesComponent } from '../components/RegenerateSubfamiliesComponent.jsx';
 
-// Shared GROQ filter — returns fonts from the same typeface, excluding items already in the array
+// Conditionally includes a field definition in an array
+const field = (condition, def) => condition ? [def] : [];
+
+// GROQ filter — fonts from the same typeface, excluding items already in the array
 const fontsFilter = async ({ getClient, document, parent }) => {
 	const client = getClient({ apiVersion: '2022-11-09' });
 	const typefaceName = document.title;
@@ -15,7 +18,7 @@ const fontsFilter = async ({ getClient, document, parent }) => {
 	};
 };
 
-// Shared GROQ filter — returns variable fonts from the same typeface, excluding items already in the array
+// GROQ filter — variable fonts from the same typeface, excluding items already in the array
 const variableFontsFilter = async ({ getClient, document, parent }) => {
 	const client = getClient({ apiVersion: '2022-11-09' });
 	const typefaceName = document.title;
@@ -28,61 +31,73 @@ const variableFontsFilter = async ({ getClient, document, parent }) => {
 	};
 };
 
+// GROQ filter — non-variable fonts already in the subfamily's fonts array, for preferred style picker
+const subfamilyPreferredStyleFilter = async ({ getClient, document, parent }) => {
+	const client = getClient({ apiVersion: '2022-11-09' });
+	const typefaceName = document.title;
+	const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
+	const relatedItemsFiltered = fonts.map(f => f._id).filter(Boolean);
+	const existingItems = parent.fonts.map(f => f._ref).filter(Boolean);
+	return {
+		filter: '(_id in $existingItems) && (_id in $relatedItemsFiltered)',
+		params: { existingItems, relatedItemsFiltered },
+	};
+};
+
 /**
  * Generates the Styles object field for a typeface document with configurable per-site options.
- * @param {Object} options
- * @param {boolean} [options.hasFreeFlag=false] - Add a "Free Typeface" boolean field (MCKL)
- * @param {boolean} [options.displayStylesHidden=false] - Hide the displayStyles boolean from editors (Darden, MCKL)
- * @param {boolean} [options.hasSortHeaviestFirst=false] - Add sort order toggle (TDF)
- * @param {boolean} [options.hasBuySectionColumns=false] - Add multi-column buy section toggle (TDF)
- * @param {boolean} [options.hasFontSizeMultiplier=false] - Add style grid font size multiplier (TDF)
- * @param {boolean} [options.hasSerifFlag=false] - Add serif/sans classification flag (TDF)
- * @param {boolean} [options.hasRegenerateSubfamilies=false] - Add the RegenerateSubfamilies action field (TDF, MCKL)
- * @param {boolean} [options.hasSubfamilyFontSizeMultiplier=false] - Add per-subfamily font size multiplier (TDF)
- * @param {boolean} [options.hasSubfamilyUseListOrder=false] - Add per-subfamily manual order toggle (TDF)
- * @param {boolean} [options.hasSubfamilyPreferredStyle=false] - Add per-subfamily preferred style reference (TDF)
- * @param {boolean} [options.hasSubfamilyFontFilter=false] - Filter subfamily font picker to typeface fonts only (TDF)
- * @param {boolean} [options.hasSubfamilyPreview=false] - Add preview to subfamily array items showing font count (MCKL)
- * @param {boolean} [options.pairsHidden=false] - Hide the pairs array from editors (Darden)
+ * @param {Object} [options]
+ * @param {boolean} [options.free=false] - Include "Free Typeface" boolean
+ * @param {boolean} [options.displayStyles=true] - Show "Display All Styles" toggle to editors
+ * @param {boolean} [options.sortHeaviestFirst=false] - Include sort order toggle
+ * @param {boolean} [options.buySectionColumns=false] - Include multi-column buy section toggle
+ * @param {boolean} [options.fontSizeMultiplier=false] - Include style grid font size multiplier
+ * @param {boolean} [options.serif=false] - Include serif/sans classification field
+ * @param {boolean} [options.regenerateSubfamilies=false] - Include RegenerateSubfamilies action
+ * @param {boolean} [options.subfamilyFontSizeMultiplier=false] - Include per-subfamily font size multiplier
+ * @param {boolean} [options.subfamilyListOrder=false] - Include per-subfamily manual order toggle
+ * @param {boolean} [options.subfamilyPreferredStyle=false] - Include per-subfamily preferred style picker
+ * @param {boolean} [options.subfamilyFontFilter=false] - Filter subfamily font picker to typeface fonts only
+ * @param {boolean} [options.subfamilyPreview=false] - Include preview on subfamily array items
+ * @param {boolean} [options.pairs=true] - Show pairs array to editors
  */
 export function createStylesField({
-	hasFreeFlag = false,
-	displayStylesHidden = false,
-	hasSortHeaviestFirst = false,
-	hasBuySectionColumns = false,
-	hasFontSizeMultiplier = false,
-	hasSerifFlag = false,
-	hasRegenerateSubfamilies = false,
-	hasSubfamilyFontSizeMultiplier = false,
-	hasSubfamilyUseListOrder = false,
-	hasSubfamilyPreferredStyle = false,
-	hasSubfamilyFontFilter = false,
-	hasSubfamilyPreview = false,
-	pairsHidden = false,
+	free = false,
+	displayStyles = true,
+	sortHeaviestFirst = false,
+	buySectionColumns = false,
+	fontSizeMultiplier = false,
+	serif = false,
+	regenerateSubfamilies = false,
+	subfamilyFontSizeMultiplier = false,
+	subfamilyListOrder = false,
+	subfamilyPreferredStyle = false,
+	subfamilyFontFilter = false,
+	subfamilyPreview = false,
+	pairs = true,
 } = {}) {
 
-	// Build the subfamily object item fields conditionally
 	const subfamilyFields = [
 		{
 			title: 'Title',
 			name: 'title',
 			type: 'string',
 		},
-		...(hasSubfamilyFontSizeMultiplier ? [{
+		...field(subfamilyFontSizeMultiplier, {
 			title: 'Subfamily Font Size Multiplier',
 			name: 'fontSizeMultiplier',
 			type: 'number',
-			initialValue: 1.0,
+			initialValue: 1,
 			description: 'Adjust font size for this subfamily in the Family Overview (Design Space). Default is 1.0 (100%). Range: 0.5 to 2.0',
 			validation: Rule => Rule.min(0.5).max(2.0).precision(2),
-		}] : []),
-		...(hasSubfamilyUseListOrder ? [{
+		}),
+		...field(subfamilyListOrder, {
 			title: 'Use List Order',
 			name: 'useListOrder',
 			type: 'boolean',
 			initialValue: false,
 			description: 'Display fonts in the manual order listed below, bypassing programmatic weight-based sorting in the Family Overview.',
-		}] : []),
+		}),
 		{
 			title: 'Fonts',
 			name: 'fonts',
@@ -91,90 +106,77 @@ export function createStylesField({
 			of: [{ type: 'reference', weak: true, to: [{ type: 'font' }] }],
 			options: {
 				sortable: true,
-				...(hasSubfamilyFontFilter ? { filter: fontsFilter } : {}),
+				...(subfamilyFontFilter ? { filter: fontsFilter } : {}),
 			},
 		},
-		...(hasSubfamilyPreferredStyle ? [{
-			title: 'SubFamily Preferred Style',
+		...field(subfamilyPreferredStyle, {
+			title: 'Subfamily Preferred Style',
 			name: 'preferredStyle',
 			type: 'reference',
 			weak: true,
 			to: [{ type: 'font' }],
-			options: {
-				filter: async ({ getClient, document, parent }) => {
-					const client = getClient({ apiVersion: '2022-11-09' });
-					const typefaceName = document.title;
-					const fonts = await client.fetch('*[_type == "font" && typefaceName == $typefaceName && variableFont == false]', { typefaceName });
-					const relatedItemsFiltered = fonts.map(f => f._id).filter(Boolean);
-					const existingItems = parent.fonts.map(f => f._ref).filter(Boolean);
-					return {
-						filter: '(_id in $existingItems) && (_id in $relatedItemsFiltered)',
-						params: { existingItems, relatedItemsFiltered },
-					};
-				},
-			},
-		}] : []),
+			options: { filter: subfamilyPreferredStyleFilter },
+		}),
 	];
 
 	const subfamilyItem = {
 		type: 'object',
 		fields: subfamilyFields,
-		...(hasSubfamilyPreview ? {
+		...(subfamilyPreview ? {
 			preview: {
 				select: { title: 'title', fonts: 'fonts' },
-				prepare(props) {
-					const numFonts = Object.keys(props.fonts || {}).length;
-					return { title: props.title, subtitle: `${numFonts} fonts` };
+				prepare({ title, fonts }) {
+					return { title, subtitle: `${Object.keys(fonts || {}).length} fonts` };
 				},
 			},
 		} : {}),
 	};
 
 	const fields = [
-		...(hasFreeFlag ? [{
+		...field(free, {
 			title: 'Free Typeface',
 			name: 'free',
 			type: 'boolean',
-			description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.',
 			initialValue: false,
-		}] : []),
+			description: 'This typeface is free to download and use. This will alter the "Buy" button and checkout experience.',
+		}),
 		{
 			title: 'Display All Styles',
 			name: 'displayStyles',
 			type: 'boolean',
 			initialValue: true,
-			hidden: displayStylesHidden,
+			hidden: !displayStyles,
 			description: 'Show all Font Styles below collections in Buy Section',
 		},
-		...(hasSortHeaviestFirst ? [{
+		...field(sortHeaviestFirst, {
 			title: 'Sort Fonts Heaviest to Lightest',
 			name: 'sortHeaviestFirst',
 			type: 'boolean',
 			initialValue: false,
 			description: 'Sort fonts by weight from heaviest (900) to lightest (100). Default is lightest to heaviest (industry standard).',
-		}] : []),
-		...(hasBuySectionColumns ? [{
+		}),
+		...field(buySectionColumns, {
 			title: 'Multi Column Buy Section',
 			name: 'buySectionColumns',
 			type: 'boolean',
 			initialValue: true,
 			description: 'Choose Single Column or Multi Column for the Buy Section, Default is Multi Column',
-		}] : []),
-		...(hasFontSizeMultiplier ? [{
+		}),
+		...field(fontSizeMultiplier, {
 			title: 'Style Grid Font Size Multiplier',
 			name: 'fontSizeMultiplier',
 			type: 'number',
-			initialValue: 1.0,
+			initialValue: 1,
 			description: 'Adjust font size in the buy section style grid. Default is 1.0 (100%). Range: 0.5 to 2.0',
 			validation: Rule => Rule.min(0.5).max(2.0).precision(2),
-		}] : []),
-		...(hasSerifFlag ? [{
+		}),
+		...field(serif, {
 			title: 'Includes Serifs',
 			name: 'serif',
 			type: 'boolean',
 			initialValue: false,
 			description: 'Check if this typeface includes serif letterforms. Used for typeface overview serif/sans filters. Frontend automatically treats non-serif typefaces as sans serif.',
-		}] : []),
+		}),
 		{
 			title: 'Fonts',
 			name: 'fonts',
@@ -202,18 +204,16 @@ export function createStylesField({
 			description: 'Variable fonts are automatically included as a bonus when customers purchase all non-variable styles of this typeface.',
 			options: { sortable: true },
 		},
-		...(hasRegenerateSubfamilies ? [{
+		...field(regenerateSubfamilies, {
 			title: 'Regenerate Subfamilies',
 			name: 'regenerateSubfamilies',
 			type: 'string',
-			hidden: ({ parent }) => {
-				return parent?.styles?.subfamilies?.length === 0 || parent?.styles?.fonts?.length === 0;
-			},
+			hidden: ({ parent }) => parent?.styles?.subfamilies?.length === 0 || parent?.styles?.fonts?.length === 0,
 			description: 'Regenerates subfamily groups based on the fonts in this typeface.',
 			components: { input: RegenerateSubfamiliesComponent },
-		}] : []),
+		}),
 		{
-			title: 'Sub Families',
+			title: 'Subfamilies',
 			name: 'subfamilies',
 			type: 'array',
 			of: [subfamilyItem],
@@ -235,7 +235,7 @@ export function createStylesField({
 			of: [{ type: 'reference', weak: true, to: [{ type: 'pair' }] }],
 			options: { sortable: true },
 			validation: Rule => Rule.unique(),
-			hidden: pairsHidden,
+			hidden: !pairs,
 		},
 	];