@fragments-sdk/cli 0.6.0 → 0.7.0

package/dist/{chunk-D35RGPAG.js → chunk-7OPWMLOE.js}

@@ -19,11 +19,11 @@ import {
   generateRegistry,
   loadSegmentFile,
   parseSegmentFile
-} from "./chunk-SSLQXHNX.js";
+} from "./chunk-CVXKXVOY.js";
 import {
   compileBlock,
   parseTokenFile
-} from "./chunk-Q7GOHVOK.js";
+} from "./chunk-TJ34N7C7.js";
 import {
   BRAND,
   DEFAULTS,
@@ -120,8 +120,8 @@ async function validateAll(config, configDir) {
 
 // src/build.ts
 import { readFile, writeFile, mkdir } from "fs/promises";
-import { resolve as resolve2, join as join2 } from "path";
-import { existsSync as existsSync2 } from "fs";
+import { resolve as resolve3, join as join3 } from "path";
+import { existsSync as existsSync3 } from "fs";
 
 // src/core/auto-props.ts
 import { existsSync, statSync } from "fs";
@@ -429,7 +429,391 @@ function extractCustomPropsFromComponentFile(componentFilePath, exportName) {
   };
 }
 
+// src/core/graph-extractor.ts
+import ts2 from "typescript";
+import { readFileSync, existsSync as existsSync2 } from "fs";
+import { join as join2 } from "path";
+import { readdirSync } from "fs";
+import { EDGE_TYPE_WEIGHTS, computeHealthFromData } from "@fragments-sdk/context/graph";
+async function buildComponentGraph(segments, blocks, componentDir, options) {
+  const knownComponents = new Set(Object.keys(segments));
+  const allEdges = [];
+  const autoDetected = /* @__PURE__ */ new Map();
+  const warnings = [];
+  if (!options?.skipSourceAnalysis) {
+    const sourceEdges = extractImportAndHookEdges(componentDir, knownComponents);
+    allEdges.push(...sourceEdges);
+    const subComponentResults = extractSubComponents(componentDir, knownComponents);
+    for (const [name, subs] of subComponentResults) {
+      autoDetected.set(name, {
+        ...autoDetected.get(name),
+        subComponents: subs,
+        compositionPattern: subs.length > 0 ? "compound" : "simple"
+      });
+    }
+  }
+  const jsxEdges = extractJsxUsageEdges(segments, knownComponents);
+  allEdges.push(...jsxEdges);
+  const blockEdges = extractBlockEdges(blocks);
+  allEdges.push(...blockEdges);
+  const relationEdges = extractRelationEdges(segments);
+  allEdges.push(...relationEdges);
+  const requiredChildrenMap = inferRequiredChildren(segments, autoDetected);
+  for (const [name, children] of requiredChildrenMap) {
+    const existing = autoDetected.get(name) ?? {};
+    autoDetected.set(name, { ...existing, requiredChildren: children });
+  }
+  const patternsMap = generateCommonPatterns(segments, autoDetected);
+  for (const [name, patterns] of patternsMap) {
+    const existing = autoDetected.get(name) ?? {};
+    autoDetected.set(name, { ...existing, commonPatterns: patterns });
+  }
+  const mergedEdges = mergeAndDeduplicate(allEdges);
+  const nodes = Object.entries(segments).map(([name, segment]) => {
+    const detected = autoDetected.get(name);
+    return {
+      name,
+      category: segment.meta.category,
+      status: segment.meta.status ?? "stable",
+      compositionPattern: segment.ai?.compositionPattern ?? detected?.compositionPattern,
+      subComponents: segment.ai?.subComponents ?? detected?.subComponents
+    };
+  });
+  const blockIndex = /* @__PURE__ */ new Map();
+  for (const [blockName, block] of Object.entries(blocks)) {
+    for (const comp of block.components) {
+      const existing = blockIndex.get(comp);
+      if (existing) existing.push(blockName);
+      else blockIndex.set(comp, [blockName]);
+    }
+  }
+  const health = computeHealthFromData(nodes, mergedEdges, blockIndex);
+  for (const [name, segment] of Object.entries(segments)) {
+    const detected = autoDetected.get(name);
+    if (!detected) continue;
+    if (segment.ai?.subComponents && detected.subComponents) {
+      const declared = new Set(segment.ai.subComponents);
+      const found = new Set(detected.subComponents);
+      const missing = detected.subComponents.filter((s) => !declared.has(s));
+      const extra = segment.ai.subComponents.filter((s) => !found.has(s));
+      if (missing.length > 0) {
+        warnings.push(
+          `${name}: declares ${declared.size} subComponents but code has ${found.size}. Missing from declaration: ${missing.join(", ")}`
+        );
+      }
+      if (extra.length > 0) {
+        warnings.push(
+          `${name}: declares subComponents [${extra.join(", ")}] not found in Object.assign`
+        );
+      }
+    }
+  }
+  return {
+    graph: { nodes, edges: mergedEdges, health },
+    autoDetected,
+    warnings
+  };
+}
+function extractImportAndHookEdges(componentDir, knownComponents) {
+  const edges = [];
+  for (const componentName of knownComponents) {
+    const indexPath = findComponentIndex(componentDir, componentName);
+    if (!indexPath) continue;
+    let sourceText;
+    try {
+      sourceText = readFileSync(indexPath, "utf-8");
+    } catch {
+      continue;
+    }
+    const sourceFile = ts2.createSourceFile(
+      indexPath,
+      sourceText,
+      ts2.ScriptTarget.Latest,
+      true,
+      indexPath.endsWith(".tsx") ? ts2.ScriptKind.TSX : ts2.ScriptKind.TS
+    );
+    const visitNode = (node) => {
+      if (ts2.isImportDeclaration(node)) {
+        const moduleSpecifier = node.moduleSpecifier;
+        if (ts2.isStringLiteral(moduleSpecifier)) {
+          const importPath = moduleSpecifier.text;
+          if (importPath.startsWith(".") || importPath.startsWith("/")) {
+            const clause = node.importClause;
+            if (clause) {
+              if (clause.name && isPascalCase(clause.name.text) && knownComponents.has(clause.name.text)) {
+                edges.push({
+                  source: componentName,
+                  target: clause.name.text,
+                  type: "imports",
+                  weight: EDGE_TYPE_WEIGHTS["imports"],
+                  provenance: `source:${componentName}/index.tsx`
+                });
+              }
+              if (clause.namedBindings && ts2.isNamedImports(clause.namedBindings)) {
+                for (const element of clause.namedBindings.elements) {
+                  const name = element.name.text;
+                  if (isPascalCase(name) && knownComponents.has(name) && name !== componentName) {
+                    edges.push({
+                      source: componentName,
+                      target: name,
+                      type: "imports",
+                      weight: EDGE_TYPE_WEIGHTS["imports"],
+                      provenance: `source:${componentName}/index.tsx`
+                    });
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      if (ts2.isCallExpression(node) && ts2.isIdentifier(node.expression)) {
+        const callName = node.expression.text;
+        const hookMatch = callName.match(/^use([A-Z][a-zA-Z]*)$/);
+        if (hookMatch) {
+          const hookTarget = hookMatch[1];
+          if (knownComponents.has(hookTarget) && hookTarget !== componentName) {
+            edges.push({
+              source: componentName,
+              target: hookTarget,
+              type: "hook-depends",
+              weight: EDGE_TYPE_WEIGHTS["hook-depends"],
+              provenance: `source:${componentName}/index.tsx`
+            });
+          }
+        }
+      }
+      ts2.forEachChild(node, visitNode);
+    };
+    ts2.forEachChild(sourceFile, visitNode);
+  }
+  return edges;
+}
+function extractSubComponents(componentDir, knownComponents) {
+  const result = /* @__PURE__ */ new Map();
+  for (const componentName of knownComponents) {
+    const indexPath = findComponentIndex(componentDir, componentName);
+    if (!indexPath) continue;
+    let sourceText;
+    try {
+      sourceText = readFileSync(indexPath, "utf-8");
+    } catch {
+      continue;
+    }
+    if (!sourceText.includes("Object.assign")) continue;
+    const sourceFile = ts2.createSourceFile(
+      indexPath,
+      sourceText,
+      ts2.ScriptTarget.Latest,
+      true,
+      indexPath.endsWith(".tsx") ? ts2.ScriptKind.TSX : ts2.ScriptKind.TS
+    );
+    const subComponents = [];
+    const visitNode = (node) => {
+      if (ts2.isCallExpression(node) && ts2.isPropertyAccessExpression(node.expression) && ts2.isIdentifier(node.expression.expression) && node.expression.expression.text === "Object" && node.expression.name.text === "assign" && node.arguments.length >= 2) {
+        const propsArg = node.arguments[1];
+        if (ts2.isObjectLiteralExpression(propsArg)) {
+          for (const prop of propsArg.properties) {
+            if (ts2.isShorthandPropertyAssignment(prop)) {
+              subComponents.push(prop.name.text);
+            } else if (ts2.isPropertyAssignment(prop) && ts2.isIdentifier(prop.name)) {
+              subComponents.push(prop.name.text);
+            }
+          }
+        }
+      }
+      ts2.forEachChild(node, visitNode);
+    };
+    ts2.forEachChild(sourceFile, visitNode);
+    if (subComponents.length > 0) {
+      result.set(componentName, subComponents);
+    }
+  }
+  return result;
+}
+function extractJsxUsageEdges(segments, knownComponents) {
+  const edges = [];
+  const jsxTagRegex = /<([A-Z][a-zA-Z]*(?:\.[A-Z][a-zA-Z]*)?)/g;
+  for (const [name, segment] of Object.entries(segments)) {
+    const usedComponents = /* @__PURE__ */ new Set();
+    for (const variant of segment.variants) {
+      if (!variant.code) continue;
+      let match;
+      jsxTagRegex.lastIndex = 0;
+      while ((match = jsxTagRegex.exec(variant.code)) !== null) {
+        let tagName = match[1];
+        if (tagName.includes(".")) {
+          tagName = tagName.split(".")[0];
+        }
+        if (knownComponents.has(tagName) && tagName !== name) {
+          usedComponents.add(tagName);
+        }
+      }
+    }
+    for (const target of usedComponents) {
+      edges.push({
+        source: name,
+        target,
+        type: "renders",
+        weight: EDGE_TYPE_WEIGHTS["renders"],
+        provenance: `variant:${name}`
+      });
+    }
+  }
+  return edges;
+}
+function extractBlockEdges(blocks) {
+  const edges = [];
+  for (const [blockName, block] of Object.entries(blocks)) {
+    const components = block.components;
+    for (let i = 0; i < components.length; i++) {
+      for (let j = i + 1; j < components.length; j++) {
+        edges.push({
+          source: components[i],
+          target: components[j],
+          type: "composes",
+          weight: EDGE_TYPE_WEIGHTS["composes"],
+          provenance: `block:${blockName}`
+        });
+      }
+    }
+  }
+  return edges;
+}
+function extractRelationEdges(segments) {
+  const edges = [];
+  const relationToEdgeType = {
+    parent: "parent-of",
+    child: "parent-of",
+    // reversed: if A declares child B, edge is A parent-of B
+    composition: "composes",
+    alternative: "alternative-to",
+    sibling: "sibling-of"
+  };
+  for (const [name, segment] of Object.entries(segments)) {
+    if (!segment.relations) continue;
+    for (const rel of segment.relations) {
+      const edgeType = relationToEdgeType[rel.relationship];
+      if (!edgeType) continue;
+      let source;
+      let target;
+      if (rel.relationship === "parent") {
+        source = rel.component;
+        target = name;
+      } else {
+        source = name;
+        target = rel.component;
+      }
+      edges.push({
+        source,
+        target,
+        type: edgeType,
+        weight: EDGE_TYPE_WEIGHTS[edgeType],
+        note: rel.note,
+        provenance: "relation"
+      });
+    }
+  }
+  return edges;
+}
+function inferRequiredChildren(segments, autoDetected) {
+  const result = /* @__PURE__ */ new Map();
+  for (const [name, segment] of Object.entries(segments)) {
+    const detected = autoDetected.get(name);
+    const subs = detected?.subComponents ?? segment.ai?.subComponents;
+    if (!subs || subs.length === 0) continue;
+    const variantsWithCode = segment.variants.filter((v) => v.code);
+    if (variantsWithCode.length === 0) continue;
+    const required = [];
+    for (const sub of subs) {
+      const inAll = variantsWithCode.every((v) => {
+        const patterns = [
+          new RegExp(`<${name}\\.${sub}[\\s/>]`),
+          new RegExp(`<${sub}[\\s/>]`)
+        ];
+        return patterns.some((p) => p.test(v.code));
+      });
+      if (inAll) required.push(sub);
+    }
+    if (required.length > 0) {
+      result.set(name, required);
+    }
+  }
+  return result;
+}
+function generateCommonPatterns(segments, autoDetected) {
+  const result = /* @__PURE__ */ new Map();
+  for (const [name, segment] of Object.entries(segments)) {
+    const detected = autoDetected.get(name);
+    const subs = detected?.subComponents ?? segment.ai?.subComponents;
+    if (!subs || subs.length === 0) continue;
+    const firstVariant = segment.variants.find((v) => v.code);
+    if (!firstVariant?.code) continue;
+    const usedSubs = [];
+    for (const sub of subs) {
+      const patterns = [
+        new RegExp(`<${name}\\.${sub}`),
+        new RegExp(`<${sub}[\\s/>]`)
+      ];
+      if (patterns.some((p) => p.test(firstVariant.code))) {
+        usedSubs.push(sub);
+      }
+    }
+    if (usedSubs.length > 0) {
+      const pattern = `<${name}>
+${usedSubs.map((s) => `  <${name}.${s}>...</${name}.${s}>`).join("\n")}
+</${name}>`;
+      result.set(name, [pattern]);
+    }
+  }
+  return result;
+}
+function mergeAndDeduplicate(edges) {
+  const edgeMap = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const key = `${edge.source}\u2192${edge.target}:${edge.type}`;
+    const existing = edgeMap.get(key);
+    if (!existing || edge.weight > existing.weight) {
+      edgeMap.set(key, edge);
+    }
+  }
+  return [...edgeMap.values()];
+}
+function isPascalCase(name) {
+  return /^[A-Z][a-zA-Z0-9]*$/.test(name);
+}
+function findComponentIndex(componentDir, componentName) {
+  const candidates = [
+    join2(componentDir, componentName, "index.tsx"),
+    join2(componentDir, componentName, "index.ts"),
+    join2(componentDir, componentName, `${componentName}.tsx`),
+    join2(componentDir, componentName, `${componentName}.ts`)
+  ];
+  for (const candidate of candidates) {
+    if (existsSync2(candidate)) {
+      return candidate;
+    }
+  }
+  try {
+    const entries = readdirSync(componentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory() && entry.name === componentName) {
+        const subCandidates = [
+          join2(componentDir, entry.name, "index.tsx"),
+          join2(componentDir, entry.name, "index.ts")
+        ];
+        for (const sc of subCandidates) {
+          if (existsSync2(sc)) return sc;
+        }
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+
 // src/build.ts
+import { serializeGraph } from "@fragments-sdk/context/graph";
 function normalizeParsedProps(parsedProps) {
   return Object.fromEntries(
     Object.entries(parsedProps).map(([name, prop]) => [
@@ -625,23 +1009,55 @@ async function buildSegments(config, configDir) {
   } catch {
   }
   let packageName;
-  const pkgJsonPath = resolve2(configDir, "package.json");
-  if (existsSync2(pkgJsonPath)) {
+  const pkgJsonPath = resolve3(configDir, "package.json");
+  if (existsSync3(pkgJsonPath)) {
     try {
       const pkg = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
       if (pkg.name) packageName = pkg.name;
     } catch {
     }
   }
+  const componentDir = resolve3(configDir, "src", "components");
+  let graphData;
+  try {
+    const graphResult = await buildComponentGraph(segments, blocks, componentDir);
+    for (const [name, segment] of Object.entries(segments)) {
+      const detected = graphResult.autoDetected.get(name);
+      if (!detected) continue;
+      if (!segment.ai) segment.ai = {};
+      if (!segment.ai.subComponents && detected.subComponents) {
+        segment.ai.subComponents = detected.subComponents;
+      }
+      if (!segment.ai.compositionPattern && detected.compositionPattern) {
+        segment.ai.compositionPattern = detected.compositionPattern;
+      }
+      if (!segment.ai.commonPatterns && detected.commonPatterns) {
+        segment.ai.commonPatterns = detected.commonPatterns;
+      }
+      if (!segment.ai.requiredChildren && detected.requiredChildren) {
+        segment.ai.requiredChildren = detected.requiredChildren;
+      }
+    }
+    for (const w of graphResult.warnings) {
+      warnings.push({ file: "graph", warning: w });
+    }
+    graphData = serializeGraph(graphResult.graph);
+  } catch (error) {
+    warnings.push({
+      file: "graph",
+      warning: `Graph extraction failed: ${error instanceof Error ? error.message : String(error)}`
+    });
+  }
   const output = {
     version: "1.0.0",
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
     ...packageName && { packageName },
     segments,
     ...Object.keys(blocks).length > 0 && { blocks },
-    ...tokens && { tokens }
+    ...tokens && { tokens },
+    ...graphData && { graph: graphData }
   };
-  const outputPath = resolve2(configDir, config.outFile ?? BRAND.outFile);
+  const outputPath = resolve3(configDir, config.outFile ?? BRAND.outFile);
   await writeFile(outputPath, JSON.stringify(output));
   return {
     success: errors.length === 0,
@@ -652,8 +1068,8 @@ async function buildSegments(config, configDir) {
   };
 }
 async function buildFragmentsDir(config, configDir) {
-  const fragmentsDir = join2(configDir, BRAND.dataDir);
-  const componentsDir = join2(fragmentsDir, BRAND.componentsDir);
+  const fragmentsDir = join3(configDir, BRAND.dataDir);
+  const componentsDir = join3(fragmentsDir, BRAND.componentsDir);
   await mkdir(fragmentsDir, { recursive: true });
   await mkdir(componentsDir, { recursive: true });
   const registryResult = await generateRegistry({
@@ -665,9 +1081,9 @@ async function buildFragmentsDir(config, configDir) {
   });
   const errors = [...registryResult.errors];
   const warnings = [...registryResult.warnings];
-  const indexPath = join2(fragmentsDir, "index.json");
+  const indexPath = join3(fragmentsDir, "index.json");
   await writeFile(indexPath, JSON.stringify(registryResult.index, null, 2));
-  const registryPath = join2(fragmentsDir, BRAND.registryFile);
+  const registryPath = join3(fragmentsDir, BRAND.registryFile);
   await writeFile(registryPath, JSON.stringify(registryResult.registry, null, 2));
   const contextResult = generateContextMd(registryResult.registry, {
     format: "markdown",
@@ -679,7 +1095,7 @@ async function buildFragmentsDir(config, configDir) {
       code: false
     }
   });
-  const contextPath = join2(fragmentsDir, BRAND.contextFile);
+  const contextPath = join3(fragmentsDir, BRAND.contextFile);
   await writeFile(contextPath, contextResult.content);
   return {
     success: errors.length === 0,
@@ -1032,9 +1448,9 @@ ${BRAND.name} Diff
 }
 
 // src/analyze.ts
-import { existsSync as existsSync3 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import { readFile as readFile2, writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
-import { join as join3, dirname as dirname2 } from "path";
+import { join as join4, dirname as dirname2 } from "path";
 import pc3 from "picocolors";
 async function runAnalyzeCommand(config, configDir, options = {}) {
   const format = options.format ?? "html";
@@ -1042,8 +1458,8 @@ async function runAnalyzeCommand(config, configDir, options = {}) {
   console.log(pc3.cyan(`
 ${BRAND.name} Analyzer
 `));
-  const segmentsPath = join3(configDir, config.outFile ?? "segments.json");
-  if (!existsSync3(segmentsPath)) {
+  const segmentsPath = join4(configDir, config.outFile ?? "segments.json");
+  if (!existsSync4(segmentsPath)) {
     console.log(pc3.red(`\u2717 No segments.json found. Run \`${BRAND.cliCommand} build\` first.
 `));
     return {
@@ -1138,7 +1554,7 @@ function colorizeScore(score) {
 }
 function getDefaultOutputPath(format, configDir) {
   const filename = format === "html" ? "segments-report.html" : "segments-report.json";
-  return join3(configDir, filename);
+  return join4(configDir, filename);
 }
 async function openInBrowser(path) {
   const { platform } = await import("os");
@@ -1206,4 +1622,4 @@ export {
   runDiffCommand,
   runAnalyzeCommand
 };
-//# sourceMappingURL=chunk-D35RGPAG.js.map
+//# sourceMappingURL=chunk-7OPWMLOE.js.map