mlola-ui 1.1.23 → 1.1.25

package/README.md

@@ -62,8 +62,8 @@ that its UI is Mlola:
 `npx mlola-ui mcp` is that server. It answers from the registry bundled with
 this CLI, offline: `get_design_rules`, `search_components`, `get_component`,
 `get_tokens`, `check_markup` (invented classes, wrong `data-*` values, utility
-classes, and hand-written colors or faded text in `style` attributes and
-`<style>` blocks), `add_components` and `init_project`. For Claude Code
+classes, and hand-written colors, spacing off the `--ml-space-*` scale or
+faded text in `style` attributes and `<style>` blocks), `add_components` and `init_project`. For Claude Code
 without init:
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "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.23",
+  "version": "1.1.25",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.23"
+        "@mlola-ui/motion": "^1.1.25"
       },
       "options": [
         {
@@ -714,8 +714,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -784,7 +784,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -839,7 +839,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -903,8 +903,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -943,7 +943,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -993,7 +993,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -1218,8 +1218,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -1260,7 +1260,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1370,7 +1370,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -1421,7 +1421,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -1459,7 +1459,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1799,7 +1799,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -1852,8 +1852,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -1883,7 +1883,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1931,8 +1931,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -1980,7 +1980,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2078,7 +2078,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -2223,7 +2223,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -2355,7 +2355,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -2443,8 +2443,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -2472,7 +2472,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2599,7 +2599,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -2627,7 +2627,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2676,7 +2676,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -2704,7 +2704,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2758,7 +2758,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -2830,7 +2830,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -2900,7 +2900,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3098,8 +3098,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -3124,7 +3124,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/match.ts",
@@ -3188,7 +3188,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3243,7 +3243,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3306,7 +3306,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -3377,7 +3377,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -3496,8 +3496,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3513,7 +3513,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -3561,7 +3561,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25"
       },
       "options": [
         {
@@ -3599,7 +3599,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -3648,8 +3648,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3665,7 +3665,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4="
+          "integrity": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY="
         },
         {
           "path": "packages/components/_internal/media.ts",
@@ -3723,7 +3723,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [],
       "variants": [],
@@ -3846,7 +3846,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {
@@ -3950,8 +3950,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.23",
-        "@mlola-ui/icons": "^1.1.23"
+        "@mlola-ui/behavior": "^1.1.25",
+        "@mlola-ui/icons": "^1.1.25"
       },
       "options": [
         {

package/registry/source/packages/components/_internal/floating.ts

@@ -19,13 +19,17 @@ export interface VirtualAnchor {
 }
 
 /**
- * Keep a fixed-position layer next to its anchor while open: on open, on
- * scroll anywhere, on resize, and whenever either element changes size.
- * Writes styles directly, so following a scroll never re-renders React.
+ * Keep a fixed-position layer next to its anchor while open. It is placed
+ * as it opens, then watched every frame: when the anchor moves, either one
+ * changes size, or the visible area changes, it is placed again. Events do
+ * not cover every move: a phone scrolls a field into view above its
+ * keyboard, and a sidebar slides, without a scroll or resize event, which
+ * left a list behind where its field had been. A frame with nothing changed
+ * reads and writes nothing more, and following never re-renders React.
  * `place` swaps the placement (a tooltip's, with its arrow's `shift`); pass
  * one defined outside the component, so it is the same on every render.
- * `at` is for a virtual anchor that moves without either element resizing:
- * a new value places the layer again.
+ * `at` places the layer again at once when a virtual anchor moves (the
+ * frame after would find it too).
  */
 export function useFloating(
   anchor: React.RefObject<Element | VirtualAnchor | null>,
@@ -63,27 +67,27 @@ export function useFloating(
       if (at.shift !== undefined) layer.style.setProperty("--ml-floating-shift", `${at.shift}px`);
       layer.setAttribute("data-side", at.side);
     };
-    const schedule = () => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(update);
+    // What decides the placement: the anchor's box, the layer's size, the visible area, and whether it holds focus.
+    let last = "";
+    const watch = () => {
+      const target = anchor.current;
+      if (target && layer.isConnected) {
+        const rect = target.getBoundingClientRect();
+        const view = visibleArea();
+        const now = [rect.left, rect.top, rect.width, rect.height, layer.offsetWidth, layer.offsetHeight, view.x, view.y, view.width, view.height, layer.contains(document.activeElement)].join();
+        if (now !== last) {
+          last = now;
+          update();
+        }
+      }
+      frame = requestAnimationFrame(watch);
     };
     update();
-    window.addEventListener("scroll", schedule, true);
-    window.addEventListener("resize", schedule);
-    // The keyboard coming up or going down resizes and moves the visible area, not the window.
-    window.visualViewport?.addEventListener("resize", schedule);
-    window.visualViewport?.addEventListener("scroll", schedule);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
-    observer?.observe(layer);
-    if (context) observer?.observe(context);
+    // Where there are no frames (some test environments), the first placement stands.
+    if (typeof requestAnimationFrame === "function") frame = requestAnimationFrame(watch);
     return () => {
       stopTheme();
-      cancelAnimationFrame(frame);
-      window.removeEventListener("scroll", schedule, true);
-      window.removeEventListener("resize", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
-      window.visualViewport?.removeEventListener("scroll", schedule);
-      observer?.disconnect();
+      if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
     };
   }, [anchor, floating, open, side, align, offset, place, moved]);
 }

package/registry/source-manifest.json

@@ -3,7 +3,7 @@
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-HouQjNfiorcAUoc7DFu78QLuhNDgvUuDOxjWZYYd62E=",
   "packages/components/_internal/dom.ts": "sha256-TJp94MipbXHonH/PC7FFHu5pnAqcoxzLocksWLsTAsc=",
-  "packages/components/_internal/floating.ts": "sha256-01wdG2ctOvRfi8+uR2PAO3nANDdhp3eFdsZnyMdFJw4=",
+  "packages/components/_internal/floating.ts": "sha256-Yk3QfedtNE5m4oG506sYzf5CGE1yIt8gBzImSkXtMbY=",
   "packages/components/_internal/match.ts": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28=",
   "packages/components/_internal/media.ts": "sha256-ziH0YZtu8y3X7OcDI6lYxpvGJCi9zQXq4dynG8n8U9c=",
   "packages/components/_internal/react.ts": "sha256-INfds1J2f1MLpN6kBXz0GkfBEMIiRlhv0DXX455qAZo=",

package/src/knowledge.js

@@ -193,6 +193,30 @@ const SHARED = new Set(["data-tone", "data-variant", "data-size", "data-state",
 const UTILITY = /^(-?(m|p)[trblxy]?-\d|flex$|grid$|block$|inline|hidden$|items-|justify-|gap-|w-|h-|min-|max-|text-(xs|sm|base|lg|xl|\d|[a-z]+-\d)|font-(bold|medium|semibold|light)|bg-|border-|rounded|shadow|ring-|space-[xy]-|leading-|tracking-|opacity-|z-\d|absolute$|relative$|fixed$|sticky$|overflow-|col-span|row-span|sm:|md:|lg:|xl:|hover:|focus:|dark:)/;
 const COLOR = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\(/i;
 
+/*
+ * Spacing written by hand: a padding, margin, gap or inset whose length is
+ * not read from the scale. The guide asks for --ml-space-*; a calc() or
+ * clamp() of scale steps reads a token and passes, and 0, auto and
+ * percentages are not measures anyone invented.
+ */
+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(/-?(?:\d*\.)?\d+(?:px|rem|em)\b/g)].some((length) => parseFloat(length[0]) !== 0);
+
+/** Each spacing property in a style string, a JSX style object or a stylesheet whose length is written by hand. */
+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}`);
+  }
+  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.";
+
 /** Every opening tag in HTML or JSX, with its string-valued attributes. */
 function tagsOf(markup) {
   const tags = [];
@@ -322,6 +346,8 @@ export function checkMarkup(markup) {
       if (overridden.length) {
         note("error", tag, `${overridden.join(", ")} is a theme token; setting it inline overrides the theme.`, "Pick a theme, or change the theme's spec (mlola.theme.json), instead of one element's tokens.");
       }
+      const spacing = handSpacing(style);
+      if (spacing.length) note("warning", tag, `Spacing is written by hand in style (${spacing.join("; ")}).`, SPACING_FIX);
     }
   }
 
@@ -342,6 +368,8 @@ export function checkMarkup(markup) {
       if (overridden.length) {
         note("error", where, `${overridden.join(", ")} is a theme token; setting it here overrides the theme.`, "Pick a theme, or change the theme's spec (mlola.theme.json), instead of redefining its tokens.");
       }
+      const spacing = handSpacing(body);
+      if (spacing.length) note("warning", where, `Spacing is written by hand (${spacing.join("; ")}).`, SPACING_FIX);
       // Faded text: its contrast now depends on the theme behind it.
       // opacity: 0 hides; only a value between 0 and 1 fades what is still read.
       const opacity = /(?:^|;)\s*opacity\s*:\s*(0?\.\d+)\s*(?:;|$)/.exec(body);

package/src/mcp.js

@@ -104,7 +104,7 @@ function readTools({ cwd, version }) {
     {
       name: "check_markup",
       title: "Check markup against the Mlola contract",
-      description: "Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes and <style> blocks hand-written colors, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing: pass the whole page or file, <style> blocks included, not an excerpt, since it only checks what it is given.",
+      description: "Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes and <style> blocks hand-written colors, spacing written by hand instead of the --ml-space-* scale, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing: pass the whole page or file, <style> blocks included, not an excerpt, since it only checks what it is given.",
       inputSchema: { type: "object", properties: { markup: { type: "string" } }, required: ["markup"], additionalProperties: false },
       annotations: { readOnlyHint: true },
       handler: ({ markup }) => {