@liiift-studio/sanity-font-manager 2.3.1 → 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.

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,
@@ -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

@@ -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.1",
+	"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/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';