@chemx/create-chemx 26.9.16-1249 → 26.9.16-1408

package/README.md

@@ -1,5 +1,9 @@
 # Chemical X Protocol: Starter Kit
 
+<p align="center">
+  <img src="./assets/chemx-starter-kit-logo.gif" alt="Chemical X Starter Kit Comic Logo" width="380" />
+</p>
+
 [![Live App](https://img.shields.io/badge/Web%20App-chemicalx.xophz.com-06b6d4?style=for-the-badge&logo=cloudflare)](https://chemicalx.xophz.com)
 [![Parent Repo](https://img.shields.io/badge/Repository-awesome--secret--sauce-8b5cf6?style=for-the-badge)](https://github.com/Chemical-X-Protocol/awesome-secret-sauce)
 [![Benchmarks](https://img.shields.io/badge/Benchmarks-Agent%20Evaluations-10b981?style=for-the-badge)](https://github.com/Chemical-X-Protocol/benchmarks)

package/cli/audit/pattern-detector.js

@@ -49,9 +49,10 @@ export const createPatternRegistry = () => {
         suggestedCapsule = 'types/state.d.ts';
         recommendation = 'Extract shared discriminated union into domain types to eliminate duplicate definitions';
       } else if (bucket.type === 'UI_STRUCTURE') {
-        label = `Shared UI Layout Structure (${bucket.detail})`;
-        suggestedCapsule = 'm-feature-card';
-        recommendation = 'Extract canonical molecule capsule before slicing consumer monoliths';
+        const categorization = categorizeUiStructure(bucket.detail);
+        label = categorization.label;
+        suggestedCapsule = categorization.suggestedCapsule;
+        recommendation = categorization.recommendation;
       } else if (bucket.type === 'PREDICATE_LOGIC') {
         label = `Duplicated Boolean Predicate Topology (${bucket.detail})`;
         suggestedCapsule = 'usePredicateFilter.ts';
@@ -84,6 +85,92 @@ export const createPatternRegistry = () => {
   return { record, resolveHarmonizationCandidates };
 };
 
+export const categorizeUiStructure = (signature = '') => {
+  const normalized = signature.toLowerCase();
+
+  const isSvg =
+    normalized.startsWith('svg>') ||
+    normalized.includes('path+path') ||
+    normalized.includes('polygon') ||
+    normalized.includes('circle');
+  if (isSvg) {
+    const isMultiLayer = (normalized.match(/path|circle|rect|polygon|g/g) || []).length > 3;
+    return {
+      label: `Shared Vector Glyph (${signature})`,
+      suggestedCapsule: isMultiLayer ? 'm-vector-glyph' : 'a-icon',
+      recommendation: 'Extract foundational icon atom or vector glyph capsule'
+    };
+  }
+
+  const hasButton =
+    normalized.includes('btn') ||
+    normalized.includes('button');
+  if (hasButton) {
+    const hasTextOrTitle =
+      normalized.includes('span') ||
+      normalized.includes('title') ||
+      normalized.includes('h1') ||
+      normalized.includes('h2') ||
+      normalized.includes('h3') ||
+      normalized.includes('h4') ||
+      normalized.includes('p');
+
+    if (hasTextOrTitle) {
+      return {
+        label: `Shared Action Header (${signature})`,
+        suggestedCapsule: 'm-action-header',
+        recommendation: 'Extract action header molecule capsule to standardize button actions'
+      };
+    }
+
+    return {
+      label: `Shared Button Row (${signature})`,
+      suggestedCapsule: 'm-button-row',
+      recommendation: 'Extract button row molecule capsule to consolidate action bar'
+    };
+  }
+
+  const hasChipOrBadge =
+    normalized.includes('chip') ||
+    normalized.includes('badge') ||
+    normalized.includes('pill') ||
+    normalized.includes('tag');
+  if (hasChipOrBadge) {
+    const chipCount = (normalized.match(/chip|badge|pill|tag/g) || []).length;
+    if (chipCount > 1) {
+      return {
+        label: `Shared Pill Row (${signature})`,
+        suggestedCapsule: 'm-pill-row',
+        recommendation: 'Extract pill row molecule capsule to group status indicators'
+      };
+    }
+
+    return {
+      label: `Shared Status Badge (${signature})`,
+      suggestedCapsule: 'm-status-badge',
+      recommendation: 'Extract status badge atom or capsule to unify state tags'
+    };
+  }
+
+  const hasFormInput =
+    normalized.includes('input') ||
+    normalized.includes('textarea') ||
+    normalized.includes('select');
+  if (hasFormInput) {
+    return {
+      label: `Shared Form Field (${signature})`,
+      suggestedCapsule: 'm-form-field',
+      recommendation: 'Extract form field molecule encapsulating label and input atom'
+    };
+  }
+
+  return {
+    label: `Shared UI Layout Structure (${signature})`,
+    suggestedCapsule: 'm-feature-card',
+    recommendation: 'Extract canonical molecule capsule before slicing consumer monoliths'
+  };
+};
+
 const VOID_ELEMENTS = new Set([
   'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'
 ]);

package/cli/audit/pattern-detector.spec.js

@@ -4,7 +4,8 @@ import {
   createPatternRegistry,
   extractTemplateTokens,
   buildTagTree,
-  recordTemplatePatterns
+  recordTemplatePatterns,
+  categorizeUiStructure
 } from './pattern-detector.js';
 
 test('extractTemplateTokens: extracts tags, ignoring comments and handling quotes', () => {
@@ -56,6 +57,40 @@ test('buildTagTree and recordTemplatePatterns: captures UI_STRUCTURE from Vue te
 
   assert.ok(uiCandidate, 'Expected UI_STRUCTURE candidate to be found');
   assert.equal(uiCandidate.detail, 'v-sheet>(x-btn+x-btn)');
+  assert.equal(uiCandidate.suggestedCapsule, 'm-button-row');
   assert.equal(uiCandidate.fileCount, 2);
   assert.deepEqual(uiCandidate.uniqueFiles.sort(), ['src/components/A.vue', 'src/components/B.vue']);
 });
+
+test('categorizeUiStructure: maps semantic AST topologies to specialized capsules', () => {
+  // SVG dual path -> a-icon
+  const svgRes = categorizeUiStructure('svg>(path+path)');
+  assert.equal(svgRes.suggestedCapsule, 'a-icon');
+  assert.ok(svgRes.label.includes('Vector Glyph'));
+
+  // Action header -> m-action-header
+  const actionRes = categorizeUiStructure('div>(span+v-btn)');
+  assert.equal(actionRes.suggestedCapsule, 'm-action-header');
+  assert.ok(actionRes.label.includes('Action Header'));
+
+  // Button row -> m-button-row
+  const btnRowRes = categorizeUiStructure('div>(v-btn+v-btn)');
+  assert.equal(btnRowRes.suggestedCapsule, 'm-button-row');
+
+  // Status badge -> m-status-badge
+  const badgeRes = categorizeUiStructure('div>(span+v-chip)');
+  assert.equal(badgeRes.suggestedCapsule, 'm-status-badge');
+
+  // Pill row -> m-pill-row
+  const pillRowRes = categorizeUiStructure('div>(v-chip+v-chip)');
+  assert.equal(pillRowRes.suggestedCapsule, 'm-pill-row');
+
+  // Form field -> m-form-field
+  const formRes = categorizeUiStructure('div>(label+input)');
+  assert.equal(formRes.suggestedCapsule, 'm-form-field');
+
+  // Fallback -> m-feature-card
+  const fallbackRes = categorizeUiStructure('div>(div+div)');
+  assert.equal(fallbackRes.suggestedCapsule, 'm-feature-card');
+});
+

package/cli/mcp/tools.js

@@ -184,13 +184,23 @@ const handleQueryPatterns = (args = {}, cwd = process.cwd()) => {
       };
 
       if (isCompact) {
+        const sampleOccurrences = [];
+        const seenSampleFiles = new Set();
+        for (const occ of (p.occurrences || [])) {
+          if (!seenSampleFiles.has(occ.filePath)) {
+            seenSampleFiles.add(occ.filePath);
+            sampleOccurrences.push({
+              file: occ.filePath,
+              line: occ.line
+            });
+            if (sampleOccurrences.length >= 3) break;
+          }
+        }
+
         return {
           ...base,
           files: p.uniqueFiles || Array.from(new Set((p.occurrences || []).map((o) => o.filePath))),
-          sampleOccurrences: (p.occurrences || []).slice(0, 3).map((o) => ({
-            file: o.filePath,
-            line: o.line
-          }))
+          sampleOccurrences
         };
       }
 

package/cli/project-detector.js

@@ -51,9 +51,15 @@ export const detectInstalledFamily = (cwd = process.cwd()) => {
     const atomsCandidate = ATOMS_PACKAGES.find((name) => Boolean(deps[name]));
     const paletteCandidate = PALETTE_PACKAGES.find((name) => Boolean(deps[name]));
 
+    const localAtomsCandidate =
+      fs.existsSync(path.resolve(cwd, 'src/components/atoms')) ? '@/components/atoms' :
+      fs.existsSync(path.resolve(cwd, 'src/atoms')) ? '@/atoms' : null;
+
+    const resolvedAtomsPackage = atomsCandidate || localAtomsCandidate || null;
+
     return {
-      hasAtoms: Boolean(atomsCandidate),
-      atomsPackage: atomsCandidate || null,
+      hasAtoms: Boolean(resolvedAtomsPackage),
+      atomsPackage: resolvedAtomsPackage,
       hasPalette: Boolean(paletteCandidate),
       palettePackage: paletteCandidate || null
     };

package/cli/project-detector.spec.js

@@ -102,3 +102,22 @@ test('project-detector: detectInstalledFamily discovers @chemx/x-atoms and @chem
 
   fs.rmSync(tmpDir, { recursive: true, force: true });
 });
+
+test('project-detector: detectInstalledFamily falls back to local components/atoms facade', () => {
+  const tmpDir = path.resolve(process.cwd(), 'scratch/test-detector-local-atoms');
+  if (fs.existsSync(tmpDir)) fs.rmSync(tmpDir, { recursive: true, force: true });
+  fs.mkdirSync(path.join(tmpDir, 'src/components/atoms'), { recursive: true });
+
+  fs.writeFileSync(
+    path.join(tmpDir, 'package.json'),
+    JSON.stringify({ dependencies: {} }),
+    'utf-8'
+  );
+
+  const family = detectInstalledFamily(tmpDir);
+  assert.strictEqual(family.hasAtoms, true);
+  assert.strictEqual(family.atomsPackage, '@/components/atoms');
+
+  fs.rmSync(tmpDir, { recursive: true, force: true });
+});
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chemx/create-chemx",
-  "version": "26.9.16-1249",
+  "version": "26.9.16-1408",
   "description": "Chemical X Protocol: Private drop-in architecture starter kit and capsule generator",
   "type": "module",
   "bin": {
@@ -25,7 +25,8 @@
     "scripts",
     "README.md",
     "LICENSE",
-    "docs"
+    "docs",
+    "assets"
   ],
   "exports": {
     ".": "./cli/index.js",