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

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,39 @@ 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.
 
+### `SetOTF`
+
+Detects which configured OpenType feature keys are supported by the typeface's first linked font. Reads `opentypeFeatures.chars` from the font document (populated by `generateFontData`) and patches the `features` array on the field. Shows a feature count when features are detected, and clear error messages when font data is missing.
+
+Wire it up on the `openType` object field in the typeface schema:
+
+```jsx
+import { SetOTF } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'openType',
+  type: 'object',
+  components: { input: SetOTF },
+  options: { collapsible: true },
+  fields: [ /* feature fields — each with a `feature` string e.g. 'liga', 'smcp' */ ],
+}
+```
+
+### `StyleCountInput`
+
+Displays the total number of font styles (static + variable) linked to a typeface. Reads `styles.fonts` and `styles.variableFont` arrays from the form context. Useful as a read-only display field in the typeface schema.
+
+```jsx
+import { StyleCountInput } from '@liiift-studio/sanity-font-manager';
+
+{
+  name: 'styleCount',
+  type: 'number',
+  readOnly: true,
+  components: { input: StyleCountInput },
+}
+```
+
 ### `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.

package/dist/index.js

@@ -36,11 +36,14 @@ __export(index_exports, {
   KeyValueInput: () => KeyValueInput,
   KeyValueReferenceInput: () => KeyValueReferenceInput,
   PriceInput: () => PriceInput_default,
+  PrimaryCollectionGeneratorTypeface: () => PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent: () => RegenerateSubfamiliesComponent,
   SCRIPTS: () => SCRIPTS,
   SCRIPTS_OBJECT: () => SCRIPTS_OBJECT,
+  SetOTF: () => SetOTF,
   SingleUploaderTool: () => SingleUploaderTool,
   StatusDisplay: () => StatusDisplay_default,
+  StyleCountInput: () => StyleCountInput,
   UpdateScriptsComponent: () => UpdateScriptsComponent,
   UploadButton: () => UploadButton_default,
   UploadScriptsComponent: () => UploadScriptsComponent,
@@ -3964,6 +3967,156 @@ 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/components/SetOTF.jsx
+var import_react17 = require("react");
+var import_sanity13 = require("sanity");
+var import_ui15 = require("@sanity/ui");
+var SetOTF = (props) => {
+  var _a, _b;
+  const { onChange, value = {} } = props;
+  const client = useSanityClient();
+  const stylesObject = (0, import_sanity13.useFormValue)(["styles"]);
+  const [message, setMessage] = (0, import_react17.useState)("");
+  const detect = async () => {
+    var _a2, _b2, _c;
+    if (!((_a2 = stylesObject == null ? void 0 : stylesObject.fonts) == null ? void 0 : _a2.length)) {
+      setMessage("Error: No fonts found in styles. Please add at least one font first.");
+      setTimeout(() => setMessage(""), 5e3);
+      return;
+    }
+    const fontRef = (_b2 = stylesObject.fonts[0]) == null ? void 0 : _b2._ref;
+    if (!fontRef) {
+      setMessage("Error: Invalid font reference in styles.");
+      setTimeout(() => setMessage(""), 5e3);
+      return;
+    }
+    try {
+      const font = await client.fetch('*[_type == "font" && _id == $id][0]', { id: fontRef });
+      if (!font) {
+        setMessage("Error: Could not find the referenced font.");
+        setTimeout(() => setMessage(""), 5e3);
+        return;
+      }
+      if (!((_c = font.opentypeFeatures) == null ? void 0 : _c.chars)) {
+        setMessage(`Error: No OpenType feature data found in "${font.title || "this font"}". Generate font data first.`);
+        setTimeout(() => setMessage(""), 5e3);
+        return;
+      }
+      const features = [];
+      Object.keys(value).forEach((key) => {
+        var _a3;
+        if (key !== "features" && ((_a3 = value[key]) == null ? void 0 : _a3.feature)) {
+          const requiredFeatures = value[key].feature.split(" ");
+          const approved = requiredFeatures.every((v) => font.opentypeFeatures.chars.includes(v));
+          if (approved) features.push(key);
+        }
+      });
+      onChange((0, import_sanity13.set)({ ...value, features }));
+      setMessage(`Features detected: ${features.length ? features.join(", ") : "none"}.`);
+      setTimeout(() => setMessage(""), 5e3);
+    } catch (err) {
+      setMessage("Error detecting features. Check the console for details.");
+      console.error("SetOTF detect error:", err);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(import_ui15.Stack, { className: "openType" }, ((_a = value == null ? void 0 : value.features) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ React.createElement(import_ui15.Text, { muted: true, size: 1, style: { marginBottom: "0.5rem" } }, "Number of features: ", value.features.length), !!((_b = stylesObject == null ? void 0 : stylesObject.fonts) == null ? void 0 : _b.length) && /* @__PURE__ */ React.createElement(
+    import_ui15.Button,
+    {
+      text: "Detect OTF",
+      mode: "ghost",
+      onClick: detect,
+      style: { borderRadius: "0 3px 0 0", marginBottom: "1rem" }
+    }
+  ), !!message && /* @__PURE__ */ React.createElement(import_ui15.Text, { muted: true, size: 1 }, /* @__PURE__ */ React.createElement("br", null), message, /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null)), props.renderDefault(props));
+};
+
+// src/components/StyleCountInput.jsx
+var import_react18 = __toESM(require("react"));
+var import_ui16 = require("@sanity/ui");
+var import_sanity14 = require("sanity");
+var StyleCountInput = (props) => {
+  const styles = (0, import_sanity14.useFormValue)(["styles", "fonts"]) || [];
+  const vfStyles = (0, import_sanity14.useFormValue)(["styles", "variableFont"]) || [];
+  const count = styles.length + vfStyles.length;
+  return /* @__PURE__ */ import_react18.default.createElement(import_ui16.Text, { size: 1 }, count);
+};
+
 // src/utils/getEmptyFontKit.js
 var fontkit7 = __toESM(require("fontkit"));
 var import_slugify4 = __toESM(require("slugify"));
@@ -4050,11 +4203,14 @@ var readFontFile2 = (file) => {
   KeyValueInput,
   KeyValueReferenceInput,
   PriceInput,
+  PrimaryCollectionGeneratorTypeface,
   RegenerateSubfamiliesComponent,
   SCRIPTS,
   SCRIPTS_OBJECT,
+  SetOTF,
   SingleUploaderTool,
   StatusDisplay,
+  StyleCountInput,
   UpdateScriptsComponent,
   UploadButton,
   UploadScriptsComponent,