synthesisui 0.16.79 → 0.16.81

package/dist/doctor/architecture.js

@@ -0,0 +1,134 @@
+/**
+ * HOW THIS PROJECT IS ORGANISED - measured, chosen, and then true in every prompt.
+ *
+ * "The architecture of the project should live in a general rule as it is structured,
+ * because then in every prompt that architecture and the way the project was structured
+ * will be respected - and this can be analysed in the skill with the user selecting the
+ * correct architecture (a project can have more than one folder architecture, so we can
+ * just select which one has priority)" (dono, 01/08).
+ *
+ * It is the most underrated line in that message. Everything else in this pipeline
+ * describes what a component LOOKS like; this describes where the next one GOES. An
+ * agent that knows the palette and not the tree writes a correct component in the wrong
+ * place, and a person has to move it every time.
+ *
+ * MEASURED, NOT ASKED FIRST. The shapes below are counted off their real directories,
+ * ranked by how many components sit in each. A project genuinely has more than one -
+ * a library organised atomically inside a monorepo whose apps are organised by feature -
+ * so this returns all of them and the person picks which one has PRIORITY. That word is
+ * theirs and it is the right one: the others are still true, they just do not decide.
+ */
+const SHAPES = [
+    {
+        kind: "atomic",
+        needs: [
+            ["atoms", "atom"],
+            ["molecules", "molecule"],
+            ["organisms", "organism"],
+        ],
+        describe: (a) => `Components live in an atomic ladder under \`${a.root}\` - ${a.evidence.join("/")}. A new component goes on the rung that matches what it is made of: an atom composes nothing of yours, a molecule composes atoms, an organism is a whole region of a screen. Put it on the wrong rung and the ladder stops being true.`,
+    },
+    {
+        kind: "feature",
+        needs: [["features", "modules", "domains"]],
+        describe: (a) => `Code is organised BY FEATURE under \`${a.root}\`. A new component belongs to the feature that uses it, beside its own logic, and only moves up to the shared layer when a second feature needs it. Reaching across features is the thing this shape exists to prevent.`,
+    },
+    {
+        kind: "layered",
+        needs: [
+            ["ui", "components"],
+            ["hooks", "lib", "utils"],
+        ],
+        describe: (a) => `Code is split by LAYER under \`${a.root}\` - ${a.evidence.join(", ")}. A component goes in the ui layer and nothing else does; state and helpers stay in theirs. A component reaching into another layer is fine, a helper reaching back into ui is not.`,
+    },
+    {
+        kind: "colocated",
+        needs: [["app", "routes", "pages"]],
+        describe: (a) => `Components sit BESIDE THE ROUTE that uses them, under \`${a.root}\`. A new one starts local to its page and only moves to the shared folder when a second page needs it - which keeps the shared folder meaning "shared" rather than "everything".`,
+    },
+    {
+        kind: "flat",
+        needs: [["components"]],
+        describe: (a) => `Every component sits directly under \`${a.root}\`, one folder deep. It is the shape that stays legible longest while a system is small, and the one to revisit when the folder passes about forty names.`,
+    },
+];
+/**
+ * Which shapes this tree actually has, ranked by how much code each holds.
+ *
+ * `flat` is checked last and only reported when nothing more specific matched under the
+ * same root: a `components/` folder inside an atomic library is not a second
+ * architecture, it is the same one seen from further away.
+ */
+export function detectArchitectures(entries) {
+    const found = [];
+    for (const entry of entries) {
+        const lower = new Map(entry.dirs.map((d) => [d.toLowerCase(), d]));
+        for (const shape of SHAPES) {
+            const evidence = [];
+            let complete = true;
+            for (const alternatives of shape.needs) {
+                const hit = alternatives.map((a) => lower.get(a)).find(Boolean);
+                if (!hit) {
+                    complete = false;
+                    break;
+                }
+                evidence.push(hit);
+            }
+            if (!complete)
+                continue;
+            if (shape.kind === "flat" &&
+                found.some((f) => f.root === entry.path && f.kind !== "flat")) {
+                continue;
+            }
+            found.push({
+                kind: shape.kind,
+                root: entry.path,
+                files: entry.files,
+                evidence,
+            });
+        }
+    }
+    return found
+        .filter((a) => a.kind !== "flat" ||
+        !found.some((b) => b.root === a.root && b.kind !== "flat"))
+        .sort((a, b) => b.files - a.files || a.root.localeCompare(b.root));
+}
+/** The sentence that becomes the rule. Written for an agent about to add a file. */
+export function describeArchitecture(a) {
+    const shape = SHAPES.find((s) => s.kind === a.kind);
+    return shape ? shape.describe(a) : `Components live under \`${a.root}\`.`;
+}
+/**
+ * The rule itself, in the shape `reading.rules` holds.
+ *
+ * `applies` is EMPTY on purpose - this governs the system rather than a component, so
+ * it reaches CLAUDE.md and travels into every prompt instead of waiting for somebody to
+ * open one component. And `fact: true`, because it was read off their directories: it is
+ * true once, not a habit that needs a third sighting.
+ */
+export function architectureRule(a) {
+    return {
+        text: describeArchitecture(a),
+        applies: [],
+        kind: "implementation",
+        fact: true,
+        evidence: `${a.evidence.join("/")} under ${a.root}, holding ${a.files} component file${a.files === 1 ? "" : "s"}`,
+    };
+}
+/**
+ * One line naming what was found, and the choice it leaves open.
+ *
+ * A project with two shapes is not a project with a mistake. Saying so is what keeps
+ * the question from reading as an accusation.
+ */
+export function describeChoice(found) {
+    if (found.length === 0)
+        return null;
+    if (found.length === 1) {
+        return `One shape, read off your directories: ${found[0].kind} under \`${found[0].root}\`.`;
+    }
+    const list = found
+        .map((a) => `${a.kind} under \`${a.root}\` (${a.files} files)`)
+        .join(", ");
+    return `${found.length} shapes, and none of them is a mistake: ${list}. A library organised atomically inside a monorepo whose apps are organised by feature is two true answers. Pick which one has PRIORITY - it becomes the rule every prompt reads, and the others stay true without deciding.`;
+}

package/dist/doctor/call-sites.js

@@ -0,0 +1,171 @@
+/**
+ * HOW A COMPONENT IS ACTUALLY USED - the owner's step five, and the one nothing read.
+ *
+ * "For each component on the page understand how it is used, first the rules, what the
+ * component's recipe is, how many sub-components it has, which properties it is used
+ * with, does it have ...props? which does it make explicit? which does it use? that
+ * would be good to have in the component's usage/recipes" (dono, 01/08).
+ *
+ * Every one of those is answerable deterministically and none of it was being asked.
+ * Two readings already exist - what a component DECLARES and which literal values its
+ * props TAKE - and between them sits the question a person actually has when they are
+ * about to compose something: what do people pass it, what does it pass on, and what
+ * shows up beside it.
+ *
+ * THREE THINGS THIS ADDS
+ *
+ *   forwards      does the definition spread the rest of its props onto its element?
+ *                 If it does, anything you pass reaches the DOM - which is the answer
+ *                 to "can I put an aria-label on it" and it is never in a type.
+ *   explicit      which props the definition names and destructures. A prop that is
+ *                 named is a prop the author thought about; the rest is pass-through.
+ *   together      which components appear INSIDE this one at its call sites. A `Card`
+ *                 used with a `CardHeader` in twelve files is a pair, and that pair is
+ *                 a law nobody wrote down.
+ *
+ * The pairs come from USAGE rather than from the definition on purpose. A definition
+ * says what a component is made of; a call site says what people put in it, and those
+ * are different facts. A library composes nothing internally, so without this the
+ * composition half of a library's story is empty by construction.
+ */
+/**
+ * `function Name({ a, b, ...rest })`, `const Name = ({ a, …}) =>`, and
+ * `const Name = function ({ … })`.
+ *
+ * The arrow and the function expression share one shape - a parameter list opening with
+ * a destructure - so matching that is enough and no `=>` needs to appear. A first
+ * version tried to consume the arrow, and `([^)]*)` swallowed the destructure it was
+ * trying to reach, so every arrow component read as declaring no props (spec, 01/08).
+ */
+const DESTRUCTURED = /(?:function\s+([A-Z][A-Za-z0-9_]*)\s*\(\s*\{([^}]*)\}|(?:const|let)\s+([A-Z][A-Za-z0-9_]*)\s*(?::[^=]*)?=\s*(?:function\s*)?\(\s*\{([^}]*)\})/g;
+/** `{...rest}` / `{...props}` on a JSX element - the forwarding, in the markup. */
+const SPREAD_ONTO = /\{\s*\.\.\.\s*([A-Za-z_$][\w$]*)\s*\}/g;
+/**
+ * What a definition says about its own props.
+ *
+ * Both halves have to be true for `forwards`: a definition can collect a rest parameter
+ * and never spread it, which means the opposite of forwarding - it is deliberately
+ * swallowing what it was given.
+ */
+export function readDefinitionProps(name, source) {
+    const explicit = [];
+    let restName = null;
+    DESTRUCTURED.lastIndex = 0;
+    for (const m of source.matchAll(DESTRUCTURED)) {
+        const found = m[1] ?? m[3];
+        if (found !== name)
+            continue;
+        const body = m[2] ?? m[4] ?? "";
+        for (const raw of body.split(",")) {
+            const part = raw.trim();
+            if (!part)
+                continue;
+            if (part.startsWith("...")) {
+                restName = part.slice(3).trim() || null;
+                continue;
+            }
+            // `as: Component = "p"` names the prop `as`; the local alias is not the prop.
+            const prop = part.split(/[:=]/)[0].trim();
+            if (/^[a-zA-Z_$][\w$]*$/.test(prop) && !explicit.includes(prop)) {
+                explicit.push(prop);
+            }
+        }
+        break;
+    }
+    let forwards = null;
+    if (restName) {
+        SPREAD_ONTO.lastIndex = 0;
+        for (const m of source.matchAll(SPREAD_ONTO)) {
+            if (m[1] === restName) {
+                forwards = restName;
+                break;
+            }
+        }
+    }
+    return { explicit, forwards };
+}
+/**
+ * WHICH COMPONENTS APPEAR INSIDE THIS ONE, at its call sites.
+ *
+ * Depth one only, and that is the point: `<Card><CardHeader/><CardBody/></Card>` says
+ * Card is used with those two. What is inside CardHeader is CardHeader's own story, and
+ * following it further would turn one page into a claim about the whole tree.
+ *
+ * Counted per FILE rather than per occurrence, because "twelve files agree" is a claim
+ * about a habit and "twelve occurrences" can be one loop.
+ */
+export function readNesting(file, source, into = new Map()) {
+    const open = /<([A-Z][A-Za-z0-9_]*(?:\.[A-Z][A-Za-z0-9_]*)*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>/gs;
+    const stack = [];
+    open.lastIndex = 0;
+    for (const m of source.matchAll(open)) {
+        const name = m[1];
+        const selfClosing = m[3] === "/";
+        const parent = stack[stack.length - 1];
+        if (parent && parent !== name) {
+            const children = into.get(parent) ?? new Map();
+            const files = children.get(name) ?? new Set();
+            files.add(file);
+            children.set(name, files);
+            into.set(parent, children);
+        }
+        if (!selfClosing)
+            stack.push(name);
+        // A closing tag is not matched by the pattern above, so the stack is trimmed by
+        // the next opening tag's own nesting rather than by tracking every `</x>`. It
+        // over-nests in a flat list of siblings, which is why depth is capped at one and
+        // the pair only counts once per file.
+        if (stack.length > 8)
+            stack.shift();
+    }
+    return into;
+}
+/**
+ * The composition pairs worth calling a law, and the sentence each becomes.
+ *
+ * `minFiles` is the ladder's own habit threshold - three files that agree - because
+ * that is what separates a pattern from a coincidence, and it is the same number every
+ * other observed rule uses.
+ */
+export function nestingRules(nesting, own, minFiles = 3) {
+    const out = [];
+    for (const [parent, children] of nesting) {
+        if (!own.has(parent))
+            continue;
+        for (const [child, files] of children) {
+            if (!own.has(child) || files.size < minFiles)
+                continue;
+            out.push({
+                component: parent,
+                child,
+                files: files.size,
+                text: `${parent} is used with ${child} - ${files.size} files put one inside the other, so keep the pair rather than reaching for something else inside it.`,
+            });
+        }
+    }
+    return out.sort((a, b) => b.files - a.files);
+}
+/**
+ * The two prop sentences, for `usage`.
+ *
+ * `forwards` is the one an agent needs and cannot get from a type: it is the difference
+ * between "this component accepts what I pass" and "this component ignores it". Stated
+ * as a permission rather than as a fact about the code, because that is how it will be
+ * read.
+ */
+export function propRules(name, read) {
+    const out = [];
+    if (read.forwards) {
+        out.push({
+            text: `${name} forwards the rest of its props to the element it renders, so anything you pass that it does not name - an id, an aria-label, a data attribute, a ref - reaches the DOM.`,
+            fact: true,
+        });
+    }
+    else if (read.explicit.length > 0) {
+        out.push({
+            text: `${name} names its props and forwards nothing else, so a prop it does not declare is dropped rather than passed through. It takes: ${read.explicit.slice(0, 12).join(", ")}.`,
+            fact: true,
+        });
+    }
+    return out;
+}

package/dist/doctor/component-gate.js

@@ -0,0 +1,235 @@
+/**
+ * IS THIS A COMPONENT OF A DESIGN SYSTEM?
+ *
+ * Nothing asked. The definition reader matched `export const X` / `export function X`
+ * for any capitalised name, and pointed at a whole monorepo it found **704
+ * components in a repo that has 37** (dono, 01/08). The other 667 were:
+ *
+ *     ds-activation-page          a route
+ *     ds-auth-layout              a Next layout
+ *     ds-cache-providers          a provider
+ *     ds-approvals-monitoring-template
+ *
+ * A page is not a component of a design system, and it has no visual identity to
+ * draw - which is why the vitrine came back unreadable. The renderer was not the
+ * problem; 95% of what entered had nothing to render.
+ *
+ * WHAT THIS IS NOT. It is not a quality bar and it never asks whether something is
+ * good. Every test here is about CATEGORY: a route, a provider, a config object.
+ * And nothing disappears - every rejection carries a reason, and the import prints
+ * them grouped, because "649 seen, not imported, and here is why" is information and
+ * a silent drop is a lie.
+ *
+ * FEWER AND BETTER. 37 components that all draw is a transformative result; 704
+ * where 30 draw is a broken product. This is the pipeline choosing legibility over
+ * coverage.
+ */
+import { localOnlyNames } from "./components-scan.js";
+/**
+ * Next's own reserved file names. Exact, not heuristic: the framework defines these,
+ * so a file called `page.tsx` IS a route in every Next codebase there is.
+ */
+const RESERVED_FILE = /(^|[/\\])(page|layout|template|default|error|global-error|not-found|loading|route|middleware|instrumentation|sitemap|robots|opengraph-image|icon|apple-icon|manifest)\.[jt]sx?$/;
+/** Nuxt, SvelteKit and Remix equivalents, for the same exact reason. */
+const RESERVED_FILE_OTHER = /(^|[/\\])(\+page|\+layout|\+server|_app|_document|_layout)\.[a-z]+$/;
+/**
+ * A name that means WHOLE SCREEN in every codebase.
+ *
+ * Suffix-decisive, and deliberately short. `Page`, `Screen`, `Route` and `Template`
+ * name a destination; `Layout` names the frame around one. A component library does
+ * not export those, and the 704-component run was mostly these four words.
+ *
+ * `View` is NOT here on purpose: `TreeView` and `ListView` are components in a
+ * hundred libraries. It only counts when the file itself is a route.
+ */
+const SCREEN_SUFFIX = /(Page|Screen|Route|Template|Layout)$/;
+/** Something that carries context down the tree rather than drawing. */
+const PROVIDER_SUFFIX = /(Provider|Providers|Context|Boundary|Guard|Wrapper)$/;
+/** Any JSX at all in the file. A capitalised export with none is a constant, a
+ *  config object or a helper - `export const ROUTES = {…}` is not a component. */
+const HAS_JSX = /<[A-Za-z][^>]*>|<>/;
+/**
+ * Any sign that this file decides how something LOOKS.
+ *
+ * The generic catch, and the one that gets the providers whose names give nothing
+ * away. A file with no class, no style, no styled-anything and no variant helper is
+ * plumbing: it may render, but every pixel it produces was decided somewhere else.
+ */
+const HAS_STYLING = /className|class=|style=|styled[.(]|css`|cva\(|\btv\(|makeStyles|sx=|tw`/;
+/** `createContext` + a `.Provider` in the return is a provider whatever it is
+ *  called - `RootWrapper` and `CommonProviders` both read this way. */
+const IS_CONTEXT = /createContext\s*[<(]/;
+/** A lowercase JSX tag: an html element this file renders ITSELF. */
+const OWN_ELEMENT = /<(?:[a-z][a-z0-9]*)(\s|>|\/)/;
+/** Every capitalised JSX tag the file opens, dots included. */
+const RENDERED_TAG = /<([A-Z][A-Za-z0-9_]*(?:\.[A-Za-z0-9_]+)*)/g;
+/** `import … from "some-package"` - not relative, not an alias of theirs. */
+const THIRD_PARTY_IMPORT = /import\s+(?:type\s+)?([\s\S]*?)\s+from\s+["'](?![./]|@\/)([^"']+)["']/g;
+/**
+ * A file whose every pixel belongs to somebody else's component.
+ *
+ * `apps/web-dashboard/src/components/ui/_legacy/_chakra-ui/accordion.tsx` forwards
+ * to `<Accordion.ItemTrigger>` and renders no element of its own; 205 files like it
+ * arrived as components of the system (dono, 01/08). The first version rejected them
+ * for "deciding nothing about how anything looks", which reached the right outcome
+ * with a false reason - `gap="4"` and `rotate={…}` ARE styling decisions, just not
+ * through a class.
+ *
+ * The truthful category is the one this pipeline already has a word for: EXTERNAL.
+ * A component that renders only a third party's components, with no element of its
+ * own, is an ADAPTER for that library. Its markup and its pixels are that library's,
+ * and a design system that claimed them would be claiming what it cannot re-theme.
+ *
+ * The test needs no list of style props, which is why it holds across Chakra, Panda,
+ * MUI and whatever comes next: no html element of its own AND it imports components
+ * from a package.
+ */
+function adapterFor(source, internal) {
+    // It renders an html element of its own: whatever else it does, some pixel here is
+    // this file's decision.
+    if (OWN_ELEMENT.test(source))
+        return null;
+    /**
+     * THE POLYMORPHIC ESCAPE, and it is not a detail.
+     *
+     * `function Text({ as: Component = "p" })` renders `<Component>` and no lowercase
+     * tag, so the first version of this test rejected the real `Text` and `Pill` of a
+     * real library as adapters (spec, 01/08). `Component` is a prop rename - a name the
+     * file BINDS - and a tag a file binds itself is not somebody else's component.
+     *
+     * The reachability reader already answers exactly this question, so it answers it
+     * here rather than being approximated a second time.
+     */
+    const own = localOnlyNames(source);
+    const fromPackage = new Map();
+    THIRD_PARTY_IMPORT.lastIndex = 0;
+    for (const m of source.matchAll(THIRD_PARTY_IMPORT)) {
+        const spec = m[2];
+        if (internal.some((pre) => spec === pre || spec.startsWith(`${pre}/`))) {
+            continue;
+        }
+        for (const raw of m[1].replace(/[{}]/g, ",").split(",")) {
+            const local = (raw
+                .trim()
+                .split(/\s+as\s+/)
+                .pop() ?? "").trim();
+            if (/^[A-Z]/.test(local))
+                fromPackage.set(local, spec);
+        }
+    }
+    if (fromPackage.size === 0)
+        return null;
+    RENDERED_TAG.lastIndex = 0;
+    let theirs = null;
+    let seen = 0;
+    for (const m of source.matchAll(RENDERED_TAG)) {
+        const root = m[1].split(".")[0];
+        if (own.has(root))
+            return null;
+        const spec = fromPackage.get(root);
+        // A tag from neither - their own component, imported relatively - means this file
+        // composes the system rather than adapting a library.
+        if (!spec)
+            return null;
+        theirs ??= spec;
+        seen += 1;
+    }
+    return seen > 0 ? theirs : null;
+}
+export function gateComponent(input) {
+    const { name, file, source } = input;
+    if (RESERVED_FILE.test(file) || RESERVED_FILE_OTHER.test(file)) {
+        return {
+            ok: false,
+            why: "route",
+            because: `\`${file}\` is a file name the framework reserves - it is a route, not a component somebody can import`,
+        };
+    }
+    if (SCREEN_SUFFIX.test(name)) {
+        return {
+            ok: false,
+            why: "screen",
+            because: `\`${name}\` names a whole screen or the frame around one. A design system is made of the pieces a screen is built FROM`,
+        };
+    }
+    if (PROVIDER_SUFFIX.test(name) || IS_CONTEXT.test(source)) {
+        return {
+            ok: false,
+            why: "provider",
+            because: `\`${name}\` carries context or wraps a tree rather than drawing anything of its own`,
+        };
+    }
+    const adapter = adapterFor(source, input.internal ?? []);
+    if (adapter) {
+        return {
+            ok: false,
+            why: "adapter",
+            because: `\`${name}\` renders \`${adapter}\`'s components and no element of its own - its markup and every pixel are that library's, so there is nothing here for this system to re-theme`,
+        };
+    }
+    if (!HAS_JSX.test(source)) {
+        return {
+            ok: false,
+            why: "config",
+            because: `\`${name}\` is a capitalised export in a file with no markup - a constant, a config object or a helper`,
+        };
+    }
+    if (!HAS_STYLING.test(source)) {
+        return {
+            ok: false,
+            why: "no-styling",
+            because: `\`${name}\` renders but decides nothing about how anything looks - every pixel it produces was decided somewhere else`,
+        };
+    }
+    return { ok: true };
+}
+/**
+ * The rejections, grouped and counted, in the order that reads best out loud.
+ *
+ * NO SILENT CAPS. A run that quietly imports 40 of 704 reads as "your project has 40
+ * components", which is the one thing a census must never imply. Every name is
+ * carried; the printer shows the first few per group and says how many more.
+ */
+export const SKIP_LABEL = {
+    route: "routes and framework files",
+    screen: "whole screens, and the frames around them",
+    provider: "providers, contexts and wrappers",
+    adapter: "adapters for another library's components",
+    config: "constants, config and helpers",
+    "no-jsx": "capitalised exports with no markup",
+    "no-styling": "components that decide nothing about how anything looks",
+};
+export function groupSkips(skips) {
+    const order = [
+        "screen",
+        "route",
+        "provider",
+        "adapter",
+        "no-styling",
+        "config",
+        "no-jsx",
+    ];
+    const by = new Map();
+    for (const s of skips) {
+        by.set(s.why, [...(by.get(s.why) ?? []), s.name]);
+    }
+    return order
+        .filter((why) => (by.get(why) ?? []).length > 0)
+        .map((why) => ({
+        why,
+        label: SKIP_LABEL[why],
+        names: (by.get(why) ?? []).sort(),
+    }));
+}
+/**
+ * One line saying what the gate did, in the terms the decision was actually made on.
+ *
+ * The sentence a person needs in order to trust a number that just dropped by an
+ * order of magnitude - and to notice if it dropped too far.
+ */
+export function describeGate(kept, skipped) {
+    if (skipped === 0) {
+        return `${kept} component${kept === 1 ? "" : "s"} - every capitalised export here is one.`;
+    }
+    return `${kept} component${kept === 1 ? "" : "s"}, and ${skipped} export${skipped === 1 ? "" : "s"} left out. A page is not a component of a design system: it has no visual identity to draw, and importing one puts a name in your vitrine that nobody can compose with. Everything left out is listed below with the reason, so you can disagree with any of it.`;
+}

package/dist/doctor/components-scan.js

@@ -13,17 +13,30 @@ const LITERAL_PROP = /([a-zA-Z][a-zA-Z0-9_-]*)\s*=\s*\{?\s*["']([^"']*)["']\s*\}
 /** `dense` with no value is a boolean prop set to true, and that IS a literal
  *  decision worth counting. */
 const BARE_PROP = /(^|\s)([a-z][a-zA-Z0-9_]*)(?=\s|$)/g;
+/**
+ * A KEYWORD IS NOT AN IDENTIFIER, and the difference decides whether a `<` opens
+ * an element. `return <Card>one</Card>` is a component; `useState<Foo>()` is a
+ * type argument. Both are preceded by a word.
+ *
+ * Prettier writes `return <Foo />;` on one line whenever it fits, so without this
+ * every short component written that way read as a generic and vanished from the
+ * inventory - which is how a spec for something else caught it.
+ */
+const JSX_BEFORE = /\b(return|case|default|await|yield|typeof|in|of|do|else|new)$/;
 /**
  * A generic in type position (`useState<Foo>()`, `Array<Item>`) is not an
  * element. The tell is what precedes the `<`: an identifier or a closing paren
- * means a type argument, while JSX follows `(`, `{`, `>`, a newline or nothing.
+ * means a type argument, while JSX follows `(`, `{`, `>`, a newline, a keyword or
+ * nothing.
  */
 function looksLikeType(source, at) {
     for (let i = at - 1; i >= 0; i--) {
         const c = source[i];
         if (c === " " || c === "\t")
             continue;
-        return /[A-Za-z0-9_)\]]/.test(c);
+        if (!/[A-Za-z0-9_)\]]/.test(c))
+            return false;
+        return !JSX_BEFORE.test(source.slice(Math.max(0, i - 11), i + 1));
     }
     return false;
 }
@@ -81,6 +94,56 @@ function importedNames(source, internal = []) {
     }
     return out;
 }
+/**
+ * Capitalised names a file BINDS ITSELF and does not export.
+ *
+ * `<Component>` and `<CustomLegend/>` both arrived in a real library's inventory as
+ * components of the system (dono, 01/08). Neither is one:
+ *
+ *     function Text({ as: Component = "p" })     // React's polymorphic idiom -
+ *                                                // `Component` is a prop rename
+ *     const CustomLegend = () => (…)             // a closure inside LineChart
+ *
+ * Capitalisation is React's rule for "not an html tag", which is not the same
+ * question as "is this a component the system offers". The test that separates them
+ * is REACHABILITY: a component of the system is either imported from somewhere or
+ * exported to somewhere. A name that only exists inside one function body is that
+ * function's private wiring, and giving it a recipe invents a component nobody can
+ * import.
+ *
+ * Local AND exported stays, of course - that is just a component defined where it
+ * is used.
+ */
+const BOUND = /(?:const|let|var|function|class)\s+([A-Z][A-Za-z0-9_]*)|[{,]\s*\w+\s*:\s*([A-Z][A-Za-z0-9_]*)\s*(?:=[^,}]*)?\s*[,}]/g;
+const EXPORTED_NAME = /export\s+(?:default\s+)?(?:async\s+)?(?:function|class|const|let|var)\s+([A-Z][A-Za-z0-9_]*)|export\s+default\s+([A-Z][A-Za-z0-9_]*)|export\s*\{([^}]*)\}/g;
+export function localOnlyNames(source) {
+    const exported = new Set();
+    EXPORTED_NAME.lastIndex = 0;
+    for (const m of source.matchAll(EXPORTED_NAME)) {
+        if (m[1])
+            exported.add(m[1]);
+        if (m[2])
+            exported.add(m[2]);
+        if (m[3]) {
+            for (const raw of m[3].split(",")) {
+                const name = raw
+                    .trim()
+                    .split(/\s+as\s+/)[0]
+                    ?.trim();
+                if (name && /^[A-Z]/.test(name))
+                    exported.add(name);
+            }
+        }
+    }
+    const out = new Set();
+    BOUND.lastIndex = 0;
+    for (const m of source.matchAll(BOUND)) {
+        const name = m[1] ?? m[2];
+        if (name && !exported.has(name))
+            out.add(name);
+    }
+    return out;
+}
 export function emptyTally() {
     return new Map();
 }
@@ -92,11 +155,16 @@ internal = []) {
     if (!/\.(tsx|jsx|vue|svelte)$/i.test(file))
         return;
     const owners = importedNames(source, internal);
+    const private_ = localOnlyNames(source);
     ELEMENT.lastIndex = 0;
     for (const m of source.matchAll(ELEMENT)) {
         if (m.index != null && looksLikeType(source, m.index))
             continue;
         const name = m[1];
+        // Private wiring, not a component of the system. An import wins: a file may
+        // shadow nothing and still bind a name it also imports.
+        if (!owners.has(name) && private_.has(name.split(".")[0]))
+            continue;
         const body = m[2] ?? "";
         let hit = tally.get(name);
         if (!hit) {