@kerfjs/ui 5.0.0-beta.69 → 5.0.0-beta.70

package/analyzer/index.mjs

@@ -18,6 +18,7 @@ import {
   componentLabel,
   componentName,
   componentOwnershipFacts,
+  contextualComponents,
   configurationFor,
   privateVariableOwner,
   reportGap,
@@ -80,6 +81,10 @@ export const UI_ANALYSIS_RULES = Object.freeze({
     severity: 'error',
     title: "Hook class restyles a cataloged component's root",
   },
+  'KUI-L023': {
+    severity: 'error',
+    title: "Another component's public class is rendered as markup",
+  },
 });
 
 const ownershipAction =
@@ -92,6 +97,7 @@ export const UI_ANALYSIS_ACTIONS = Object.freeze({
   'KUI-L021':
     'Set the typed prop the diagnostic names on the component instead of overriding its token.',
   'KUI-L022': ownershipAction,
+  'KUI-L023': ownershipAction,
 });
 
 const adoptionRules = new Set([
@@ -104,6 +110,7 @@ const adoptionRules = new Set([
   'KUI-L020',
   'KUI-L021',
   'KUI-L022',
+  'KUI-L023',
 ]);
 
 const sourceExtensions = new Set(['.js', '.jsx', '.mjs', '.ts', '.tsx']);
@@ -243,7 +250,7 @@ function reachableStyleFiles(file, imports, styleFacts) {
   return visited;
 }
 
-async function loadCatalogs(profileResult) {
+async function loadCatalogs(profileResult, ownership) {
   const entries = [];
   for (const catalog of profileResult.profile?.catalogs ?? []) {
     const owner = profileResult.provenance[`$catalogs.${catalog.package}`];
@@ -256,8 +263,10 @@ async function loadCatalogs(profileResult) {
         ),
       );
       const selection = await loadSelectionFacts(owner, catalog);
+      const joined = new Set();
       for (const entry of artifact.entries ?? []) {
         const selected = selection.get(entry.key);
+        joined.add(entry.key);
         const componentSource =
           selected?.componentSource ??
           (/\.[cm]?[jt]sx?$/.test(entry.source) ? entry.source : undefined);
@@ -269,10 +278,35 @@ async function loadCatalogs(profileResult) {
                 moduleImports: selected.moduleImports,
                 componentSource,
                 styleSources: entry.styleSources ?? selected.styleSources,
+                catalogDirectory: dirname(owner),
               }
-            : { ...entry, componentSource },
+            : { ...entry, componentSource, catalogDirectory: dirname(owner) },
         );
       }
+      for (const [key, selected] of selection) {
+        if (
+          ownership !== 'component' ||
+          joined.has(key) ||
+          !selected.componentSource
+        )
+          continue;
+        entries.push({
+          key,
+          package: catalog.package,
+          id: selected.id,
+          name: selected.name,
+          kind: selected.kind,
+          componentSource: selected.componentSource,
+          styleSources: selected.styleSources,
+          moduleImports: selected.moduleImports,
+          publicExports: selected.publicExports,
+          boundaries: {
+            publicClasses: selected.publicClasses ?? [],
+            rootElement: selected.rootElement,
+          },
+          catalogDirectory: dirname(owner),
+        });
+      }
     } catch {
       // Profile validation reports the precise catalog load failure.
     }
@@ -299,7 +333,12 @@ async function loadSelectionFacts(owner, catalog) {
   for (const entry of artifact.entries ?? []) {
     const delivery = entry.delivery ?? {};
     facts.set(`${packageName}:${entry.id}`, {
+      id: entry.id,
+      name: entry.name,
+      kind: entry.kind,
       publicExports: entry.publicExports,
+      publicClasses: entry.publicClasses,
+      rootElement: entry.rootElement,
       componentSource: entry.source,
       styleSources: entry.styleSources,
       moduleImports: [delivery.browserImport, delivery.moduleImport].filter(
@@ -429,6 +468,7 @@ function catalogFacts(entries) {
     }
   }
   return {
+    entries,
     publicClasses,
     publicTokens,
     publicParts,
@@ -438,6 +478,129 @@ function catalogFacts(entries) {
   };
 }
 
+const bemBlock = (name) => name.split(/__|--/, 1)[0];
+
+function renderedLiteralClasses(file, source) {
+  const names = new Set();
+  const parsed = ts.createSourceFile(
+    file,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.JSX,
+  );
+  const visit = (node) => {
+    if (
+      ts.isJsxAttribute(node) &&
+      ['class', 'className'].includes(node.name.text)
+    ) {
+      const value =
+        node.initializer && ts.isStringLiteral(node.initializer)
+          ? node.initializer.text
+          : node.initializer &&
+              ts.isJsxExpression(node.initializer) &&
+              node.initializer.expression &&
+              ts.isStringLiteral(node.initializer.expression)
+            ? node.initializer.expression.text
+            : undefined;
+      for (const name of value?.split(/\s+/) ?? []) if (name) names.add(name);
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(parsed);
+  return names;
+}
+
+function inferOwnedClasses(entries, contents, imports) {
+  return entries.map((entry) => {
+    if (!entry.componentSource || !entry.catalogDirectory) return entry;
+    const sourceFile = resolve(entry.catalogDirectory, entry.componentSource);
+    const source = contents.get(sourceFile);
+    if (!source) return entry;
+    const styleFiles = entry.styleSources?.length
+      ? entry.styleSources.map((path) => resolve(entry.catalogDirectory, path))
+      : [...(imports.get(sourceFile) ?? [])];
+    const styleSources = styleFiles.map((file) =>
+      relative(entry.catalogDirectory, file).replaceAll('\\', '/'),
+    );
+    const styledBlocks = new Set();
+    for (const style of styleFiles) {
+      const css = contents.get(style);
+      if (!css) continue;
+      try {
+        postcss.parse(css, { from: style }).walkRules((rule) => {
+          for (const name of subjectClasses(rule.selector))
+            styledBlocks.add(bemBlock(name));
+        });
+      } catch {
+        // The stylesheet parser reports malformed CSS in the normal pass.
+      }
+    }
+    const inferred = [...renderedLiteralClasses(sourceFile, source)].filter(
+      (name) => styledBlocks.has(bemBlock(name)),
+    );
+    if (!inferred.length) return { ...entry, styleSources };
+    return {
+      ...entry,
+      styleSources,
+      boundaries: {
+        ...entry.boundaries,
+        publicClasses: [
+          ...new Set([...(entry.boundaries?.publicClasses ?? []), ...inferred]),
+        ],
+      },
+    };
+  });
+}
+
+async function implicitOwnershipEntries(files, imports, root) {
+  const found = [];
+  const packages = new Map();
+  const packageAt = async (directory) => {
+    if (packages.has(directory)) return packages.get(directory);
+    let result;
+    try {
+      const manifest = JSON.parse(
+        await readFile(resolve(directory, 'package.json'), 'utf8'),
+      );
+      if (typeof manifest.name === 'string')
+        result = { name: manifest.name, directory };
+    } catch {
+      // Search the containing directory for a package manifest.
+    }
+    if (!result && directory !== root) {
+      const parent = dirname(directory);
+      if (!relative(root, parent).startsWith('..'))
+        result = await packageAt(parent);
+    }
+    packages.set(directory, result);
+    return result;
+  };
+  for (const file of files) {
+    if (!sourceExtensions.has(extname(file))) continue;
+    const styles = (imports.get(file) ?? []).filter((path) =>
+      files.includes(path),
+    );
+    if (!styles.length) continue;
+    const owner = await packageAt(dirname(file));
+    if (!owner) continue;
+    const source = relative(owner.directory, file).replaceAll('\\', '/');
+    const id = `module:${source}`;
+    found.push({
+      key: `${owner.name}:${id}`,
+      package: owner.name,
+      id,
+      name: basename(file).replace(/\.[^.]+$/, ''),
+      componentSource: source,
+      catalogDirectory: owner.directory,
+      styleSources: styles.map((style) =>
+        relative(owner.directory, style).replaceAll('\\', '/'),
+      ),
+    });
+  }
+  return found;
+}
+
 function spacingValues(value) {
   const results = [];
   for (const match of value.matchAll(/(-?\d*\.?\d+)(px|rem)\b/g)) {
@@ -480,16 +643,20 @@ function inspectComponentOwnership(
   diagnostics,
   adoption,
   isForeign,
+  ownershipEvidence,
+  ownershipContext,
 ) {
   if (inKeyframes(rule)) return;
   const restyling = restylingDeclarations(rule);
   if (restyling.length === 0) return;
   const properties = [...new Set(restyling.map((decl) => decl.prop))];
-  for (const { entry, via, name } of restyledComponents(
+  const restyled = restyledComponents(
     rule.selector,
     facts.ownership,
     isForeign,
-  ))
+    ownershipEvidence,
+  );
+  for (const { entry, via, name } of restyled)
     diagnostics.push(
       diagnostic(
         'KUI-L019',
@@ -508,6 +675,38 @@ function inspectComponentOwnership(
         adoption,
       ),
     );
+  if (ownershipContext !== 'any' || !ownershipEvidence?.ownPackage) return;
+  for (const { entry, name, position } of contextualComponents(
+    rule.selector,
+    facts.ownership,
+    isForeign,
+    ownershipEvidence.ownPackage,
+  )) {
+    if (position === 'subject') continue;
+    if (
+      restyled.some(
+        (item) => item.entry.key === entry.key && item.name === name,
+      )
+    )
+      continue;
+    diagnostics.push(
+      diagnostic(
+        'KUI-L019',
+        location(file, rule),
+        `\`${name}\` uses ${componentLabel(entry)} as ${position} selector context (${properties.join(', ')}); in strict component ownership, sibling classes cannot key this stylesheet. Configure the component through ${configurationFor(entry)}. ${reportGap(entry)}`,
+        {
+          selector: rule.selector,
+          component: entry.key,
+          via: 'context',
+          position,
+          target: name,
+          properties,
+        },
+        undefined,
+        adoption,
+      ),
+    );
+  }
 }
 
 function inspectVariableOwnership(
@@ -577,6 +776,8 @@ async function inspectCss(
   adoption = false,
   siblingOnLoud = [],
   isForeign = () => true,
+  ownershipEvidence,
+  ownershipContext = 'subject',
 ) {
   let root;
   try {
@@ -609,6 +810,8 @@ async function inspectCss(
       diagnostics,
       adoption,
       isForeign,
+      ownershipEvidence,
+      ownershipContext,
     );
     if (!inKeyframes(rule) && restylingDeclarations(rule).length > 0)
       for (const className of subjects) {
@@ -775,6 +978,164 @@ function literalClasses(attribute) {
   return { values: [], dynamic: true };
 }
 
+function literalClassValues(expression) {
+  if (!expression) return [];
+  if (ts.isStringLiteralLike(expression))
+    return expression.text.split(/\s+/).filter(Boolean);
+  if (ts.isParenthesizedExpression(expression))
+    return literalClassValues(expression.expression);
+  if (ts.isConditionalExpression(expression))
+    return [
+      ...literalClassValues(expression.whenTrue),
+      ...literalClassValues(expression.whenFalse),
+    ];
+  return [];
+}
+
+function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
+  const hooks = new Map();
+  const composedChildren = new Map();
+  const ambiguousHooks = new Set();
+  const ambiguousChildren = new Set();
+  const record = (map, ambiguous, key, entry) => {
+    if (ambiguous.has(key)) return;
+    if (map.has(key) && map.get(key).key !== entry.key) {
+      map.delete(key);
+      ambiguous.add(key);
+    } else map.set(key, entry);
+  };
+  for (const owner of facts.entries) {
+    if (!owner.componentSource || !owner.catalogDirectory) continue;
+    const relativeStyle = relative(owner.catalogDirectory, style).replaceAll(
+      '\\',
+      '/',
+    );
+    if (!owner.styleSources?.includes(relativeStyle)) continue;
+    const file = resolve(owner.catalogDirectory, owner.componentSource);
+    const sourceText = contents.get(file);
+    if (!sourceText) continue;
+    const source = ts.createSourceFile(
+      file,
+      sourceText,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TSX,
+    );
+    const imports = new Map();
+    const namespaces = new Map();
+    const compilerOptions = compilerOptionsFor(file, root, compilerCache);
+    const aliasSource = (module) =>
+      module && !module.startsWith('.') && compilerOptions?.paths
+        ? ts.resolveModuleName(module, file, compilerOptions, ts.sys)
+            .resolvedModule?.resolvedFileName
+        : undefined;
+    for (const statement of source.statements) {
+      if (
+        !ts.isImportDeclaration(statement) ||
+        !ts.isStringLiteral(statement.moduleSpecifier)
+      )
+        continue;
+      const module = statement.moduleSpecifier.text;
+      const bindings = statement.importClause?.namedBindings;
+      if (bindings && ts.isNamespaceImport(bindings)) {
+        namespaces.set(bindings.name.text, module);
+        continue;
+      }
+      if (!bindings || !ts.isNamedImports(bindings)) continue;
+      for (const item of bindings.elements) {
+        const exported = item.propertyName?.text ?? item.name.text;
+        const entry = resolveExportEntry(
+          facts.exportEntries.get(exported),
+          exported,
+          module,
+          file,
+          owner.catalogDirectory,
+          aliasSource(module),
+        );
+        if (entry) imports.set(item.name.text, entry);
+      }
+    }
+    const openingOf = (node) =>
+      ts.isJsxElement(node) ? node.openingElement : node;
+    const entryFor = (opening) => {
+      const tag = opening.tagName.getText(source);
+      if (imports.has(tag)) return imports.get(tag);
+      if (
+        ts.isPropertyAccessExpression(opening.tagName) &&
+        ts.isIdentifier(opening.tagName.expression)
+      ) {
+        const module = namespaces.get(opening.tagName.expression.text);
+        return resolveExportEntry(
+          facts.exportEntries.get(opening.tagName.name.text),
+          opening.tagName.name.text,
+          module,
+          file,
+          owner.catalogDirectory,
+          aliasSource(module),
+        );
+      }
+      return undefined;
+    };
+    const classesOf = (opening) =>
+      literalClasses(
+        opening.attributes.properties.find(
+          (item) =>
+            ts.isJsxAttribute(item) &&
+            ['class', 'className'].includes(item.name.getText(source)),
+        ),
+      ).values;
+    const visit = (node) => {
+      if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const opening = openingOf(node);
+        const entry = entryFor(opening);
+        if (entry)
+          for (const name of classesOf(opening))
+            record(hooks, ambiguousHooks, name, entry);
+        if (ts.isJsxElement(node)) {
+          const parentClasses = classesOf(opening);
+          const possible = new Map();
+          let dynamic = false;
+          for (const child of node.children) {
+            if (ts.isJsxExpression(child) && child.expression) dynamic = true;
+            if (!ts.isJsxElement(child) && !ts.isJsxSelfClosingElement(child))
+              continue;
+            const childOpening = openingOf(child);
+            const childEntry = entryFor(childOpening);
+            const type =
+              childEntry?.boundaries?.rootElement ??
+              (childEntry
+                ? undefined
+                : childOpening.tagName.getText(source).toLowerCase());
+            if (!type) continue;
+            const candidates = possible.get(type) ?? [];
+            candidates.push(childEntry);
+            possible.set(type, candidates);
+          }
+          if (!dynamic)
+            for (const [type, candidates] of possible)
+              if (
+                candidates.length > 0 &&
+                candidates.every(
+                  (candidate) => candidate?.key === candidates[0]?.key,
+                ) &&
+                candidates[0]
+              )
+                for (const name of parentClasses)
+                  record(
+                    composedChildren,
+                    ambiguousChildren,
+                    `${name}|${type}`,
+                    candidates[0],
+                  );
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(source);
+  }
+  return { componentMode: true, hooks, composedChildren };
+}
+
 function cssPreferred(contract) {
   return (
     [
@@ -1004,6 +1365,28 @@ function inspectTsx(
     }
   }
   const stack = [];
+  const borrowed = (className, node, via) => {
+    for (const owner of facts.classEntries.get(className) ?? []) {
+      if (
+        !isForeign(owner) ||
+        owner.boundaries?.placeableClasses?.includes(className)
+      )
+        continue;
+      diagnostics.push(
+        diagnostic(
+          'KUI-L023',
+          location(file, node, source),
+          `\`.${className}\` is rendered in this module's ${via} but belongs to ${componentLabel(owner)}. Render that component or configure it through ${configurationFor(owner)}. ${reportGap(owner)}`,
+          { className, component: owner.key, via },
+          undefined,
+          adoption,
+        ),
+      );
+    }
+  };
+  const borrowedValues = (values, node, via) => {
+    for (const className of new Set(values)) borrowed(className, node, via);
+  };
   const visit = (node) => {
     if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
       const opening = ts.isJsxElement(node) ? node.openingElement : node;
@@ -1028,6 +1411,15 @@ function inspectTsx(
       );
       const classes = literalClasses(classAttribute);
       const at = location(file, opening, source);
+      if (!entry && /^[a-z]/.test(tag))
+        borrowedValues(
+          classAttribute?.initializer &&
+            ts.isJsxExpression(classAttribute.initializer)
+            ? literalClassValues(classAttribute.initializer.expression)
+            : classes.values,
+          classAttribute ?? opening,
+          'JSX markup',
+        );
       if (entry)
         inspectCssValues(
           file,
@@ -1126,6 +1518,36 @@ function inspectTsx(
       return;
     }
     if (ts.isCallExpression(node)) {
+      if (ts.isPropertyAccessExpression(node.expression)) {
+        const method = node.expression.name.text;
+        const receiver = node.expression.expression;
+        if (
+          ts.isPropertyAccessExpression(receiver) &&
+          receiver.name.text === 'classList'
+        ) {
+          const written =
+            method === 'add'
+              ? node.arguments
+              : method === 'toggle'
+                ? node.arguments.slice(0, 1)
+                : method === 'replace'
+                  ? node.arguments.slice(1, 2)
+                  : [];
+          for (const value of written)
+            borrowedValues(literalClassValues(value), value, 'classList write');
+        }
+        if (
+          method === 'setAttribute' &&
+          node.arguments[0] &&
+          ts.isStringLiteralLike(node.arguments[0]) &&
+          node.arguments[0].text === 'class'
+        )
+          borrowedValues(
+            literalClassValues(node.arguments[1]),
+            node.arguments[1] ?? node,
+            'setAttribute write',
+          );
+      }
       const entry = ts.isIdentifier(node.expression)
         ? imports.get(node.expression.text)
         : ts.isPropertyAccessExpression(node.expression) &&
@@ -1150,6 +1572,25 @@ function inspectTsx(
           diagnostics,
         );
     }
+    if (
+      ts.isBinaryExpression(node) &&
+      [ts.SyntaxKind.EqualsToken, ts.SyntaxKind.PlusEqualsToken].includes(
+        node.operatorToken.kind,
+      ) &&
+      ts.isPropertyAccessExpression(node.left) &&
+      node.left.name.text === 'className'
+    )
+      borrowedValues(
+        literalClassValues(node.right),
+        node.right,
+        'className assignment',
+      );
+    if (ts.isStringLiteralLike(node) && node.text.includes('<')) {
+      for (const match of node.text.matchAll(
+        /<[a-z][^>]*\sclass\s*=\s*["']([^"']+)["']/gi,
+      ))
+        borrowedValues(match[1].split(/\s+/).filter(Boolean), node, 'raw HTML');
+    }
     ts.forEachChild(node, visit);
   };
   visit(source);
@@ -1161,6 +1602,8 @@ export async function analyzeUiProject({
   knownRules = [],
   adoption = false,
   ownership = 'package',
+  ownershipContext = 'subject',
+  implicitComponentOwnership = false,
   profile: packageProfile = resolve(
     import.meta.dirname,
     '../ai/application-ui-profile.defaults.json',
@@ -1196,6 +1639,13 @@ export async function analyzeUiProject({
     }
   }
   files.sort();
+  const imports = new Map(
+    files.map((file) => [file, relativeStyleImports(file, contents.get(file))]),
+  );
+  const implicitEntries =
+    ownership === 'component' && implicitComponentOwnership
+      ? await implicitOwnershipEntries(files, imports, root)
+      : [];
   const profileContexts = new Map();
   const loadContext = async (file) => {
     const startDirectory = file === root ? root : dirname(file);
@@ -1209,10 +1659,30 @@ export async function analyzeUiProject({
             packageProfile,
             knownRules: [...Object.keys(UI_ANALYSIS_RULES), ...knownRules],
           });
-          const entries = await loadCatalogs(profileResult);
+          const entries = await loadCatalogs(profileResult, ownership);
+          const catalogedSources = new Set(
+            entries
+              .filter((entry) => entry.componentSource)
+              .map((entry) =>
+                resolve(entry.catalogDirectory, entry.componentSource),
+              ),
+          );
+          const ownershipEntries = [
+            ...entries,
+            ...implicitEntries.filter(
+              (entry) =>
+                !catalogedSources.has(
+                  resolve(entry.catalogDirectory, entry.componentSource),
+                ),
+            ),
+          ];
           return {
             profileResult,
-            facts: catalogFacts(entries),
+            facts: catalogFacts(
+              ownership === 'component'
+                ? inferOwnedClasses(ownershipEntries, contents, imports)
+                : entries,
+            ),
             startDirectory,
           };
         })(),
@@ -1225,9 +1695,6 @@ export async function analyzeUiProject({
     ),
   );
   if (!files.length) await loadContext(root);
-  const imports = new Map(
-    files.map((file) => [file, relativeStyleImports(file, contents.get(file))]),
-  );
   // A stylesheet or source file belongs to the package whose manifest is
   // nearest it; entries of every other catalog package are foreign to it.
   const packages = new Map();
@@ -1375,6 +1842,7 @@ export async function analyzeUiProject({
       : new Set([contexts.get(file)]);
     for (const context of applicableContexts) {
       const fileDiagnostics = [];
+      const own = await packageOf(dirname(file));
       await inspectCss(
         file,
         contents.get(file),
@@ -1384,6 +1852,19 @@ export async function analyzeUiProject({
         adoption,
         siblingOnLoud(file),
         await foreignTo(file),
+        ownership === 'component'
+          ? {
+              ...jsxOwnershipEvidence(
+                file,
+                context.facts,
+                contents,
+                root,
+                compilerOptions,
+              ),
+              ownPackage: own?.name,
+            }
+          : undefined,
+        ownershipContext,
       );
       recordDiagnostics(fileDiagnostics, context);
     }

package/dist/catalog.js

@@ -1,10 +1,10 @@
-import { Workbench } from './chunk-H7IODXGY.js';
+import { Workbench } from './chunk-KCCEH7RF.js';
 
 
 import { PopupMenu } from './chunk-J3KGJ6P6.js';
 
 import { Row } from './chunk-VZOFZPSO.js';
-import { ListHeader } from './chunk-3BCJGM36.js';
+import { ListHeader } from './chunk-M6DEEBEF.js';
 import { Text } from './chunk-YDGNU2OD.js';
 import { ListInsetText } from './chunk-DG6G5EPF.js';
 import { ListItem } from './chunk-NC4CFOID.js';
@@ -20,7 +20,7 @@ import { List } from './chunk-W2AC6Q2A.js';
 
 import { ToolbarControlGroup, ToolbarActionLink } from './chunk-QJ5VFCW3.js';
 import { Toolbar } from './chunk-RGS4WX2M.js';
-import { LucideIcon } from './chunk-MOSIE4Z2.js';
+import { LucideIcon } from './chunk-WTSNV5RG.js';
 
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';