@scattered-light/loomiere 0.3.0 → 0.4.1

package/figma/plugin/code.js

@@ -0,0 +1,746 @@
+// Generated by figma/build-plugin.mjs from engine.js and plugin-main.js. Do not edit.
+/**
+ * The Loomiere Figma sync engine: writes figma.json (exporters/figma.mjs) into a Figma file
+ * through the plugin API. Plain JavaScript with no imports, so the same text runs in three
+ * places: the Loomiere plugin (plugin/code.js), `loomiere figma push` scripts run through
+ * Claude's Figma connector, and Node (fingerprints only, lib/figma.mjs).
+ *
+ *   await loomiereSync(data, options) → report
+ *     options.dryRun        plan only: nothing in the file changes
+ *     options.layout        'auto' (default) uses modes when the plan allows them, else data.flat
+ *     options.partial       data holds only some variables (a push in parts): don't list the
+ *                           missing ones as removed
+ *     options.complete      with partial: groups ("Brand:default/color/primary") this part carries whole,
+ *                           so variables of those groups it doesn't carry are gone from the build
+ *     options.removeGroups  with partial: groups and collections the build no longer has,
+ *     options.removeCollections  worked out from a snapshot
+ *     options.remove        delete variables, modes, collections and text styles the build no longer has
+ *     options.textStyles    false skips text styles and effect styles
+ *
+ * Variables and styles are matched by name, so updating keeps their IDs and every layer bound
+ * to them stays bound. An alias to a variable that isn't there yet makes an empty one for a
+ * later part to fill.
+ */
+
+/* global figma */
+
+var LOOMIERE_FLAT_NAMES = ["Brand", "Color Pair", "Theme", "Theme dark"];
+var LOOMIERE_MODE_NAMES = [
+  "Brand",
+  "Scale",
+  "Size",
+  "Theme",
+  "Status",
+  "Emphasis",
+];
+// Collections earlier builds made that no layout has now; a full sync with "remove" deletes them.
+var LOOMIERE_RETIRED_NAMES = ["Color Pair", "Color Role"];
+
+/** "#rrggbb" or "#rrggbbaa" → { r, g, b, a } in 0–1. */
+function loomiereRgba(hex) {
+  var h = hex.replace("#", "");
+  var n = function (i) {
+    return parseInt(h.slice(i, i + 2), 16) / 255;
+  };
+  return { r: n(0), g: n(2), b: n(4), a: h.length === 8 ? n(6) : 1 };
+}
+
+/** { r, g, b, a } → "#rrggbbaa", the form fingerprints compare. */
+function loomiereHex8(c) {
+  var p = function (v) {
+    return ("0" + Math.round(v * 255).toString(16)).slice(-2);
+  };
+  return "#" + p(c.r) + p(c.g) + p(c.b) + p(c.a === undefined ? 1 : c.a);
+}
+
+/** One value as text, so the build and the file can be compared. */
+function loomiereCanon(type, v) {
+  if (v && typeof v === "object" && v.alias) return "@" + v.alias;
+  if (type === "COLOR")
+    return typeof v === "string"
+      ? loomiereHex8(loomiereRgba(v))
+      : loomiereHex8(v);
+  if (type === "FLOAT") return String(Math.round(Number(v) * 1000) / 1000);
+  return String(v);
+}
+
+/** A description as the build wrote it: Figma hands descriptions back HTML-escaped (""", "'"). */
+function loomiereText(text) {
+  return (text || "").replace(/&(quot|#39|lt|gt|amp);/g, function (m, e) {
+    return { quot: '"', "#39": "'", lt: "<", gt: ">", amp: "&" }[e];
+  });
+}
+
+/** FNV-1a, 32 bits, as 8 hex digits. */
+function loomiereHash(text) {
+  var h = 0x811c9dc5;
+  for (var i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return ("0000000" + h.toString(16)).slice(-8);
+}
+
+/** A variable from figma.json → its fingerprint; the file side builds the same text. */
+function loomiereFingerprint(collection, v) {
+  var parts = [v.type];
+  var modes = collection.modes.slice().sort();
+  for (var i = 0; i < modes.length; i++) {
+    var m = modes[i];
+    parts.push(
+      m +
+        "=" +
+        (v.values[m] === undefined ? "" : loomiereCanon(v.type, v.values[m])),
+    );
+  }
+  parts.push(
+    (v.scopes || []).slice().sort().join(","),
+    v.code || "",
+    v.description || "",
+    collection.hidden ? "hidden" : "",
+  );
+  return loomiereHash(parts.join("|"));
+}
+
+async function loomiereModeLimit() {
+  var probe = figma.variables.createVariableCollection("loomiere mode probe");
+  var limit = 1;
+  try {
+    for (; limit < 40; limit++) probe.addMode("m" + limit);
+  } catch (e) {
+    // The plan's limit: addMode refused the next one.
+  }
+  probe.remove();
+  return limit;
+}
+
+/** The modes layout trimmed to `limit` modes per collection, or the flat layout. */
+function loomiereLayout(data, limit, layout, warnings) {
+  if (
+    layout === "flat" ||
+    (layout !== "modes" && limit < 2) ||
+    !data.collections
+  ) {
+    if (data.flat) return { name: "flat", collections: data.flat.collections };
+    return { name: "modes", collections: data.collections };
+  }
+  var collections = data.collections.map(function (c) {
+    if (c.modes.length <= limit) return c;
+    warnings.push(
+      c.name +
+        " has " +
+        c.modes.length +
+        " modes and this plan allows " +
+        limit +
+        ", so " +
+        c.modes.slice(limit).join(", ") +
+        " were left out.",
+    );
+    return Object.assign({}, c, { modes: c.modes.slice(0, limit) });
+  });
+  return { name: "modes", collections: collections };
+}
+
+async function loomiereReadFile() {
+  var collections = await figma.variables.getLocalVariableCollectionsAsync();
+  var variables = await figma.variables.getLocalVariablesAsync();
+  var byId = {};
+  var collectionById = {};
+  collections.forEach(function (c) {
+    collectionById[c.id] = c;
+  });
+  variables.forEach(function (v) {
+    byId[v.id] = v;
+  });
+  var key = function (v) {
+    var c = collectionById[v.variableCollectionId];
+    return (c ? c.name : "?") + ":" + v.name;
+  };
+  var byKey = {};
+  variables.forEach(function (v) {
+    byKey[key(v)] = v;
+  });
+  return {
+    collections: collections,
+    variables: variables,
+    byId: byId,
+    byKey: byKey,
+    key: key,
+    collectionById: collectionById,
+  };
+}
+
+/** The file's variable in the same text form loomiereFingerprint uses for the build. */
+function loomiereFileFingerprint(file, collection, v, modeNames) {
+  var parts = [v.resolvedType];
+  var names = (
+    modeNames ||
+    collection.modes.map(function (m) {
+      return m.name;
+    })
+  )
+    .slice()
+    .sort();
+  for (var i = 0; i < names.length; i++) {
+    var mode = collection.modes.filter(function (m) {
+      return m.name === names[i];
+    })[0];
+    var raw = mode && v.valuesByMode[mode.modeId];
+    var value =
+      raw && raw.type === "VARIABLE_ALIAS"
+        ? { alias: file.byId[raw.id] ? file.key(file.byId[raw.id]) : "?" }
+        : raw;
+    parts.push(
+      names[i] +
+        "=" +
+        (raw === undefined ? "" : loomiereCanon(v.resolvedType, value)),
+    );
+  }
+  var code = v.codeSyntax && v.codeSyntax.WEB ? v.codeSyntax.WEB : "";
+  parts.push(
+    v.scopes.slice().sort().join(","),
+    code,
+    loomiereText(v.description),
+    collection.hiddenFromPublishing ? "hidden" : "",
+  );
+  return loomiereHash(parts.join("|"));
+}
+
+/** A variable's group: its name up to the last slash ("color/primary/600" → "color/primary"). */
+function loomiereGroupOf(name) {
+  var i = name.lastIndexOf("/");
+  return i === -1 ? "" : name.slice(0, i);
+}
+
+/** One hash for a group's variables: names and fingerprints, in name order. */
+function loomiereGroupHash(entries) {
+  return loomiereHash(
+    entries
+      .sort(function (a, b) {
+        return a[0] < b[0] ? -1 : 1;
+      })
+      .map(function (e) {
+        return e[0] + "=" + e[1];
+      })
+      .join(";"),
+  );
+}
+
+/**
+ * What the file has, small enough to pass back: the plan's mode limit, the Loomiere
+ * collections, and one hash per group of variables ("Brand:default/color/primary"). A push compares
+ * these with the build's and sends only the groups that differ.
+ */
+async function loomiereSnapshot() {
+  var file = await loomiereReadFile();
+  var names = LOOMIERE_MODE_NAMES.concat(LOOMIERE_FLAT_NAMES);
+  var groups = {};
+  file.variables.forEach(function (v) {
+    var c = file.collectionById[v.variableCollectionId];
+    if (!c || names.indexOf(c.name) === -1) return;
+    var g = c.name + ":" + loomiereGroupOf(v.name);
+    (groups[g] = groups[g] || []).push([
+      v.name,
+      loomiereFileFingerprint(file, c, v),
+    ]);
+  });
+  var out = {};
+  Object.keys(groups).forEach(function (g) {
+    out[g] = loomiereGroupHash(groups[g]);
+  });
+  var present = file.collections
+    .map(function (c) {
+      return c.name;
+    })
+    .filter(function (n) {
+      return names.indexOf(n) !== -1;
+    });
+  return {
+    modeLimit: await loomiereModeLimit(),
+    collections: present,
+    groups: out,
+  };
+}
+
+var LOOMIERE_WEIGHTS = {
+  100: ["Thin", "Hairline"],
+  200: ["ExtraLight", "Extra Light", "UltraLight", "Ultra Light"],
+  300: ["Light"],
+  400: ["Regular", "Normal", "Book", "Roman"],
+  500: ["Medium"],
+  600: ["SemiBold", "Semi Bold", "Semibold", "DemiBold", "Demi Bold"],
+  700: ["Bold"],
+  800: ["ExtraBold", "Extra Bold", "UltraBold", "Ultra Bold", "Heavy"],
+  900: ["Black", "Heavy"],
+};
+
+/** The installed style of `family` closest to `weight`, upright. */
+function loomierePickFont(fonts, family, weight) {
+  var styles = fonts
+    .filter(function (f) {
+      return (
+        f.fontName.family === family &&
+        !/italic|oblique/i.test(f.fontName.style)
+      );
+    })
+    .map(function (f) {
+      return f.fontName.style;
+    });
+  if (!styles.length) return null;
+  var tries = [
+    weight,
+    weight + 100,
+    weight - 100,
+    weight + 200,
+    weight - 200,
+    400,
+  ];
+  for (var i = 0; i < tries.length; i++) {
+    var names = LOOMIERE_WEIGHTS[tries[i]] || [];
+    for (var j = 0; j < names.length; j++)
+      if (styles.indexOf(names[j]) !== -1)
+        return { family: family, style: names[j] };
+  }
+  return { family: family, style: styles[0] };
+}
+
+/**
+ * Files synced before the collections were renamed (Scheme, Theme for pairs, Color, Pairs, Size
+ * base) get them renamed in place, and Brand's colors moved into their theme groups, so their IDs
+ * and every layer bound to them stay. Returns what it renamed.
+ */
+async function loomiereMigrate(dryRun) {
+  var collections = await figma.variables.getLocalVariableCollectionsAsync();
+  var byName = {};
+  collections.forEach(function (c) {
+    byName[c.name] = c;
+  });
+  var renamed = [];
+  var rename = function (from, to) {
+    if (!byName[from] || byName[to]) return;
+    renamed.push("collection " + from + " → " + to);
+    if (!dryRun) byName[from].name = to;
+    byName[to] = byName[from];
+    delete byName[from];
+  };
+  if (byName.Scheme) {
+    rename("Theme", "Color Pair");
+    rename("Scheme", "Theme");
+    rename("Color", "Color Role");
+    var brand = byName.Brand;
+    if (brand) {
+      var variables = await figma.variables.getLocalVariablesAsync();
+      variables.forEach(function (v) {
+        if (v.variableCollectionId !== brand.id) return;
+        var to = /^color\//.test(v.name)
+          ? "default/" + v.name
+          : v.name.replace(/^vision\/([^/]+)\//, "$1/");
+        if (to === v.name) return;
+        renamed.push("Brand:" + v.name + " → " + to);
+        if (!dryRun) v.name = to;
+      });
+    }
+  }
+  rename("Pairs", "Color Pair");
+  rename("Size base", "Scale");
+  return renamed;
+}
+
+async function loomiereSync(data, options) {
+  options = options || {};
+  if (!data || data.format !== "loomiere-figma")
+    throw new Error(
+      "This is not a Loomiere figma.json (loomiere build writes it to exports/figma.json).",
+    );
+  var dryRun = !!options.dryRun;
+  var warnings = [];
+  var report = {
+    dryRun: dryRun,
+    brand: data.brand,
+    created: [],
+    updated: [],
+    unchanged: 0,
+    removed: [],
+    modesAdded: [],
+    styles: { created: [], updated: [], unchanged: 0 },
+    warnings: warnings,
+  };
+
+  var limit = options.modeLimit || (await loomiereModeLimit());
+  var layout = loomiereLayout(data, limit, options.layout || "auto", warnings);
+  report.layout = layout.name;
+  report.modeLimit = limit;
+
+  report.renamed = await loomiereMigrate(dryRun);
+  var file = await loomiereReadFile();
+  var collectionsByName = {};
+  file.collections.forEach(function (c) {
+    collectionsByName[c.name] = c;
+  });
+
+  // Collections and modes.
+  var live = {};
+  layout.collections.forEach(function (c) {
+    var col = collectionsByName[c.name];
+    var renamed = null;
+    if (!col) {
+      report.created.push("collection " + c.name);
+      if (dryRun) return;
+      col = figma.variables.createVariableCollection(c.name);
+      col.renameMode(col.modes[0].modeId, c.modes[0]);
+    } else if (
+      !col.modes.some(function (x) {
+        return x.name === c.modes[0];
+      }) &&
+      c.modes.indexOf(col.modes[0].name) === -1
+    ) {
+      // A file moving between layouts (Starter's "Value" or "Light" to the modes' "Default"):
+      // the first mode takes the new name so its values, and what is bound to them, carry over.
+      renamed = col.modes[0].modeId;
+      report.modesAdded.push(
+        c.name + ": " + col.modes[0].name + " renamed " + c.modes[0],
+      );
+      if (!dryRun) col.renameMode(col.modes[0].modeId, c.modes[0]);
+    }
+    c.modes.forEach(function (m) {
+      if (
+        col.modes.some(function (x) {
+          return x.name === m;
+        })
+      )
+        return;
+      report.modesAdded.push(c.name + ": " + m);
+      if (!dryRun) col.addMode(m);
+    });
+    col.modes.slice().forEach(function (x) {
+      if (x.modeId === renamed || c.modes.indexOf(x.name) !== -1) return;
+      report.removed.push(c.name + " mode " + x.name);
+      if (options.remove && !dryRun) col.removeMode(x.modeId);
+    });
+    if (!dryRun && !!c.hidden !== col.hiddenFromPublishing)
+      col.hiddenFromPublishing = !!c.hidden;
+    live[c.name] = col;
+  });
+  if (!dryRun) file = await loomiereReadFile();
+
+  var modeId = function (col, name) {
+    var m = col.modes.filter(function (x) {
+      return x.name === name;
+    })[0];
+    return m && m.modeId;
+  };
+  var typeOf = {};
+  layout.collections.forEach(function (c) {
+    c.variables.forEach(function (v) {
+      typeOf[c.name + ":" + v.name] = v.type;
+    });
+  });
+
+  // Make every variable first (and any alias target a later part fills), then set values.
+  var ensure = function (key, type) {
+    if (file.byKey[key]) return file.byKey[key];
+    var i = key.indexOf(":");
+    var col =
+      live[key.slice(0, i)] ||
+      file.collections.filter(function (c) {
+        return c.name === key.slice(0, i);
+      })[0];
+    if (!col) throw new Error("No collection for " + key);
+    var v = figma.variables.createVariable(key.slice(i + 1), col, type);
+    file.byKey[key] = v;
+    file.byId[v.id] = v;
+    return v;
+  };
+
+  var wanted = {};
+  layout.collections.forEach(function (c) {
+    var col = live[c.name];
+    c.variables.forEach(function (v) {
+      var key = c.name + ":" + v.name;
+      wanted[key] = true;
+      var existing = file.byKey[key];
+      if (existing && existing.resolvedType !== v.type) {
+        warnings.push(
+          key +
+            " is " +
+            existing.resolvedType +
+            " in the file and " +
+            v.type +
+            " in the build; it was replaced.",
+        );
+        if (!dryRun) existing.remove();
+        delete file.byKey[key];
+        existing = null;
+      }
+      var colNode =
+        col && file.collectionById[col.id] ? file.collectionById[col.id] : col;
+      var same =
+        existing &&
+        colNode &&
+        loomiereFileFingerprint(file, colNode, existing, c.modes) ===
+          loomiereFingerprint(c, v);
+      if (same) {
+        report.unchanged++;
+        return;
+      }
+      (existing ? report.updated : report.created).push(key);
+      if (dryRun) return;
+      var target = ensure(key, v.type);
+      c.modes.forEach(function (m) {
+        var value = v.values[m];
+        if (value === undefined || value === null) return;
+        var id = modeId(col, m);
+        if (value.alias) {
+          var to = ensure(value.alias, typeOf[value.alias] || v.type);
+          target.setValueForMode(id, figma.variables.createVariableAlias(to));
+        } else if (v.type === "COLOR")
+          target.setValueForMode(id, loomiereRgba(value));
+        else
+          target.setValueForMode(
+            id,
+            v.type === "FLOAT" ? Number(value) : value,
+          );
+      });
+      target.scopes = v.scopes || [];
+      if (v.code) target.setVariableCodeSyntax("WEB", v.code);
+      target.description = v.description || "";
+    });
+  });
+
+  // What the build no longer has. A whole run works it out; a push in parts is told
+  // (options.removeKeys, options.removeCollections), since each part sees only its own variables.
+  var ours = layout.collections.map(function (c) {
+    return c.name;
+  });
+  var other = (
+    layout.name === "modes" ? LOOMIERE_FLAT_NAMES : LOOMIERE_MODE_NAMES
+  ).concat(LOOMIERE_RETIRED_NAMES);
+  var goneVars = [];
+  var goneCollections = [];
+  if (options.partial) {
+    var complete = options.complete || [];
+    var dropped = options.removeGroups || [];
+    file.variables.forEach(function (v) {
+      var c = file.collectionById[v.variableCollectionId];
+      if (!c || ours.indexOf(c.name) === -1 || wanted[file.key(v)]) return;
+      var g = c.name + ":" + loomiereGroupOf(v.name);
+      if (complete.indexOf(g) !== -1 || dropped.indexOf(g) !== -1)
+        goneVars.push(v);
+    });
+    file.collections.forEach(function (c) {
+      if ((options.removeCollections || []).indexOf(c.name) !== -1)
+        goneCollections.push(c);
+    });
+  } else {
+    file.variables.forEach(function (v) {
+      var c = file.collectionById[v.variableCollectionId];
+      if (c && ours.indexOf(c.name) !== -1 && !wanted[file.key(v)])
+        goneVars.push(v);
+    });
+    file.collections.forEach(function (c) {
+      if (ours.indexOf(c.name) === -1 && other.indexOf(c.name) !== -1)
+        goneCollections.push(c);
+    });
+  }
+  goneVars.forEach(function (v) {
+    report.removed.push(file.key(v));
+    if (options.remove && !dryRun) v.remove();
+  });
+  goneCollections.forEach(function (c) {
+    report.removed.push(
+      "collection " +
+        c.name +
+        " (the " +
+        (layout.name === "modes" ? "one-mode" : "modes") +
+        " layout)",
+    );
+    if (options.remove && !dryRun) c.remove();
+  });
+  if (report.removed.length && !options.remove)
+    warnings.push(
+      report.removed.length +
+        ' variables or collections are no longer in the build. Sync with "remove" to delete them.',
+    );
+
+  if (options.textStyles !== false && data.textStyles)
+    await loomiereTextStyles(data, layout, file, report, options);
+  if (options.textStyles !== false && data.effectStyles)
+    await loomiereEffectStyles(data, layout, file, report, options);
+  return report;
+}
+
+/** Effect styles: elevation steps and focus looks. A shadow color that is a Theme variable stays bound. */
+async function loomiereEffectStyles(data, layout, file, report, options) {
+  var dryRun = !!options.dryRun;
+  var styles = await figma.getLocalEffectStylesAsync();
+  var byName = {};
+  styles.forEach(function (s) {
+    byName[s.name] = s;
+  });
+  var key = function (effects) {
+    return JSON.stringify(
+      effects.map(function (e) {
+        var bound = e.boundVariables && e.boundVariables.color;
+        return [
+          e.type,
+          e.offset.x,
+          e.offset.y,
+          e.radius,
+          e.spread || 0,
+          loomiereHex8(e.color),
+          bound ? bound.id : null,
+        ];
+      }),
+    );
+  };
+  for (var i = 0; i < data.effectStyles.length; i++) {
+    var t = data.effectStyles[i];
+    var effects = t.effects.map(function (e) {
+      var effect = {
+        type: e.type,
+        color: loomiereRgba(e.color),
+        offset: { x: e.x, y: e.y },
+        radius: e.blur,
+        spread: e.spread,
+        visible: true,
+        blendMode: "NORMAL",
+        showShadowBehindNode: false,
+      };
+      var v =
+        layout.name === "modes" && e.colorVariable
+          ? file.byKey[e.colorVariable]
+          : null;
+      return v
+        ? figma.variables.setBoundVariableForEffect(effect, "color", v)
+        : effect;
+    });
+    var s = byName[t.name];
+    if (
+      s &&
+      key(s.effects) === key(effects) &&
+      loomiereText(s.description) === t.description
+    ) {
+      report.styles.unchanged++;
+      continue;
+    }
+    (s ? report.styles.updated : report.styles.created).push(t.name);
+    if (dryRun) continue;
+    if (!s) {
+      s = figma.createEffectStyle();
+      s.name = t.name;
+    }
+    s.effects = effects;
+    s.description = t.description;
+  }
+  var names = data.effectStyles.map(function (t) {
+    return t.name;
+  });
+  styles.forEach(function (s) {
+    if (
+      names.indexOf(s.name) !== -1 ||
+      !/\nCSS: /.test(loomiereText(s.description))
+    )
+      return;
+    report.removed.push("effect style " + s.name);
+    if (options.remove && !dryRun) s.remove();
+  });
+}
+
+async function loomiereTextStyles(data, layout, file, report, options) {
+  var dryRun = !!options.dryRun;
+  var styles = await figma.getLocalTextStylesAsync();
+  var byName = {};
+  styles.forEach(function (s) {
+    byName[s.name] = s;
+  });
+  var fonts = await figma.listAvailableFontsAsync();
+  var sizeMode = layout.name === "modes" ? "Desktop" : null;
+  for (var i = 0; i < data.textStyles.length; i++) {
+    var t = data.textStyles[i];
+    var font = loomierePickFont(fonts, t.family, t.weight);
+    if (!font) {
+      report.warnings.push(
+        "Text style " +
+          t.name +
+          ": " +
+          t.family +
+          " is not installed in Figma, so it was skipped.",
+      );
+      continue;
+    }
+    var size = t.size[sizeMode || "Desktop"];
+    var sizeVar =
+      layout.name === "modes" && t.sizeVariable
+        ? file.byKey[t.sizeVariable]
+        : null;
+    var familyVar =
+      layout.name === "modes" && t.familyVariable
+        ? file.byKey[t.familyVariable]
+        : null;
+    var s = byName[t.name];
+    var same =
+      s &&
+      s.fontName.family === font.family &&
+      s.fontName.style === font.style &&
+      Math.abs(s.fontSize - size) < 0.01 &&
+      s.lineHeight.unit === t.lineHeight.unit &&
+      Math.abs((s.lineHeight.value || 0) - (t.lineHeight.value || 0)) < 0.01 &&
+      s.letterSpacing.unit === t.letterSpacing.unit &&
+      Math.abs(s.letterSpacing.value - t.letterSpacing.value) < 0.01 &&
+      s.textCase === (t.textCase || "ORIGINAL") &&
+      loomiereText(s.description) === t.description &&
+      (!sizeVar ||
+        (s.boundVariables &&
+          s.boundVariables.fontSize &&
+          s.boundVariables.fontSize.id === sizeVar.id));
+    if (same) {
+      report.styles.unchanged++;
+      continue;
+    }
+    (s ? report.styles.updated : report.styles.created).push(t.name);
+    if (dryRun) continue;
+    await figma.loadFontAsync(font);
+    if (s) await figma.loadFontAsync(s.fontName);
+    if (!s) {
+      s = figma.createTextStyle();
+      s.name = t.name;
+    }
+    s.fontName = font;
+    s.fontSize = size;
+    s.lineHeight = t.lineHeight;
+    s.letterSpacing = t.letterSpacing;
+    s.textCase = t.textCase || "ORIGINAL";
+    s.description = t.description;
+    if (sizeVar) s.setBoundVariable("fontSize", sizeVar);
+    if (familyVar) s.setBoundVariable("fontFamily", familyVar);
+  }
+  {
+    var names = data.textStyles.map(function (t) {
+      return t.name;
+    });
+    styles.forEach(function (s) {
+      if (
+        names.indexOf(s.name) !== -1 ||
+        s.description.indexOf("CSS: .text-style-") === -1
+      )
+        return;
+      report.removed.push("text style " + s.name);
+      if (options.remove && !dryRun) s.remove();
+    });
+  }
+}
+
+/* The Loomiere plugin: the sync engine above, run on a figma.json the UI hands it. */
+/* global figma, __html__, loomiereSync */
+
+figma.showUI(__html__, { width: 420, height: 600, themeColors: true });
+
+figma.ui.onmessage = async function (msg) {
+  if (msg.type !== 'sync') return;
+  try {
+    var report = await loomiereSync(msg.data, msg.options);
+    figma.ui.postMessage({ type: 'report', report: report });
+  } catch (err) {
+    figma.ui.postMessage({ type: 'error', message: String((err && err.message) || err) });
+  }
+};