synthesisui 0.16.118 → 0.16.119

package/dist/anatomy-read.js

@@ -310,13 +310,23 @@ sketch) {
                  * and stopped at, and a plain `div` is nobody's element.
                  */
                 const measured = sketch?.[node.at];
+                const kind = measured?.from ? frontierKind(measured.from) : "own";
+                /**
+                 * A MOTION ELEMENT IS THEIRS TO NAME TOO. `motion.div` is the element their panel
+                 * opens with, and the props that make it open have no CSS to translate to - so the
+                 * snippet emits their element and their props, verbatim. Headless for the
+                 * behaviour, motion for the animation; an opaque library is still named and
+                 * stopped at.
+                 */
                 if (measured?.from &&
                     measured.tag &&
-                    /^[A-Z]/.test(measured.tag) &&
-                    frontierKind(measured.from) === "headless") {
+                    /^[A-Za-z]/.test(measured.tag) &&
+                    (kind === "headless" || kind === "motion")) {
                     node_.from = measured.from;
                     node_.refName = measured.tag;
                 }
+                if (measured?.motionProps)
+                    node_.motionProps = measured.motionProps;
             }
             // The NAME is what carries the styles, so it is claimed even when nothing
             // resolved: the tree triggers on presence, and structure is most of the

package/dist/commands/import.js

@@ -1205,7 +1205,7 @@ export async function takeCensus(root, opts) {
      * the name - 35 of their 36, with `TypingIndicator` internal to `Message` and reported
      * as not exported. See `publicApi`.
      */
-    const api = await publicApi(root, scopeLabel);
+    const api = await publicApi(root);
     if (api) {
         for (const c of components) {
             const file = defined.find((d) => d.name === c.name)?.file;
@@ -1214,7 +1214,16 @@ export async function takeCensus(root, opts) {
                 : undefined;
             const required = source ? requiredProps(source, c.name) : [];
             c.api = {
-                ...(api.exports.has(c.name) ? { from: api.from } : { exported: false }),
+                /**
+                 * SILENCE WHEN THE ENTRY WAS NOT READ. An unreadable entry gives an empty export
+                 * set, and calling that "internal" would have marked every component internal at
+                 * once - see `PublicApi.read`.
+                 */
+                ...(!api.read
+                    ? {}
+                    : api.exports.has(c.name)
+                        ? { from: api.from }
+                        : { exported: false }),
                 /**
                  * REPO-RELATIVE, so the answer needs no second search. `defined[].file` is
                  * relative to the scope; joined with the scope it is a path anybody can check
@@ -1222,7 +1231,7 @@ export async function takeCensus(root, opts) {
                  * walking a monorepo (their component sits six levels below `packages/`, and the
                  * shallow walk that guards against shadowing never reached it).
                  */
-                ...(file ? { file: `${scopeLabel}/${file}` } : {}),
+                ...(file ? { file: scopeLabel ? `${scopeLabel}/${file}` : file } : {}),
                 ...(required.length > 0 ? { required } : {}),
             };
         }

package/dist/doctor/public-api.js

@@ -71,28 +71,32 @@ async function exportsOf(path, source, depth = 0, seen = new Set()) {
     return out;
 }
 /**
- * The public API of the folder being imported, or null when it has no manifest.
+ * The public API of the folder being read, or null when it has no manifest.
  *
- * `root` is the repository, `scope` the folder the census measured (`packages/ui`). A
- * scope with no `package.json` of its own is not a package and there is no specifier to
+ * `dir` is the folder the census measured - which is ALREADY `<repo>/packages/ui` on a
+ * scoped run. Joining the scope on again looked for `packages/ui/packages/ui/package.json`,
+ * found nothing and returned null, so the specifier and the required props were absent on
+ * all 36 of their components while the reading that needed them sat right there
+ * (dono, 04/08).
+ *
+ * A folder with no `package.json` of its own is not a package and there is no specifier to
  * offer - an app's `src/components` is imported by path, which is theirs to know and not
  * ours to guess.
  */
-export async function publicApi(root, scope) {
-    if (!scope)
-        return null;
-    const manifest = await readFile(join(root, scope, "package.json"), "utf8")
+export async function publicApi(dir) {
+    const manifest = await readFile(join(dir, "package.json"), "utf8")
         .then((raw) => JSON.parse(raw))
         .catch(() => null);
     if (!manifest?.name)
         return null;
     const entry = manifest.main ?? manifest.module ?? "src/index.ts";
-    const found = await readAt(join(root, scope), entry);
+    const found = await readAt(dir, entry);
     if (!found)
-        return { from: manifest.name, exports: new Set() };
+        return { from: manifest.name, exports: new Set(), read: false };
     return {
         from: manifest.name,
         exports: await exportsOf(found[0], found[1]),
+        read: true,
     };
 }
 const PROPS_BLOCK = /(?:export\s+)?(?:interface|type)\s+(\w*Props)\s*(?:=\s*)?\{([\s\S]*?)\n\}/;

package/dist/doctor/sketch.js

@@ -243,6 +243,43 @@ export function guardAt(source, at) {
         return null;
     return negated ? `!(${cond})` : cond;
 }
+/** The motion props a tag carries, as their own text. See `SketchNode.motionProps`. */
+const MOTION_PROP = /\b(initial|animate|exit|transition|whileHover|whileTap|whileFocus|whileDrag|layoutId)=\{/g;
+export function motionPropsOf(body) {
+    const parts = [];
+    MOTION_PROP.lastIndex = 0;
+    for (const m of body.matchAll(MOTION_PROP)) {
+        const open = (m.index ?? 0) + m[0].length - 1;
+        let depth = 0;
+        let end = -1;
+        for (let i = open; i < body.length; i++) {
+            if (body[i] === "{")
+                depth++;
+            else if (body[i] === "}") {
+                depth--;
+                if (depth === 0) {
+                    end = i;
+                    break;
+                }
+            }
+        }
+        if (end === -1)
+            continue;
+        const value = body
+            .slice(open, end + 1)
+            .replace(/\s+/g, " ")
+            .trim();
+        // A value that reaches outside the tag - a variable, a hook, a function - is theirs
+        // and copying its NAME would point the snippet at something it cannot see.
+        if (!/^\{\s*[[{"'\d]/.test(value))
+            continue;
+        parts.push(`${m[1]}=${value}`);
+    }
+    if (parts.length === 0)
+        return null;
+    const out = parts.join(" ");
+    return out.length > 400 ? null : out;
+}
 export function sketchOf(source, name) {
     /**
      * READ THE IMPORTS BEFORE SLICING - they live at the top of the file, and the
@@ -296,11 +333,25 @@ export function sketchOf(source, name) {
         if (rootAt !== -1 && event.at === rootAt)
             node.root = true;
         // What a capitalised tag IS, from the file's own imports - see `SketchNode.from`.
-        if (/^[A-Z]/.test(event.tag)) {
+        /**
+         * A DOT IS A NAMESPACE, and a namespace is an import - `motion.div` is lowercase and
+         * still comes from `motion/react`. Only capitalised tags were stamped, so the element
+         * their animated panel is built on had no package and the snippet emitted a plain
+         * `<div>` with their animation props on it (dono, 04/08).
+         */
+        if (/^[A-Z]/.test(event.tag) || event.tag.includes(".")) {
             const pkg = packageOfTag(event.tag, imports);
             if (pkg)
                 node.from = pkg;
         }
+        /**
+         * THE MOTION PROPS, off the opening tag - see `SketchNode.motionProps`. Kept whole and
+         * short: a prop whose value is a function or a variable is theirs to write, and a copy
+         * of `animate={controls}` would name something the snippet cannot reach.
+         */
+        const motion = motionPropsOf(event.body);
+        if (motion)
+            node.motionProps = motion;
         // What has to be true for this element to exist at all - see `guardAt`.
         const guard = guardAt(source, event.at);
         if (guard) {

package/package.json

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