synthesisui 0.16.79 → 0.16.81

package/dist/anatomy-read.js

@@ -30,7 +30,7 @@
  * of the three outcomes this pipeline has paid for twice.
  */
 import { transcribe, } from "./doctor/transcribe.js";
-/** The nine forms, closed. A renderer that accepts any tag draws anything. */
+/** The ten forms, closed. A renderer that accepts any tag draws anything. */
 const FORMS = new Set([
     "image",
     "heading",
@@ -42,6 +42,7 @@ const FORMS = new Set([
     "stack",
     "component",
     "external",
+    "slot",
 ]);
 /** The two that arrange, and the only two that take children. */
 const CONTAINERS = new Set(["row", "stack"]);
@@ -198,6 +199,19 @@ root) {
             const text = typeof node.text === "string" ? node.text.trim() : "";
             if (text)
                 node_.text = text.slice(0, 120);
+            /**
+             * A SLOT KEEPS ITS STYLES AND BORROWS ITS CONTENT.
+             *
+             * Unlike the other two frontiers it is not somebody else's element - it IS
+             * theirs, and its border and hover belong on it. Only what goes inside is the
+             * caller's, so `expects` says what that is in their words instead of the
+             * preview drawing a blank.
+             */
+            if (as === "slot") {
+                const expects = typeof node.expects === "string" ? node.expects.trim() : "";
+                if (expects)
+                    node_.expects = expects.slice(0, 80);
+            }
             // Only the two arrangers descend. A leaf with children is a leaf that was
             // labelled wrongly, and its children would render nowhere.
             if (CONTAINERS.has(as) && Array.isArray(node.children)) {

package/dist/commands/import.js

@@ -1,12 +1,15 @@
-import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
 import { basename, dirname, join, relative } from "node:path";
 import { resolveAnatomy, resolveFlatParts, safePartName, } from "../anatomy-read.js";
 import { readCredentials, readToken, resolveRegistry, sameRegistry, } from "../config.js";
+import { describeArchitecture, describeChoice, detectArchitectures, } from "../doctor/architecture.js";
 import { findBrokenRefs } from "../doctor/broken-refs.js";
+import { nestingRules, propRules, readDefinitionProps, readNesting, } from "../doctor/call-sites.js";
 import { describeClassStyle, detectClassStyle, } from "../doctor/class-style.js";
 import { isNearDuplicate, isNeutral, lightness, } from "../doctor/color-distance.js";
+import { describeGate, gateComponent, groupSkips, } from "../doctor/component-gate.js";
 import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
-import { crosswalk, observedRules } from "../doctor/crosswalk.js";
+import { crosswalk, isLibrary, observedRules } from "../doctor/crosswalk.js";
 import { reconcile, scanDefinitions, } from "../doctor/definitions-scan.js";
 import { describeConvention, describeRemainder, detectConventions, } from "../doctor/idiom.js";
 import { diagnose, scanSource } from "../doctor/scan.js";
@@ -14,6 +17,7 @@ import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { buildTable } from "../doctor/tokens.js";
 import { rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
 import { body, paint, section } from "../output.js";
+import { startProgress } from "../progress.js";
 import { detectStack, resolveDeps } from "../stack.js";
 import { walk, walkAll } from "./doctor.js";
 /**
@@ -207,7 +211,8 @@ function distinctValues(d) {
     }
     return kept.sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
 }
-export async function takeCensus(root) {
+export async function takeCensus(root, opts) {
+    const scopeLabel = opts?.scopeLabel;
     const css = await harvestOwnCss(root);
     const table = buildTable({ css, source: "yours" });
     const schemes = parseSchemeBlocks(css);
@@ -215,6 +220,8 @@ export async function takeCensus(root) {
     const tally = emptyTally();
     const internal = await internalSpecifiers(root);
     const defined = [];
+    /** What the gate turned away, with the reason. Never dropped in silence. */
+    const skips = [];
     // Kept for the reference check below, which needs every file at once: a name
     // is only broken if NOTHING declares it, anywhere.
     const sources = [];
@@ -226,11 +233,39 @@ export async function takeCensus(root) {
             declaredValues.set(m[1], m[2].trim());
     }
     const looks = {};
+    /**
+     * The directory shape, gathered while the files are already being walked - so
+     * naming how the project is organised costs no second pass. See `architecture.ts`.
+     */
+    const dirs = new Map();
+    /** Parent → child → the files that put one inside the other. */
+    const nesting = new Map();
+    /** Component → what its own definition names and whether it forwards the rest. */
+    const propsOf = new Map();
+    /**
+     * A census over a real monorepo reads 2797 files, and the terminal said nothing for
+     * most of it. Twenty silent minutes is indistinguishable from twenty broken ones
+     * (dono, 01/08).
+     */
+    const progress = startProgress("Reading");
     for await (const file of walk(root)) {
         const src = await readFile(file, "utf8").catch(() => "");
         if (!src)
             continue;
         const rel = relative(root, file);
+        progress.step(rel);
+        if (/\.(tsx|jsx|vue|svelte)$/i.test(rel)) {
+            const parts = rel.split("/");
+            // Every ancestor learns the name of the child directly under it, which is all
+            // the shape detector needs and is one pass rather than a tree walk.
+            for (let i = 0; i < parts.length - 1; i++) {
+                const at = parts.slice(0, i).join("/");
+                const entry = dirs.get(at) ?? { dirs: new Set(), files: 0 };
+                entry.dirs.add(parts[i]);
+                entry.files += 1;
+                dirs.set(at, entry);
+            }
+        }
         sources.push({ file: rel, source: src });
         reports.push(scanSource(rel, src, table));
         // Stories and tests compose components to SHOW them; counting those as the
@@ -238,9 +273,39 @@ export async function takeCensus(root) {
         // they were set aside.
         if (!/(\.(spec|test|stories)\.[a-z]+$|__tests__\/|(^|\/)\.storybook\/)/.test(rel)) {
             scanComponentsInto(tally, rel, src, internal);
-            // The other half: what this file EXPORTS, with the axes its types
-            // declare. A library composes almost nothing and exports everything.
-            const found = scanDefinitions(rel, src);
+            /**
+             * The other half: what this file EXPORTS, with the axes its types declare. A
+             * library composes almost nothing and exports everything.
+             *
+             * THROUGH THE GATE, which is the difference between 37 and 704. Every test in
+             * it is about CATEGORY - a route, a provider, a config object - never quality,
+             * and every rejection is carried with its reason.
+             */
+            // HOW IT IS USED, not only what it is: which props people pass, what it passes
+            // on, and what shows up inside it. See `call-sites.ts`.
+            readNesting(rel, src, nesting);
+            const found = [];
+            for (const d of scanDefinitions(rel, src)) {
+                const verdict = gateComponent({
+                    name: d.name,
+                    file: rel,
+                    source: src,
+                    internal,
+                });
+                if (verdict.ok) {
+                    found.push(d);
+                    continue;
+                }
+                skips.push({
+                    name: d.name,
+                    file: rel,
+                    why: verdict.why,
+                    because: verdict.because,
+                });
+            }
+            for (const d of found) {
+                propsOf.set(d.name, readDefinitionProps(d.name, src));
+            }
             defined.push(...found);
             // THE LOOK, from their own class names. One transcription per file, keyed
             // by the component it defines - the root element's classes are the
@@ -258,8 +323,59 @@ export async function takeCensus(root) {
             }
         }
     }
+    progress.done();
+    const architectures = detectArchitectures([...dirs.entries()].map(([path, v]) => ({
+        path: path || ".",
+        dirs: [...v.dirs],
+        files: v.files,
+    })));
     const d = diagnose(reports);
-    const inventory = tallyToInventory(tally);
+    const allComposed = tallyToInventory(tally, 400);
+    /**
+     * THE EVIDENCE PASS - a second walk that touches ONE reading.
+     *
+     * Only the tally. Not `css`, not `declaredValues`, not `looks`, not `defined`,
+     * not `reports`: an app's classes are choices made from a scale, and folding
+     * them into the census would put the average back where the declaration goes.
+     *
+     * Deliberately its own tally so the LIBRARY QUESTION is asked of the scope
+     * alone. Fold the app in first and every export has a count, `isLibrary` reads
+     * false, and the crosswalk starts substituting the components it was just
+     * taught to keep.
+     */
+    const usageTally = emptyTally();
+    const usageSeen = new Set();
+    const usageProgress = (opts?.usage ?? []).length > 0 ? startProgress("Evidence") : null;
+    /**
+     * THE SCOPE'S OWN PACKAGE NAME IS INTERNAL, always.
+     *
+     * An app importing the system says `import { Button } from "@acme/ui"`, and the
+     * alias reader finds that name by walking the workspace for sibling manifests. It
+     * usually does - but when it cannot, every component the app composes files as
+     * THIRD-PARTY and the evidence pass counts nothing. The scope is the system by
+     * definition, so its name never needs discovering.
+     */
+    const scopePkg = await readFile(join(root, "package.json"), "utf8")
+        .then((raw) => JSON.parse(raw).name ?? null)
+        .catch(() => null);
+    const shared = scopePkg ? [...internal, scopePkg] : internal;
+    for (const u of opts?.usage ?? []) {
+        const uInternal = await internalSpecifiers(u.path);
+        for await (const file of walk(u.path)) {
+            const src = await readFile(file, "utf8").catch(() => "");
+            if (!src)
+                continue;
+            const rel = join(u.label, relative(u.path, file));
+            if (/(\.(spec|test|stories)\.[a-z]+$|__tests__\/|(^|\/)\.storybook\/)/.test(rel)) {
+                continue;
+            }
+            usageSeen.add(rel);
+            usageProgress?.step(rel);
+            scanComponentsInto(usageTally, rel, src, [...shared, ...uInternal]);
+        }
+    }
+    usageProgress?.done();
+    const usedThere = tallyToInventory(usageTally, 400);
     /**
      * THE TWO READINGS BECOME ONE LIST before anything is judged.
      *
@@ -273,6 +389,16 @@ export async function takeCensus(root) {
      * is the better source anyway - usage shows what somebody picked, the
      * declaration shows what the author designed.
      */
+    /**
+     * THE GATE APPLIES FROM BOTH SIDES.
+     *
+     * A page reaches the inventory two ways: exported (caught above) and COMPOSED -
+     * `<AuthLayout>` wrapping a tree is a JSX tag like any other. Filtering only the
+     * definitions would have let it back in through the usage door under the same
+     * name, and the vitrine cannot tell which door a name came through.
+     */
+    const turnedAway = new Set(skips.map((s) => s.name));
+    const inventory = allComposed.filter((c) => !turnedAway.has(c.name));
     const composed = new Set(inventory.map((c) => c.name));
     const fromTypes = defined
         .filter((d) => !composed.has(d.name))
@@ -285,6 +411,9 @@ export async function takeCensus(root) {
             ...Object.fromEntries(d.flags.map((f) => [f, ["true"]])),
         },
         propFiles: {},
+        // Their own rung, off the folder. It travels from the DEFINITION because
+        // that is the only reading that knows which file the component lives in.
+        ...(d.tier ? { tier: d.tier } : {}),
     }));
     /**
      * A composed component that is ALSO defined keeps its usage and gains the
@@ -306,22 +435,157 @@ export async function takeCensus(root) {
     const declaredBy = new Map(defined.map((d) => [d.name, d]));
     const enriched = inventory.map((c) => {
         const d = declaredBy.get(c.name);
-        if (!d || Object.keys(d.axes).length === 0)
+        if (!d)
             return c;
-        return { ...c, declaredAxes: d.axes };
+        const tier = d.tier ? { tier: d.tier } : {};
+        if (Object.keys(d.axes).length === 0) {
+            return Object.keys(tier).length > 0 ? { ...c, ...tier } : c;
+        }
+        return { ...c, declaredAxes: d.axes, ...tier };
     });
-    const merged = [...enriched, ...fromTypes];
+    const scoped = [...enriched, ...fromTypes];
+    /**
+     * THE EVIDENCE, FOLDED IN - counts and chosen values, never new components.
+     *
+     * A component the app has and the system does not is the app's own, and adopting
+     * it here would make the system a union of two codebases. It is reported instead:
+     * a number somebody can act on beats a component nobody asked for.
+     *
+     * The counts ADD because they are the same act measured in two places, and the
+     * prop values union because both are things somebody typed. `propFiles` is what
+     * the laws read, and it is the reason this pass exists: three files agreeing is
+     * what makes a habit, and a library has one file per component.
+     */
+    const own = new Set(scoped.map((c) => c.name));
+    const evidence = new Map(usedThere.filter((c) => !c.from).map((c) => [c.name, c]));
+    const merged = scoped.map((c) => {
+        const e = evidence.get(c.name);
+        if (!e)
+            return c;
+        /**
+         * A COMPONENT COMPOSED NOWHERE IN THE SCOPE carries its DECLARATION in `props`,
+         * because for a library that is the only reading there is. The moment real usage
+         * arrives, that declaration has to move where declarations live - otherwise the
+         * two readings merge and `props` stops meaning "what the code passed".
+         *
+         * It is the same mistake `declaredAxes` exists to prevent, arriving from the
+         * other side: unioned, a Button declaring solid|ghost and only ever passed solid
+         * reports two options, and the law that all four files agree can never be
+         * written.
+         */
+        const declaredOnly = (c.count ?? 0) === 0;
+        const props = declaredOnly ? {} : { ...c.props };
+        for (const [prop, values] of Object.entries(e.props)) {
+            props[prop] = [...new Set([...(props[prop] ?? []), ...values])];
+        }
+        const declaredAxes = c.declaredAxes ?? (declaredOnly ? c.props : undefined);
+        const propFiles = { ...(c.propFiles ?? {}) };
+        for (const [prop, n] of Object.entries(e.propFiles ?? {})) {
+            propFiles[prop] = (propFiles[prop] ?? 0) + n;
+        }
+        return {
+            ...c,
+            count: (c.count ?? 0) + (e.count ?? 0),
+            files: (c.files ?? 0) + (e.files ?? 0),
+            props,
+            propFiles,
+            ...(declaredAxes && Object.keys(declaredAxes).length > 0
+                ? { declaredAxes }
+                : {}),
+        };
+    });
+    const theirsOnly = usedThere.filter((c) => !c.from && !own.has(c.name));
     // The verdict travels WITH the payload: the platform reads one reading rather
     // than computing a second opinion from the same numbers, which is how two
     // implementations of the same judgement start disagreeing.
-    const verdicts = new Map(crosswalk(merged).map((r) => [
+    /**
+     * IS THIS SCOPE A LIBRARY? The answer changes what the crosswalk is FOR.
+     *
+     * In an app, "your Pill reads as our badge" saves them a duplicate. In a library it
+     * would delete their component - and 16 of 37 in a real one were deleted that way
+     * (dono, 01/08). Measured, not guessed: a library declares and does not compose
+     * itself. See `isLibrary`.
+     */
+    const library = isLibrary(scoped);
+    const verdicts = new Map(crosswalk(merged, { library }).map((r) => [
         r.component.name,
         { bucket: r.bucket, canonical: r.canonical, because: r.because },
     ]));
+    if (usedThere.length > 0) {
+        console.log("");
+        console.log(body(`Read ${usageSeen.size} more file${usageSeen.size === 1 ? "" : "s"} for EVIDENCE only - ${(opts?.usage ?? []).map((u) => paint.strong(u.label)).join(", ")}. What comes from there is how often each component is used and which values get picked, which is what turns a settled choice into a law. The palette, the scales and the convention stay from ${paint.strong(scopeLabel ?? "the system")}: an app's average is not a scale, it is a set of choices made from one.`));
+        if (theirsOnly.length > 0) {
+            const shown = theirsOnly.slice(0, 6).map((c) => c.name);
+            console.log(body(paint.faint(`(${theirsOnly.length} component${theirsOnly.length === 1 ? "" : "s"} live there and not in the system - ${shown.join(", ")}${theirsOnly.length > shown.length ? ", …" : ""}. Left out on purpose: the system is one place, and a union of two codebases is not a system. Point --scope at them if they belong in it.)`)));
+        }
+    }
+    /**
+     * WHAT THE GATE TURNED AWAY - said out loud, grouped, with the reason.
+     *
+     * The sentence a person needs when a number drops by an order of magnitude: enough
+     * to trust it, and enough to notice if it dropped too far.
+     */
+    /**
+     * HOW THE PROJECT IS ORGANISED - and the choice it leaves open, when there is one.
+     *
+     * The skill asks which has priority; the chosen one becomes a system-wide rule that
+     * reaches CLAUDE.md, so every prompt after this respects where a new component goes.
+     */
+    if (architectures.length > 0) {
+        console.log("");
+        console.log(section("How this project is organised"));
+        const choice = describeChoice(architectures);
+        if (choice)
+            console.log(body(choice));
+        for (const a of architectures.slice(0, 4)) {
+            console.log(body(paint.faint(`  ${describeArchitecture(a)}`)));
+        }
+    }
+    if (skips.length > 0) {
+        console.log("");
+        console.log(body(describeGate(scoped.length, skips.length)));
+        for (const group of groupSkips(skips)) {
+            const shown = group.names.slice(0, 5);
+            const more = group.names.length - shown.length;
+            console.log(body(paint.faint(`  ${group.names.length} ${group.label}: ${shown.join(", ")}${more > 0 ? `, and ${more} more` : ""}`)));
+        }
+    }
+    if (library) {
+        console.log("");
+        console.log(body(`This scope DECLARES its components and composes almost none of them inside itself - which is what a component library looks like from the inside. So every component it exports arrives as YOURS, with its own recipe. Where one reads like something in our catalogue, that is recorded as a note instead of replacing it.`));
+    }
+    /**
+     * THE LAWS READ THE MERGED LIST, not the scope's.
+     *
+     * `RULE_MIN_FILES` is three, and a library has one file per component - so
+     * measured against the scope alone, "every file that passes it agrees" can never
+     * be true and the habit rung stays empty forever. The app is where the agreeing
+     * happens, which is the whole reason `--usage` exists.
+     */
     const laws = new Map();
-    for (const r of observedRules(inventory)) {
+    for (const r of observedRules(merged)) {
         laws.set(r.component, [...(laws.get(r.component) ?? []), r.text]);
     }
+    /**
+     * THE OWNER'S STEP FIVE, in the recipe's own `usage`.
+     *
+     * Whether a component forwards the rest of its props is the answer to "can I put an
+     * aria-label on it", and it is never in a type. And which components appear INSIDE it
+     * at its call sites is the composition half of a library's story - empty by
+     * construction until the app is read, because a library composes nothing internally.
+     */
+    const systemOwns = new Set(merged.filter((c) => !c.from).map((c) => c.name));
+    for (const c of merged) {
+        const read = propsOf.get(c.name);
+        if (!read)
+            continue;
+        for (const rule of propRules(c.name, read)) {
+            laws.set(c.name, [...(laws.get(c.name) ?? []), rule.text]);
+        }
+    }
+    for (const pair of nestingRules(nesting, systemOwns)) {
+        laws.set(pair.component, [...(laws.get(pair.component) ?? []), pair.text]);
+    }
     const components = merged.map((c) => ({
         ...c,
         ...(verdicts.get(c.name) ?? {}),
@@ -361,6 +625,19 @@ export async function takeCensus(root) {
         observed: distinctValues(d),
         ...(components.length > 0 ? { components } : {}),
         ...(defined.length > 0 ? { defined } : {}),
+        ...(architectures.length > 0
+            ? { architectures: architectures.slice(0, 6) }
+            : {}),
+        ...(skips.length > 0
+            ? {
+                skipped: skips
+                    .slice(0, 400)
+                    .map(({ name, why, because }) => ({ name, why, because })),
+            }
+            : {}),
+        ...((opts?.usage ?? []).length > 0
+            ? { usage: (opts?.usage ?? []).map((u) => u.label) }
+            : {}),
         totals: {
             scanned: d.scanned,
             values: d.findings.length,
@@ -670,9 +947,22 @@ async function sayIfWorkspace(root) {
     console.log(body("That is a fine DIAGNOSIS and a poor system: a light app and a dark one"));
     console.log(body("average into a palette that is neither."));
     console.log("");
+    /**
+     * BOTH ROLES IN ONE LINE, because a person reading this has both folders open.
+     *
+     * `--scope` alone is where the library came back with no laws at all: the system
+     * is one place, but the EVIDENCE that a choice is settled is somewhere else, and
+     * naming only the first left the second unreachable (dono, 01/08).
+     */
+    const usageFlags = apps
+        .slice(0, 2)
+        .map((a) => `--usage ${a}`)
+        .join(" ");
     if (shared.length > 0) {
         console.log(body("The shape that works, if your vocabulary is shared:"));
-        console.log(body(`    ${paint.strong(`synthesisui import --scope ${shared[0]}`)}   ${paint.faint("the system comes from here")}`));
+        console.log(body(`    ${paint.strong(`synthesisui import --scope ${shared[0]} ${usageFlags}`)}`));
+        console.log(body(paint.faint(`      --scope is the SYSTEM: the tokens, the components, the way you name a class. One place.`)));
+        console.log(body(paint.faint(`      --usage is the EVIDENCE: how often each component is used and which values get picked. As many as you have.`)));
     }
     else {
         console.log(body("The shape that works:"));
@@ -1017,11 +1307,40 @@ export async function runImport(opts) {
      * decisions live in one package and the governance belongs at the root, and
      * conflating the two meant every re-measure scattered another census.
      */
-    const scope = opts.scope
-        ?.trim()
+    const tidy = (p) => p
+        .trim()
         .replace(/^\.\/+/, "")
         .replace(/\/+$/, "");
+    const scope = opts.scope ? tidy(opts.scope) : undefined;
     const readFrom = scope ? join(root, scope) : root;
+    /**
+     * THE SECOND ROLE. `--scope` is the SYSTEM - one place, and the only source of
+     * the palette, the scales and the convention. `--usage` is the EVIDENCE - as
+     * many places as they have, and the only source of counts, chosen values and
+     * laws.
+     *
+     * They were one flag, and one flag could only answer one of the two questions.
+     * Pointed at a real library, `usage` came back empty on all 23 components and
+     * the habit rung of the ladder was unreachable by construction: a law needs
+     * three files that agree and a library has one file per component (dono, 01/08).
+     */
+    const usage = [];
+    for (const raw of opts.usage ?? []) {
+        const label = tidy(raw);
+        if (!label || label === scope)
+            continue;
+        const path = join(root, label);
+        const ok = await stat(path)
+            .then((st) => st.isDirectory())
+            .catch(() => false);
+        if (!ok) {
+            console.log(section("Import"));
+            console.log(body(`\`--usage ${label}\` is not a folder under ${paint.strong(root)}. Nothing was read.`));
+            return;
+        }
+        if (!usage.some((u) => u.label === label))
+            usage.push({ path, label });
+    }
     // A census handed to us (an agent annotated it) is sent as-is; the numbers
     // inside were still ours to begin with.
     let census;
@@ -1060,7 +1379,10 @@ export async function runImport(opts) {
     }
     else {
         console.log(section("Reading your project"));
-        census = await takeCensus(readFrom);
+        census = await takeCensus(readFrom, {
+            ...(usage.length > 0 ? { usage } : {}),
+            ...(scope ? { scopeLabel: scope } : {}),
+        });
         if (scope)
             census.scope = scope;
     }

package/dist/commands/mcp.js

@@ -232,6 +232,15 @@ async function describeComponent(root, name) {
     const out = [
         `${name}${recipe.description ? ` - ${recipe.description}` : ""}`,
     ];
+    // THEIR OWN RUNG, when their repo has one. An agent about to compose this should
+    // know whether it is a primitive or a whole region before it starts.
+    if (recipe.tier) {
+        out.push(recipe.tier === "atom"
+            ? "An atom in your own ladder - nothing else in the system breaks down into it."
+            : recipe.tier === "molecule"
+                ? "A molecule in your own ladder - built out of your atoms, so reach for those inside it."
+                : "An organism in your own ladder - a whole region of a screen, so it is more likely to be composed than to be composed into.");
+    }
     // WHAT IT SITS ON. 17 of 23 components in a real library carry no surface of
     // their own, because the surface belongs to what they return.
     const p = recipe.preview;

package/dist/component-codegen.js

@@ -516,6 +516,7 @@ const FORM_TAG = {
     icon: { tag: "span" },
     row: { tag: "div" },
     stack: { tag: "div" },
+    slot: { tag: "div" },
 };
 /** Only these two arrange; the rest are leaves. */
 const ARRANGES = new Set(["row", "stack"]);
@@ -555,6 +556,16 @@ function emitTree(nodes, comp, indent) {
             lines.push(`${indent}{/* ${node.from} renders here - a third party's component, so its markup is theirs */}`);
             continue;
         }
+        // The caller's content, so the generated code takes it as a prop rather than
+        // inventing a sample. A slot that also carries styles keeps its part element
+        // around the children; a bare one is just `{children}`.
+        if (node.as === "slot") {
+            const inner = `{children}${node.expects ? ` {/* ${node.expects} */}` : ""}`;
+            lines.push(node.part
+                ? `${indent}<${comp}${pascal(node.part)}>${inner}</${comp}${pascal(node.part)}>`
+                : `${indent}${inner}`);
+            continue;
+        }
         if (!node.part) {
             // Pure structure with no styles of its own: keep the arrangement, skip the
             // element - a div that carries nothing is a div nobody needs.