@penpair/marwes-ui 0.1.3 → 0.3.0

package/dist/tokens.js

@@ -1,25 +1,29 @@
 import { createHash } from "node:crypto";
+import { validateEditableToken } from "@penpair/core";
 export const coreSetName = "Marwes · Core";
 export const darkSetName = "Marwes · Dark";
 export const themeGroup = "Mode";
 const hex = (value) => Math.round(value).toString(16).padStart(2, "0").toUpperCase();
 /** Penpot colour tokens are hex; Marwes also uses rgba() and the word transparent. */
 export function toHexColor(value) {
-    if (value === "transparent")
+    if (value === "transparent") {
         return "#00000000";
+    }
     const rgba = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(value);
     if (rgba) {
         const alpha = rgba[4] === undefined ? 1 : Number(rgba[4]);
         return `#${hex(Number(rgba[1]))}${hex(Number(rgba[2]))}${hex(Number(rgba[3]))}${alpha < 1 ? hex(alpha * 255) : ""}`;
     }
-    if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(value))
+    if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(value)) {
         return value.toUpperCase();
+    }
     throw new Error(`Unsupported colour value: ${value}`);
 }
 const px = (value) => {
     const match = /^(-?[\d.]+)px$/.exec(value);
-    if (!match)
+    if (!match) {
         throw new Error(`Expected a px value, got ${value}`);
+    }
     return String(Number(match[1]));
 };
 const firstFamily = (stack) => stack
@@ -37,25 +41,36 @@ function typographyTokens(vars, fontFamily, describe) {
     const variants = new Map();
     for (const [variable, value] of Object.entries(vars)) {
         const match = /^--mw-typography-(.+)-(font-size|line-height|font-weight|letter-spacing|transform)$/.exec(variable);
-        if (!match)
+        if (!match) {
             continue;
-        const entry = variants.get(match[1]) ?? { fontFamilies: fontFamily };
+        }
+        const entry = variants.get(match[1]) ?? {
+            fontFamilies: fontFamily,
+        };
         const key = typographyKeys[match[2]];
         if (match[2] === "transform") {
-            if (value !== "none")
+            if (value !== "none") {
                 entry[key] = value;
+            }
         }
-        else
+        else {
             entry[key] = match[2] === "line-height" || match[2] === "font-weight" ? value : px(value);
+        }
         variants.set(match[1], entry);
     }
-    return [...variants.entries()]
+    return [
+        ...variants.entries(),
+    ]
         .sort(([left], [right]) => left.localeCompare(right))
         .map(([variant, value]) => ({
         name: `mw-typography-${variant}`,
         type: "typography",
         // The paragraph variants in Marwes define only size and line height; weight and spacing fall back to the normal values, as a browser does.
-        value: { fontWeight: "400", letterSpacing: "0", ...value },
+        value: {
+            fontWeight: "400",
+            letterSpacing: "0",
+            ...value,
+        },
         description: describe(`--mw-typography-${variant}-*`),
     }));
 }
@@ -64,34 +79,77 @@ const byName = (left, right) => left.name.localeCompare(right.name);
 export function tokensFromVars(vars, describe) {
     const colors = Object.entries(vars)
         .filter(([variable]) => variable.startsWith("--mw-color-"))
-        .map(([variable, value]) => ({ name: variable.slice(2), type: "color", value: toHexColor(value), description: describe(variable) }))
+        .map(([variable, value]) => ({
+        name: variable.slice(2),
+        type: "color",
+        value: toHexColor(value),
+        description: describe(variable),
+    }))
         .sort(byName);
     const density = Object.entries(vars)
         .filter(([variable, value]) => variable.startsWith("--mw-density-") && value.endsWith("px"))
-        .map(([variable, value]) => ({ name: variable.slice(2), type: "sizing", value: px(value), description: describe(variable) }))
+        .map(([variable, value]) => ({
+        name: variable.slice(2),
+        type: "sizing",
+        value: px(value),
+        description: describe(variable),
+    }))
         .sort(byName);
-    const radii = ["--mw-ui-radius", "--mw-ui-radius-button"]
+    const radii = [
+        "--mw-ui-radius",
+        "--mw-ui-radius-button",
+    ]
         .filter((variable) => vars[variable] !== undefined)
-        .map((variable) => ({ name: variable.slice(2), type: "borderRadius", value: px(vars[variable]), description: describe(variable) }));
-    const fonts = ["--mw-font-primary", "--mw-font-secondary", "--mw-font-mono"]
+        .map((variable) => ({
+        name: variable.slice(2),
+        type: "borderRadius",
+        value: px(vars[variable]),
+        description: describe(variable),
+    }));
+    const fonts = [
+        "--mw-font-primary",
+        "--mw-font-secondary",
+        "--mw-font-mono",
+    ]
         .filter((variable) => vars[variable] !== undefined)
-        .map((variable) => ({ name: variable.slice(2), type: "fontFamilies", value: firstFamily(vars[variable]), description: describe(variable) }));
+        .map((variable) => ({
+        name: variable.slice(2),
+        type: "fontFamilies",
+        value: firstFamily(vars[variable]),
+        description: describe(variable),
+    }));
     const primary = vars["--mw-font-primary"];
     const typography = primary === undefined ? [] : typographyTokens(vars, firstFamily(primary), describe);
-    return [...colors, ...density, ...radii, ...fonts, ...typography];
+    return [
+        ...colors,
+        ...density,
+        ...radii,
+        ...fonts,
+        ...typography,
+    ];
 }
 /** The tokens of `of` that `base` does not already provide with the same value: what is left to say on top of it. */
 export function tokensAbove(base, of) {
-    const known = new Map(base.map((token) => [token.name, canonical(token.value)]));
+    const known = new Map(base.map((token) => [
+        token.name,
+        canonical(token.value),
+    ]));
     return of.filter((token) => known.get(token.name) !== canonical(token.value));
 }
 /** JSON with sorted keys, so the same data always gives the same text. */
 export function canonical(value) {
     const sort = (input) => {
-        if (Array.isArray(input))
+        if (Array.isArray(input)) {
             return input.map(sort);
-        if (typeof input === "object" && input !== null)
-            return Object.fromEntries(Object.entries(input).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => [k, sort(v)]));
+        }
+        if (typeof input === "object" && input !== null) {
+            return Object.fromEntries(Object.entries(input)
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([k, v]) => [
+                k,
+                sort(v),
+            ]));
+        }
         return input;
     };
     return JSON.stringify(sort(value));
@@ -99,23 +157,34 @@ export function canonical(value) {
 const typographyVariable = /^--mw-typography-(.+)-(font-size|line-height|font-weight|letter-spacing|transform)$/;
 /** Whether a Marwes variable becomes a token (see tokensFromVars). Everything else is reported, never silently dropped. */
 export function isMapped(variable, value) {
-    if (variable.startsWith("--mw-color-"))
+    if (variable.startsWith("--mw-color-")) {
         return true;
-    if (variable.startsWith("--mw-density-"))
+    }
+    if (variable.startsWith("--mw-density-")) {
         return value.endsWith("px");
-    if (variable === "--mw-ui-radius" || variable === "--mw-ui-radius-button")
+    }
+    if (variable === "--mw-ui-radius" || variable === "--mw-ui-radius-button") {
         return true;
-    if (variable === "--mw-font-primary" || variable === "--mw-font-secondary" || variable === "--mw-font-mono")
+    }
+    if (variable === "--mw-font-primary" ||
+        variable === "--mw-font-secondary" ||
+        variable === "--mw-font-mono") {
         return true;
+    }
     return typographyVariable.test(variable);
 }
 export function unmappedVariables(...themes) {
     const found = new Set();
-    for (const vars of themes)
-        for (const [variable, value] of Object.entries(vars))
-            if (!isMapped(variable, value))
+    for (const vars of themes) {
+        for (const [variable, value] of Object.entries(vars)) {
+            if (!isMapped(variable, value)) {
                 found.add(variable);
-    return [...found].sort();
+            }
+        }
+    }
+    return [
+        ...found,
+    ].sort();
 }
 const hashOf = (parts) => createHash("sha256").update(canonical(parts)).digest("hex");
 /**
@@ -125,7 +194,9 @@ const hashOf = (parts) => createHash("sha256").update(canonical(parts)).digest("
  */
 export function buildSnapshot(input) {
     const { core, version, name } = input;
-    const mode = (which, theme) => core.themeToCSSVars(core.resolveThemeInput(theme ?? { mode: which }));
+    const mode = (which, theme) => core.themeToCSSVars(core.resolveThemeInput(theme ?? {
+        mode: which,
+    }));
     const marwes = (variable) => `${variable} (Marwes ${version})`;
     const marwesDark = (variable) => `${variable} in dark mode (Marwes ${version})`;
     const overlay = (which) => (variable) => `${variable}, ${name} ${which} theme (Marwes ${version})`;
@@ -136,51 +207,156 @@ export function buildSnapshot(input) {
     const spacing = Object.values(core.mwThemeVars.spacing)
         .map((reference) => /var\((--mw-spacing-sp-(\d+))\)/.exec(reference))
         .filter((match) => match !== null)
-        .map((match) => ({ name: match[1].slice(2), type: "spacing", value: match[2], description: marwes(match[1]) }))
+        .map((match) => ({
+        name: match[1].slice(2),
+        type: "spacing",
+        value: match[2],
+        description: marwes(match[1]),
+    }))
         .sort((left, right) => Number(left.value) - Number(right.value));
     const unmapped = unmappedVariables(lightDefaults, darkDefaults);
     const sets = [
-        { name: coreSetName, tokens: [...lightBase, ...spacing] },
-        { name: darkSetName, tokens: tokensAbove(lightBase, darkBase) },
+        {
+            name: coreSetName,
+            tokens: [
+                ...lightBase,
+                ...spacing,
+            ],
+        },
+        {
+            name: darkSetName,
+            tokens: tokensAbove(lightBase, darkBase),
+        },
+    ];
+    const lightSets = [
+        coreSetName,
+    ];
+    const darkSets = [
+        coreSetName,
+        darkSetName,
     ];
-    const lightSets = [coreSetName];
-    const darkSets = [coreSetName, darkSetName];
     if (input.project?.light) {
         const tokens = tokensAbove(lightBase, tokensFromVars(mode("light", input.project.light), overlay("light")));
         if (tokens.length > 0) {
-            sets.push({ name: `${name} · Light`, tokens });
+            sets.push({
+                name: `${name} · Light`,
+                tokens,
+            });
             lightSets.push(`${name} · Light`);
         }
     }
     if (input.project?.dark) {
         const tokens = tokensAbove(darkBase, tokensFromVars(mode("dark", input.project.dark), overlay("dark")));
         if (tokens.length > 0) {
-            sets.push({ name: `${name} · Dark`, tokens });
+            sets.push({
+                name: `${name} · Dark`,
+                tokens,
+            });
             darkSets.push(`${name} · Dark`);
         }
     }
+    const ownership = Object.fromEntries(sets.map((set) => [
+        set.name,
+        "adapter",
+    ]));
+    const seenSets = new Set(sets.map((set) => set.name));
+    for (const extra of input.extras ?? []) {
+        if (seenSets.has(extra.name)) {
+            throw new Error("Project extra collides with generated set: " + extra.name);
+        }
+        if (typeof extra.name !== "string" ||
+            !extra.name.trim() ||
+            extra.name.length > 200 ||
+            !Array.isArray(extra.tokens)) {
+            throw new Error("Invalid project extra set");
+        }
+        const tokenNames = new Set();
+        for (const token of extra.tokens) {
+            validateEditableToken(token);
+            if (tokenNames.has(token.name)) {
+                throw new Error("Duplicate project extra token: " + token.name);
+            }
+            tokenNames.add(token.name);
+        }
+        seenSets.add(extra.name);
+        sets.push({
+            name: extra.name,
+            tokens: extra.tokens
+                .map((token) => validateEditableToken(token))
+                .sort((a, b) => a.name.localeCompare(b.name)),
+        });
+        Object.defineProperty(ownership, extra.name, {
+            value: "project",
+            enumerable: true,
+            configurable: true,
+            writable: true,
+        });
+        lightSets.push(extra.name);
+        darkSets.push(extra.name);
+    }
     const themes = [
-        { group: themeGroup, name: "Light", sets: lightSets },
-        { group: themeGroup, name: "Dark", sets: darkSets },
+        {
+            group: themeGroup,
+            name: "Light",
+            sets: lightSets,
+        },
+        {
+            group: themeGroup,
+            name: "Dark",
+            sets: darkSets,
+        },
     ];
-    return { schemaVersion: 1, marwesVersion: version, generatedBy: input.generatedBy, project: name, hash: hashOf({ marwesVersion: version, project: name, sets, themes, unmapped }), unmapped, sets, themes };
+    return {
+        schemaVersion: 2,
+        ownership,
+        marwesVersion: version,
+        generatedBy: input.generatedBy,
+        project: name,
+        hash: hashOf({
+            marwesVersion: version,
+            project: name,
+            sets,
+            themes,
+            unmapped,
+            ownership,
+        }),
+        unmapped,
+        sets,
+        themes,
+    };
 }
 /** The value of a token as it compares in Penpot: strings are exact, font families and typography are normalised the way Penpot stores them. */
 export function normalizeValue(type, value) {
     if (type === "typography" && typeof value === "object" && value !== null) {
         const entry = {};
         for (const [key, raw] of Object.entries(value)) {
-            if (key === "fontFamilies" || key === "fontFamily")
-                entry.fontFamily = (Array.isArray(raw) ? raw : [raw]).map(String).join(",");
-            else
+            if (key === "fontFamilies" || key === "fontFamily") {
+                entry.fontFamily = (Array.isArray(raw)
+                    ? raw
+                    : [
+                        raw,
+                    ])
+                    .map(String)
+                    .join(",");
+            }
+            else {
                 entry[key] = String(raw);
+            }
         }
         return canonical(entry);
     }
-    if (type === "color" && typeof value === "string" && /^#[0-9a-f]+$/i.test(value))
+    if (type === "color" && typeof value === "string" && /^#[0-9a-f]+$/i.test(value)) {
         return value.toUpperCase();
+    }
     // Penpot stores a font family token as a list (["Inter"]) whatever it was given.
-    if (type === "fontFamilies" || type === "fontFamily")
-        return (Array.isArray(value) ? value : [value]).map(String).join(",");
+    if (type === "fontFamilies" || type === "fontFamily") {
+        return (Array.isArray(value)
+            ? value
+            : [
+                value,
+            ])
+            .map(String)
+            .join(",");
+    }
     return typeof value === "string" ? value : canonical(value);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penpair/marwes-ui",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "The Marwes UI adapter for penpair: Marwes tokens (and your own theme) in your Penpot file, with drift checks against the installed Marwes: snapshot, check, diff, push.",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "jiti": "^2.4.2",
-    "@penpair/core": "0.1.3"
+    "@penpair/core": "0.3.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",