mlola-ui 1.1.26 → 1.1.27

package/README.md

@@ -62,8 +62,9 @@ npx mlola-ui check src --json # one folder, every issue as data
 It ends with the drift: how many different colors and spacing values were
 typed by hand instead of read from the tokens, and which ones most. It works
 in any project, so it can measure one before it uses Mlola. In a Mlola
-project it leaves out what the CLI installed (`--all` takes the copied source
-in; the theme it builds, where the tokens are defined, is never checked); where
+project it leaves out what the CLI installed (`--all` takes the copied markup
+in; Mlola's own stylesheets, the built theme among them, are held by the
+library's gates and never checked); where
 Tailwind, UnoCSS or Windi is installed it leaves utility classes alone and
 counts only the values typed into them (`bg-[#fafafa]`, `p-[13px]`).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.1.26",
+  "version": "1.1.27",
   "mcpName": "io.github.mlolahq/mlola-ui",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.26",
+  "version": "1.1.27",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.26"
+        "@mlola-ui/motion": "^1.1.27"
       },
       "options": [
         {
@@ -714,8 +714,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -784,7 +784,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -839,7 +839,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -903,8 +903,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -993,7 +993,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -1218,8 +1218,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -1370,7 +1370,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -1421,7 +1421,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -1799,7 +1799,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -1852,8 +1852,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -1931,8 +1931,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -2078,7 +2078,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -2223,7 +2223,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -2355,7 +2355,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -2443,8 +2443,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -2599,7 +2599,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -2676,7 +2676,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -2758,7 +2758,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -2830,7 +2830,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -2900,7 +2900,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3098,8 +3098,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -3188,7 +3188,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3243,7 +3243,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3306,7 +3306,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -3377,7 +3377,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -3496,8 +3496,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3561,7 +3561,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27"
       },
       "options": [
         {
@@ -3648,8 +3648,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3723,7 +3723,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [],
       "variants": [],
@@ -3846,7 +3846,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {
@@ -3950,8 +3950,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.26",
-        "@mlola-ui/icons": "^1.1.26"
+        "@mlola-ui/behavior": "^1.1.27",
+        "@mlola-ui/icons": "^1.1.27"
       },
       "options": [
         {

package/src/check.js

@@ -75,9 +75,11 @@ function utilityFramework(cwd) {
 }
 
 /**
- * What the CLI fills from Mlola itself, from mlola.config.json: `generated`
- * (<styles>/mlola, the engine entry and the built theme, which is where the
- * tokens are defined) is never checked; `copied` source is, with --all.
+ * What the CLI fills from Mlola itself, from mlola.config.json. Mlola's own
+ * stylesheets are never checked: <styles>/mlola holds the engine and the built
+ * theme, where the tokens are defined, and the copied stylesheets are held by
+ * the library's gates, which render them in every theme (a mark dimmed with
+ * opacity is not faded text). `copied` markup is checked with --all.
  */
 function installedByMlola(cwd) {
   const targets = readJsonIn(cwd, CONFIG_FILENAME)?.targets;
@@ -145,7 +147,8 @@ export function checkProject(cwd, { targets = [], all = false } = {}) {
   }
   const installed = installedByMlola(cwd);
   const skipped = [...installed.generated, ...(all ? [] : installed.copied)];
-  const files = listFiles(cwd, targets.length ? targets : ["."]).filter((file) => !skipped.some((place) => within(file, place)));
+  const ownStylesheet = (file) => STYLES.has(path.extname(file).toLowerCase()) && installed.copied.some((place) => within(file, place));
+  const files = listFiles(cwd, targets.length ? targets : ["."]).filter((file) => !skipped.some((place) => within(file, place)) && !ownStylesheet(file));
   const themes = projectThemes(cwd);
   const contract = projectContract(cwd);
   const utilities = utilityFramework(cwd);
@@ -250,7 +253,7 @@ export function printReport(report, output, { github = false } = {}) {
   if (report.skipped.length) {
     output.log(
       report.all
-        ? `Left out the stylesheets Mlola generates (${report.skipped.join(", ")}), where the tokens are defined.`
+        ? `Left out Mlola's own stylesheets (${report.skipped.join(", ")}, and the ones copied beside its source): the library's gates render them in every theme.`
         : `Left out what Mlola installed (${report.skipped.join(", ")}); --all checks the copied source too.`,
     );
   }

package/src/knowledge.js

@@ -198,7 +198,6 @@ const MARGIN_UTILITY = /^-?ml-(?:\d|auto$|px$|\[)/;
 const ARBITRARY_COLOR = /-\[(#[0-9a-f]{3,8}|(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\([^\]]*\))\]$/i;
 const ARBITRARY_SPACING = /^(?:[\w-]+:)*-?(?:[pm][trblxyse]?|gap(?:-[xy])?|space-[xy]|inset(?:-[xy])?|top|right|bottom|left)-\[(-?(?:\d*\.)?\d+(?:px|rem|em))\]$/;
 const COLORS = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\([^)]*\)/gi;
-const LENGTH = /-?(?:\d*\.)?\d+(?:px|rem|em)\b/g;
 
 /*
  * Spacing written by hand: a padding, margin, gap or inset whose length is
@@ -208,15 +207,53 @@ const LENGTH = /-?(?:\d*\.)?\d+(?:px|rem|em)\b/g;
  */
 const SPACING_CSS = /(?:^|[;{\s])((?:padding|margin|inset)(?:-(?:top|right|bottom|left|inline|block)(?:-(?:start|end))?)?|(?:row-|column-)?gap)\s*:\s*([^;}]+)/gi;
 const SPACING_JS = /(?:^|[{,\s])((?:padding|margin|inset)(?:Top|Right|Bottom|Left|Inline|Block)?(?:Start|End)?|(?:row|column)?[gG]ap)\s*:\s*("[^"]*"|'[^']*'|`[^`]*`|-?\d+(?:\.\d+)?(?=\s*[,}]))/g;
-const byHand = (value) => !/var\(--ml-/.test(value) && [...value.matchAll(LENGTH)].some((length) => parseFloat(length[0]) !== 0);
+/** A value with every clamp(…) range taken out, nested parentheses and all. */
+function withoutRanges(value) {
+  let out = "";
+  for (let index = 0; index < value.length; index += 1) {
+    if (/^clamp\(/i.test(value.slice(index, index + 6)) && !/[\w-]/.test(value[index - 1] ?? "")) {
+      let depth = 0;
+      let end = index + 5;
+      for (; end < value.length; end += 1) {
+        if (value[end] === "(") depth += 1;
+        else if (value[end] === ")" && --depth === 0) break;
+      }
+      index = end;
+      continue;
+    }
+    out += value[index];
+  }
+  return out;
+}
 
-/** The lengths a hand-written spacing declaration uses (a bare JSX number is pixels), for counting drift. */
-const lengthsOf = (declarations) =>
-  declarations.flatMap((declaration) => {
-    const value = declaration.slice(declaration.indexOf(":") + 1).trim();
-    if (/^-?\d+(?:\.\d+)?$/.test(value)) return [`${Number(value)}px`];
-    return [...value.matchAll(LENGTH)].map((length) => length[0]).filter((length) => parseFloat(length) !== 0);
-  });
+/**
+ * The lengths in a value that were typed by hand: px and rem, other than 0
+ * and a 1px hairline, wherever they sit, beside a token or inside a calc().
+ * A clamp() range is fluid on purpose, and em follows the element's own font
+ * (optical tuning, not rhythm), so neither counts. This is the one rule for
+ * spacing: check_markup, `mlola-ui check` and the library's own scale audit
+ * (scripts/audit-scale.mjs) all read it here.
+ */
+export function handWrittenLengths(value) {
+  return [...withoutRanges(String(value)).matchAll(/(?<![\w.-])-?(?:\d*\.)?\d+(?:px|rem)\b/g)]
+    .map((match) => match[0])
+    .filter((length) => {
+      const size = Math.abs(parseFloat(length));
+      return size !== 0 && !(size === 1 && length.endsWith("px"));
+    });
+}
+
+/** Every spacing declaration in a stylesheet (padding, margin, gap and inset), with its place. */
+export function spacingDeclarations(css) {
+  return [...css.matchAll(SPACING_CSS)].map((match) => ({ property: match[1], value: match[2].trim(), index: match.index }));
+}
+
+/** A bare number in a JSX style object is pixels; a quoted value is read without its quotes. */
+const asLength = (raw) => (/^-?\d+(?:\.\d+)?$/.test(raw) ? `${Number(raw)}px` : raw.replace(/^["'`]|["'`]$/g, ""));
+const byHand = (value) => handWrittenLengths(value).length > 0;
+
+/** The lengths a hand-written spacing declaration uses, for counting drift. */
+const lengthsOf = (declarations) => declarations.flatMap((declaration) => handWrittenLengths(asLength(declaration.slice(declaration.indexOf(":") + 1).trim())));
 
 /** Text of the same length with nothing in it, so what is left keeps its offsets. */
 const blank = (text) => text.replace(/[^\n]/g, " ");
@@ -231,15 +268,11 @@ const colorsOf = (text) => [...underived(text).matchAll(COLORS)].map((match) =>
 function handSpacing(text) {
   const found = new Map();
   for (const [, property, value] of text.matchAll(SPACING_CSS)) if (byHand(value)) found.set(property, `${property}: ${value.trim()}`);
-  for (const [, property, raw] of text.matchAll(SPACING_JS)) {
-    // A bare number in a JSX style object is pixels.
-    const handWritten = /^-?\d/.test(raw) ? Number(raw) !== 0 : byHand(raw.slice(1, -1));
-    if (handWritten) found.set(property, `${property}: ${raw}`);
-  }
+  for (const [, property, raw] of text.matchAll(SPACING_JS)) if (byHand(asLength(raw))) found.set(property, `${property}: ${raw}`);
   return [...found.values()];
 }
 
-const SPACING_FIX = "Measure with the scale: var(--ml-space-2), var(--ml-space-4)… (get_tokens spacing). A calc() or clamp() of scale steps is fine; a value invented between them is not.";
+const SPACING_FIX = "Measure with the scale: var(--ml-space-2), var(--ml-space-4)… (get_tokens spacing), or a calc() of its steps. A fluid clamp() range and an em tuned to the font are fine; a length invented between the steps is not.";
 
 /** Every opening tag in HTML or JSX, with its string-valued attributes. */
 export function tagsOf(markup) {