synthesisui 0.16.26 → 0.16.27

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,28 @@ 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.
+ */
+const MOTION_PROP = /\b(?:transition|animation)(?:-(?:duration|delay|timing-function)|Duration|Delay|TimingFunction)?\s*:\s*["'`]?([^;}"'`\n]*)/g;
+const TIME_LITERAL = /(\d*\.?\d+)(ms|s)\b/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 +330,61 @@ 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.
+            if (table.keyframes.size > 0) {
+                for (const w of value.matchAll(/\b(ds-[a-z0-9-]+)\b/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 +405,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/package.json

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