@fragments-sdk/mcp 0.6.0 → 0.6.2

package/dist/chunk-NVHGG7GW.js

@@ -0,0 +1,630 @@
+// src/adapters/auto-extract.ts
+import { existsSync as existsSync3, readFileSync as readFileSync2 } from "fs";
+import { join as join3, relative, sep } from "path";
+
+// src/adapters/discover-components.ts
+import { readdirSync, existsSync } from "fs";
+import { join, extname, basename } from "path";
+var EXCLUDED_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  ".next",
+  ".nuxt",
+  "coverage",
+  "__tests__",
+  "__mocks__",
+  ".git",
+  ".cache",
+  ".turbo",
+  "out"
+]);
+var EXCLUDED_PATTERNS = [
+  /\.test\./,
+  /\.spec\./,
+  /\.stories\./,
+  /\.story\./,
+  /\.fragment\./,
+  /\.d\.ts$/,
+  /\.config\./,
+  /\.mock\./,
+  /\.fixture\./
+];
+function discoverComponentFiles(projectRoot) {
+  const results = [];
+  const seen = /* @__PURE__ */ new Set();
+  const scanDirs = [
+    "src/components",
+    "components",
+    "lib/components",
+    "src/ui",
+    "lib/ui",
+    "packages"
+  ].map((d) => join(projectRoot, d)).filter((d) => existsSync(d));
+  if (scanDirs.length === 0) {
+    const srcDir = join(projectRoot, "src");
+    if (existsSync(srcDir)) scanDirs.push(srcDir);
+  }
+  for (const dir of scanDirs) {
+    walkDir(dir, results, seen);
+  }
+  return results;
+}
+function walkDir(dir, results, seen, depth = 0) {
+  if (depth > 6) return;
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.name.startsWith(".")) continue;
+    if (entry.isDirectory()) {
+      if (EXCLUDED_DIRS.has(entry.name)) continue;
+      walkDir(join(dir, entry.name), results, seen, depth + 1);
+      continue;
+    }
+    if (!entry.isFile()) continue;
+    const ext = extname(entry.name);
+    if (ext !== ".tsx" && ext !== ".jsx") continue;
+    if (EXCLUDED_PATTERNS.some((p) => p.test(entry.name))) continue;
+    const filePath = join(dir, entry.name);
+    if (seen.has(filePath)) continue;
+    seen.add(filePath);
+    const name = inferComponentName(entry.name, dir);
+    if (name) {
+      results.push({ filePath, componentName: name });
+    }
+  }
+}
+function inferComponentName(fileName, dirPath) {
+  const withoutExt = fileName.replace(/\.(tsx|jsx)$/, "");
+  if (withoutExt === "index") {
+    return basename(dirPath);
+  }
+  return withoutExt;
+}
+
+// src/adapters/scan-tokens.ts
+import { readdirSync as readdirSync2, readFileSync, existsSync as existsSync2 } from "fs";
+import { join as join2, extname as extname2 } from "path";
+function scanTokens(projectRoot) {
+  const cssFiles = discoverCssFiles(projectRoot);
+  if (cssFiles.length === 0) return void 0;
+  const allTokens = [];
+  let prefix = "";
+  for (const filePath of cssFiles) {
+    try {
+      const content = readFileSync(filePath, "utf-8");
+      const tokens = extractCustomProperties(content);
+      allTokens.push(...tokens);
+    } catch {
+      continue;
+    }
+  }
+  if (allTokens.length === 0) return void 0;
+  prefix = detectPrefix(allTokens.map((t) => t.name));
+  const categories = {};
+  for (const token of allTokens) {
+    const category = inferTokenCategory(token.name);
+    if (!categories[category]) categories[category] = [];
+    if (!categories[category].some((t) => t.name === token.name)) {
+      categories[category].push(token);
+    }
+  }
+  return {
+    prefix,
+    total: Object.values(categories).reduce((sum, arr) => sum + arr.length, 0),
+    categories
+  };
+}
+function discoverCssFiles(projectRoot) {
+  const files = [];
+  const searchDirs = [
+    "src",
+    "styles",
+    "css",
+    "app"
+  ].map((d) => join2(projectRoot, d)).filter((d) => existsSync2(d));
+  searchDirs.push(projectRoot);
+  for (const dir of searchDirs) {
+    try {
+      const entries = readdirSync2(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (!entry.isFile()) continue;
+        const ext = extname2(entry.name);
+        if (ext === ".css" || ext === ".scss") {
+          files.push(join2(dir, entry.name));
+        }
+      }
+    } catch {
+      continue;
+    }
+  }
+  const srcDir = join2(projectRoot, "src");
+  if (existsSync2(srcDir)) {
+    try {
+      for (const subEntry of readdirSync2(srcDir, { withFileTypes: true })) {
+        if (subEntry.isDirectory() && ["styles", "css", "theme", "tokens"].includes(subEntry.name)) {
+          const subDir = join2(srcDir, subEntry.name);
+          for (const file of readdirSync2(subDir, { withFileTypes: true })) {
+            if (file.isFile() && (file.name.endsWith(".css") || file.name.endsWith(".scss"))) {
+              files.push(join2(subDir, file.name));
+            }
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  return [...new Set(files)];
+}
+function extractCustomProperties(content) {
+  const tokens = [];
+  let inRelevantBlock = false;
+  let braceDepth = 0;
+  const relevantSelectors = [":root", ".dark", "[data-theme", "@theme"];
+  const lines = content.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!inRelevantBlock && braceDepth === 0) {
+      if (relevantSelectors.some((sel) => trimmed.startsWith(sel) || trimmed.includes(sel))) {
+        if (trimmed.includes("{")) {
+          inRelevantBlock = true;
+          braceDepth = 1;
+        }
+      }
+    }
+    if (inRelevantBlock) {
+      for (const ch of trimmed) {
+        if (ch === "{") braceDepth++;
+        else if (ch === "}") {
+          braceDepth--;
+          if (braceDepth <= 0) {
+            inRelevantBlock = false;
+            braceDepth = 0;
+          }
+        }
+      }
+    }
+    if (!inRelevantBlock && braceDepth === 0) continue;
+    const match = trimmed.match(/^(--[\w-]+)\s*:\s*(.+?)\s*;/);
+    if (match) {
+      const [, name, value] = match;
+      const commentMatch = value.match(/\/\*\s*(.+?)\s*\*\//);
+      const cleanValue = value.replace(/\/\*.*?\*\//, "").trim();
+      tokens.push({
+        name,
+        value: cleanValue,
+        description: commentMatch?.[1]
+      });
+    }
+  }
+  return tokens;
+}
+function detectPrefix(names) {
+  if (names.length === 0) return "--";
+  const stripped = names.map((n) => n.slice(2));
+  let prefix = "";
+  const first = stripped[0];
+  for (let i = 0; i < first.length; i++) {
+    const ch = first[i];
+    if (stripped.every((n) => n[i] === ch)) {
+      prefix += ch;
+    } else {
+      break;
+    }
+  }
+  const lastDash = prefix.lastIndexOf("-");
+  if (lastDash > 0) {
+    return "--" + prefix.slice(0, lastDash + 1);
+  }
+  return "--";
+}
+function inferTokenCategory(name) {
+  const n = name.toLowerCase();
+  if (n.includes("color") || n.includes("background") || n.includes("foreground") || n.includes("primary") || n.includes("secondary") || n.includes("accent") || n.includes("muted") || n.includes("destructive") || n.includes("popover") || n.includes("card") && !n.includes("card-") || n.includes("chart")) {
+    return "colors";
+  }
+  if (n.includes("font") || n.includes("text") || n.includes("letter") || n.includes("line-height")) {
+    return "typography";
+  }
+  if (n.includes("space") || n.includes("gap") || n.includes("padding") || n.includes("margin")) {
+    return "spacing";
+  }
+  if (n.includes("radius")) {
+    return "radius";
+  }
+  if (n.includes("shadow")) {
+    return "shadows";
+  }
+  if (n.includes("border")) {
+    return "borders";
+  }
+  if (n.includes("ring")) {
+    return "focus";
+  }
+  if (n.includes("sidebar")) {
+    return "sidebar";
+  }
+  if (n.includes("input")) {
+    return "forms";
+  }
+  return "other";
+}
+
+// src/adapters/auto-extract.ts
+var AutoExtractionAdapter = class {
+  name = "auto-extract";
+  discover(startDir) {
+    return discoverComponentFiles(startDir).map((f) => f.filePath);
+  }
+  async load(projectRoot) {
+    let extractMod;
+    try {
+      extractMod = await import("./dist-V7D67NXS.js");
+    } catch (e) {
+      throw new Error(
+        "Auto-extraction requires @fragments-sdk/extract and TypeScript.\n\nIf you see this error, the MCP server may not be installed correctly.\nAlternative: pre-build your design system with `npx fragments build`"
+      );
+    }
+    const tsconfigPath = findTsConfig(projectRoot);
+    const extractor = extractMod.createComponentExtractor(tsconfigPath ?? void 0);
+    try {
+      const discovered = discoverComponentFiles(projectRoot);
+      if (discovered.length === 0) {
+        throw new Error(
+          `No component files found in ${projectRoot}.
+Searched: src/components/, components/, lib/components/, src/ui/
+
+If your components are elsewhere, create a fragments.json with:
+  npx fragments build`
+        );
+      }
+      const components = {};
+      const packageMap = /* @__PURE__ */ new Map();
+      const defaultPackageName = readPackageName(projectRoot);
+      let extractedCount = 0;
+      const fileToComponents = /* @__PURE__ */ new Map();
+      for (const { filePath, componentName } of discovered) {
+        try {
+          const metas = extractor.extractAll(filePath);
+          for (const meta of metas) {
+            const fragment = mapToCompiledFragment(meta, filePath, projectRoot);
+            components[meta.name] = fragment;
+            if (defaultPackageName) {
+              packageMap.set(meta.name, defaultPackageName);
+            }
+            extractedCount++;
+            const relPath = relative(projectRoot, filePath);
+            if (!fileToComponents.has(relPath)) fileToComponents.set(relPath, []);
+            fileToComponents.get(relPath).push(meta.name);
+          }
+          if (metas.length === 0) {
+            const meta = extractor.extract(filePath, componentName);
+            if (meta) {
+              const fragment = mapToCompiledFragment(meta, filePath, projectRoot);
+              components[meta.name] = fragment;
+              if (defaultPackageName) {
+                packageMap.set(meta.name, defaultPackageName);
+              }
+              extractedCount++;
+              const relPath = relative(projectRoot, filePath);
+              if (!fileToComponents.has(relPath)) fileToComponents.set(relPath, []);
+              fileToComponents.get(relPath).push(meta.name);
+            }
+          }
+        } catch {
+          continue;
+        }
+      }
+      inferRelations(components, fileToComponents);
+      console.error(`[fragments-mcp] Extracted ${extractedCount} components from ${discovered.length} files.`);
+      if (extractedCount === 0) {
+        throw new Error(
+          `Found ${discovered.length} component files but could not extract any props.
+This usually means TypeScript cannot parse the files.
+Check that your tsconfig.json includes the component directories.`
+        );
+      }
+      const tokens = scanTokens(projectRoot);
+      if (tokens) {
+        console.error(`[fragments-mcp] Found ${tokens.total} design tokens across ${Object.keys(tokens.categories).length} categories.`);
+      }
+      return {
+        components,
+        blocks: void 0,
+        tokens,
+        graph: void 0,
+        performanceSummary: void 0,
+        packageMap,
+        defaultPackageName
+      };
+    } finally {
+      extractor.dispose();
+    }
+  }
+};
+var UNIVERSAL_INHERITED = /* @__PURE__ */ new Set(["children", "className", "id", "disabled"]);
+var FORM_INPUT_INHERITED = /* @__PURE__ */ new Set([
+  "placeholder",
+  "value",
+  "defaultValue",
+  "onChange",
+  "name",
+  "required",
+  "autoFocus",
+  "autoComplete",
+  "checked",
+  "defaultChecked",
+  "type"
+]);
+var LABEL_INHERITED = /* @__PURE__ */ new Set(["htmlFor"]);
+var INPUT_LIKE_NAMES = /input|select|textarea|checkbox|radio|switch|slider|combobox/i;
+var LABEL_LIKE_NAMES = /label/i;
+function getRelevantInheritedProps(componentName) {
+  const allowed = new Set(UNIVERSAL_INHERITED);
+  if (INPUT_LIKE_NAMES.test(componentName)) {
+    for (const p of FORM_INPUT_INHERITED) allowed.add(p);
+  }
+  if (LABEL_LIKE_NAMES.test(componentName)) {
+    for (const p of LABEL_INHERITED) allowed.add(p);
+  }
+  return allowed;
+}
+function mapToCompiledFragment(meta, filePath, projectRoot) {
+  const relevantInherited = getRelevantInheritedProps(meta.name);
+  const props = {};
+  for (const [name, propMeta] of Object.entries(meta.props)) {
+    if (propMeta.source === "inherited" && !relevantInherited.has(name)) continue;
+    props[name] = {
+      type: propMeta.type,
+      description: propMeta.description ?? "",
+      required: propMeta.required,
+      ...propMeta.values && { values: propMeta.values },
+      ...propMeta.default !== void 0 && { default: propMeta.default }
+    };
+  }
+  const relativePath = relative(projectRoot, filePath);
+  const category = inferCategory(relativePath);
+  const importPath = buildImportPath(relativePath);
+  const description = buildDescription(meta, props);
+  const propsSummary = buildPropsSummary(props);
+  const codeExample = buildCodeExample(meta.name, props);
+  const fragmentMeta = {
+    name: meta.name,
+    description,
+    category
+  };
+  return {
+    filePath: relativePath,
+    meta: fragmentMeta,
+    usage: {
+      when: [`Use ${meta.name} when you need a ${category} ${meta.name.toLowerCase()} element.`],
+      whenNot: [],
+      guidelines: importPath ? [`import { ${meta.name} } from "${importPath}"`] : []
+    },
+    props,
+    propsSummary,
+    variants: codeExample ? [{ name: "Default", description: `Basic ${meta.name} usage`, code: codeExample }] : [],
+    sourcePath: relativePath,
+    exportName: meta.name,
+    _generated: {
+      source: "extracted",
+      verified: false,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    ...meta.composition && {
+      ai: {
+        compositionPattern: meta.composition.pattern
+      }
+    }
+  };
+}
+function buildImportPath(relativePath) {
+  const withoutExt = relativePath.replace(/\.(tsx|jsx|ts|js)$/, "");
+  if (withoutExt.startsWith(`src${sep}`)) {
+    return "@/" + withoutExt.slice(4).split(sep).join("/");
+  }
+  return "./" + withoutExt.split(sep).join("/");
+}
+function buildDescription(meta, localProps) {
+  if (meta.description && meta.description !== meta.name && !meta.description.endsWith(" component")) {
+    return meta.description;
+  }
+  const propEntries = Object.entries(localProps);
+  if (propEntries.length === 0) {
+    return `${meta.name} component`;
+  }
+  const details = [];
+  for (const [name, prop] of propEntries) {
+    if (prop.values && prop.values.length > 0) {
+      details.push(`${prop.values.length} ${name} options`);
+    }
+  }
+  if (details.length > 0) {
+    return `${meta.name} component with ${details.join(" and ")}.`;
+  }
+  return `${meta.name} component with ${propEntries.length} configurable prop${propEntries.length === 1 ? "" : "s"}.`;
+}
+function buildPropsSummary(props) {
+  const summaries = [];
+  for (const [name, prop] of Object.entries(props)) {
+    let summary = `${name}`;
+    if (prop.values && prop.values.length > 0) {
+      summary += `: ${prop.values.map((v) => `"${v}"`).join(" | ")}`;
+    } else {
+      summary += `: ${prop.type}`;
+    }
+    if (prop.default !== void 0) {
+      summary += ` (default: ${JSON.stringify(prop.default)})`;
+    }
+    if (prop.required) {
+      summary += " (required)";
+    }
+    summaries.push(summary);
+  }
+  return summaries;
+}
+function buildCodeExample(name, props) {
+  const propsStr = [];
+  for (const [pName, prop] of Object.entries(props)) {
+    if (pName === "children" || pName === "asChild" || pName === "className") continue;
+    if (pName === "onChange" || pName === "onSubmit" || pName === "value" || pName === "defaultValue" || pName === "checked" || pName === "defaultChecked" || pName === "autoFocus" || pName === "autoComplete" || pName === "required" || pName === "disabled" || pName === "name") continue;
+    if (prop.default !== void 0) {
+      if (prop.values && prop.values.length > 1) {
+        const nonDefault = prop.values.find((v) => v !== String(prop.default));
+        if (nonDefault) {
+          propsStr.push(`${pName}="${nonDefault}"`);
+          continue;
+        }
+      }
+    }
+    if (pName === "placeholder" && INPUT_LIKE_NAMES.test(name)) {
+      propsStr.push(`placeholder="Enter ${name.toLowerCase()}..."`);
+      continue;
+    }
+    if (pName === "htmlFor" && LABEL_LIKE_NAMES.test(name)) {
+      propsStr.push(`htmlFor="field-id"`);
+      continue;
+    }
+    if (pName === "id" || pName === "className" || pName === "children") continue;
+    if (prop.required) {
+      if (prop.values && prop.values.length > 0) {
+        propsStr.push(`${pName}="${prop.values[0]}"`);
+      } else if (prop.type === "string") {
+        propsStr.push(`${pName}="..."`);
+      }
+    }
+  }
+  const propsJsx = propsStr.length > 0 ? " " + propsStr.join(" ") : "";
+  const nameLower = name.toLowerCase();
+  const selfClosing = nameLower.includes("input") || nameLower.includes("separator") || nameLower.includes("slider") || nameLower.includes("switch");
+  if (selfClosing) {
+    return `<${name}${propsJsx} />`;
+  }
+  return `<${name}${propsJsx}>${name}</${name}>`;
+}
+function buildCompositionExample(root, subs) {
+  const header = subs.filter((s) => s.includes("Header"));
+  const title = subs.filter((s) => s.includes("Title"));
+  const description = subs.filter((s) => s.includes("Description"));
+  const content = subs.filter((s) => s.includes("Content") || s.includes("Body"));
+  const footer = subs.filter((s) => s.includes("Footer"));
+  const action = subs.filter((s) => s.includes("Action"));
+  const other = subs.filter(
+    (s) => !header.includes(s) && !title.includes(s) && !description.includes(s) && !content.includes(s) && !footer.includes(s) && !action.includes(s)
+  );
+  const lines = [`<${root}>`];
+  if (header.length > 0) {
+    lines.push(`  <${header[0]}>`);
+    for (const t of title) lines.push(`    <${t}>Title</${t}>`);
+    for (const d of description) lines.push(`    <${d}>Description</${d}>`);
+    lines.push(`  </${header[0]}>`);
+  } else {
+    for (const t of title) lines.push(`  <${t}>Title</${t}>`);
+    for (const d of description) lines.push(`  <${d}>Description</${d}>`);
+  }
+  for (const c of content) lines.push(`  <${c}>Content</${c}>`);
+  for (const o of other) lines.push(`  <${o}>...</${o}>`);
+  if (footer.length > 0) {
+    lines.push(`  <${footer[0]}>`);
+    for (const a of action) lines.push(`    <${a}>Action</${a}>`);
+    lines.push(`  </${footer[0]}>`);
+  } else {
+    for (const a of action) lines.push(`  <${a}>Action</${a}>`);
+  }
+  lines.push(`</${root}>`);
+  return lines.join("\n");
+}
+function inferRelations(components, fileToComponents) {
+  for (const [_file, names] of fileToComponents) {
+    if (names.length <= 1) continue;
+    const sorted = [...names].sort((a, b) => a.length - b.length);
+    const root = sorted[0];
+    const subs = sorted.slice(1).filter((n) => n.startsWith(root));
+    if (subs.length === 0) continue;
+    const rootComp = components[root];
+    if (rootComp) {
+      rootComp.ai = {
+        ...rootComp.ai,
+        compositionPattern: "compound",
+        subComponents: subs
+      };
+      rootComp.relations = subs.map((sub) => ({
+        component: sub,
+        relationship: "parent-of",
+        note: `${sub} is a sub-component of ${root}`
+      }));
+      const compositionCode = buildCompositionExample(root, subs);
+      rootComp.variants = [
+        ...rootComp.variants ?? [],
+        { name: "Composition", description: `${root} with all sub-components`, code: compositionCode }
+      ];
+    }
+    const rootImportPath = rootComp?.usage?.guidelines?.[0];
+    for (const sub of subs) {
+      const subComp = components[sub];
+      if (subComp) {
+        subComp.relations = [{
+          component: root,
+          relationship: "child-of",
+          note: `Use inside <${root}>`
+        }];
+        if (rootImportPath) {
+          const allNames = [root, ...subs].join(", ");
+          const fromPath = rootImportPath.match(/from\s+"([^"]+)"/)?.[1] ?? "";
+          if (fromPath) {
+            subComp.usage = {
+              ...subComp.usage,
+              guidelines: [`import { ${allNames} } from "${fromPath}"`]
+            };
+          }
+        }
+      }
+    }
+    if (rootComp && rootComp.usage?.guidelines?.[0]) {
+      const fromPath = rootComp.usage.guidelines[0].match(/from\s+"([^"]+)"/)?.[1] ?? "";
+      if (fromPath) {
+        const allNames = [root, ...subs].join(", ");
+        rootComp.usage.guidelines = [`import { ${allNames} } from "${fromPath}"`];
+      }
+    }
+  }
+}
+function inferCategory(relativePath) {
+  const parts = relativePath.split(sep);
+  const componentsIdx = parts.findIndex(
+    (p) => p === "components" || p === "ui"
+  );
+  if (componentsIdx >= 0 && componentsIdx + 1 < parts.length - 1) {
+    const nextPart = parts[componentsIdx + 1];
+    if (/^[A-Z]/.test(nextPart)) return parts[componentsIdx] || "uncategorized";
+    return nextPart;
+  }
+  return "uncategorized";
+}
+function findTsConfig(projectRoot) {
+  const candidates = ["tsconfig.json", "tsconfig.app.json"];
+  for (const name of candidates) {
+    const p = join3(projectRoot, name);
+    if (existsSync3(p)) return p;
+  }
+  return null;
+}
+function readPackageName(projectRoot) {
+  try {
+    const pkgPath = join3(projectRoot, "package.json");
+    if (!existsSync3(pkgPath)) return void 0;
+    const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
+    return pkg.name;
+  } catch {
+    return void 0;
+  }
+}
+
+export {
+  AutoExtractionAdapter
+};
+//# sourceMappingURL=chunk-NVHGG7GW.js.map