@liiift-studio/sanity-font-manager 2.3.10 → 2.3.11

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   HtmlDescription: () => HtmlDescription,
   KeyValueInput: () => KeyValueInput,
   KeyValueReferenceInput: () => KeyValueReferenceInput,
+  NestedObjectArraySelector: () => NestedObjectArraySelector,
   PriceInput: () => PriceInput_default,
   PrimaryCollectionGeneratorTypeface: () => PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent: () => RegenerateSubfamiliesComponent,
@@ -82,6 +83,7 @@ __export(index_exports, {
   updateFontPrices: () => updateFontPrices,
   updateTypefaceDocument: () => updateTypefaceDocument,
   uploadFontFiles: () => uploadFontFiles,
+  useNestedObjects: () => useNestedObjects,
   useSanityClient: () => useSanityClient
 });
 module.exports = __toCommonJS(index_exports);
@@ -4127,6 +4129,151 @@ var StyleCountInput = (props) => {
   return /* @__PURE__ */ import_react18.default.createElement(import_ui16.Text, { size: 1 }, count);
 };
 
+// src/components/NestedObjectArraySelector.jsx
+var import_react20 = __toESM(require("react"));
+var import_ui17 = require("@sanity/ui");
+
+// src/hooks/useNestedObjects.js
+var import_react19 = require("react");
+var import_sanity15 = require("sanity");
+function useNestedObjects({
+  sourceType,
+  nestedField,
+  titleField,
+  valueField,
+  filter = "",
+  sortBy = ""
+}) {
+  const client = (0, import_sanity15.useClient)({ apiVersion: "2023-01-01" });
+  const [objects, setObjects] = (0, import_react19.useState)([]);
+  const [loading, setLoading] = (0, import_react19.useState)(true);
+  const [error, setError] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
+    if (!sourceType || !nestedField || !titleField || !valueField) {
+      setError(new Error("Missing required configuration"));
+      setLoading(false);
+      return;
+    }
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const filterClause = filter ? ` && ${filter}` : "";
+        const query = `
+					*[_type == "${sourceType}"${filterClause}] {
+						"${nestedField}": ${nestedField}[] {
+							"title": ${titleField},
+							"value": ${valueField}
+						}
+					}
+				`;
+        const result = await client.fetch(query);
+        if (!result || result.length === 0) {
+          setObjects([]);
+          setLoading(false);
+          return;
+        }
+        const flattened = result.flatMap((doc) => doc[nestedField] || []);
+        const uniqueMap = /* @__PURE__ */ new Map();
+        flattened.forEach((item) => {
+          if (item.value && item.title) uniqueMap.set(item.value, item);
+        });
+        let unique = Array.from(uniqueMap.values());
+        if (sortBy) {
+          const [sortField, sortOrder = "asc"] = sortBy.split(" ");
+          unique = unique.sort((a, b) => {
+            const aVal = a[sortField] || a.title;
+            const bVal = b[sortField] || b.title;
+            const comparison = aVal.localeCompare(bVal);
+            return sortOrder === "desc" ? -comparison : comparison;
+          });
+        }
+        setObjects(unique);
+      } catch (err) {
+        console.error("useNestedObjects fetch error:", err);
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [sourceType, nestedField, titleField, valueField, filter, sortBy, client]);
+  return { objects, loading, error };
+}
+
+// src/components/NestedObjectArraySelector.jsx
+var import_sanity16 = require("sanity");
+var NestedObjectArraySelector = import_react20.default.forwardRef((props, ref) => {
+  const { value = [], onChange, schemaType } = props;
+  const options = (schemaType == null ? void 0 : schemaType.options) || {};
+  const {
+    sourceType,
+    nestedField,
+    titleField,
+    valueField,
+    filter = "",
+    sortBy = "title asc",
+    emptyMessage = "No options found",
+    searchPlaceholder = "Search..."
+  } = options;
+  const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
+  const { objects, loading, error } = useNestedObjects({ sourceType, nestedField, titleField, valueField, filter, sortBy });
+  const filteredObjects = (0, import_react20.useMemo)(() => {
+    if (!searchTerm) return objects;
+    const lower = searchTerm.toLowerCase();
+    return objects.filter((obj) => {
+      var _a;
+      return (_a = obj.title) == null ? void 0 : _a.toLowerCase().includes(lower);
+    });
+  }, [objects, searchTerm]);
+  const handleToggle = (itemValue) => {
+    const currentValue = value || [];
+    const isSelected = currentValue.includes(itemValue);
+    if (isSelected) {
+      const newValue = currentValue.filter((v) => v !== itemValue);
+      onChange(newValue.length > 0 ? (0, import_sanity16.set)(newValue) : (0, import_sanity16.unset)());
+    } else {
+      onChange((0, import_sanity16.set)([...currentValue, itemValue]));
+    }
+  };
+  if (!sourceType || !nestedField || !titleField || !valueField) {
+    return /* @__PURE__ */ import_react20.default.createElement(import_ui17.Card, { padding: 3, tone: "critical", border: true }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1 }, "Configuration error: Missing required options (sourceType, nestedField, titleField, or valueField)"));
+  }
+  if (loading) {
+    return /* @__PURE__ */ import_react20.default.createElement(import_ui17.Card, { padding: 3, border: true }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Flex, { align: "center", justify: "center", padding: 4 }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Spinner, null), /* @__PURE__ */ import_react20.default.createElement(import_ui17.Box, { marginLeft: 3 }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1 }, "Loading options..."))));
+  }
+  if (error) {
+    return /* @__PURE__ */ import_react20.default.createElement(import_ui17.Card, { padding: 3, tone: "critical", border: true }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1 }, "Error loading options: ", error.message));
+  }
+  if (objects.length === 0) {
+    return /* @__PURE__ */ import_react20.default.createElement(import_ui17.Card, { padding: 3, tone: "transparent", border: true }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1, muted: true }, emptyMessage));
+  }
+  return /* @__PURE__ */ import_react20.default.createElement(import_ui17.Card, { padding: 0, border: true, ref }, objects.length > 5 && /* @__PURE__ */ import_react20.default.createElement(import_ui17.Box, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" } }, /* @__PURE__ */ import_react20.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: searchPlaceholder,
+      value: searchTerm,
+      onChange: (e) => setSearchTerm(e.target.value),
+      style: { width: "100%", padding: "8px 12px", border: "1px solid var(--card-border-color)", borderRadius: "4px", fontSize: "13px", fontFamily: "inherit" }
+    }
+  )), /* @__PURE__ */ import_react20.default.createElement(import_ui17.Stack, { space: 0 }, filteredObjects.length === 0 ? /* @__PURE__ */ import_react20.default.createElement(import_ui17.Box, { padding: 3 }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1, muted: true }, 'No results found for "', searchTerm, '"')) : filteredObjects.map((obj, index) => {
+    const isSelected = value == null ? void 0 : value.includes(obj.value);
+    const isLast = index === filteredObjects.length - 1;
+    return /* @__PURE__ */ import_react20.default.createElement(
+      import_ui17.Box,
+      {
+        key: obj.value,
+        padding: 3,
+        style: { borderBottom: isLast ? "none" : "1px solid var(--card-border-color)", cursor: "pointer", backgroundColor: isSelected ? "var(--card-muted-fg-color)" : "transparent", transition: "background-color 0.2s" },
+        onClick: () => handleToggle(obj.value)
+      },
+      /* @__PURE__ */ import_react20.default.createElement(import_ui17.Flex, { align: "center", gap: 3 }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Checkbox, { checked: isSelected, readOnly: true, style: { pointerEvents: "none" } }), /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1, weight: isSelected ? "semibold" : "regular" }, obj.title))
+    );
+  })), (value == null ? void 0 : value.length) > 0 && /* @__PURE__ */ import_react20.default.createElement(import_ui17.Box, { padding: 2, paddingX: 3, style: { borderTop: "1px solid var(--card-border-color)", backgroundColor: "var(--card-muted-fg-color)" } }, /* @__PURE__ */ import_react20.default.createElement(import_ui17.Text, { size: 1, muted: true }, value.length, " selected")));
+});
+NestedObjectArraySelector.displayName = "NestedObjectArraySelector";
+
 // src/utils/getEmptyFontKit.js
 var fontkit7 = __toESM(require("fontkit"));
 var import_slugify4 = __toESM(require("slugify"));
@@ -6890,6 +7037,7 @@ function createStylesField({
   HtmlDescription,
   KeyValueInput,
   KeyValueReferenceInput,
+  NestedObjectArraySelector,
   PriceInput,
   PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent,
@@ -6935,5 +7083,6 @@ function createStylesField({
   updateFontPrices,
   updateTypefaceDocument,
   uploadFontFiles,
+  useNestedObjects,
   useSanityClient
 });

package/dist/index.mjs

@@ -4039,6 +4039,151 @@ var StyleCountInput = (props) => {
   return /* @__PURE__ */ React17.createElement(Text15, { size: 1 }, count);
 };
 
+// src/components/NestedObjectArraySelector.jsx
+import React18, { useMemo as useMemo5, useState as useState14 } from "react";
+import { Stack as Stack13, Card as Card6, Text as Text16, Checkbox, Box as Box6, Spinner as Spinner4, Flex as Flex11 } from "@sanity/ui";
+
+// src/hooks/useNestedObjects.js
+import { useState as useState13, useEffect as useEffect7 } from "react";
+import { useClient as useClient2 } from "sanity";
+function useNestedObjects({
+  sourceType,
+  nestedField,
+  titleField,
+  valueField,
+  filter = "",
+  sortBy = ""
+}) {
+  const client = useClient2({ apiVersion: "2023-01-01" });
+  const [objects, setObjects] = useState13([]);
+  const [loading, setLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  useEffect7(() => {
+    if (!sourceType || !nestedField || !titleField || !valueField) {
+      setError(new Error("Missing required configuration"));
+      setLoading(false);
+      return;
+    }
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const filterClause = filter ? ` && ${filter}` : "";
+        const query = `
+					*[_type == "${sourceType}"${filterClause}] {
+						"${nestedField}": ${nestedField}[] {
+							"title": ${titleField},
+							"value": ${valueField}
+						}
+					}
+				`;
+        const result = await client.fetch(query);
+        if (!result || result.length === 0) {
+          setObjects([]);
+          setLoading(false);
+          return;
+        }
+        const flattened = result.flatMap((doc) => doc[nestedField] || []);
+        const uniqueMap = /* @__PURE__ */ new Map();
+        flattened.forEach((item) => {
+          if (item.value && item.title) uniqueMap.set(item.value, item);
+        });
+        let unique = Array.from(uniqueMap.values());
+        if (sortBy) {
+          const [sortField, sortOrder = "asc"] = sortBy.split(" ");
+          unique = unique.sort((a, b) => {
+            const aVal = a[sortField] || a.title;
+            const bVal = b[sortField] || b.title;
+            const comparison = aVal.localeCompare(bVal);
+            return sortOrder === "desc" ? -comparison : comparison;
+          });
+        }
+        setObjects(unique);
+      } catch (err) {
+        console.error("useNestedObjects fetch error:", err);
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [sourceType, nestedField, titleField, valueField, filter, sortBy, client]);
+  return { objects, loading, error };
+}
+
+// src/components/NestedObjectArraySelector.jsx
+import { set as set8, unset as unset3 } from "sanity";
+var NestedObjectArraySelector = React18.forwardRef((props, ref) => {
+  const { value = [], onChange, schemaType } = props;
+  const options = (schemaType == null ? void 0 : schemaType.options) || {};
+  const {
+    sourceType,
+    nestedField,
+    titleField,
+    valueField,
+    filter = "",
+    sortBy = "title asc",
+    emptyMessage = "No options found",
+    searchPlaceholder = "Search..."
+  } = options;
+  const [searchTerm, setSearchTerm] = useState14("");
+  const { objects, loading, error } = useNestedObjects({ sourceType, nestedField, titleField, valueField, filter, sortBy });
+  const filteredObjects = useMemo5(() => {
+    if (!searchTerm) return objects;
+    const lower = searchTerm.toLowerCase();
+    return objects.filter((obj) => {
+      var _a;
+      return (_a = obj.title) == null ? void 0 : _a.toLowerCase().includes(lower);
+    });
+  }, [objects, searchTerm]);
+  const handleToggle = (itemValue) => {
+    const currentValue = value || [];
+    const isSelected = currentValue.includes(itemValue);
+    if (isSelected) {
+      const newValue = currentValue.filter((v) => v !== itemValue);
+      onChange(newValue.length > 0 ? set8(newValue) : unset3());
+    } else {
+      onChange(set8([...currentValue, itemValue]));
+    }
+  };
+  if (!sourceType || !nestedField || !titleField || !valueField) {
+    return /* @__PURE__ */ React18.createElement(Card6, { padding: 3, tone: "critical", border: true }, /* @__PURE__ */ React18.createElement(Text16, { size: 1 }, "Configuration error: Missing required options (sourceType, nestedField, titleField, or valueField)"));
+  }
+  if (loading) {
+    return /* @__PURE__ */ React18.createElement(Card6, { padding: 3, border: true }, /* @__PURE__ */ React18.createElement(Flex11, { align: "center", justify: "center", padding: 4 }, /* @__PURE__ */ React18.createElement(Spinner4, null), /* @__PURE__ */ React18.createElement(Box6, { marginLeft: 3 }, /* @__PURE__ */ React18.createElement(Text16, { size: 1 }, "Loading options..."))));
+  }
+  if (error) {
+    return /* @__PURE__ */ React18.createElement(Card6, { padding: 3, tone: "critical", border: true }, /* @__PURE__ */ React18.createElement(Text16, { size: 1 }, "Error loading options: ", error.message));
+  }
+  if (objects.length === 0) {
+    return /* @__PURE__ */ React18.createElement(Card6, { padding: 3, tone: "transparent", border: true }, /* @__PURE__ */ React18.createElement(Text16, { size: 1, muted: true }, emptyMessage));
+  }
+  return /* @__PURE__ */ React18.createElement(Card6, { padding: 0, border: true, ref }, objects.length > 5 && /* @__PURE__ */ React18.createElement(Box6, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" } }, /* @__PURE__ */ React18.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: searchPlaceholder,
+      value: searchTerm,
+      onChange: (e) => setSearchTerm(e.target.value),
+      style: { width: "100%", padding: "8px 12px", border: "1px solid var(--card-border-color)", borderRadius: "4px", fontSize: "13px", fontFamily: "inherit" }
+    }
+  )), /* @__PURE__ */ React18.createElement(Stack13, { space: 0 }, filteredObjects.length === 0 ? /* @__PURE__ */ React18.createElement(Box6, { padding: 3 }, /* @__PURE__ */ React18.createElement(Text16, { size: 1, muted: true }, 'No results found for "', searchTerm, '"')) : filteredObjects.map((obj, index) => {
+    const isSelected = value == null ? void 0 : value.includes(obj.value);
+    const isLast = index === filteredObjects.length - 1;
+    return /* @__PURE__ */ React18.createElement(
+      Box6,
+      {
+        key: obj.value,
+        padding: 3,
+        style: { borderBottom: isLast ? "none" : "1px solid var(--card-border-color)", cursor: "pointer", backgroundColor: isSelected ? "var(--card-muted-fg-color)" : "transparent", transition: "background-color 0.2s" },
+        onClick: () => handleToggle(obj.value)
+      },
+      /* @__PURE__ */ React18.createElement(Flex11, { align: "center", gap: 3 }, /* @__PURE__ */ React18.createElement(Checkbox, { checked: isSelected, readOnly: true, style: { pointerEvents: "none" } }), /* @__PURE__ */ React18.createElement(Text16, { size: 1, weight: isSelected ? "semibold" : "regular" }, obj.title))
+    );
+  })), (value == null ? void 0 : value.length) > 0 && /* @__PURE__ */ React18.createElement(Box6, { padding: 2, paddingX: 3, style: { borderTop: "1px solid var(--card-border-color)", backgroundColor: "var(--card-muted-fg-color)" } }, /* @__PURE__ */ React18.createElement(Text16, { size: 1, muted: true }, value.length, " selected")));
+});
+NestedObjectArraySelector.displayName = "NestedObjectArraySelector";
+
 // src/utils/getEmptyFontKit.js
 import * as fontkit7 from "fontkit";
 import slugify4 from "slugify";
@@ -6801,6 +6946,7 @@ export {
   HtmlDescription,
   KeyValueInput,
   KeyValueReferenceInput,
+  NestedObjectArraySelector,
   PriceInput_default as PriceInput,
   PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent,
@@ -6846,5 +6992,6 @@ export {
   updateFontPrices,
   updateTypefaceDocument,
   uploadFontFiles,
+  useNestedObjects,
   useSanityClient
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.3.10",
+	"version": "2.3.11",
 	"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/NestedObjectArraySelector.jsx

@@ -0,0 +1,146 @@
+// Generic checkbox-list selector for nested objects from Sanity documents — configured via schema options
+
+import React, { useMemo, useState } from 'react';
+import { Stack, Card, Text, Checkbox, Box, Spinner, Flex } from '@sanity/ui';
+import { useNestedObjects } from '../hooks/useNestedObjects';
+import { set, unset } from 'sanity';
+
+/**
+ * Sanity input component that renders a searchable checkbox list of items fetched
+ * from nested arrays inside Sanity documents.
+ *
+ * Configure via schema options:
+ * ```js
+ * components: { input: NestedObjectArraySelector },
+ * options: {
+ *   sourceType: 'licenseGroup',      // document type to query
+ *   nestedField: 'sections',          // array field to extract
+ *   titleField: 'title',              // GROQ expression for display text
+ *   valueField: 'slug.current',       // GROQ expression for stored value
+ *   filter: 'state == "published"',   // optional GROQ filter
+ *   sortBy: 'title asc',              // optional sort field + direction
+ *   emptyMessage: 'No options found', // optional empty state text
+ *   searchPlaceholder: 'Search...',   // optional search input placeholder
+ * }
+ * ```
+ */
+export const NestedObjectArraySelector = React.forwardRef((props, ref) => {
+	const { value = [], onChange, schemaType } = props;
+
+	const options = schemaType?.options || {};
+	const {
+		sourceType,
+		nestedField,
+		titleField,
+		valueField,
+		filter = '',
+		sortBy = 'title asc',
+		emptyMessage = 'No options found',
+		searchPlaceholder = 'Search...',
+	} = options;
+
+	const [searchTerm, setSearchTerm] = useState('');
+	const { objects, loading, error } = useNestedObjects({ sourceType, nestedField, titleField, valueField, filter, sortBy });
+
+	const filteredObjects = useMemo(() => {
+		if (!searchTerm) return objects;
+		const lower = searchTerm.toLowerCase();
+		return objects.filter(obj => obj.title?.toLowerCase().includes(lower));
+	}, [objects, searchTerm]);
+
+	const handleToggle = (itemValue) => {
+		const currentValue = value || [];
+		const isSelected = currentValue.includes(itemValue);
+		if (isSelected) {
+			const newValue = currentValue.filter(v => v !== itemValue);
+			onChange(newValue.length > 0 ? set(newValue) : unset());
+		} else {
+			onChange(set([...currentValue, itemValue]));
+		}
+	};
+
+	if (!sourceType || !nestedField || !titleField || !valueField) {
+		return (
+			<Card padding={3} tone="critical" border>
+				<Text size={1}>Configuration error: Missing required options (sourceType, nestedField, titleField, or valueField)</Text>
+			</Card>
+		);
+	}
+
+	if (loading) {
+		return (
+			<Card padding={3} border>
+				<Flex align="center" justify="center" padding={4}>
+					<Spinner />
+					<Box marginLeft={3}><Text size={1}>Loading options...</Text></Box>
+				</Flex>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card padding={3} tone="critical" border>
+				<Text size={1}>Error loading options: {error.message}</Text>
+			</Card>
+		);
+	}
+
+	if (objects.length === 0) {
+		return (
+			<Card padding={3} tone="transparent" border>
+				<Text size={1} muted>{emptyMessage}</Text>
+			</Card>
+		);
+	}
+
+	return (
+		<Card padding={0} border ref={ref}>
+			{objects.length > 5 && (
+				<Box padding={3} style={{ borderBottom: '1px solid var(--card-border-color)' }}>
+					<input
+						type="text"
+						placeholder={searchPlaceholder}
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--card-border-color)', borderRadius: '4px', fontSize: '13px', fontFamily: 'inherit' }}
+					/>
+				</Box>
+			)}
+
+			<Stack space={0}>
+				{filteredObjects.length === 0 ? (
+					<Box padding={3}>
+						<Text size={1} muted>No results found for "{searchTerm}"</Text>
+					</Box>
+				) : (
+					filteredObjects.map((obj, index) => {
+						const isSelected = value?.includes(obj.value);
+						const isLast = index === filteredObjects.length - 1;
+						return (
+							<Box
+								key={obj.value}
+								padding={3}
+								style={{ borderBottom: isLast ? 'none' : '1px solid var(--card-border-color)', cursor: 'pointer', backgroundColor: isSelected ? 'var(--card-muted-fg-color)' : 'transparent', transition: 'background-color 0.2s' }}
+								onClick={() => handleToggle(obj.value)}
+							>
+								<Flex align="center" gap={3}>
+									<Checkbox checked={isSelected} readOnly style={{ pointerEvents: 'none' }} />
+									<Text size={1} weight={isSelected ? 'semibold' : 'regular'}>{obj.title}</Text>
+								</Flex>
+							</Box>
+						);
+					})
+				)}
+			</Stack>
+
+			{value?.length > 0 && (
+				<Box padding={2} paddingX={3} style={{ borderTop: '1px solid var(--card-border-color)', backgroundColor: 'var(--card-muted-fg-color)' }}>
+					<Text size={1} muted>{value.length} selected</Text>
+				</Box>
+			)}
+		</Card>
+	);
+});
+
+NestedObjectArraySelector.displayName = 'NestedObjectArraySelector';

package/src/hooks/useNestedObjects.js

@@ -0,0 +1,92 @@
+// Hook for fetching nested objects from Sanity documents — used by NestedObjectArraySelector
+
+import { useState, useEffect } from 'react';
+import { useClient } from 'sanity';
+
+/**
+ * Fetches and flattens nested arrays from a Sanity document type into a list of selectable items.
+ * @param {Object} config
+ * @param {string} config.sourceType - Document type to query (e.g. 'licenseGroup')
+ * @param {string} config.nestedField - Array field to extract from (e.g. 'sections')
+ * @param {string} config.titleField - GROQ expression for display text (e.g. 'title')
+ * @param {string} config.valueField - GROQ expression for stored value (e.g. 'slug.current')
+ * @param {string} [config.filter] - Optional GROQ filter clause (e.g. 'state == "published"')
+ * @param {string} [config.sortBy] - Optional sort field and direction (e.g. 'title asc')
+ * @returns {{ objects: Array, loading: boolean, error: Error|null }}
+ */
+export function useNestedObjects({
+	sourceType,
+	nestedField,
+	titleField,
+	valueField,
+	filter = '',
+	sortBy = '',
+}) {
+	const client = useClient({ apiVersion: '2023-01-01' });
+	const [objects, setObjects] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+
+	useEffect(() => {
+		if (!sourceType || !nestedField || !titleField || !valueField) {
+			setError(new Error('Missing required configuration'));
+			setLoading(false);
+			return;
+		}
+
+		const fetchData = async () => {
+			try {
+				setLoading(true);
+				setError(null);
+
+				const filterClause = filter ? ` && ${filter}` : '';
+				const query = `
+					*[_type == "${sourceType}"${filterClause}] {
+						"${nestedField}": ${nestedField}[] {
+							"title": ${titleField},
+							"value": ${valueField}
+						}
+					}
+				`;
+
+				const result = await client.fetch(query);
+
+				if (!result || result.length === 0) {
+					setObjects([]);
+					setLoading(false);
+					return;
+				}
+
+				// Flatten nested arrays from all documents and deduplicate by value
+				const flattened = result.flatMap(doc => doc[nestedField] || []);
+				const uniqueMap = new Map();
+				flattened.forEach(item => {
+					if (item.value && item.title) uniqueMap.set(item.value, item);
+				});
+
+				let unique = Array.from(uniqueMap.values());
+
+				if (sortBy) {
+					const [sortField, sortOrder = 'asc'] = sortBy.split(' ');
+					unique = unique.sort((a, b) => {
+						const aVal = a[sortField] || a.title;
+						const bVal = b[sortField] || b.title;
+						const comparison = aVal.localeCompare(bVal);
+						return sortOrder === 'desc' ? -comparison : comparison;
+					});
+				}
+
+				setObjects(unique);
+			} catch (err) {
+				console.error('useNestedObjects fetch error:', err);
+				setError(err);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+	}, [sourceType, nestedField, titleField, valueField, filter, sortBy, client]);
+
+	return { objects, loading, error };
+}

package/src/index.js

@@ -17,9 +17,11 @@ export { VariableInstanceReferencesInput } from './components/VariableInstanceRe
 export { PrimaryCollectionGeneratorTypeface } from './components/PrimaryCollectionGeneratorTypeface.jsx';
 export { SetOTF } from './components/SetOTF.jsx';
 export { StyleCountInput } from './components/StyleCountInput.jsx';
+export { NestedObjectArraySelector } from './components/NestedObjectArraySelector.jsx';
 
 // Hooks
 export { useSanityClient } from './hooks/useSanityClient.js';
+export { useNestedObjects } from './hooks/useNestedObjects.js';
 
 // Core utilities
 export { default as generateCssFile } from './utils/generateCssFile.js';