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

package/analyzer/index.mjs

@@ -20,6 +20,7 @@ import {
   componentOwnershipFacts,
   contextualComponents,
   configurationFor,
+  ownsClassBlock,
   privateVariableOwner,
   reportGap,
   restyledComponents,
@@ -114,6 +115,13 @@ const adoptionRules = new Set([
 ]);
 
 const sourceExtensions = new Set(['.js', '.jsx', '.mjs', '.ts', '.tsx']);
+function isTestModule(file) {
+  const path = file.replaceAll('\\', '/');
+  return (
+    /(?:^|\/)__tests__\//.test(path) ||
+    /\.(?:test|spec)\.(?:js|jsx|mjs|ts|tsx)$/.test(path)
+  );
+}
 const spacingProperties = /^(?:margin|padding|gap|inset)(?:-|$)/;
 const approvedSpacing = new Set([0, 4, 8, 16, 24]);
 async function collectFiles(root, paths) {
@@ -441,6 +449,7 @@ function catalogFacts(entries) {
   const publicTokens = new Set();
   const publicParts = new Map();
   const classEntries = new Map();
+  const blockEntries = new Map();
   const exportEntries = new Map();
   const addExport = (name, entry) => {
     const candidates = exportEntries.get(name) ?? [];
@@ -453,11 +462,20 @@ function catalogFacts(entries) {
       const name = typeof item === 'string' ? item : item.name;
       if (isComponentExport(name)) addExport(name, entry);
     }
-    for (const className of entry.boundaries?.publicClasses ?? []) {
+    for (const className of new Set(
+      [
+        entry.boundaries?.rootClass,
+        ...(entry.boundaries?.publicClasses ?? []),
+      ].filter(Boolean),
+    )) {
       publicClasses.add(className);
       const owners = classEntries.get(className) ?? [];
       owners.push(entry);
       classEntries.set(className, owners);
+      const block = bemBlock(className);
+      const blockOwners = blockEntries.get(block) ?? [];
+      if (!blockOwners.includes(entry)) blockOwners.push(entry);
+      blockEntries.set(block, blockOwners);
     }
     for (const token of entry.boundaries?.publicTokens ?? [])
       publicTokens.add(token);
@@ -473,6 +491,7 @@ function catalogFacts(entries) {
     publicTokens,
     publicParts,
     classEntries,
+    blockEntries,
     exportEntries,
     ownership: componentOwnershipFacts(entries),
   };
@@ -553,6 +572,46 @@ function inferOwnedClasses(entries, contents, imports) {
   });
 }
 
+async function ownershipGroupEntries(groups, root, contents) {
+  if (!groups?.length) return [];
+  const manifest = JSON.parse(
+    await readFile(resolve(root, 'package.json'), 'utf8'),
+  );
+  return Promise.all(
+    groups.map(async (group, index) => {
+      const classes = new Set();
+      for (const style of group.styleSources) {
+        const file = resolve(root, style);
+        let css = contents.get(file);
+        if (css === undefined)
+          try {
+            css = await readFile(file, 'utf8');
+          } catch {
+            // A missing configured file owns no classes.
+          }
+        if (!css) continue;
+        try {
+          postcss.parse(css, { from: file }).walkRules((rule) => {
+            for (const name of subjectClasses(rule.selector)) classes.add(name);
+          });
+        } catch {
+          // The normal stylesheet pass reports malformed CSS.
+        }
+      }
+      return {
+        key: `${manifest.name}:ownership-group-${index + 1}`,
+        package: manifest.name,
+        id: `ownership-group-${index + 1}`,
+        name: `Ownership group ${index + 1}`,
+        catalogDirectory: root,
+        styleSources: group.styleSources,
+        ownershipGroupSources: group.sources,
+        boundaries: { publicClasses: [...classes] },
+      };
+    }),
+  );
+}
+
 async function implicitOwnershipEntries(files, imports, root) {
   const found = [];
   const packages = new Map();
@@ -662,7 +721,7 @@ function inspectComponentOwnership(
         'KUI-L019',
         location(file, rule),
         via === 'descendant'
-          ? `\`${name}\` reaches an unclassed descendant inside ${componentLabel(entry)} (${properties.join(', ')}); components own their styles. Configure it through ${configurationFor(entry)}. To place your own content in its context, style your own element. ${reportGap(entry)}`
+          ? `\`${name}\` reaches an unclassed descendant inside ${componentLabel(entry)} (${properties.join(', ')}); components own their styles. Use a child combinator or an own class to target your element, or configure the child through ${configurationFor(entry)}. ${reportGap(entry)}`
           : `\`${name}\` makes ${componentLabel(entry)} the subject of an application rule (${properties.join(', ')}); components own their styles. Configure it through ${configurationFor(entry)}. To place your own content in its context, style your own element (\`${name} > .your-element\`). ${reportGap(entry)}`,
         {
           selector: rule.selector,
@@ -675,12 +734,13 @@ function inspectComponentOwnership(
         adoption,
       ),
     );
-  if (ownershipContext !== 'any' || !ownershipEvidence?.ownPackage) return;
+  if (ownershipContext === 'subject' || !ownershipEvidence?.ownPackage) return;
   for (const { entry, name, position } of contextualComponents(
     rule.selector,
     facts.ownership,
     isForeign,
     ownershipEvidence.ownPackage,
+    ownershipContext === 'any-package',
   )) {
     if (position === 'subject') continue;
     if (
@@ -693,7 +753,7 @@ function inspectComponentOwnership(
       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)}`,
+        `\`${name}\` uses ${componentLabel(entry)} as ${position} selector context (${properties.join(', ')}); foreign component handles cannot key this stylesheet in this ownership mode. Configure the component through ${configurationFor(entry)}. ${reportGap(entry)}`,
         {
           selector: rule.selector,
           component: entry.key,
@@ -995,8 +1055,10 @@ function literalClassValues(expression) {
 function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
   const hooks = new Map();
   const composedChildren = new Map();
+  const composedDescendants = new Map();
   const ambiguousHooks = new Set();
   const ambiguousChildren = new Set();
+  const ambiguousDescendants = new Set();
   const record = (map, ambiguous, key, entry) => {
     if (ambiguous.has(key)) return;
     if (map.has(key) && map.get(key).key !== entry.key) {
@@ -1021,6 +1083,27 @@ function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
       true,
       ts.ScriptKind.TSX,
     );
+    const localComponents = new Map();
+    for (const statement of source.statements) {
+      if (
+        ts.isFunctionDeclaration(statement) &&
+        statement.name &&
+        statement.body
+      )
+        localComponents.set(statement.name.text, statement.body);
+      if (!ts.isVariableStatement(statement)) continue;
+      for (const declaration of statement.declarationList.declarations)
+        if (
+          ts.isIdentifier(declaration.name) &&
+          declaration.initializer &&
+          (ts.isArrowFunction(declaration.initializer) ||
+            ts.isFunctionExpression(declaration.initializer))
+        )
+          localComponents.set(
+            declaration.name.text,
+            declaration.initializer.body,
+          );
+    }
     const imports = new Map();
     const namespaces = new Map();
     const compilerOptions = compilerOptionsFor(file, root, compilerCache);
@@ -1084,6 +1167,82 @@ function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
             ['class', 'className'].includes(item.name.getText(source)),
         ),
       ).values;
+    const returnedJsx = (body) => {
+      if (!ts.isBlock(body)) return [body];
+      const expressions = [];
+      const visitReturns = (node) => {
+        if (ts.isReturnStatement(node)) {
+          if (node.expression) expressions.push(node.expression);
+          return;
+        }
+        if (
+          node !== body &&
+          (ts.isFunctionDeclaration(node) ||
+            ts.isFunctionExpression(node) ||
+            ts.isArrowFunction(node))
+        )
+          return;
+        ts.forEachChild(node, visitReturns);
+      };
+      visitReturns(body);
+      return expressions;
+    };
+    const localReturns = (opening, seen) => {
+      const name = opening.tagName.getText(source);
+      const body = localComponents.get(name);
+      if (!body || seen.has(name)) return undefined;
+      return { name, expressions: returnedJsx(body) };
+    };
+    const composedBelow = (node, found, seen = new Set()) => {
+      if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const opening = openingOf(node);
+        const entry = entryFor(opening);
+        if (entry) {
+          for (const type of [
+            entry.boundaries?.rootElement,
+            ...(entry.boundaries?.descendantElements ?? []),
+          ]) {
+            if (!type) continue;
+            const entries = found.get(type) ?? new Set();
+            entries.add(entry);
+            found.set(type, entries);
+          }
+          return;
+        }
+        const local = localReturns(opening, seen);
+        if (local) {
+          const next = new Set([...seen, local.name]);
+          for (const expression of local.expressions)
+            composedBelow(expression, found, next);
+          return;
+        }
+        if (ts.isJsxElement(node))
+          for (const child of node.children) composedBelow(child, found, seen);
+        return;
+      }
+      if (ts.isJsxFragment(node)) {
+        for (const child of node.children) composedBelow(child, found, seen);
+        return;
+      }
+      ts.forEachChild(node, (child) => composedBelow(child, found, seen));
+    };
+    const expandedRoots = (node, seen = new Set()) => {
+      if (ts.isJsxFragment(node))
+        return node.children.flatMap((child) => expandedRoots(child, seen));
+      if (!ts.isJsxElement(node) && !ts.isJsxSelfClosingElement(node)) {
+        const roots = [];
+        ts.forEachChild(node, (child) =>
+          roots.push(...expandedRoots(child, seen)),
+        );
+        return roots;
+      }
+      const local = localReturns(openingOf(node), seen);
+      if (!local) return [node];
+      const next = new Set([...seen, local.name]);
+      return local.expressions.flatMap((expression) =>
+        expandedRoots(expression, next),
+      );
+    };
     const visit = (node) => {
       if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
         const opening = openingOf(node);
@@ -1093,23 +1252,39 @@ function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
             record(hooks, ambiguousHooks, name, entry);
         if (ts.isJsxElement(node)) {
           const parentClasses = classesOf(opening);
+          if (parentClasses.length) {
+            const descendants = new Map();
+            for (const child of node.children)
+              composedBelow(child, descendants);
+            for (const [type, entries] of descendants)
+              for (const entry of entries)
+                for (const name of parentClasses)
+                  record(
+                    composedDescendants,
+                    ambiguousDescendants,
+                    `${name}|${type}`,
+                    entry,
+                  );
+          }
           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);
+            for (const root of expandedRoots(child)) {
+              const childOpening = openingOf(root);
+              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)
@@ -1133,7 +1308,7 @@ function jsxOwnershipEvidence(style, facts, contents, root, compilerCache) {
     };
     visit(source);
   }
-  return { componentMode: true, hooks, composedChildren };
+  return { componentMode: true, hooks, composedChildren, composedDescendants };
 }
 
 function cssPreferred(contract) {
@@ -1308,6 +1483,7 @@ function inspectTsx(
   isForeign = () => true,
   packageDirectory,
   compilerOptions,
+  componentMode = false,
 ) {
   const source = ts.createSourceFile(
     file,
@@ -1365,10 +1541,18 @@ function inspectTsx(
     }
   }
   const stack = [];
+  const inspectBorrowedMarkup = !isTestModule(file);
   const borrowed = (className, node, via) => {
-    for (const owner of facts.classEntries.get(className) ?? []) {
+    if (!inspectBorrowedMarkup) return;
+    const owners =
+      facts.classEntries.get(className) ??
+      (componentMode && bemBlock(className) !== className
+        ? facts.blockEntries.get(bemBlock(className))
+        : undefined) ??
+      [];
+    for (const owner of owners) {
       if (
-        !isForeign(owner) ||
+        !isForeign(owner, className) ||
         owner.boundaries?.placeableClasses?.includes(className)
       )
         continue;
@@ -1387,6 +1571,22 @@ function inspectTsx(
   const borrowedValues = (values, node, via) => {
     for (const className of new Set(values)) borrowed(className, node, via);
   };
+  const templateGap = '\uE000';
+  const rawHtmlClasses = (value) => {
+    const classes = [];
+    for (const match of value.matchAll(
+      /<[a-z][^>]*\sclass\s*=\s*["']([^"']+)["']/gi,
+    )) {
+      const pieces = match[1].split(templateGap);
+      for (const [index, piece] of pieces.entries()) {
+        const words = piece.split(/\s+/).filter(Boolean);
+        if (index > 0 && !/^\s/.test(piece)) words.shift();
+        if (index < pieces.length - 1 && !/\s$/.test(piece)) words.pop();
+        classes.push(...words);
+      }
+    }
+    return classes;
+  };
   const visit = (node) => {
     if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
       const opening = ts.isJsxElement(node) ? node.openingElement : node;
@@ -1411,7 +1611,7 @@ function inspectTsx(
       );
       const classes = literalClasses(classAttribute);
       const at = location(file, opening, source);
-      if (!entry && /^[a-z]/.test(tag))
+      if ((!entry && /^[a-z]/.test(tag)) || (componentMode && entry))
         borrowedValues(
           classAttribute?.initializer &&
             ts.isJsxExpression(classAttribute.initializer)
@@ -1432,7 +1632,8 @@ function inspectTsx(
         );
       if (entry && isForeign(entry))
         for (const className of classes.values) {
-          if (facts.ownership.classOwners.has(className)) continue;
+          if (ownsClassBlock(facts.ownership, className, componentMode))
+            continue;
           const styled = cssFacts.get(className)?.styled;
           if (!styled) continue;
           diagnostics.push(
@@ -1585,11 +1786,15 @@ function inspectTsx(
         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');
+    if (ts.isStringLiteralLike(node) && node.text.includes('<'))
+      borrowedValues(rawHtmlClasses(node.text), node, 'raw HTML');
+    if (ts.isTemplateExpression(node)) {
+      const staticHtml = [
+        node.head.text,
+        ...node.templateSpans.map((span) => span.literal.text),
+      ].join(templateGap);
+      if (staticHtml.includes('<'))
+        borrowedValues(rawHtmlClasses(staticHtml), node, 'raw HTML');
     }
     ts.forEachChild(node, visit);
   };
@@ -1604,6 +1809,7 @@ export async function analyzeUiProject({
   ownership = 'package',
   ownershipContext = 'subject',
   implicitComponentOwnership = false,
+  ownershipGroups = [],
   profile: packageProfile = resolve(
     import.meta.dirname,
     '../ai/application-ui-profile.defaults.json',
@@ -1646,6 +1852,10 @@ export async function analyzeUiProject({
     ownership === 'component' && implicitComponentOwnership
       ? await implicitOwnershipEntries(files, imports, root)
       : [];
+  const groupEntries =
+    ownership === 'component'
+      ? await ownershipGroupEntries(ownershipGroups, root, contents)
+      : [];
   const profileContexts = new Map();
   const loadContext = async (file) => {
     const startDirectory = file === root ? root : dirname(file);
@@ -1669,6 +1879,7 @@ export async function analyzeUiProject({
           );
           const ownershipEntries = [
             ...entries,
+            ...groupEntries,
             ...implicitEntries.filter(
               (entry) =>
                 !catalogedSources.has(
@@ -1726,12 +1937,69 @@ export async function analyzeUiProject({
       );
     return packages.get(directory);
   };
-  const foreignTo = async (file) => {
+  const styledBlocksByFile = new Map();
+  const styledBlocksIn = (style) => {
+    if (!styledBlocksByFile.has(style)) {
+      const blocks = new Set();
+      const css = contents.get(style);
+      if (css)
+        try {
+          postcss.parse(css, { from: style }).walkRules((rule) => {
+            for (const name of subjectClasses(rule.selector))
+              blocks.add(bemBlock(name));
+          });
+        } catch {
+          // Malformed CSS is reported by the normal inspection pass.
+        }
+      styledBlocksByFile.set(style, blocks);
+    }
+    return styledBlocksByFile.get(style);
+  };
+  const foreignTo = async (file, facts) => {
     const own = await packageOf(dirname(file));
     const source = own && relative(own.directory, file).replaceAll('\\', '/');
-    return (entry) => {
+    const ownedStyles = new Set(imports.get(file) ?? []);
+    if (ownership === 'component' && !file.endsWith('.css'))
+      for (const entry of facts.entries) {
+        if (
+          entry.package !== own?.name ||
+          !entry.componentSource ||
+          !entry.catalogDirectory ||
+          resolve(entry.catalogDirectory, entry.componentSource) !== file
+        )
+          continue;
+        for (const style of entry.styleSources ?? [])
+          ownedStyles.add(resolve(entry.catalogDirectory, style));
+      }
+    return (entry, className) => {
       if (entry.package !== own?.name) return true;
       if (ownership !== 'component') return false;
+      if (entry.ownershipGroupSources) {
+        const relativeFile = relative(entry.catalogDirectory, file).replaceAll(
+          '\\',
+          '/',
+        );
+        if (file.endsWith('.css'))
+          return !entry.styleSources?.includes(relativeFile);
+        return !entry.ownershipGroupSources.some((path) =>
+          path.endsWith('/')
+            ? relativeFile.startsWith(path)
+            : relativeFile === path,
+        );
+      }
+      if (
+        !file.endsWith('.css') &&
+        className &&
+        entry.catalogDirectory &&
+        entry.styleSources?.some((style) => {
+          const path = resolve(entry.catalogDirectory, style);
+          return (
+            ownedStyles.has(path) &&
+            styledBlocksIn(path).has(bemBlock(className))
+          );
+        })
+      )
+        return false;
       const ownedSources = file.endsWith('.css')
         ? entry.styleSources
         : [entry.componentSource];
@@ -1830,9 +2098,10 @@ export async function analyzeUiProject({
       reachableStyleFacts(file, imports, styleFacts),
       fileDiagnostics,
       adoption,
-      await foreignTo(file),
+      await foreignTo(file, context.facts),
       own?.directory,
       compilerOptionsFor(file, root, compilerOptions),
+      ownership === 'component',
     );
     recordDiagnostics(fileDiagnostics, context);
   }
@@ -1851,7 +2120,7 @@ export async function analyzeUiProject({
         new Map(),
         adoption,
         siblingOnLoud(file),
-        await foreignTo(file),
+        await foreignTo(file, context.facts),
         ownership === 'component'
           ? {
               ...jsxOwnershipEvidence(

package/dist/catalog.js

@@ -1,4 +1,4 @@
-import { Workbench } from './chunk-KCCEH7RF.js';
+import { Workbench } from './chunk-3UE24JSC.js';
 
 
 import { PopupMenu } from './chunk-J3KGJ6P6.js';
@@ -8,7 +8,7 @@ import { ListHeader } from './chunk-M6DEEBEF.js';
 import { Text } from './chunk-YDGNU2OD.js';
 import { ListInsetText } from './chunk-DG6G5EPF.js';
 import { ListItem } from './chunk-NC4CFOID.js';
-import { ToolbarText } from './chunk-V3DX3K65.js';
+import { ToolbarText } from './chunk-R5F5XUJ7.js';
 
 
 

package/dist/{chunk-KCCEH7RF.js → chunk-3UE24JSC.js}

@@ -1,5 +1,5 @@
 import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-PSHUSWQH.js';
-import { NavStack } from './chunk-DC6CN2DS.js';
+import { NavStack } from './chunk-VLYIPBCQ.js';
 import { clampRegionSize, ResizeGrip } from './chunk-KLJKU6ZL.js';
 import { FloatingToolbar } from './chunk-I3Q7KKYM.js';
 import { panelToggleGroup, composedPanelBody, relocatedPanelGroups } from './chunk-RNQNEENY.js';
@@ -489,4 +489,4 @@ function Workbench({
 
 export { Workbench };
 
-//# sourceMappingURL=chunk-KCCEH7RF.js.map
+//# sourceMappingURL=chunk-3UE24JSC.js.map