@liiift-studio/sanity-font-manager 2.3.0 → 2.3.2

package/README.md

@@ -75,6 +75,25 @@ One-click generator for Full Family, Uprights, Italics, and Subfamily collection
 import { GenerateCollectionsPairsComponent } from '@liiift-studio/sanity-font-manager';
 ```
 
+### `PrimaryCollectionGeneratorTypeface`
+
+One-click generator for a single full-family collection that includes all fonts linked to the typeface. Prepends the new collection to the existing `styles.collections` array — non-destructive. Uses `SANITY_STUDIO_DEFAULT_COLLECTION_PRICE` as the default price, falling back to `100`.
+
+Wire it up on a `string` field in the typeface schema:
+
+```jsx
+import { PrimaryCollectionGeneratorTypeface } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'generateCollectionGroup',
+  type: 'string',
+  title: 'Generate Full Family Collection',
+  description: 'Generate a collection that includes all the styles from this typeface.',
+  components: { input: PrimaryCollectionGeneratorTypeface },
+  hidden: ({ parent }) => !parent?.styles?.fonts?.length,
+}
+```
+
 ### `FontScriptUploaderComponent`
 
 Script-aware uploader for per-script font file variants (Latin, Arabic, Hebrew, etc.) stored in `scriptFileInput` on the font document.
@@ -91,6 +110,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 +300,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

@@ -36,6 +36,7 @@ __export(index_exports, {
   KeyValueInput: () => KeyValueInput,
   KeyValueReferenceInput: () => KeyValueReferenceInput,
   PriceInput: () => PriceInput_default,
+  PrimaryCollectionGeneratorTypeface: () => PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent: () => RegenerateSubfamiliesComponent,
   SCRIPTS: () => SCRIPTS,
   SCRIPTS_OBJECT: () => SCRIPTS_OBJECT,
@@ -2914,7 +2915,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",
@@ -3964,6 +3965,82 @@ function VariableInstanceReferencesInput(props) {
   ));
 }
 
+// src/components/PrimaryCollectionGeneratorTypeface.jsx
+var import_react16 = __toESM(require("react"));
+var import_ui14 = require("@sanity/ui");
+var import_sanity12 = require("sanity");
+var import_nanoid10 = require("nanoid");
+var PrimaryCollectionGeneratorTypeface = () => {
+  const client = useSanityClient();
+  const [status, setStatus] = (0, import_react16.useState)("ready");
+  const [ready, setReady] = (0, import_react16.useState)(true);
+  const [price, setPrice] = (0, import_react16.useState)(
+    process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
+  );
+  const fonts = (0, import_sanity12.useFormValue)(["styles", "fonts"]);
+  const title = (0, import_sanity12.useFormValue)(["title"]);
+  const preferredStyle = (0, import_sanity12.useFormValue)(["preferredStyle"]);
+  const docId = (0, import_sanity12.useFormValue)(["_id"]);
+  const styles = (0, import_sanity12.useFormValue)(["styles"]);
+  const generateCollection = (0, import_react16.useCallback)(async () => {
+    setStatus("Generating collection...");
+    setReady(false);
+    let id = title.toLowerCase().replace(/\s+/g, "-").slice(0, 200);
+    if (!id.includes("collection")) id += "-collection";
+    const colTitle = id.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+    const collectionDoc = {
+      _key: (0, import_nanoid10.nanoid)(),
+      _id: id,
+      title: colTitle,
+      slug: { _type: "slug", current: id },
+      price: Number(price) || 0,
+      fonts: Object.values(fonts),
+      preferredStyle,
+      _type: "collection",
+      type: "collection"
+    };
+    try {
+      const sanityCollection = await client.createOrReplace(collectionDoc);
+      const collections = styles.collections || [];
+      await client.patch(docId).setIfMissing({ styles: {} }).set({
+        styles: {
+          ...styles,
+          collections: [{
+            _type: "reference",
+            _key: (0, import_nanoid10.nanoid)(),
+            _ref: sanityCollection._id,
+            _weak: true
+          }, ...collections]
+        }
+      }).commit();
+      setStatus("Collection generated");
+    } catch (err) {
+      console.error("Error creating collection:", err.message);
+      setStatus("Error generating collection");
+    }
+    setReady(true);
+  }, [docId, fonts, price, preferredStyle, styles, title, client]);
+  if (!title || !fonts) return null;
+  return /* @__PURE__ */ import_react16.default.createElement(import_ui14.Stack, { space: 2 }, /* @__PURE__ */ import_react16.default.createElement(StatusDisplay_default, { status, error: false }), /* @__PURE__ */ import_react16.default.createElement(import_ui14.Card, { border: true, padding: 2, shadow: 1, radius: 2 }, ready ? /* @__PURE__ */ import_react16.default.createElement(import_ui14.Stack, { space: 3 }, /* @__PURE__ */ import_react16.default.createElement(import_ui14.Flex, { align: "center", gap: 2, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ import_react16.default.createElement(import_ui14.Text, { size: 1, muted: true }, "Price"), /* @__PURE__ */ import_react16.default.createElement(import_ui14.Text, { size: 1, muted: true }, "$"), /* @__PURE__ */ import_react16.default.createElement(
+    "input",
+    {
+      value: price,
+      onChange: (e) => setPrice(e.target.value),
+      type: "number",
+      style: { textAlign: "end", padding: "5px", maxWidth: "75px" }
+    }
+  ), /* @__PURE__ */ import_react16.default.createElement(import_ui14.Text, { size: 1, muted: true }, "per full family")), /* @__PURE__ */ import_react16.default.createElement(
+    import_ui14.Button,
+    {
+      mode: "ghost",
+      tone: "primary",
+      style: { width: "100%" },
+      onClick: generateCollection,
+      text: "Generate Full Family Collection"
+    }
+  )) : /* @__PURE__ */ import_react16.default.createElement(import_ui14.Flex, { align: "center", justify: "center", gap: 3, padding: 4 }, /* @__PURE__ */ import_react16.default.createElement(import_ui14.Spinner, null), /* @__PURE__ */ import_react16.default.createElement(import_ui14.Text, { muted: true, size: 1 }, status))));
+};
+
 // src/utils/getEmptyFontKit.js
 var fontkit7 = __toESM(require("fontkit"));
 var import_slugify4 = __toESM(require("slugify"));
@@ -4050,6 +4127,7 @@ var readFontFile2 = (file) => {
   KeyValueInput,
   KeyValueReferenceInput,
   PriceInput,
+  PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent,
   SCRIPTS,
   SCRIPTS_OBJECT,

package/dist/index.mjs

@@ -2835,7 +2835,7 @@ var SingleUploaderTool = (props) => {
         }
       )
     }
-  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ React7.createElement(Grid3, { columns: [2], gap: 2 }, /* @__PURE__ */ React7.createElement(
+  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ React7.createElement(Grid3, { columns: [1, 2], gap: 2 }, /* @__PURE__ */ React7.createElement(
     Button5,
     {
       mode: "ghost",
@@ -3885,6 +3885,82 @@ function VariableInstanceReferencesInput(props) {
   ));
 }
 
+// src/components/PrimaryCollectionGeneratorTypeface.jsx
+import React15, { useCallback as useCallback10, useState as useState11 } from "react";
+import { Stack as Stack11, Flex as Flex10, Text as Text13, Button as Button12, Card as Card5, Spinner as Spinner3 } from "@sanity/ui";
+import { useFormValue as useFormValue10 } from "sanity";
+import { nanoid as nanoid10 } from "nanoid";
+var PrimaryCollectionGeneratorTypeface = () => {
+  const client = useSanityClient();
+  const [status, setStatus] = useState11("ready");
+  const [ready, setReady] = useState11(true);
+  const [price, setPrice] = useState11(
+    process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
+  );
+  const fonts = useFormValue10(["styles", "fonts"]);
+  const title = useFormValue10(["title"]);
+  const preferredStyle = useFormValue10(["preferredStyle"]);
+  const docId = useFormValue10(["_id"]);
+  const styles = useFormValue10(["styles"]);
+  const generateCollection = useCallback10(async () => {
+    setStatus("Generating collection...");
+    setReady(false);
+    let id = title.toLowerCase().replace(/\s+/g, "-").slice(0, 200);
+    if (!id.includes("collection")) id += "-collection";
+    const colTitle = id.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+    const collectionDoc = {
+      _key: nanoid10(),
+      _id: id,
+      title: colTitle,
+      slug: { _type: "slug", current: id },
+      price: Number(price) || 0,
+      fonts: Object.values(fonts),
+      preferredStyle,
+      _type: "collection",
+      type: "collection"
+    };
+    try {
+      const sanityCollection = await client.createOrReplace(collectionDoc);
+      const collections = styles.collections || [];
+      await client.patch(docId).setIfMissing({ styles: {} }).set({
+        styles: {
+          ...styles,
+          collections: [{
+            _type: "reference",
+            _key: nanoid10(),
+            _ref: sanityCollection._id,
+            _weak: true
+          }, ...collections]
+        }
+      }).commit();
+      setStatus("Collection generated");
+    } catch (err) {
+      console.error("Error creating collection:", err.message);
+      setStatus("Error generating collection");
+    }
+    setReady(true);
+  }, [docId, fonts, price, preferredStyle, styles, title, client]);
+  if (!title || !fonts) return null;
+  return /* @__PURE__ */ React15.createElement(Stack11, { space: 2 }, /* @__PURE__ */ React15.createElement(StatusDisplay_default, { status, error: false }), /* @__PURE__ */ React15.createElement(Card5, { border: true, padding: 2, shadow: 1, radius: 2 }, ready ? /* @__PURE__ */ React15.createElement(Stack11, { space: 3 }, /* @__PURE__ */ React15.createElement(Flex10, { align: "center", gap: 2, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React15.createElement(Text13, { size: 1, muted: true }, "Price"), /* @__PURE__ */ React15.createElement(Text13, { size: 1, muted: true }, "$"), /* @__PURE__ */ React15.createElement(
+    "input",
+    {
+      value: price,
+      onChange: (e) => setPrice(e.target.value),
+      type: "number",
+      style: { textAlign: "end", padding: "5px", maxWidth: "75px" }
+    }
+  ), /* @__PURE__ */ React15.createElement(Text13, { size: 1, muted: true }, "per full family")), /* @__PURE__ */ React15.createElement(
+    Button12,
+    {
+      mode: "ghost",
+      tone: "primary",
+      style: { width: "100%" },
+      onClick: generateCollection,
+      text: "Generate Full Family Collection"
+    }
+  )) : /* @__PURE__ */ React15.createElement(Flex10, { align: "center", justify: "center", gap: 3, padding: 4 }, /* @__PURE__ */ React15.createElement(Spinner3, null), /* @__PURE__ */ React15.createElement(Text13, { muted: true, size: 1 }, status))));
+};
+
 // src/utils/getEmptyFontKit.js
 import * as fontkit7 from "fontkit";
 import slugify4 from "slugify";
@@ -3970,6 +4046,7 @@ export {
   KeyValueInput,
   KeyValueReferenceInput,
   PriceInput_default as PriceInput,
+  PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent,
   SCRIPTS,
   SCRIPTS_OBJECT,

package/package.json

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

@@ -0,0 +1,116 @@
+// Generates a single primary full-family collection from a typeface's linked fonts and prepends it to the existing collections array
+
+import React, { useCallback, useState } from 'react';
+import { Stack, Flex, Text, Button, Card, Spinner } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import { nanoid } from 'nanoid';
+
+import { useSanityClient } from '../hooks/useSanityClient';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Generates a full-family collection document from the typeface's linked fonts
+ * and prepends it to the existing styles.collections array.
+ */
+export const PrimaryCollectionGeneratorTypeface = () => {
+	const client = useSanityClient();
+
+	const [status, setStatus] = useState('ready');
+	const [ready, setReady] = useState(true);
+	const [price, setPrice] = useState(
+		process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
+	);
+
+	const fonts = useFormValue(['styles', 'fonts']);
+	const title = useFormValue(['title']);
+	const preferredStyle = useFormValue(['preferredStyle']);
+	const docId = useFormValue(['_id']);
+	const styles = useFormValue(['styles']);
+
+	/** Creates or replaces the full-family collection document and prepends it to the typeface's collections array. */
+	const generateCollection = useCallback(async () => {
+		setStatus('Generating collection...');
+		setReady(false);
+
+		let id = title.toLowerCase().replace(/\s+/g, '-').slice(0, 200);
+		if (!id.includes('collection')) id += '-collection';
+
+		const colTitle = id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+
+		const collectionDoc = {
+			_key: nanoid(),
+			_id: id,
+			title: colTitle,
+			slug: { _type: 'slug', current: id },
+			price: Number(price) || 0,
+			fonts: Object.values(fonts),
+			preferredStyle: preferredStyle,
+			_type: 'collection',
+			type: 'collection',
+		};
+
+		try {
+			const sanityCollection = await client.createOrReplace(collectionDoc);
+			const collections = styles.collections || [];
+
+			await client.patch(docId)
+				.setIfMissing({ styles: {} })
+				.set({
+					styles: {
+						...styles,
+						collections: [{
+							_type: 'reference',
+							_key: nanoid(),
+							_ref: sanityCollection._id,
+							_weak: true,
+						}, ...collections],
+					},
+				})
+				.commit();
+
+			setStatus('Collection generated');
+		} catch (err) {
+			console.error('Error creating collection:', err.message);
+			setStatus('Error generating collection');
+		}
+
+		setReady(true);
+	}, [docId, fonts, price, preferredStyle, styles, title, client]);
+
+	if (!title || !fonts) return null;
+
+	return (
+		<Stack space={2}>
+			<StatusDisplay status={status} error={false} />
+			<Card border padding={2} shadow={1} radius={2}>
+				{ready ? (
+					<Stack space={3}>
+						<Flex align="center" gap={2} marginTop={1} marginBottom={1}>
+							<Text size={1} muted>Price</Text>
+							<Text size={1} muted>$</Text>
+							<input
+								value={price}
+								onChange={(e) => setPrice(e.target.value)}
+								type="number"
+								style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+							/>
+							<Text size={1} muted>per full family</Text>
+						</Flex>
+						<Button
+							mode="ghost"
+							tone="primary"
+							style={{ width: '100%' }}
+							onClick={generateCollection}
+							text="Generate Full Family Collection"
+						/>
+					</Stack>
+				) : (
+					<Flex align="center" justify="center" gap={3} padding={4}>
+						<Spinner />
+						<Text muted size={1}>{status}</Text>
+					</Flex>
+				)}
+			</Card>
+		</Stack>
+	);
+};

package/src/components/SingleUploaderTool.jsx

@@ -627,7 +627,7 @@ export const SingleUploaderTool = (props) => {
 			{renderFontSection('ttf')}
 
 			{status === 'ready' && fileInput?.ttf && (
-				<Grid columns={[2]} gap={2}>
+				<Grid columns={[1, 2]} gap={2}>
 					<Button
 						mode="ghost"
 						tone="primary"

package/src/index.js

@@ -14,6 +14,7 @@ export { default as UploadButton } from './components/UploadButton.jsx';
 export { KeyValueInput } from './components/KeyValueInput.jsx';
 export { KeyValueReferenceInput } from './components/KeyValueReferenceInput.jsx';
 export { VariableInstanceReferencesInput } from './components/VariableInstanceReferencesInput.jsx';
+export { PrimaryCollectionGeneratorTypeface } from './components/PrimaryCollectionGeneratorTypeface.jsx';
 
 // Hooks
 export { useSanityClient } from './hooks/useSanityClient.js';