synthesisui 0.16.113 → 0.16.118

package/dist/anatomy-read.js

@@ -30,6 +30,7 @@
  * of the three outcomes this pipeline has paid for twice.
  */
 import { transcribe, } from "./doctor/transcribe.js";
+import { frontierKind } from "./frontier-kind.js";
 /** The ten forms, closed. A renderer that accepts any tag draws anything. */
 const FORMS = new Set([
     "image",
@@ -295,6 +296,28 @@ sketch) {
                 if (typeof node.refName === "string" && node.refName.trim())
                     node_.refName = node.refName.trim();
             }
+            else if (typeof node.at === "number") {
+                /**
+                 * OR OFF THE SKETCH, WHICH IS THE CASE THAT ACTUALLY HAPPENS.
+                 *
+                 * The deriver stamps this on the read; an AUTHORED reading never does - it names
+                 * `trigger` at index 1 and says nothing about `Collapsible.Trigger`, because it
+                 * has no reason to. So the snippet kept emitting `<div>` on the very path the
+                 * owner runs, and I read my own probe as proof of the opposite (dono, 04/08).
+                 *
+                 * The sketch measured the tag and the package, so this is the same lookup
+                 * `when` already does one line up. Gated on HEADLESS: an opaque library is named
+                 * and stopped at, and a plain `div` is nobody's element.
+                 */
+                const measured = sketch?.[node.at];
+                if (measured?.from &&
+                    measured.tag &&
+                    /^[A-Z]/.test(measured.tag) &&
+                    frontierKind(measured.from) === "headless") {
+                    node_.from = measured.from;
+                    node_.refName = measured.tag;
+                }
+            }
             // 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
             // value. A node with no name is pure structure and that is legitimate.

package/dist/commands/component.js

@@ -1,3 +1,4 @@
+import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { emitCn, readVocabulary } from "../cn-codegen.js";
@@ -84,6 +85,34 @@ export async function component(slug, name, opts) {
             .filter(Boolean)
             .map((p) => p[0].toUpperCase() + p.slice(1))
             .join("");
+        /**
+         * THEY ALREADY HAVE THIS COMPONENT, and the recipe says where.
+         *
+         * `findCollision` guards against shadowing by walking `packages` three levels down;
+         * their `CollapsibleCard` sits six levels below it, so the guard never reached it and
+         * `component` would write a second, worse copy of a component in their own
+         * `packages/ui`. The recipe carries the path now - repo-relative, so this is one
+         * `stat` rather than a walk - and the import line their own manifest declares.
+         *
+         * Only refuses when the file is actually HERE: the same system installed in another
+         * project has no such component, and there generating is exactly right.
+         */
+        const theirs = res.recipe?.api;
+        const already = theirs?.file && existsSync(join(root, theirs.file)) ? theirs : null;
+        if (already && !opts.force) {
+            console.log(section("You already have this component"));
+            console.log(body(`\`${already.name}\` lives in ${already.file} - writing another one would leave you with two.`));
+            if (already.from) {
+                console.log("");
+                console.log(snippet([`import { ${already.name} } from "${already.from}";`]));
+            }
+            else if (already.exported === false) {
+                console.log(body(`It is not re-exported from that folder's entry, so import it by path.`));
+            }
+            console.log("");
+            console.log(body("The recipe and the compiled CSS are on disk either way - only the .tsx was not written. Pass --force to write it anyway."));
+            return;
+        }
         const clash = await findCollision(root, config.componentsDir, res.name, pascalName);
         if (!opts.force && (clash.exported || (clash.file && !clash.ours))) {
             console.log(section("This name is already taken in your project"));

package/dist/commands/import.js

@@ -13,17 +13,20 @@ import { describeGate, gateComponent, groupSkips, SCREENS_FOR_SYSTEM, } from "..
 import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
 import { countShape, describeCoverage, summarizeCoverage, } from "../doctor/coverage.js";
 import { crosswalk, floorSize, isLibrary, observedRules, useLiveCatalogue, } from "../doctor/crosswalk.js";
-import { moduleImports, readModuleCss, readModuleUsage, transcribeModule, } from "../doctor/css-modules.js";
+import { keyframeOffsets, moduleImports, readModuleCss, readModuleUsage, transcribeModule, } from "../doctor/css-modules.js";
 import { reconcile, scanDefinitions, } from "../doctor/definitions-scan.js";
 import { describeConvention, describeRemainder, detectConventions, } from "../doctor/idiom.js";
 import { callSiteNode, placeLayers, } from "../doctor/place-layers.js";
+import { publicApi, requiredProps } from "../doctor/public-api.js";
 import { diagnose, scanSource } from "../doctor/scan.js";
 import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { describeSignals, emptySignals, finishSignals, readSignalsInto, } from "../doctor/signals.js";
 import { sketchOf } from "../doctor/sketch.js";
+import { describeForeign, readStyleIslands, } from "../doctor/style-island.js";
 import { buildTable } from "../doctor/tokens.js";
 import { readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
+import { frontierKind } from "../frontier-kind.js";
 import { withLibraryStructure } from "../library-structure.js";
 import { body, paint, section } from "../output.js";
 import { phase, startProgress } from "../progress.js";
@@ -305,7 +308,20 @@ export async function takeCensus(root, opts) {
     /** How much came out of CSS Modules, for the coverage report. */
     let moduleFiles = 0;
     let moduleDeclarations = 0;
-    const moduleKeyframes = {};
+    /**
+     * THE KEYFRAMES THE READING NEEDS, by name - and this was collected and dropped.
+     *
+     * Nothing read `moduleKeyframes`: an app whose animation lives in a CSS module lost it
+     * in silence, and the four Tailwind ships had nowhere to travel either, so
+     * `animation: var(--animate-spin)` would have pointed at a keyframe the system does not
+     * define (dono, 04/08). The document's shape is offset → declarations, which is what
+     * `keyframeOffsets` turns their raw body into and what `BUILTIN_KEYFRAMES` already is.
+     */
+    const keyframes = {};
+    /** Names their `animate-*` utilities point at - see `Transcription.animations`. */
+    const animations = new Set();
+    /** Per component, the rules a `<style>` island aims at somebody else's markup. */
+    const islands = new Map();
     /** How each component expresses style, so the census can state its own coverage. */
     const shapes = new Map();
     /** Component FILES the gate accepted - the honest denominator for coverage. A first
@@ -483,8 +499,9 @@ export async function takeCensus(root, opts) {
                     moduleFiles += 1;
                     moduleDeclarations += readModule.read;
                     for (const [name, frames] of Object.entries(readModule.keyframes)) {
-                        if (!moduleKeyframes[name])
-                            moduleKeyframes[name] = frames;
+                        const offsets = keyframeOffsets(frames);
+                        if (!keyframes[name] && Object.keys(offsets).length > 0)
+                            keyframes[name] = offsets;
                     }
                     // One module per component is the shape every one of the 530 follows.
                     break;
@@ -526,6 +543,83 @@ export async function takeCensus(root, opts) {
                  * the owner's rule, adopted verbatim (dono, 01/08).
                  */
                 const sketch = sketchOf(src, found[0].name);
+                /**
+                 * THE CSS THE COMPONENT CARRIES INSIDE ITSELF.
+                 *
+                 * Their `TypingIndicator` styles with a `<style>` element and nothing else: read as
+                 * utilities it arrived with three declarations and no animation, so the component
+                 * that IS an animation previewed as three static circles (dono, 04/08). Three kinds
+                 * of content, three destinations - see `readStyleIslands`.
+                 */
+                const writes = new Set();
+                for (const node of sketch)
+                    for (const cls of (node.classes ?? "").split(/\s+/))
+                        if (cls)
+                            writes.add(cls);
+                const island = readStyleIslands(src, writes);
+                /** Sketch index → what the island declares for that element. */
+                const islandStyle = {};
+                for (const [name, frames] of Object.entries(island.keyframes)) {
+                    keyframes[name] ??= frames;
+                    animations.add(name);
+                }
+                /**
+                 * A PATCH OVER SOMEBODY ELSE'S MARKUP IS A LAW, never a part: giving
+                 * `.sketch-picker input` a part of ours would claim we drew a colour wheel.
+                 */
+                /**
+                 * A RULE ON A CLASS THEY WRITE IS THE LOOK OF THE PART THAT WEARS IT.
+                 *
+                 * Their three dots are three sketch nodes all carrying `class="dot"`, and the
+                 * anatomy already named them `dot`, `dot-2`, `dot-3` - three parts with EMPTY
+                 * bases, because a utility reader has nothing to read on them. The island's `.dot`
+                 * rule is their shared look and `:nth-child(1..3)` is the delay that makes the
+                 * wave, one per part, in the order the nodes appear.
+                 *
+                 * Carried on the look and merged when the anatomy resolves, which is the only
+                 * moment a class maps to a part name - the same seam the per-part layers use.
+                 */
+                if (island.own.length > 0) {
+                    const seen = new Map();
+                    for (const [index, node] of sketch.entries()) {
+                        for (const cls of (node.classes ?? "").split(/\s+/)) {
+                            if (!cls)
+                                continue;
+                            const nth = (seen.get(cls) ?? 0) + 1;
+                            seen.set(cls, nth);
+                            const mine = island.own.filter((rule) => rule.class === cls && (rule.nth ?? nth) === nth);
+                            if (mine.length === 0)
+                                continue;
+                            islandStyle[index] = Object.assign(islandStyle[index] ?? {}, ...mine.map((rule) => rule.declarations));
+                        }
+                    }
+                }
+                if (island.foreign.length > 0) {
+                    /**
+                     * WHOSE MARKUP IS BEING PATCHED, measured rather than guessed: the opaque
+                     * package this component composes. A headless one renders no markup of its own
+                     * to patch.
+                     */
+                    const drawn = sketch.find((node) => node.from && frontierKind(node.from) === "opaque")?.from;
+                    islands.set(found[0].name, { foreign: island.foreign, drawn });
+                }
+                /**
+                 * THE ANIMATIONS THIS COMPONENT NAMES, from the whole sketch rather than from the
+                 * root's transcription - an `animate-ping` lives on a part three levels down and
+                 * the resolver that reads a part does not report back up.
+                 *
+                 * The NAME only. The platform owns a library of frames and gives each one this
+                 * system's own clock; a name it cannot define becomes a dangling reference the
+                 * screen already knows how to say out loud, which beats a silent `animation` that
+                 * animates nothing.
+                 */
+                for (const node of sketch) {
+                    for (const raw of (node.classes ?? "").split(/\s+/)) {
+                        const named = /^(?:[\w-]+:)*animate-([a-z][\w-]*)$/.exec(raw);
+                        if (named && named[1] !== "none")
+                            animations.add(named[1]);
+                    }
+                }
                 /**
                  * A PER-PART LAYER FINDS ITS NODE, by the class string of the call site that
                  * consumes the field. See `ReadLayer.onClasses`: the reader knows a
@@ -566,6 +660,7 @@ export async function takeCensus(root, opts) {
                         ...(tag ? { rootTag: tag } : {}),
                         ...rootPackage(tag, sketch),
                         ...(placed.length > 0 ? { layers: placed } : {}),
+                        ...(Object.keys(islandStyle).length > 0 ? { islandStyle } : {}),
                         ...(v.unslotted.length > 0
                             ? { unplaced: [...new Set(v.unslotted)] }
                             : {}),
@@ -1013,6 +1108,19 @@ export async function takeCensus(root, opts) {
      * happens, which is the whole reason `--usage` exists.
      */
     const laws = new Map();
+    /**
+     * A PATCH OVER SOMEBODY ELSE'S MARKUP IS A LAW, and it is written here because this is
+     * where laws are collected - giving `.sketch-picker input` a part of ours would claim we
+     * drew a colour wheel. See `readStyleIslands`.
+     */
+    for (const [name, read] of islands) {
+        const line = describeForeign(read.foreign, read.drawn);
+        if (!line)
+            continue;
+        const own = laws.get(name) ?? [];
+        own.push(line);
+        laws.set(name, own);
+    }
     for (const r of observedRules(merged)) {
         laws.set(r.component, [...(laws.get(r.component) ?? []), r.text]);
     }
@@ -1083,6 +1191,42 @@ export async function takeCensus(root, opts) {
     for (const m of css.matchAll(/(--[a-zA-Z0-9_-]+)\s*:/g)) {
         declaredNames.add(m[1]);
     }
+    /**
+     * HOW SOMEBODY CALLS THE COMPONENT THEY ALREADY HAVE.
+     *
+     * The usage panel was handing people the markup of a component rebuilt out of our
+     * compiled classes, for a component sitting in their own `packages/ui` with a name and
+     * props - "você inventou diversas classes que não existem" (dono, 04/08), and the half
+     * that lands is that those classes appear nowhere in his repo. He has
+     * `<CollapsibleCard>`; the usage is its props.
+     *
+     * Measured, never inferred: the specifier is the name in THEIR manifest for the folder
+     * being imported, and a component only carries it when the entry actually re-exports
+     * the name - 35 of their 36, with `TypingIndicator` internal to `Message` and reported
+     * as not exported. See `publicApi`.
+     */
+    const api = await publicApi(root, scopeLabel);
+    if (api) {
+        for (const c of components) {
+            const file = defined.find((d) => d.name === c.name)?.file;
+            const source = file
+                ? sources.find((s) => s.file.endsWith(file))?.source
+                : undefined;
+            const required = source ? requiredProps(source, c.name) : [];
+            c.api = {
+                ...(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
+                 * with one `stat` - which is how `component` knows they already have it without
+                 * 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}` } : {}),
+                ...(required.length > 0 ? { required } : {}),
+            };
+        }
+    }
     const brokenRefs = findBrokenRefs(sources, declaredNames);
     const conventions = detectConventions(sources);
     const classStyle = detectClassStyle(sources);
@@ -1090,6 +1234,8 @@ export async function takeCensus(root, opts) {
         census: 1,
         project: { name, stack: await detectStack(root) },
         declared: Object.fromEntries(table.byName),
+        ...(Object.keys(keyframes).length > 0 ? { keyframes } : {}),
+        ...(animations.size > 0 ? { animations: [...animations].sort() } : {}),
         ...(brokenRefs.length > 0 ? { brokenRefs } : {}),
         ...(conventions.length > 0 ? { conventions } : {}),
         classStyle,
@@ -1866,6 +2012,26 @@ async function resolveReadParts(census, root) {
         const split = placeLayers((look?.layers ?? []), partAt, (look?.sketch ?? []));
         for (const line of split.unplaced)
             notes.add(line);
+        /**
+         * WHAT A `<style>` ISLAND DECLARED, ONTO THE PART THAT WEARS IT.
+         *
+         * Their three dots share `class="dot"` and the anatomy named them `dot`, `dot-2`,
+         * `dot-3` - three parts with empty bases, because a utility reader has nothing to read
+         * on a component that styles itself in CSS. This is the first moment an index maps to a
+         * part name, which is why it happens here and not where the island was read.
+         *
+         * A utility of theirs on the same element still wins: the island only fills what the
+         * class string did not already say.
+         */
+        for (const [index, style] of Object.entries(look?.islandStyle ?? {})) {
+            const part = partAt[Number(index)];
+            const target = part ? resolved.parts[part] : undefined;
+            if (!target) {
+                notes.add("a `<style>` element declares a look for an element the anatomy does not name - it is not applied, because that would paint the wrong thing");
+                continue;
+            }
+            target.base = { ...style, ...target.base };
+        }
         /**
          * REPLACED, NOT APPENDED - because this runs more than once.
          *

package/dist/doctor/css-modules.js

@@ -74,7 +74,7 @@ export function partName(authored) {
         .replace(/^-|-$/g, "");
 }
 /** Comments out, so a `{` inside one cannot end a block early. */
-function stripCssComments(css) {
+export function stripCssComments(css) {
     return css.replace(/\/\*[\s\S]*?\*\//g, "");
 }
 function rules(css, media = null, out = []) {
@@ -168,6 +168,40 @@ function emptyClass() {
  * same way the utility reader does - so the value travels as `{radius.md}` rather than
  * as a literal, and the recipe re-themes.
  */
+/**
+ * A KEYFRAME'S OWN OFFSETS, so the document can hold it.
+ *
+ * `keyframes` carried the body as raw CSS text and it was collected and then dropped -
+ * `moduleKeyframes` in `import.ts` had no reader at all, so an app whose animation lives
+ * in a CSS module lost it in silence (dono, 04/08). The document's shape is offset →
+ * declarations, which is the same rule parser one level down.
+ */
+export function keyframeOffsets(body) {
+    const out = {};
+    for (const rule of rules(stripCssComments(body))) {
+        /**
+         * `0%,\n  100%` is one offset written across two lines. Kept verbatim it becomes a
+         * selector with a newline in it, which the compiler emits and the browser ignores.
+         */
+        const offset = rule.selector.replace(/\s+/g, " ").trim();
+        if (!offset)
+            continue;
+        const block = {};
+        for (const line of rule.body.split(";")) {
+            const at = line.indexOf(":");
+            if (at === -1)
+                continue;
+            const prop = line.slice(0, at).trim();
+            const value = line.slice(at + 1).trim();
+            if (!prop || !value)
+                continue;
+            block[prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
+        }
+        if (Object.keys(block).length > 0)
+            out[offset] = block;
+    }
+    return out;
+}
 export function readModuleCss(css) {
     const out = { classes: {}, keyframes: {}, unslotted: [] };
     const clean = stripCssComments(css);

package/dist/doctor/public-api.js

@@ -0,0 +1,119 @@
+/**
+ * HOW SOMEBODY CALLS THE COMPONENT THEY ALREADY HAVE.
+ *
+ * The usage panel was emitting the markup of a component rebuilt out of our compiled
+ * classes - `<div className="ds-collapsible-card-trigger">` and twenty lines like it. The
+ * owner's objection was exact (dono, 04/08): "você inventou diversas classes que não
+ * existem". They exist in our stylesheet and they exist NOWHERE in his repo, which is the
+ * half that matters. He has `<CollapsibleCard>`; the usage is its props.
+ *
+ * That question has a measured answer and we were not reading it:
+ *
+ *     the package name      their own `package.json` for the scope being imported
+ *     is it exported        follow `export * from` out of the entry - 35 of their 36
+ *     which props           the destructuring, already read (36 of 36)
+ *     which are required    their `interface XProps` - 23 of 38 files declare one
+ *
+ * Nothing here is inferred. A component the barrel does not reach is reported as not
+ * exported, which is a fact worth having - their `TypingIndicator` is internal to
+ * `Message`, and telling somebody to import it would be the invention.
+ */
+import { readFile } from "node:fs/promises";
+import { dirname, join, normalize } from "node:path";
+const NAMED = /export\s*\{([^}]*)\}\s*from\s*["']([^"']+)["']/g;
+const DECLARED = /export\s+(?:const|function|class)\s+([A-Za-z_$][\w$]*)/g;
+const STAR = /export\s+\*\s+from\s*["']([^"']+)["']/g;
+async function readAt(base, rel) {
+    for (const candidate of [
+        rel,
+        `${rel}.ts`,
+        `${rel}.tsx`,
+        join(rel, "index.ts"),
+        join(rel, "index.tsx"),
+    ]) {
+        const path = normalize(join(base, candidate));
+        const source = await readFile(path, "utf8").catch(() => null);
+        if (source != null)
+            return [path, source];
+    }
+    return null;
+}
+/**
+ * Every name the entry exposes, following `export *` as far as it goes.
+ *
+ * Depth-capped and cycle-guarded: a barrel chain is somebody's folder layout, and
+ * `packages/ui` reaches its components through three of them.
+ */
+async function exportsOf(path, source, depth = 0, seen = new Set()) {
+    const out = new Set();
+    if (depth > 6 || seen.has(path))
+        return out;
+    seen.add(path);
+    NAMED.lastIndex = 0;
+    for (const m of source.matchAll(NAMED)) {
+        for (const part of m[1].split(",")) {
+            const name = part.split(" as ").pop()?.trim();
+            if (name && name !== "default")
+                out.add(name);
+        }
+    }
+    DECLARED.lastIndex = 0;
+    for (const m of source.matchAll(DECLARED))
+        out.add(m[1]);
+    STAR.lastIndex = 0;
+    for (const m of source.matchAll(STAR)) {
+        const next = await readAt(dirname(path), m[1]);
+        if (!next)
+            continue;
+        for (const name of await exportsOf(next[0], next[1], depth + 1, seen))
+            out.add(name);
+    }
+    return out;
+}
+/**
+ * The public API of the folder being imported, 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
+ * 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")
+        .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);
+    if (!found)
+        return { from: manifest.name, exports: new Set() };
+    return {
+        from: manifest.name,
+        exports: await exportsOf(found[0], found[1]),
+    };
+}
+const PROPS_BLOCK = /(?:export\s+)?(?:interface|type)\s+(\w*Props)\s*(?:=\s*)?\{([\s\S]*?)\n\}/;
+/**
+ * WHICH PROPS THEIR TYPE MARKS AS REQUIRED.
+ *
+ * The one thing that makes a call snippet copy-pasteable: `title: string` has to be
+ * filled and `subtitle?: string` does not. 23 of their 38 files declare a readable
+ * `interface XProps`; the rest extend a library's type or use generics, and there we say
+ * nothing rather than guessing which props somebody must pass.
+ */
+export function requiredProps(source, name) {
+    const scoped = new RegExp(`(?:export\\s+)?(?:interface|type)\\s+${name}Props\\s*(?:=\\s*)?\\{([\\s\\S]*?)\\n\\}`).exec(source);
+    const body = scoped?.[1] ?? PROPS_BLOCK.exec(source)?.[2];
+    if (!body)
+        return [];
+    const out = [];
+    for (const line of body.split("\n")) {
+        const m = /^\s*(?:readonly\s+)?([A-Za-z_$][\w$]*)(\?)?\s*:/.exec(line);
+        if (m && !m[2])
+            out.push(m[1]);
+    }
+    return out;
+}

package/dist/doctor/style-island.js

@@ -0,0 +1,143 @@
+/**
+ * THE CSS A COMPONENT CARRIES INSIDE ITSELF.
+ *
+ * Some components do not style with utilities at all - they render a `<style>` element
+ * with real CSS in it. Their `TypingIndicator` is the whole case: three dots, one
+ * `@keyframes wave-bounce`, and a `.dot` rule with a per-dot delay. Read as utilities it
+ * arrived with three declarations and no animation, so the component that IS an animation
+ * previewed as three static circles (dono, 04/08).
+ *
+ * Measured across their repository: 2 islands, both in `packages/ui`, and none in any of
+ * the three apps - 1 keyframe, 6 rules on classes the component itself writes, 3 on a
+ * third party's internals, and 12 `!important`.
+ *
+ * THREE KINDS OF CONTENT, THREE DESTINATIONS, and telling them apart is the whole job:
+ *
+ *     @keyframes                     the system's motion vocabulary, by name
+ *     a rule on a class THEY write   the look of the part that wears that class
+ *     a rule on somebody else's      a patch over a third party: prose, never a look
+ *
+ * The last one is the line. `.sketch-picker input { background: … !important }` is not
+ * their component's anatomy - it is a re-skin of `react-color`'s own markup - and giving
+ * it a part would claim we drew something we did not. It travels as a law instead, with
+ * the package named and the `!important` said out loud.
+ */
+import { keyframeOffsets, readModuleCss, stripCssComments, } from "./css-modules.js";
+/** `<style>{`…`}</style>` and `<style>…</style>` - the two spellings in JSX. */
+const ISLAND = /<style[^>]*>\s*\{?\s*(?:`([\s\S]*?)`|([\s\S]*?))\s*\}?\s*<\/style>/g;
+/** `.dot:nth-child(2)` → the class and which one. A compound selector is foreign. */
+const OWN_SELECTOR = /^\.([\w-]+)(?::nth-child\((\d+)\))?$/;
+/**
+ * The CSS a component keeps inside itself, split by where each rule belongs.
+ *
+ * `writes` is the set of classes the component's own markup carries - from the sketch,
+ * which measured them. A selector naming one of those is about an element we know; any
+ * other selector is about markup somebody else renders.
+ */
+export function readStyleIslands(source, writes) {
+    const out = { keyframes: {}, own: [], foreign: [] };
+    ISLAND.lastIndex = 0;
+    for (const island of source.matchAll(ISLAND)) {
+        const raw = island[1] ?? island[2] ?? "";
+        if (!raw.trim())
+            continue;
+        /**
+         * COMMENTS OUT FIRST. Their `.dot` rule carries `/* Cor ocean-600 *``/` between two
+         * declarations, and the split-on-semicolon read it as part of the NEXT property's
+         * name - so `borderRadius` arrived as `/* Cor … *``/\n borderRadius`.
+         */
+        const body = stripCssComments(raw);
+        const read = readModuleCss(body);
+        for (const [name, frames] of Object.entries(read.keyframes)) {
+            const offsets = keyframeOffsets(frames);
+            if (Object.keys(offsets).length > 0)
+                out.keyframes[name] ??= offsets;
+        }
+        /**
+         * `readModuleCss` files a rule under each class it names, which is what a CSS module
+         * needs - a class there IS the export. Here the SELECTOR decides, because
+         * `.dark .sketch-picker span` names a class we write (`dark`) and is still about
+         * somebody else's span. So the rules are re-read off the body.
+         */
+        for (const rule of body.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+            const selector = rule[1].trim().split("\n").pop()?.trim() ?? "";
+            if (!selector || selector.startsWith("@"))
+                continue;
+            // An offset inside a keyframe body is not a rule about an element.
+            if (/^(?:from|to|\d+%)(?:\s*,\s*(?:from|to|\d+%))*$/.test(selector))
+                continue;
+            const declarations = {};
+            let important = 0;
+            for (const line of rule[2].split(";")) {
+                const at = line.indexOf(":");
+                if (at === -1)
+                    continue;
+                const property = line.slice(0, at).trim();
+                let value = line.slice(at + 1).trim();
+                if (!property || !value)
+                    continue;
+                if (/!important$/.test(value)) {
+                    important += 1;
+                    value = value.replace(/\s*!important$/, "");
+                }
+                declarations[property.replace(/-([a-z])/g, (_m, c) => c.toUpperCase())] = value;
+            }
+            if (Object.keys(declarations).length === 0)
+                continue;
+            /**
+             * THEIR `animation: wave-bounce 1s infinite` NAMES A KEYFRAME THE SYSTEM OWNS.
+             *
+             * The compiler scopes every keyframe and mints `--animate-<name>` for it, so a raw
+             * name in a recipe points at nothing. The reference replaces the name and their own
+             * timing stays as longhands beside it - which is what makes the wave a wave.
+             */
+            if (declarations.animation) {
+                const named = /^([\w-]+)\s*(.*)$/.exec(declarations.animation.trim());
+                if (named && out.keyframes[named[1]]) {
+                    declarations.animation = `var(--animate-${named[1]})`;
+                    for (const part of named[2].split(/\s+/).filter(Boolean)) {
+                        if (/^\d+(?:\.\d+)?m?s$/.test(part))
+                            declarations.animationDuration ??= part;
+                        else if (part === "infinite" || /^\d+$/.test(part))
+                            declarations.animationIterationCount ??= part;
+                        else if (/^(linear|ease|ease-in|ease-out|ease-in-out|steps\(|cubic-bezier\()/.test(part))
+                            declarations.animationTimingFunction ??= part;
+                    }
+                }
+            }
+            const own = OWN_SELECTOR.exec(selector);
+            if (own && writes.has(own[1])) {
+                out.own.push({
+                    class: own[1],
+                    ...(own[2] ? { nth: Number(own[2]) } : {}),
+                    declarations,
+                });
+                continue;
+            }
+            out.foreign.push({
+                selector,
+                declarations: Object.keys(declarations).length,
+                important,
+            });
+        }
+    }
+    return out;
+}
+/**
+ * What a patch over somebody else's component is, said in one line.
+ *
+ * A law rather than a look: an agent reading this system needs to know the re-skin exists
+ * and that it leans on `!important`, and no part of ours should claim to have drawn it.
+ */
+export function describeForeign(rules, library) {
+    if (rules.length === 0)
+        return null;
+    const declarations = rules.reduce((n, r) => n + r.declarations, 0);
+    const important = rules.reduce((n, r) => n + r.important, 0);
+    const selectors = [...new Set(rules.map((r) => r.selector))].slice(0, 3);
+    return (`This component re-skins ${library ?? "a third party's markup"} from the inside: ` +
+        `${declarations} declaration${declarations === 1 ? "" : "s"} across ${rules.length} rule${rules.length === 1 ? "" : "s"} ` +
+        `in a \`<style>\` element it renders itself, on selectors that are not ours ` +
+        `(${selectors.join(", ")})${important > 0 ? `, ${important} of them \`!important\`` : ""}. ` +
+        `Those are not part styles and editing this system's tokens will not move them.`);
+}

package/dist/doctor/transcribe.js

@@ -90,7 +90,36 @@ const SPACING_PROPERTY = {
     m: "margin",
     mx: "marginInline",
     my: "marginBlock",
+    /**
+     * THE FOUR SIDES, which had no entry - so `mt-1` read as nothing.
+     *
+     * On their card it is the 4px between the eyebrow and the title; across the library it
+     * is 20 utilities in 12 components. A margin is a spacing decision and the contract
+     * always held it; only the table was short (dono, 04/08).
+     */
+    mt: "marginTop",
+    mr: "marginRight",
+    mb: "marginBottom",
+    ml: "marginLeft",
     gap: "gap",
+    "gap-x": "columnGap",
+    "gap-y": "rowGap",
+    /**
+     * `space-y-1` sets a margin on the CHILDREN, which is not a declaration on the parent.
+     * As a row/column gap it is exact wherever the parent arranges - which is every one of
+     * their uses - and inert where it does not, so it never paints a wrong pixel.
+     */
+    "space-y": "rowGap",
+    "space-x": "columnGap",
+    /** Position offsets - what makes `absolute inset-0` cover its parent. */
+    inset: "inset",
+    "inset-x": "insetInline",
+    "inset-y": "insetBlock",
+    top: "top",
+    right: "right",
+    bottom: "bottom",
+    left: "left",
+    basis: "flexBasis",
     /**
      * SIZE, which the first version had no entry for at all.
      *
@@ -330,6 +359,149 @@ const TYPE_KEYWORD = {
     italic: { property: "fontStyle", value: "italic" },
     underline: { property: "textDecoration", value: "underline" },
 };
+/**
+ * THE DECLARATIONS THAT ARE A WHOLE WORD, and were being dropped as layout.
+ *
+ * The rule that keeps layout out of a recipe is right about `flex` and `gap` - identical
+ * in every design system, and a recipe full of them is a recipe about nothing. It was
+ * wrong about everything that came along for the ride. Swept across their 36 components,
+ * 564 of 1443 utilities produced no declaration at all, and the biggest groups were not
+ * arrangement but PLACE: 116 distribution utilities in 25 components, 69 position ones in
+ * 17 (dono, 04/08).
+ *
+ * The cost was visible on one card: the loading veil is `absolute inset-0 bg-white/50`,
+ * and without the position it stopped being a veil and became a block in the flow; the
+ * chevron's `justify-between` is what puts it at the far edge of the header.
+ *
+ * `flex` and `flex-col` stay OUT on purpose - they travel as the node's own form
+ * (`row`/`stack`), and declaring the same thing twice is how two sources of truth start
+ * disagreeing. What comes in here is the DIMENSION (`flex-1`, `shrink-0`) and the PLACE.
+ */
+const PLACE_KEYWORD = {
+    // Position: what makes an overlay an overlay.
+    relative: { property: "position", value: "relative" },
+    absolute: { property: "position", value: "absolute" },
+    fixed: { property: "position", value: "fixed" },
+    sticky: { property: "position", value: "sticky" },
+    static: { property: "position", value: "static" },
+    // Flex dimension. The direction is the node's form; how it grows is a decision.
+    "flex-1": { property: "flex", value: "1 1 0%" },
+    "flex-auto": { property: "flex", value: "1 1 auto" },
+    "flex-initial": { property: "flex", value: "0 1 auto" },
+    "flex-none": { property: "flex", value: "none" },
+    grow: { property: "flexGrow", value: "1" },
+    "grow-0": { property: "flexGrow", value: "0" },
+    "flex-grow": { property: "flexGrow", value: "1" },
+    "flex-grow-0": { property: "flexGrow", value: "0" },
+    shrink: { property: "flexShrink", value: "1" },
+    "shrink-0": { property: "flexShrink", value: "0" },
+    "flex-shrink": { property: "flexShrink", value: "1" },
+    "flex-shrink-0": { property: "flexShrink", value: "0" },
+    // Overflow: what makes a clip clip, and a scroller scroll.
+    "overflow-hidden": { property: "overflow", value: "hidden" },
+    "overflow-auto": { property: "overflow", value: "auto" },
+    "overflow-visible": { property: "overflow", value: "visible" },
+    "overflow-scroll": { property: "overflow", value: "scroll" },
+    "overflow-x-auto": { property: "overflowX", value: "auto" },
+    "overflow-y-auto": { property: "overflowY", value: "auto" },
+    "overflow-x-hidden": { property: "overflowX", value: "hidden" },
+    "overflow-y-hidden": { property: "overflowY", value: "hidden" },
+    "overflow-x-scroll": { property: "overflowX", value: "scroll" },
+    "overflow-y-scroll": { property: "overflowY", value: "scroll" },
+    // Display, when it is not the arrangement we already carry as a form.
+    "inline-flex": { property: "display", value: "inline-flex" },
+    "inline-block": { property: "display", value: "inline-block" },
+    inline: { property: "display", value: "inline" },
+    block: { property: "display", value: "block" },
+    hidden: { property: "display", value: "none" },
+    // Focus and the pointer: real decisions, and `outline-none` is 21 of theirs.
+    "outline-none": { property: "outline", value: "none" },
+    "cursor-pointer": { property: "cursor", value: "pointer" },
+    "cursor-default": { property: "cursor", value: "default" },
+    "cursor-not-allowed": { property: "cursor", value: "not-allowed" },
+    "cursor-text": { property: "cursor", value: "text" },
+    "cursor-grab": { property: "cursor", value: "grab" },
+    "cursor-wait": { property: "cursor", value: "wait" },
+    "pointer-events-none": { property: "pointerEvents", value: "none" },
+    "pointer-events-auto": { property: "pointerEvents", value: "auto" },
+    "select-none": { property: "userSelect", value: "none" },
+    "select-text": { property: "userSelect", value: "text" },
+    "select-all": { property: "userSelect", value: "all" },
+    // Text that has to fit, and numbers that have to line up.
+    "whitespace-nowrap": { property: "whiteSpace", value: "nowrap" },
+    "whitespace-pre": { property: "whiteSpace", value: "pre" },
+    "whitespace-pre-wrap": { property: "whiteSpace", value: "pre-wrap" },
+    "break-words": { property: "overflowWrap", value: "break-word" },
+    "break-all": { property: "wordBreak", value: "break-all" },
+    "tabular-nums": { property: "fontVariantNumeric", value: "tabular-nums" },
+    // How an image fills its frame.
+    "object-cover": { property: "objectFit", value: "cover" },
+    "object-contain": { property: "objectFit", value: "contain" },
+    "object-fill": { property: "objectFit", value: "fill" },
+    "object-none": { property: "objectFit", value: "none" },
+    "object-scale-down": { property: "objectFit", value: "scale-down" },
+    /**
+     * ONE UTILITY, THREE DECLARATIONS - and any one of them alone paints nothing, which is
+     * why this needed the `prop:value|…` form rather than the pair form.
+     */
+    truncate: {
+        property: "overflow+textOverflow+whiteSpace",
+        value: "overflow:hidden|textOverflow:ellipsis|whiteSpace:nowrap",
+    },
+};
+/**
+ * MOVEMENT IS A DECLARATION TOO, and 91 utilities of it were being dropped.
+ *
+ * Measured across their 36 components (dono, 04/08): 34 `transition-*` in 20 components,
+ * 23 `duration-*` in 16, 2 `ease-*`, 18 `animate-*` in 10. Their chevron turns over 300ms
+ * and their spinner spins - and the recipe said neither, so a rebuilt component snapped
+ * between states and sat still where it should turn.
+ *
+ * READ AS THE FOUR LONGHANDS, never as the shorthand. `transition-colors duration-200
+ * ease-out` is three utilities and three properties: composing them into one `transition`
+ * would mean guessing what the other two will be, and whichever landed last would erase
+ * the others. Longhands compose the way their own utilities do.
+ */
+const TRANSITION_PROPERTY = {
+    all: "all",
+    none: "none",
+    colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
+    opacity: "opacity",
+    shadow: "box-shadow",
+    transform: "transform, translate, scale, rotate",
+    // Tailwind's bare `transition` is this set, and it is what 16 of theirs write.
+    "": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+};
+/** Tailwind's easing scale, verbatim - a curve nobody should retype. */
+const EASING = {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+};
+/** `justify-between` → `space-between`, and the four that are not a straight copy. */
+const ALIGNMENT = {
+    start: "flex-start",
+    end: "flex-end",
+    between: "space-between",
+    around: "space-around",
+    evenly: "space-evenly",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline",
+};
+/** Which property each alignment prefix sets. */
+const ALIGN_PROP = {
+    justify: "justifyContent",
+    items: "alignItems",
+    self: "alignSelf",
+    content: "alignContent",
+    "justify-items": "justifyItems",
+    "justify-self": "justifySelf",
+    "place-items": "placeItems",
+    "place-content": "placeContent",
+    "place-self": "placeSelf",
+};
 /** States we recognise. Anything else is skipped rather than invented. */
 /**
  * A MODIFIER'S STATE, IN THE CONTRACT'S SPELLING.
@@ -419,7 +591,22 @@ function withAlpha(d, alpha) {
         return d;
     return { ...d, value: `color-mix(in srgb, ${d.value} ${pct}%, transparent)` };
 }
+/** `w-1/2`, `basis-2/3` - a fraction is a width, and the `/` is not an alpha. */
+const FRACTION = /^(w|h|basis|max-w|max-h|min-w|min-h|top|right|bottom|left|inset)-(\d+)\/(\d+)$/;
 export function readUtility(utility, declared) {
+    /**
+     * BEFORE THE ALPHA SPLIT, because the two share a slash and only one of them is a
+     * colour. `w-1/2` was reaching the size reader as `w-1` and coming back `0.25rem` -
+     * silently wrong, which is worse than unread. Their `packages/ui` has none; two of
+     * their apps do (dono, 04/08).
+     */
+    const fraction = FRACTION.exec(utility);
+    if (fraction) {
+        const property = SPACING_PROPERTY[fraction[1]];
+        const pct = (Number(fraction[2]) / Number(fraction[3])) * 100;
+        if (property)
+            return { property, value: `${Number(pct.toFixed(4))}%` };
+    }
     const read = readUtilityCore(utility, declared);
     return read ? withAlpha(read, utility.split("/")[1]) : read;
 }
@@ -442,9 +629,79 @@ function readUtilityCore(utility, declared) {
     const [core] = utility.split("/");
     // A bare keyword carries a declaration with no scale behind it, so it is read
     // before the dash split that everything else needs.
-    const keyword = TYPE_KEYWORD[core];
+    const keyword = TYPE_KEYWORD[core] ?? PLACE_KEYWORD[core];
     if (keyword)
         return keyword;
+    /**
+     * A BARE `rounded` IS TAILWIND'S OWN DEFAULT RADIUS, and it read as nothing - so six
+     * elements across their library arrived square. Their token wins if they declared one
+     * under that name, exactly as the scaled form already does.
+     */
+    if (core === "rounded") {
+        return declared.has("--radius-DEFAULT")
+            ? {
+                property: "borderRadius",
+                value: "{radius.DEFAULT}",
+                token: "--radius-DEFAULT",
+            }
+            : { property: "borderRadius", value: "0.25rem" };
+    }
+    /**
+     * TRANSITION, DURATION, EASING, DELAY - four utilities, four properties.
+     *
+     * 59 of these across their library, and the recipe carried none: a rebuilt component
+     * snapped between every state their own code eases through (dono, 04/08).
+     */
+    const bareTransition = /^transition(?:-(.+))?$/.exec(core);
+    if (bareTransition) {
+        const arg = bareTransition[1] ?? "";
+        const arbitrary = /^\[(.+)\]$/.exec(arg);
+        const value = arbitrary
+            ? arbitrary[1].replace(/_/g, " ")
+            : TRANSITION_PROPERTY[arg];
+        if (value)
+            return { property: "transitionProperty", value };
+    }
+    const ms = /^(duration|delay)-(\d+)$/.exec(core);
+    if (ms) {
+        return {
+            property: ms[1] === "duration" ? "transitionDuration" : "transitionDelay",
+            value: `${ms[2]}ms`,
+        };
+    }
+    const ease = /^ease-(.+)$/.exec(core);
+    if (ease && EASING[ease[1]]) {
+        return { property: "transitionTimingFunction", value: EASING[ease[1]] };
+    }
+    /**
+     * `animate-spin` - the animation, by the name the system defines it under.
+     *
+     * `var(--animate-spin)` rather than a shorthand of ours: the compiler mints that
+     * variable from the document's own keyframes and gives it this system's clock. The
+     * frames themselves travel beside the reading - see `BUILTIN_KEYFRAMES` - because a
+     * recipe cannot point at a keyframe the system does not define.
+     */
+    const animate = /^animate-([a-z][\w-]*)$/.exec(core);
+    if (animate && animate[1] !== "none") {
+        return {
+            property: "animation",
+            value: `var(--animate-${animate[1]})`,
+            keyframe: animate[1],
+        };
+    }
+    /**
+     * ALIGNMENT - `justify-between`, `items-center`, `self-end`.
+     *
+     * 116 of these across 25 of their components, and they are not arrangement: they are
+     * WHERE the thing sits. The chevron on their card is at the far edge because of one.
+     */
+    const align = /^(place-items|place-content|place-self|justify-items|justify-self|justify|items|self|content)-([a-z]+)$/.exec(core);
+    if (align) {
+        const property = ALIGN_PROP[align[1]];
+        const value = ALIGNMENT[align[2]];
+        if (property && value)
+            return { property, value };
+    }
     /**
      * BORDER WIDTH - `border`, `border-2`, `border-b`, `border-t-4`.
      *
@@ -533,6 +790,18 @@ function readUtilityCore(utility, declared) {
             return { property: "borderCollapse", value: rest };
         }
     }
+    /**
+     * `ring-1` IS A WIDTH, and it reached the colour reader first - which looked for a
+     * colour called `1`, found none, and returned null for all three of theirs. Its colour
+     * already reads as `outlineColor`, so the width belongs on the same family; a bare
+     * `ring` is 3px, Tailwind's own default.
+     */
+    if (prefix === "ring" && (rest === "" || /^\d+$/.test(rest))) {
+        return { property: "outlineWidth", value: `${rest || 3}px` };
+    }
+    if (core === "ring") {
+        return { property: "outlineWidth", value: "3px" };
+    }
     const colorProp = COLOR_PROPERTY[prefix];
     if (colorProp) {
         /**
@@ -677,6 +946,14 @@ function readUtilityCore(utility, declared) {
             sizeRest = axis[2];
         }
     }
+    /** The same recombination for the axis-suffixed families: `space-y-1`, `inset-x-0`. */
+    if (prefix === "space" || prefix === "inset") {
+        const axis = /^([xy])-(.+)$/.exec(rest);
+        if (axis) {
+            sizePrefix = `${prefix}-${axis[1]}`;
+            sizeRest = axis[2];
+        }
+    }
     const spaceProp = SPACING_PROPERTY[sizePrefix];
     if (spaceProp) {
         /** `gap-x-6` / `gap-y-2` - the two halves of gap, which one prefix cannot say. */
@@ -716,7 +993,87 @@ function readUtilityCore(utility, declared) {
         if (MAX_WIDTH[sizeRest] && /^(max-w|max-h)$/.test(sizePrefix)) {
             return { property: spaceProp, value: MAX_WIDTH[sizeRest] };
         }
+        /**
+         * `top-full`, `inset-0`, `basis-auto` - the words an offset takes and a padding does
+         * not. Their Menu positions its popup with `top-full`, and a positioner that does not
+         * position is not the component.
+         */
+        const OFFSET_WORD = {
+            full: "100%",
+            auto: "auto",
+            px: "1px",
+        };
+        if (OFFSET_WORD[sizeRest] &&
+            /^(inset|inset-x|inset-y|top|right|bottom|left|basis)$/.test(sizePrefix)) {
+            return { property: spaceProp, value: OFFSET_WORD[sizeRest] };
+        }
     }
+    /**
+     * `z-50` - the stacking order, which is the difference between an overlay above the
+     * content and one behind it. Tailwind's own scale is the numbers themselves.
+     */
+    if (prefix === "z" && (/^\d+$/.test(rest) || rest === "auto")) {
+        return { property: "zIndex", value: rest };
+    }
+    /**
+     * `backdrop-blur-[1px]`, `backdrop-blur-sm` - the frosted layer behind an overlay.
+     * Their loading veil is `bg-white/50 backdrop-blur-[1px]`, and without the blur the
+     * veil is a flat wash.
+     */
+    const BLUR = {
+        none: "0",
+        sm: "4px",
+        "": "8px",
+        md: "12px",
+        lg: "16px",
+        xl: "24px",
+    };
+    const backdrop = /^backdrop-blur(?:-(.+))?$/.exec(core);
+    if (backdrop) {
+        const arg = backdrop[1] ?? "";
+        const arbitrary = /^\[(.+)\]$/.exec(arg);
+        const value = arbitrary ? arbitrary[1] : BLUR[arg];
+        if (value)
+            return { property: "backdropFilter", value: `blur(${value})` };
+    }
+    const blur = /^blur(?:-(.+))?$/.exec(core);
+    if (blur) {
+        const arg = blur[1] ?? "";
+        const arbitrary = /^\[(.+)\]$/.exec(arg);
+        const value = arbitrary ? arbitrary[1] : BLUR[arg];
+        if (value)
+            return { property: "filter", value: `blur(${value})` };
+    }
+    /**
+     * `rotate-180`, `scale-[0.98]` - a static transform, which is a state and not motion:
+     * their chevron points up when the card is open. Each one lands on `transform` whole,
+     * so two on the same element would overwrite - none of their 3 co-occur, and saying
+     * one of them is better than saying neither.
+     */
+    const rotate = /^-?rotate-(.+)$/.exec(core);
+    if (rotate) {
+        const arbitrary = /^\[(.+)\]$/.exec(rotate[1]);
+        const deg = arbitrary ? arbitrary[1] : `${rotate[1]}deg`;
+        return {
+            property: "transform",
+            value: `rotate(${core.startsWith("-") ? `-${deg}` : deg})`,
+        };
+    }
+    const scale = /^scale-(.+)$/.exec(core);
+    if (scale) {
+        const arbitrary = /^\[(.+)\]$/.exec(scale[1]);
+        const factor = arbitrary
+            ? arbitrary[1]
+            : /^\d+$/.test(scale[1])
+                ? String(Number(scale[1]) / 100)
+                : null;
+        if (factor)
+            return { property: "transform", value: `scale(${factor})` };
+    }
+    /** `line-clamp-2` - how many lines survive before the ellipsis. */
+    const clamp = /^line-clamp-(\d+)$/.exec(core);
+    if (clamp)
+        return { property: "WebkitLineClamp", value: clamp[1] };
     if (prefix === "rounded") {
         /**
          * `rounded-t-lg` - one side, two corners. The side names which half; the scale is
@@ -1239,6 +1596,25 @@ export function transcribe(classes, declared) {
         // `rounded-t-lg` names two corners: the reader returns them joined with `+`, and
         // the write splits - the same shape the `size` expansion above uses.
         if (decl.property.includes("+")) {
+            /**
+             * AND WITH ITS OWN VALUE EACH, when one utility means three things.
+             *
+             * `truncate` is `overflow:hidden; text-overflow:ellipsis; white-space:nowrap` - any
+             * one of the three alone paints nothing, so the pair form (same value, two
+             * properties) could not carry it. `prop:value|prop:value` says both halves.
+             */
+            if (decl.value.includes("|")) {
+                for (const pair of decl.value.split("|")) {
+                    const [property, value] = pair.split(":");
+                    if (property && value && target[property] == null)
+                        target[property] = value;
+                }
+                if (decl.token)
+                    out.fromToken += 1;
+                else
+                    out.fromLiteral += 1;
+                continue;
+            }
             for (const property of decl.property.split("+")) {
                 if (target[property] == null)
                     target[property] = decl.value;
@@ -1249,6 +1625,11 @@ export function transcribe(classes, declared) {
                 out.fromLiteral += 1;
             continue;
         }
+        if (decl.keyframe) {
+            out.animations ??= [];
+            if (!out.animations.includes(decl.keyframe))
+                out.animations.push(decl.keyframe);
+        }
         if (target[decl.property] != null)
             continue;
         target[decl.property] = decl.value;

package/package.json

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