synthesisui 0.16.26 → 0.16.28

package/dist/commands/doctor.js

@@ -191,6 +191,7 @@ const KIND_LABEL = {
     radius: "radius",
     spacing: "spacing",
     font: "type",
+    motion: "motion",
 };
 /** "1 file", "2 files" - a report that says "1 files read" on its very first
  *  line spends credibility before it has said anything. */

package/dist/doctor/scan.js

@@ -59,6 +59,34 @@ const RADIUS = new RegExp(`(?:border-?[Rr]adius\\s*:\\s*${OPEN}|rounded(?:-[a-z]
 const SPACING = new RegExp(`(?:\\b[pmg](?:[trblxy])?-\\[|gap-\\[|(?:padding|margin|gap)(?:[A-Z][a-z]+)?\\s*:\\s*${OPEN})(-?\\d*\\.?\\d+)(px|rem)`, "g");
 /** A font stack written by hand rather than taken from the type scale. */
 const FONT = /font-family\s*:\s*([^;}\n]+)/g;
+/**
+ * MOTION, the family the scan never read (item 12, F3).
+ *
+ * A transition or animation declaration carrying a literal clock - `300ms`,
+ * `.2s`, a hand-tuned `cubic-bezier` - is timing decided outside the system,
+ * exactly like a hex outside the palette. Anchored to the property so a
+ * number elsewhere on the line (a scale factor, a z-index) is never read as
+ * time; the value normalizer makes `.3s` and `300ms` one literal, so the
+ * system's own duration token gets NAMED, not just flagged.
+ */
+// `]` ends the value too: Tailwind's arbitrary syntax (`[animation:...]`)
+// closes with it, and without the stop the "value" swallowed the rest of the
+// className - first real report blamed classes that sat beside the animation.
+const MOTION_PROP = /\b(?:transition|animation)(?:-(?:duration|delay|timing-function)|Duration|Delay|TimingFunction)?\s*:\s*["'`]?([^;}\]"'`\n]*)/g;
+// Trailing guard instead of `\b`: in arbitrary syntax spaces are `_`, which is
+// a word char, so `200ms_ease` failed `\b` and the hand-written clock passed
+// unseen (found on the generated button.tsx, first field run of the family).
+const TIME_LITERAL = /(\d*\.?\d+)(ms|s)(?![a-zA-Z0-9%])/g;
+const BEZIER = /cubic-bezier\([^)]*\)/g;
+/** `duration-300`, `duration-[350ms]`, `delay-75` - Tailwind's stock clock. */
+const TW_TIME = /\b(?:duration|delay)-(?:\[([^\]]+)\]|(\d+)\b)/g;
+const TW_EASE = /\bease-\[([^\]]+)\]/g;
+/** `animate-fade-up`, `animate-[wiggle_1s_ease]` - checked against the
+ *  installed vocabulary, so only when the system ships one. */
+const ANIMATE_UTIL = /\banimate-(\[[^\]]+\]|[a-z0-9-]+)/g;
+/** tailwindcss-animate's grammar (the shadcn bridge): `animate-in`/`-out` are
+ *  composable micro-transition idiom, not a keyframe selection to police. */
+const ANIMATE_IDIOM = new Set(["none", "in", "out"]);
 /**
  * Uses of the system. Coverage is meaningless without them.
  *
@@ -308,6 +336,68 @@ export function scanSource(file, source, table) {
                 continue;
             push("font", stack);
         }
+        for (const m of line.matchAll(MOTION_PROP)) {
+            const value = m[1];
+            const base = (m.index ?? 0) + m[0].length - value.length;
+            for (const t of value.matchAll(TIME_LITERAL)) {
+                // `0s` is idiom (disabling a transition), not a clock chosen by hand.
+                if (Number.parseFloat(t[1]) === 0)
+                    continue;
+                push("motion", `${t[1]}${t[2]}`, base + (t.index ?? 0));
+            }
+            for (const b of value.matchAll(BEZIER)) {
+                push("motion", b[0], base + (b.index ?? 0));
+            }
+            // A `ds-*` animation name that the installed css never declares renders
+            // as NOTHING, silently - the keyframe cousin of a phantom token.
+            //
+            // Two guards, both from the first field run (soft-test, 29/07): the
+            // lookbehind keeps `var(--ds-motion-durations-base)` from reading as a
+            // keyframe named after the token (`-` before `ds-` means it is a custom
+            // property, not a name); and the name must END on a word - the greedy
+            // run used to stop at Tailwind's `_` separator and report a truncated
+            // `ds-soft-test-` as phantom while the real keyframe existed.
+            if (table.keyframes.size > 0) {
+                for (const w of value.matchAll(/(?<![\w-])(ds-[a-z0-9]+(?:-[a-z0-9]+)*)/g)) {
+                    if (!table.keyframes.has(w[1]))
+                        phantoms.push({ name: `@keyframes ${w[1]}`, line: at });
+                }
+            }
+        }
+        for (const m of line.matchAll(TW_TIME)) {
+            const literal = m[1] ?? `${m[2]}ms`;
+            // `duration-[var(--ds-motion-durations-base)]` is the token being USED.
+            if (literal.startsWith("var("))
+                continue;
+            if (Number.parseFloat(literal) === 0)
+                continue;
+            push("motion", literal, m.index ?? -1);
+        }
+        for (const m of line.matchAll(TW_EASE)) {
+            if (m[1].startsWith("var("))
+                continue;
+            push("motion", m[1], m.index ?? -1);
+        }
+        // Vocabulary checks exist only when there is a vocabulary: a system that
+        // ships no keyframes left nothing to select from, and silence is honest.
+        if (table.keyframes.size > 0 && table.slug) {
+            const scope = `ds-${table.slug}-`;
+            const vocabulary = new Set([...table.keyframes]
+                .filter((k) => k.startsWith(scope))
+                .map((k) => k.slice(scope.length)));
+            for (const m of line.matchAll(ANIMATE_UTIL)) {
+                const name = m[1];
+                if (name.startsWith("[")) {
+                    // An arbitrary animation is a whole hand-rolled shorthand in a
+                    // class - improvisation by definition once a vocabulary exists.
+                    push("motion", `animate-${name}`, m.index ?? -1);
+                    continue;
+                }
+                if (ANIMATE_IDIOM.has(name) || vocabulary.has(name))
+                    continue;
+                push("motion", `animate-${name}`, m.index ?? -1);
+            }
+        }
     });
     return {
         file,
@@ -328,6 +418,7 @@ export function diagnose(files) {
         radius: 0,
         spacing: 0,
         font: 0,
+        motion: 0,
     };
     for (const f of flat)
         counts[f.kind] += 1;

package/dist/doctor/tokens.js

@@ -19,6 +19,7 @@ export const EMPTY_TABLE = {
     byName: new Map(),
     byValue: new Map(),
     declared: new Set(),
+    keyframes: new Set(),
 };
 const hex2 = (n) => Math.max(0, Math.min(255, Math.round(n)))
     .toString(16)
@@ -91,6 +92,14 @@ function args(body) {
  */
 export function normalizeValue(raw) {
     const v = raw.trim().toLowerCase().replace(/\s+/g, " ");
+    // Time lands on milliseconds: `.3s`, `0.3s` and `300ms` are one value, the
+    // same way every colour lands on 8-digit hex. Without this, a system that
+    // authors `--ds-motion-durations-base: 0.3s` never names an author's `300ms`.
+    const time = /^(\d*\.?\d+)(ms|s)$/.exec(v);
+    if (time) {
+        const ms = Number.parseFloat(time[1]) * (time[2] === "s" ? 1000 : 1);
+        return `${ms}ms`;
+    }
     const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/.exec(v);
     if (short) {
         const d = (c) => c + c;
@@ -369,6 +378,7 @@ export function buildTable(input) {
         byName,
         byValue,
         declared: parseDeclaredNames(input.css),
+        keyframes: new Set([...input.css.matchAll(/@keyframes\s+([a-zA-Z0-9_-]+)/g)].map((m) => m[1])),
     };
 }
 /**
@@ -433,6 +443,7 @@ const FAMILY = {
     radius: "--ds-radius-",
     spacing: "--ds-spacing-",
     font: "--ds-typography-",
+    motion: "--ds-motion-",
 };
 export function tokenFor(table, literal, kind) {
     const hit = table.byValue.get(normalizeValue(literal));

package/dist/guide.js

@@ -147,10 +147,18 @@ ${depLines.join("\n")}
         loop: "ambient loop · infinite - decorative, use sparingly",
         attention: "attention · one shot, only when asked",
     };
+    // Promise only what the ARTIFACTS actually contain, not what this CLI
+    // version knows how to describe. First field run (soft-test, 29/07): a
+    // newer CLI wrote "already compiled as ready utilities" against a theme.css
+    // an older server had compiled without --animate-* keys - the agent
+    // verified `animate-rise` emitted nothing and filed the GUIDE's own promise
+    // as a gap. The artifacts travel in this payload; reading them is free.
+    const hasAnimateKeys = /--animate-/.test(payload.artifacts["theme.css"] ?? "");
+    const hasReducedMotionFloor = Object.values(payload.artifacts).some((css) => /prefers-reduced-motion/.test(css ?? ""));
     const keyframeLines = Object.entries(motion.keyframes).map(([kname, frames]) => {
         const kf = frames;
         const intent = classifyKeyframe(kname, kf);
-        const usage = hasTailwind
+        const usage = hasTailwind && hasAnimateKeys
             ? `\`animate-${kebab(kname)}\``
             : `\`animation: ${animationShorthand(`ds-${slug}-${kebab(kname)}`, intent, isFullRotation(kf))}\``;
         return `- ${usage} - ${INTENT_LINE[intent]} (${describeKeyframe(kf)})`;
@@ -398,7 +406,7 @@ ${keyframeLines.length > 0
 
 The base is QUIET: nothing moves until someone asks. When they do, animation is **selection
 from this list**, not improvisation - these are the system's own animations, already compiled
-into ${hasTailwind ? "`theme.css` as ready utilities" : `\`tokens.css\` as \`@keyframes ds-${slug}-<name>\``}, each on the clock its intent calls for:
+into ${hasTailwind && hasAnimateKeys ? "`theme.css` as ready utilities" : `\`tokens.css\` as \`@keyframes ds-${slug}-<name>\``}, each on the clock its intent calls for:
 
 ${keyframeLines.join("\n")}
 ${patternLines.length > 0
@@ -409,8 +417,9 @@ ${patternLines.join("\n")}
 `
             : ""}
 Rules: entrances run once, never on scroll-loop; ambient loops are decoration, one per view is
-plenty; \`prefers-reduced-motion\` is already honored in the shipped CSS (a floor collapses all
-animations) - don't undo it. If a request needs a motion this vocabulary lacks, do NOT hand-roll
+plenty; ${hasReducedMotionFloor
+            ? "`prefers-reduced-motion` is already honored in the shipped CSS (a floor collapses all\nanimations) - don't undo it"
+            : "honor `prefers-reduced-motion` yourself (wrap animations in `motion-safe:` or a media query) - this build of the CSS ships no floor"}. If a request needs a motion this vocabulary lacks, do NOT hand-roll
 \`@keyframes\` or raw durations: file it (\`request_token\` via MCP, or \`synthesisui request\`) and
 tell the person what you chose from the vocabulary instead.`
         : ""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.26",
+  "version": "0.16.28",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {