@fragments-sdk/mcp 0.3.0 → 0.4.1

package/dist/bin.js

@@ -0,0 +1,1722 @@
+#!/usr/bin/env node
+
+// src/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema
+} from "@modelcontextprotocol/sdk/types.js";
+import { readFile } from "fs/promises";
+import { existsSync as existsSync2 } from "fs";
+import { readFileSync as readFileSync2 } from "fs";
+import { join as join2 } from "path";
+
+// src/constants.ts
+var BRAND = {
+  /** Display name (e.g., "Fragments") */
+  name: "Fragments",
+  /** Lowercase name for file paths and CLI (e.g., "fragments") */
+  nameLower: "fragments",
+  /** File extension for fragment definition files (e.g., ".fragment.tsx") */
+  fileExtension: ".fragment.tsx",
+  /** Legacy file extension for segments (still supported for migration) */
+  legacyFileExtension: ".segment.tsx",
+  /** JSON file extension for compiled output */
+  jsonExtension: ".fragment.json",
+  /** Default output file name (e.g., "fragments.json") */
+  outFile: "fragments.json",
+  /** Config file name (e.g., "fragments.config.ts") */
+  configFile: "fragments.config.ts",
+  /** Legacy config file name (still supported for migration) */
+  legacyConfigFile: "segments.config.ts",
+  /** CLI command name (e.g., "fragments") */
+  cliCommand: "fragments",
+  /** Package scope (e.g., "@fragments") */
+  packageScope: "@fragments",
+  /** Directory for storing fragments, registry, and cache */
+  dataDir: ".fragments",
+  /** Components subdirectory within .fragments/ */
+  componentsDir: "components",
+  /** Registry file name */
+  registryFile: "registry.json",
+  /** Context file name (AI-ready markdown) */
+  contextFile: "context.md",
+  /** Screenshots subdirectory */
+  screenshotsDir: "screenshots",
+  /** Cache subdirectory (gitignored) */
+  cacheDir: "cache",
+  /** Diff output subdirectory (gitignored) */
+  diffDir: "diff",
+  /** Manifest filename */
+  manifestFile: "manifest.json",
+  /** Prefix for localStorage keys (e.g., "fragments-") */
+  storagePrefix: "fragments-",
+  /** Static viewer HTML file name */
+  viewerHtmlFile: "fragments-viewer.html",
+  /** MCP tool name prefix (e.g., "fragments_") */
+  mcpToolPrefix: "fragments_",
+  /** File extension for block definition files */
+  blockFileExtension: ".block.ts",
+  /** @deprecated Use blockFileExtension instead */
+  recipeFileExtension: ".recipe.ts",
+  /** Vite plugin namespace */
+  vitePluginNamespace: "fragments-core-shim"
+};
+var DEFAULTS = {
+  /** Default viewport dimensions */
+  viewport: {
+    width: 1280,
+    height: 800
+  },
+  /** Default diff threshold (percentage) */
+  diffThreshold: 5,
+  /** Browser pool size */
+  poolSize: 3,
+  /** Idle timeout before browser shutdown (ms) - 5 minutes */
+  idleTimeoutMs: 5 * 60 * 1e3,
+  /** Delay after render before capture (ms) */
+  captureDelayMs: 100,
+  /** Font loading timeout (ms) */
+  fontTimeoutMs: 3e3,
+  /** Default theme */
+  theme: "light",
+  /** Dev server port */
+  port: 6006
+};
+
+// ../context/dist/chunk-KKABP4K4.js
+var PLACEHOLDER_PATTERNS = [
+  /^\w+ component is needed$/i,
+  /^Alternative component is more appropriate$/i,
+  /^Use \w+ when you need/i
+];
+function filterPlaceholders(items) {
+  if (!items) return [];
+  return items.filter(
+    (item) => !PLACEHOLDER_PATTERNS.some((pattern) => pattern.test(item.trim()))
+  );
+}
+function generateContext(segments, options = {}, blocks) {
+  const format = options.format ?? "markdown";
+  const compact = options.compact ?? false;
+  const include = {
+    props: options.include?.props ?? true,
+    variants: options.include?.variants ?? true,
+    usage: options.include?.usage ?? true,
+    relations: options.include?.relations ?? false,
+    code: options.include?.code ?? false
+  };
+  const sorted = [...segments].sort((a, b) => {
+    const catCompare = a.meta.category.localeCompare(b.meta.category);
+    if (catCompare !== 0) return catCompare;
+    return a.meta.name.localeCompare(b.meta.name);
+  });
+  if (format === "json") {
+    return generateJsonContext(sorted, include, compact, blocks);
+  }
+  return generateMarkdownContext(sorted, include, compact, blocks);
+}
+function generateMarkdownContext(segments, include, compact, blocks) {
+  const lines = [];
+  lines.push("# Design System Reference");
+  lines.push("");
+  lines.push("## Quick Reference");
+  lines.push("");
+  lines.push("| Component | Category | Use For |");
+  lines.push("|-----------|----------|---------|");
+  for (const segment of segments) {
+    const filteredWhen = filterPlaceholders(segment.usage.when);
+    const useFor = filteredWhen.slice(0, 2).join(", ") || segment.meta.description;
+    lines.push(`| ${segment.meta.name} | ${segment.meta.category} | ${truncate(useFor, 50)} |`);
+  }
+  lines.push("");
+  if (compact) {
+    const content2 = lines.join("\n");
+    return { content: content2, tokenEstimate: estimateTokens(content2) };
+  }
+  lines.push("## Components");
+  lines.push("");
+  for (const segment of segments) {
+    lines.push(`### ${segment.meta.name}`);
+    lines.push("");
+    const statusParts = [`**Category:** ${segment.meta.category}`];
+    if (segment.meta.status) {
+      statusParts.push(`**Status:** ${segment.meta.status}`);
+    }
+    lines.push(statusParts.join(" | "));
+    lines.push("");
+    if (segment.meta.description) {
+      lines.push(segment.meta.description);
+      lines.push("");
+    }
+    const whenFiltered = filterPlaceholders(segment.usage.when);
+    const whenNotFiltered = filterPlaceholders(segment.usage.whenNot);
+    if (include.usage && (whenFiltered.length > 0 || whenNotFiltered.length > 0)) {
+      if (whenFiltered.length > 0) {
+        lines.push("**When to use:**");
+        for (const when of whenFiltered) {
+          lines.push(`- ${when}`);
+        }
+        lines.push("");
+      }
+      if (whenNotFiltered.length > 0) {
+        lines.push("**When NOT to use:**");
+        for (const whenNot of whenNotFiltered) {
+          lines.push(`- ${whenNot}`);
+        }
+        lines.push("");
+      }
+    }
+    if (include.props && Object.keys(segment.props).length > 0) {
+      lines.push("**Props:**");
+      for (const [name, prop] of Object.entries(segment.props)) {
+        lines.push(`- \`${name}\`: ${formatPropType(prop)}${prop.required ? " (required)" : ""}`);
+      }
+      lines.push("");
+    }
+    if (include.variants && segment.variants.length > 0) {
+      const variantNames = segment.variants.map((v) => v.name).join(", ");
+      lines.push(`**Variants:** ${variantNames}`);
+      lines.push("");
+      if (include.code) {
+        for (const variant of segment.variants) {
+          if (variant.code) {
+            lines.push(`*${variant.name}:*`);
+            lines.push("```tsx");
+            lines.push(variant.code);
+            lines.push("```");
+            lines.push("");
+          }
+        }
+      }
+    }
+    if (include.relations && segment.relations && segment.relations.length > 0) {
+      lines.push("**Related:**");
+      for (const relation of segment.relations) {
+        lines.push(`- ${relation.component} (${relation.relationship}): ${relation.note}`);
+      }
+      lines.push("");
+    }
+    lines.push("---");
+    lines.push("");
+  }
+  if (blocks && blocks.length > 0) {
+    lines.push("## Blocks");
+    lines.push("");
+    lines.push("Composition patterns showing how components wire together.");
+    lines.push("");
+    for (const block of blocks) {
+      lines.push(`### ${block.name}`);
+      lines.push("");
+      lines.push(block.description);
+      lines.push("");
+      lines.push(`**Category:** ${block.category}`);
+      lines.push(`**Components:** ${block.components.join(", ")}`);
+      if (block.tags && block.tags.length > 0) {
+        lines.push(`**Tags:** ${block.tags.join(", ")}`);
+      }
+      lines.push("");
+      lines.push("```tsx");
+      lines.push(block.code);
+      lines.push("```");
+      lines.push("");
+      lines.push("---");
+      lines.push("");
+    }
+  }
+  const content = lines.join("\n");
+  return { content, tokenEstimate: estimateTokens(content) };
+}
+function generateJsonContext(segments, include, compact, blocks) {
+  const categories = [...new Set(segments.map((s) => s.meta.category))].sort();
+  const components = {};
+  for (const segment of segments) {
+    const component = {
+      category: segment.meta.category,
+      description: segment.meta.description
+    };
+    if (segment.meta.status) {
+      component.status = segment.meta.status;
+    }
+    if (!compact) {
+      if (include.usage) {
+        const whenFiltered = filterPlaceholders(segment.usage.when);
+        const whenNotFiltered = filterPlaceholders(segment.usage.whenNot);
+        if (whenFiltered.length > 0) component.whenToUse = whenFiltered;
+        if (whenNotFiltered.length > 0) component.whenNotToUse = whenNotFiltered;
+      }
+      if (include.props && Object.keys(segment.props).length > 0) {
+        component.props = {};
+        for (const [name, prop] of Object.entries(segment.props)) {
+          component.props[name] = {
+            type: formatPropType(prop),
+            description: prop.description
+          };
+          if (prop.required) component.props[name].required = true;
+          if (prop.default !== void 0) component.props[name].default = prop.default;
+        }
+      }
+      if (include.variants && segment.variants.length > 0) {
+        component.variants = segment.variants.map((v) => v.name);
+      }
+      if (include.relations && segment.relations && segment.relations.length > 0) {
+        component.relations = segment.relations.map((r) => ({
+          component: r.component,
+          relationship: r.relationship,
+          note: r.note
+        }));
+      }
+    }
+    components[segment.meta.name] = component;
+  }
+  const blocksMap = blocks && blocks.length > 0 ? Object.fromEntries(blocks.map((b) => [b.name, {
+    description: b.description,
+    category: b.category,
+    components: b.components,
+    code: b.code,
+    tags: b.tags
+  }])) : void 0;
+  const output = {
+    version: "1.0",
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    summary: {
+      totalComponents: segments.length,
+      categories,
+      ...blocksMap && { totalBlocks: blocks.length }
+    },
+    components,
+    ...blocksMap && { blocks: blocksMap }
+  };
+  const content = JSON.stringify(output, null, 2);
+  return { content, tokenEstimate: estimateTokens(content) };
+}
+function formatPropType(prop) {
+  if (prop.type === "enum" && prop.values) {
+    return prop.values.map((v) => `"${v}"`).join(" | ");
+  }
+  if (prop.default !== void 0) {
+    return `${prop.type} (default: ${JSON.stringify(prop.default)})`;
+  }
+  return prop.type;
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength - 3) + "...";
+}
+function estimateTokens(text) {
+  return Math.ceil(text.length / 4);
+}
+
+// src/discovery.ts
+import { existsSync, readFileSync, readdirSync } from "fs";
+import { join, dirname, resolve } from "path";
+import { createRequire } from "module";
+function resolveWorkspaceGlob(baseDir, pattern) {
+  const parts = pattern.split("/");
+  let dirs = [baseDir];
+  for (const part of parts) {
+    if (part === "**") continue;
+    const next = [];
+    for (const d of dirs) {
+      if (part === "*") {
+        try {
+          for (const entry of readdirSync(d, { withFileTypes: true })) {
+            if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules") {
+              next.push(join(d, entry.name));
+            }
+          }
+        } catch {
+        }
+      } else {
+        const candidate = join(d, part);
+        if (existsSync(candidate)) next.push(candidate);
+      }
+    }
+    dirs = next;
+  }
+  return dirs;
+}
+function getWorkspaceDirs(rootDir) {
+  const dirs = [];
+  const rootPkgPath = join(rootDir, "package.json");
+  if (existsSync(rootPkgPath)) {
+    try {
+      const rootPkg = JSON.parse(readFileSync(rootPkgPath, "utf-8"));
+      const workspaces = Array.isArray(rootPkg.workspaces) ? rootPkg.workspaces : rootPkg.workspaces?.packages;
+      if (Array.isArray(workspaces)) {
+        for (const pattern of workspaces) {
+          dirs.push(...resolveWorkspaceGlob(rootDir, pattern));
+        }
+        return dirs;
+      }
+    } catch {
+    }
+  }
+  const pnpmWsPath = join(rootDir, "pnpm-workspace.yaml");
+  if (existsSync(pnpmWsPath)) {
+    try {
+      const content = readFileSync(pnpmWsPath, "utf-8");
+      const lines = content.split("\n");
+      let inPackages = false;
+      for (const line of lines) {
+        if (/^packages\s*:/.test(line)) {
+          inPackages = true;
+          continue;
+        }
+        if (inPackages) {
+          const match = line.match(/^\s+-\s+['"]?([^'"#\n]+)['"]?/);
+          if (match) {
+            dirs.push(...resolveWorkspaceGlob(rootDir, match[1].trim()));
+          } else if (/^\S/.test(line) && line.trim()) {
+            break;
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  return dirs;
+}
+function resolveDepPackageJson(localRequire, depName) {
+  try {
+    return localRequire.resolve(`${depName}/package.json`);
+  } catch {
+  }
+  try {
+    const mainPath = localRequire.resolve(depName);
+    let dir = dirname(mainPath);
+    while (true) {
+      const candidate = join(dir, "package.json");
+      if (existsSync(candidate)) {
+        const pkg = JSON.parse(readFileSync(candidate, "utf-8"));
+        if (pkg.name === depName) return candidate;
+      }
+      const parent = dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+  } catch {
+  }
+  return null;
+}
+function findFragmentsInDeps(dir, found) {
+  const pkgJsonPath = join(dir, "package.json");
+  if (!existsSync(pkgJsonPath)) return;
+  try {
+    const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+    const allDeps = {
+      ...pkgJson.dependencies,
+      ...pkgJson.devDependencies
+    };
+    const localRequire = createRequire(join(dir, "noop.js"));
+    for (const depName of Object.keys(allDeps)) {
+      try {
+        const depPkgPath = resolveDepPackageJson(localRequire, depName);
+        if (!depPkgPath) continue;
+        const depPkg = JSON.parse(readFileSync(depPkgPath, "utf-8"));
+        if (depPkg.fragments) {
+          const fragmentsPath = join(dirname(depPkgPath), depPkg.fragments);
+          if (existsSync(fragmentsPath) && !found.includes(fragmentsPath)) {
+            found.push(fragmentsPath);
+          }
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+}
+function findFragmentsJson(startDir) {
+  const found = [];
+  const resolvedStart = resolve(startDir);
+  let dir = resolvedStart;
+  while (true) {
+    const candidate = join(dir, BRAND.outFile);
+    if (existsSync(candidate)) {
+      found.push(candidate);
+      break;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  findFragmentsInDeps(resolvedStart, found);
+  if (found.length === 0 || existsSync(join(resolvedStart, "pnpm-workspace.yaml"))) {
+    const workspaceDirs = getWorkspaceDirs(resolvedStart);
+    for (const wsDir of workspaceDirs) {
+      findFragmentsInDeps(wsDir, found);
+    }
+  }
+  return found;
+}
+
+// src/search.ts
+var CONVEX_SEARCH_URL = "https://combative-jay-834.convex.site/search";
+var CONVEX_TIMEOUT_MS = 3e3;
+var SYNONYM_MAP = {
+  "form": ["input", "field", "submit", "validation"],
+  "input": ["form", "field", "text", "entry"],
+  "button": ["action", "click", "submit", "trigger"],
+  "action": ["button", "click", "trigger"],
+  "alert": ["notification", "message", "warning", "error", "feedback"],
+  "notification": ["alert", "message", "toast"],
+  "card": ["container", "panel", "box", "content"],
+  "toggle": ["switch", "checkbox", "boolean", "on/off"],
+  "switch": ["toggle", "checkbox", "boolean"],
+  "badge": ["tag", "label", "status", "indicator"],
+  "status": ["badge", "indicator", "state"],
+  "login": ["auth", "signin", "authentication", "form"],
+  "auth": ["login", "signin", "authentication"],
+  "chat": ["message", "conversation", "ai"],
+  "table": ["data", "grid", "list", "rows"]
+};
+async function searchConvex(query, limit = 10, kind) {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), CONVEX_TIMEOUT_MS);
+    const response = await fetch(CONVEX_SEARCH_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query, limit, ...kind && { kind } }),
+      signal: controller.signal
+    });
+    clearTimeout(timeout);
+    if (!response.ok) {
+      return [];
+    }
+    const data = await response.json();
+    return data.results.map((r, i) => ({
+      name: r.name,
+      kind: r.kind ?? "component",
+      rank: i,
+      score: r.score
+    }));
+  } catch {
+    return [];
+  }
+}
+function keywordScoreComponents(query, segments) {
+  const searchTerms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const expandedTerms = new Set(searchTerms);
+  for (const term of searchTerms) {
+    const synonyms = SYNONYM_MAP[term];
+    if (synonyms) {
+      for (const syn of synonyms) expandedTerms.add(syn);
+    }
+  }
+  const scored = segments.map((s) => {
+    let score = 0;
+    const nameLower = s.meta.name.toLowerCase();
+    if (searchTerms.some((term) => nameLower.includes(term))) {
+      score += 15;
+    } else if (Array.from(expandedTerms).some((term) => nameLower.includes(term))) {
+      score += 8;
+    }
+    const desc = s.meta.description?.toLowerCase() ?? "";
+    score += searchTerms.filter((term) => desc.includes(term)).length * 6;
+    const tags = s.meta.tags?.map((t) => t.toLowerCase()) ?? [];
+    score += searchTerms.filter((term) => tags.some((tag) => tag.includes(term))).length * 4;
+    const whenUsed = s.usage?.when?.join(" ").toLowerCase() ?? "";
+    score += searchTerms.filter((term) => whenUsed.includes(term)).length * 10;
+    score += Array.from(expandedTerms).filter((term) => !searchTerms.includes(term) && whenUsed.includes(term)).length * 5;
+    const cat = s.meta.category?.toLowerCase() ?? "";
+    if (searchTerms.some((term) => cat.includes(term))) {
+      score += 8;
+    }
+    const variantText = s.variants.map((v) => `${v.name} ${v.description || ""}`.toLowerCase()).join(" ");
+    score += searchTerms.filter((term) => variantText.includes(term)).length * 3;
+    if (s.meta.status === "stable") score += 5;
+    else if (s.meta.status === "beta") score += 2;
+    if (s.meta.status === "deprecated") score -= 25;
+    return { name: s.meta.name, kind: "component", score };
+  });
+  return scored.filter((s) => s.score > 0).sort((a, b) => b.score - a.score).map((s, i) => ({ ...s, rank: i }));
+}
+function keywordScoreBlocks(query, blocks) {
+  const searchTerms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const expandedTerms = new Set(searchTerms);
+  for (const term of searchTerms) {
+    const synonyms = SYNONYM_MAP[term];
+    if (synonyms) {
+      for (const syn of synonyms) expandedTerms.add(syn);
+    }
+  }
+  const scored = blocks.map((b) => {
+    let score = 0;
+    const nameLower = b.name.toLowerCase();
+    if (searchTerms.some((term) => nameLower.includes(term))) {
+      score += 15;
+    } else if (Array.from(expandedTerms).some((term) => nameLower.includes(term))) {
+      score += 8;
+    }
+    const desc = b.description.toLowerCase();
+    score += searchTerms.filter((term) => desc.includes(term)).length * 6;
+    const tags = b.tags?.map((t) => t.toLowerCase()) ?? [];
+    score += searchTerms.filter((term) => tags.some((tag) => tag.includes(term))).length * 4;
+    const componentText = b.components.join(" ").toLowerCase();
+    score += searchTerms.filter((term) => componentText.includes(term)).length * 5;
+    const cat = b.category.toLowerCase();
+    if (searchTerms.some((term) => cat.includes(term))) {
+      score += 8;
+    }
+    return { name: b.name, kind: "block", score };
+  });
+  return scored.filter((s) => s.score > 0).sort((a, b) => b.score - a.score).map((s, i) => ({ ...s, rank: i }));
+}
+function keywordScoreTokens(query, tokenData) {
+  const searchTerms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const scored = [];
+  for (const [cat, tokens] of Object.entries(tokenData.categories)) {
+    const catLower = cat.toLowerCase();
+    const catBonus = searchTerms.some((term) => catLower.includes(term)) ? 8 : 0;
+    for (const token of tokens) {
+      let score = catBonus;
+      const nameLower = token.name.toLowerCase();
+      score += searchTerms.filter((term) => nameLower.includes(term)).length * 10;
+      if (token.description) {
+        const descLower = token.description.toLowerCase();
+        score += searchTerms.filter((term) => descLower.includes(term)).length * 6;
+      }
+      if (score > 0) {
+        scored.push({ name: token.name, kind: "token", score });
+      }
+    }
+  }
+  return scored.sort((a, b) => b.score - a.score).map((s, i) => ({ ...s, rank: i }));
+}
+function reciprocalRankFusion(resultSets, k = 60) {
+  const scoreMap = /* @__PURE__ */ new Map();
+  for (const { results } of resultSets) {
+    for (let rank = 0; rank < results.length; rank++) {
+      const result = results[rank];
+      const key = `${result.kind}:${result.name}`;
+      const rrfScore = 1 / (k + rank + 1);
+      const existing = scoreMap.get(key);
+      if (existing) {
+        existing.score += rrfScore;
+      } else {
+        scoreMap.set(key, { score: rrfScore, kind: result.kind, name: result.name });
+      }
+    }
+  }
+  const fused = [];
+  for (const [, { score, kind, name }] of scoreMap) {
+    fused.push({ name, kind, rank: 0, score });
+  }
+  fused.sort((a, b) => b.score - a.score);
+  fused.forEach((r, i) => {
+    r.rank = i;
+  });
+  return fused;
+}
+async function hybridSearch(query, data, limit = 10, kind) {
+  const keywordResults = [];
+  if (!kind || kind === "component") {
+    keywordResults.push(...keywordScoreComponents(query, data.segments));
+  }
+  if ((!kind || kind === "block") && data.blocks) {
+    keywordResults.push(...keywordScoreBlocks(query, data.blocks));
+  }
+  if ((!kind || kind === "token") && data.tokenData) {
+    keywordResults.push(...keywordScoreTokens(query, data.tokenData));
+  }
+  keywordResults.sort((a, b) => b.score - a.score);
+  keywordResults.forEach((r, i) => {
+    r.rank = i;
+  });
+  const vectorResults = await searchConvex(query, limit, kind);
+  if (vectorResults.length === 0) {
+    return keywordResults.slice(0, limit);
+  }
+  const fused = reciprocalRankFusion([
+    { label: "vector", results: vectorResults },
+    { label: "keyword", results: keywordResults }
+  ]);
+  return fused.slice(0, limit);
+}
+
+// src/service.ts
+async function renderComponent(viewerUrl2, request) {
+  const renderUrl = `${viewerUrl2}/fragments/render`;
+  const response = await fetch(renderUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      component: request.component,
+      props: request.props ?? {},
+      viewport: request.viewport ?? { width: 800, height: 600 }
+    })
+  });
+  return await response.json();
+}
+async function compareComponent(viewerUrl2, request) {
+  const compareUrl = `${viewerUrl2}/fragments/compare`;
+  const response = await fetch(compareUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request)
+  });
+  return await response.json();
+}
+async function fixComponent(viewerUrl2, request) {
+  const fixUrl = `${viewerUrl2}/fragments/fix`;
+  const response = await fetch(fixUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request)
+  });
+  return await response.json();
+}
+
+// src/utils.ts
+function projectFields(obj, fields) {
+  if (!fields || fields.length === 0) {
+    return obj;
+  }
+  const result = {};
+  for (const field of fields) {
+    const parts = field.split(".");
+    let source = obj;
+    let target = result;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLast = i === parts.length - 1;
+      if (source === null || source === void 0 || typeof source !== "object") {
+        break;
+      }
+      const sourceObj = source;
+      const value = sourceObj[part];
+      if (isLast) {
+        target[part] = value;
+      } else {
+        if (!(part in target)) {
+          target[part] = {};
+        }
+        target = target[part];
+        source = value;
+      }
+    }
+  }
+  return result;
+}
+
+// src/server.ts
+var TOOL_NAMES = {
+  discover: `${BRAND.nameLower}_discover`,
+  inspect: `${BRAND.nameLower}_inspect`,
+  blocks: `${BRAND.nameLower}_blocks`,
+  tokens: `${BRAND.nameLower}_tokens`,
+  implement: `${BRAND.nameLower}_implement`,
+  render: `${BRAND.nameLower}_render`,
+  fix: `${BRAND.nameLower}_fix`
+};
+var TOOLS = [
+  {
+    name: TOOL_NAMES.discover,
+    description: `Discover components in the design system. Use with no params to list all components. Use 'useCase' for AI-powered suggestions. Use 'component' to find alternatives. Use 'compact' for a token-efficient overview.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        useCase: {
+          type: "string",
+          description: 'Description of what you want to build \u2014 returns ranked suggestions (e.g., "form for user email input", "button to submit data")'
+        },
+        component: {
+          type: "string",
+          description: 'Component name to find alternatives for (e.g., "Button")'
+        },
+        category: {
+          type: "string",
+          description: 'Filter by category (e.g., "actions", "forms", "layout")'
+        },
+        search: {
+          type: "string",
+          description: "Search term to filter by name, description, or tags"
+        },
+        status: {
+          type: "string",
+          enum: ["stable", "beta", "deprecated", "experimental"],
+          description: "Filter by component status"
+        },
+        format: {
+          type: "string",
+          enum: ["markdown", "json"],
+          description: "Output format for context mode (default: markdown)"
+        },
+        compact: {
+          type: "boolean",
+          description: "If true, returns minimal output (just component names and categories)"
+        },
+        includeCode: {
+          type: "boolean",
+          description: "If true, includes code examples for each variant"
+        },
+        includeRelations: {
+          type: "boolean",
+          description: "If true, includes component relationships"
+        }
+      }
+    }
+  },
+  {
+    name: TOOL_NAMES.inspect,
+    description: `Get detailed information about a specific component: props, usage guidelines, code examples, accessibility \u2014 all in one call. Use 'fields' to request only specific data for token efficiency.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        component: {
+          type: "string",
+          description: 'Component name (e.g., "Button", "Input")'
+        },
+        fields: {
+          type: "array",
+          items: { type: "string" },
+          description: 'Specific fields to return (e.g., ["meta", "usage.when", "contract.propsSummary", "props", "examples", "guidelines"]). If omitted, returns everything. Supports dot notation.'
+        },
+        variant: {
+          type: "string",
+          description: 'Filter examples to a specific variant name (e.g., "Default", "Primary")'
+        },
+        maxExamples: {
+          type: "number",
+          description: "Maximum number of code examples to return (default: all)"
+        },
+        maxLines: {
+          type: "number",
+          description: "Maximum lines per code example (truncates longer examples)"
+        }
+      },
+      required: ["component"]
+    }
+  },
+  {
+    name: TOOL_NAMES.blocks,
+    description: `Search and retrieve composition blocks \u2014 named patterns showing how design system components wire together for common use cases (e.g., "Login Form", "Settings Page"). Returns the block with its code pattern.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: 'Exact block name to retrieve (e.g., "Login Form")'
+        },
+        search: {
+          type: "string",
+          description: "Free-text search across block names, descriptions, tags, and components"
+        },
+        component: {
+          type: "string",
+          description: 'Filter blocks that use a specific component (e.g., "Button")'
+        },
+        category: {
+          type: "string",
+          description: 'Filter by category (e.g., "authentication", "marketing", "dashboard", "settings", "ecommerce", "ai")'
+        }
+      }
+    }
+  },
+  {
+    name: TOOL_NAMES.tokens,
+    description: `List available CSS design tokens (custom properties) by category. Use this when you need to style custom elements or override defaults \u2014 no more guessing variable names. Filter by category or search by keyword.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        category: {
+          type: "string",
+          description: 'Filter by category (e.g., "colors", "spacing", "typography", "surfaces", "shadows", "radius", "borders", "text", "focus", "layout", "code", "component-sizing")'
+        },
+        search: {
+          type: "string",
+          description: 'Search token names (e.g., "accent", "hover", "padding")'
+        }
+      }
+    }
+  },
+  {
+    name: TOOL_NAMES.implement,
+    description: `One-shot implementation helper. Describe what you want to build and get everything needed in a single call: best-matching component(s) with full props and code examples, relevant composition blocks, and applicable CSS tokens. Saves multiple round-trips.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        useCase: {
+          type: "string",
+          description: 'What you want to implement (e.g., "login form", "data table with sorting", "streaming chat messages")'
+        }
+      },
+      required: ["useCase"]
+    }
+  },
+  {
+    name: TOOL_NAMES.render,
+    description: `Render a component and return a screenshot. Optionally compare against a Figma design ('figmaUrl'). Requires a running Fragments dev server (viewer URL). Use this to verify your implementation looks correct.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        component: {
+          type: "string",
+          description: 'Component name (e.g., "Button", "Card", "Input")'
+        },
+        props: {
+          type: "object",
+          description: 'Props to pass to the component (e.g., { "variant": "primary", "children": "Click me" })'
+        },
+        viewport: {
+          type: "object",
+          properties: {
+            width: { type: "number", description: "Viewport width (default: 800)" },
+            height: { type: "number", description: "Viewport height (default: 600)" }
+          },
+          description: "Optional viewport size for the render"
+        },
+        figmaUrl: {
+          type: "string",
+          description: "Figma frame URL \u2014 if provided, compares the render against the Figma design"
+        },
+        variant: {
+          type: "string",
+          description: "Variant name for compare mode"
+        },
+        threshold: {
+          type: "number",
+          description: "Diff threshold percentage (default: 1 for Figma)"
+        }
+      },
+      required: ["component"]
+    }
+  },
+  {
+    name: TOOL_NAMES.fix,
+    description: `Generate patches to fix token compliance issues in a component. Returns unified diff patches that replace hardcoded CSS values with design token references. Requires a running Fragments dev server.`,
+    inputSchema: {
+      type: "object",
+      properties: {
+        component: {
+          type: "string",
+          description: 'Component name to generate fixes for (e.g., "Button", "Card")'
+        },
+        variant: {
+          type: "string",
+          description: "Specific variant to fix (optional, fixes all variants if omitted)"
+        },
+        fixType: {
+          type: "string",
+          enum: ["token", "all"],
+          description: 'Type of fixes to generate: "token" for hardcoded\u2192token replacements, "all" for all available fixes (default: "all")'
+        }
+      },
+      required: ["component"]
+    }
+  }
+];
+function createMcpServer(config) {
+  const server = new Server(
+    {
+      name: `${BRAND.nameLower}-mcp`,
+      version: "0.3.0"
+    },
+    {
+      capabilities: {
+        tools: {}
+      }
+    }
+  );
+  let segmentsData = null;
+  const segmentPackageMap = /* @__PURE__ */ new Map();
+  let defaultPackageName = null;
+  async function loadSegments() {
+    if (segmentsData) return segmentsData;
+    const paths = findFragmentsJson(config.projectRoot);
+    if (paths.length === 0) {
+      throw new Error(
+        `No ${BRAND.outFile} found. Searched ${config.projectRoot} and package.json dependencies. Either run \`${BRAND.cliCommand} build\` or install a package with a "fragments" field in its package.json.`
+      );
+    }
+    const content = await readFile(paths[0], "utf-8");
+    segmentsData = JSON.parse(content);
+    if (!segmentsData.blocks && segmentsData.recipes) {
+      segmentsData.blocks = segmentsData.recipes;
+    }
+    if (segmentsData.packageName) {
+      for (const name of Object.keys(segmentsData.segments)) {
+        segmentPackageMap.set(name, segmentsData.packageName);
+      }
+    }
+    for (let i = 1; i < paths.length; i++) {
+      const extra = JSON.parse(await readFile(paths[i], "utf-8"));
+      if (extra.packageName) {
+        for (const name of Object.keys(extra.segments)) {
+          segmentPackageMap.set(name, extra.packageName);
+        }
+      }
+      Object.assign(segmentsData.segments, extra.segments);
+      const extraBlocks = extra.blocks ?? extra.recipes;
+      if (extraBlocks) {
+        segmentsData.blocks = { ...segmentsData.blocks, ...extraBlocks };
+      }
+    }
+    return segmentsData;
+  }
+  async function getPackageName(segmentName) {
+    await loadSegments();
+    if (segmentName) {
+      const segPkg = segmentPackageMap.get(segmentName);
+      if (segPkg) return segPkg;
+    }
+    if (defaultPackageName) return defaultPackageName;
+    if (segmentsData?.packageName) {
+      defaultPackageName = segmentsData.packageName;
+      return defaultPackageName;
+    }
+    const packageJsonPath = join2(config.projectRoot, "package.json");
+    if (existsSync2(packageJsonPath)) {
+      try {
+        const content = readFileSync2(packageJsonPath, "utf-8");
+        const pkg = JSON.parse(content);
+        if (pkg.name) {
+          defaultPackageName = pkg.name;
+          return defaultPackageName;
+        }
+      } catch {
+      }
+    }
+    defaultPackageName = "your-component-library";
+    return defaultPackageName;
+  }
+  server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return { tools: TOOLS };
+  });
+  server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args2 } = request.params;
+    try {
+      switch (name) {
+        // ================================================================
+        // DISCOVER — list, suggest, context, alternatives
+        // ================================================================
+        case TOOL_NAMES.discover: {
+          const data = await loadSegments();
+          const useCase = args2?.useCase ?? void 0;
+          const componentForAlts = args2?.component ?? void 0;
+          const category = args2?.category ?? void 0;
+          const search = args2?.search?.toLowerCase() ?? void 0;
+          const status = args2?.status ?? void 0;
+          const format = args2?.format ?? "markdown";
+          const compact = args2?.compact ?? false;
+          const includeCode = args2?.includeCode ?? false;
+          const includeRelations = args2?.includeRelations ?? false;
+          if (compact || args2?.format && !useCase && !componentForAlts && !category && !search && !status) {
+            const segments2 = Object.values(data.segments);
+            const allBlocks = Object.values(data.blocks ?? data.recipes ?? {});
+            const { content: ctxContent, tokenEstimate } = generateContext(segments2, {
+              format,
+              compact,
+              include: {
+                code: includeCode,
+                relations: includeRelations
+              }
+            }, allBlocks);
+            return {
+              content: [{ type: "text", text: ctxContent }],
+              _meta: { tokenEstimate }
+            };
+          }
+          if (useCase) {
+            const allSegments = Object.values(data.segments);
+            const allBlocks = Object.values(data.blocks ?? data.recipes ?? {});
+            const context = args2?.context?.toLowerCase() ?? "";
+            const fullQuery = context ? `${useCase} ${context}` : useCase;
+            const localData = {
+              segments: allSegments,
+              blocks: allBlocks,
+              tokenData: data.tokens
+            };
+            const searchResults = await hybridSearch(fullQuery, localData, 10, "component");
+            const scored = searchResults.map((result) => {
+              const segment = allSegments.find(
+                (s) => s.meta.name.toLowerCase() === result.name.toLowerCase()
+              );
+              if (!segment) return null;
+              const filteredWhen = filterPlaceholders(segment.usage?.when).slice(0, 3);
+              const filteredWhenNot = filterPlaceholders(segment.usage?.whenNot).slice(0, 2);
+              let confidence;
+              if (result.score >= 0.025) confidence = "high";
+              else if (result.score >= 0.015) confidence = "medium";
+              else confidence = "low";
+              return {
+                component: segment.meta.name,
+                category: segment.meta.category,
+                description: segment.meta.description,
+                confidence,
+                reasons: [`Matched via hybrid search (score: ${result.score.toFixed(4)})`],
+                usage: { when: filteredWhen, whenNot: filteredWhenNot },
+                variantCount: segment.variants.length,
+                status: segment.meta.status
+              };
+            }).filter(Boolean);
+            const suggestions = [];
+            const categoryCount = {};
+            for (const item of scored) {
+              if (!item) continue;
+              const cat = item.category || "uncategorized";
+              const count = categoryCount[cat] || 0;
+              if (count < 2 || suggestions.length < 3) {
+                suggestions.push(item);
+                categoryCount[cat] = count + 1;
+                if (suggestions.length >= 5) break;
+              }
+            }
+            const compositionHint = suggestions.length >= 2 ? `These components work well together. For example, ${suggestions[0].component} can be combined with ${suggestions.slice(1, 3).map((s) => s.component).join(" and ")}.` : void 0;
+            const useCaseLower = useCase.toLowerCase();
+            const STYLE_KEYWORDS = ["color", "spacing", "padding", "margin", "font", "border", "radius", "shadow", "variable", "token", "css", "theme", "dark mode", "background", "hover"];
+            const isStyleQuery = STYLE_KEYWORDS.some((kw) => useCaseLower.includes(kw));
+            const noMatch = suggestions.length === 0;
+            const weakMatch = !noMatch && suggestions.every((s) => s.confidence === "low");
+            let recommendation;
+            let nextStep;
+            if (noMatch) {
+              recommendation = isStyleQuery ? `No matching components found. Your query seems styling-related \u2014 try ${TOOL_NAMES.tokens} to find CSS custom properties.` : "No matching components found. Try different keywords or browse all components with fragments_discover.";
+              nextStep = isStyleQuery ? `Use ${TOOL_NAMES.tokens}(search: "${useCaseLower.split(/\s+/)[0]}") to find design tokens.` : void 0;
+            } else if (weakMatch) {
+              recommendation = `Weak matches only \u2014 ${suggestions[0].component} might work but confidence is low.${isStyleQuery ? ` If you need a CSS variable, try ${TOOL_NAMES.tokens}.` : ""}`;
+              nextStep = `Use ${TOOL_NAMES.inspect}("${suggestions[0].component}") to check if it fits, or try broader search terms.`;
+            } else {
+              recommendation = `Best match: ${suggestions[0].component} (${suggestions[0].confidence} confidence) - ${suggestions[0].description}`;
+              nextStep = `Use ${TOOL_NAMES.inspect}("${suggestions[0].component}") for full details.`;
+            }
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  useCase,
+                  context: context || void 0,
+                  suggestions,
+                  noMatch,
+                  weakMatch,
+                  recommendation,
+                  compositionHint,
+                  nextStep
+                }, null, 2)
+              }]
+            };
+          }
+          if (componentForAlts) {
+            const segment = Object.values(data.segments).find(
+              (s) => s.meta.name.toLowerCase() === componentForAlts.toLowerCase()
+            );
+            if (!segment) {
+              throw new Error(`Component "${componentForAlts}" not found. Use fragments_discover to see available components.`);
+            }
+            const relations = segment.relations ?? [];
+            const referencedBy = Object.values(data.segments).filter(
+              (s) => s.relations?.some((r) => r.component.toLowerCase() === componentForAlts.toLowerCase())
+            ).map((s) => ({
+              component: s.meta.name,
+              relationship: s.relations?.find(
+                (r) => r.component.toLowerCase() === componentForAlts.toLowerCase()
+              )?.relationship,
+              note: s.relations?.find(
+                (r) => r.component.toLowerCase() === componentForAlts.toLowerCase()
+              )?.note
+            }));
+            const sameCategory = Object.values(data.segments).filter(
+              (s) => s.meta.category === segment.meta.category && s.meta.name.toLowerCase() !== componentForAlts.toLowerCase()
+            ).map((s) => ({
+              component: s.meta.name,
+              description: s.meta.description
+            }));
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  component: segment.meta.name,
+                  category: segment.meta.category,
+                  directRelations: relations,
+                  referencedBy,
+                  sameCategory,
+                  suggestion: relations.find((r) => r.relationship === "alternative") ? `Consider ${relations.find((r) => r.relationship === "alternative")?.component}: ${relations.find((r) => r.relationship === "alternative")?.note}` : void 0
+                }, null, 2)
+              }]
+            };
+          }
+          const segments = Object.values(data.segments).filter((s) => {
+            if (category && s.meta.category !== category) return false;
+            if (status && (s.meta.status ?? "stable") !== status) return false;
+            if (search) {
+              const nameMatch = s.meta.name.toLowerCase().includes(search);
+              const descMatch = s.meta.description?.toLowerCase().includes(search);
+              const tagMatch = s.meta.tags?.some((t) => t.toLowerCase().includes(search));
+              if (!nameMatch && !descMatch && !tagMatch) return false;
+            }
+            return true;
+          }).map((s) => ({
+            name: s.meta.name,
+            category: s.meta.category,
+            description: s.meta.description,
+            status: s.meta.status ?? "stable",
+            variantCount: s.variants.length,
+            tags: s.meta.tags ?? []
+          }));
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                total: segments.length,
+                segments,
+                categories: [...new Set(segments.map((s) => s.category))],
+                hint: segments.length === 0 ? "No components found. Try broader search terms or check available categories." : segments.length > 5 ? "Use fragments_discover with useCase for recommendations, or fragments_inspect for details on a specific component." : void 0
+              }, null, 2)
+            }]
+          };
+        }
+        // ================================================================
+        // INSPECT
+        // ================================================================
+        case TOOL_NAMES.inspect: {
+          const data = await loadSegments();
+          const componentName = args2?.component;
+          const fields = args2?.fields;
+          const variantName = args2?.variant ?? void 0;
+          const maxExamples = args2?.maxExamples;
+          const maxLines = args2?.maxLines;
+          if (!componentName) {
+            throw new Error("component is required");
+          }
+          const segment = Object.values(data.segments).find(
+            (s) => s.meta.name.toLowerCase() === componentName.toLowerCase()
+          );
+          if (!segment) {
+            throw new Error(`Component "${componentName}" not found. Use fragments_discover to see available components.`);
+          }
+          const pkgName = await getPackageName(segment.meta.name);
+          let variants = segment.variants;
+          if (variantName) {
+            const query = variantName.toLowerCase();
+            let filtered = variants.filter((v) => v.name.toLowerCase() === query);
+            if (filtered.length === 0) {
+              filtered = variants.filter((v) => v.name.toLowerCase().startsWith(query));
+            }
+            if (filtered.length === 0) {
+              filtered = variants.filter((v) => v.name.toLowerCase().includes(query));
+            }
+            if (filtered.length > 0) {
+              variants = filtered;
+            } else {
+              throw new Error(
+                `Variant "${variantName}" not found for ${componentName}. Available: ${segment.variants.map((v) => v.name).join(", ")}`
+              );
+            }
+          }
+          if (maxExamples && maxExamples > 0) {
+            variants = variants.slice(0, maxExamples);
+          }
+          const truncateCode = (code) => {
+            if (!maxLines || maxLines <= 0) return code;
+            const lines = code.split("\n");
+            if (lines.length <= maxLines) return code;
+            return lines.slice(0, maxLines).join("\n") + "\n// ... truncated";
+          };
+          const examples = variants.map((variant) => {
+            if (variant.code) {
+              return {
+                variant: variant.name,
+                description: variant.description,
+                code: truncateCode(variant.code)
+              };
+            }
+            return {
+              variant: variant.name,
+              description: variant.description,
+              code: `<${segment.meta.name} />`,
+              note: "No code example provided in fragment. Refer to props for customization."
+            };
+          });
+          const propsReference = Object.entries(segment.props ?? {}).map(([propName, prop]) => ({
+            name: propName,
+            type: prop.type,
+            required: prop.required,
+            default: prop.default,
+            description: prop.description
+          }));
+          const propConstraints = Object.entries(segment.props ?? {}).filter(([, prop]) => prop.constraints && prop.constraints.length > 0).map(([pName, prop]) => ({
+            prop: pName,
+            constraints: prop.constraints
+          }));
+          const fullResult = {
+            meta: segment.meta,
+            props: segment.props,
+            variants: segment.variants,
+            relations: segment.relations,
+            contract: segment.contract,
+            generated: segment._generated,
+            guidelines: {
+              when: filterPlaceholders(segment.usage?.when),
+              whenNot: filterPlaceholders(segment.usage?.whenNot),
+              guidelines: segment.usage?.guidelines ?? [],
+              accessibility: segment.usage?.accessibility ?? [],
+              propConstraints,
+              alternatives: segment.relations?.filter((r) => r.relationship === "alternative").map((r) => ({
+                component: r.component,
+                note: r.note
+              })) ?? []
+            },
+            examples: {
+              import: `import { ${segment.meta.name} } from '${pkgName}';`,
+              code: examples,
+              propsReference
+            }
+          };
+          const result = fields && fields.length > 0 ? projectFields(fullResult, fields) : fullResult;
+          return {
+            content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+          };
+        }
+        // ================================================================
+        // BLOCKS
+        // ================================================================
+        case TOOL_NAMES.blocks: {
+          const data = await loadSegments();
+          const blockName = args2?.name;
+          const search = args2?.search?.toLowerCase() ?? void 0;
+          const component = args2?.component?.toLowerCase() ?? void 0;
+          const category = args2?.category?.toLowerCase() ?? void 0;
+          const allBlocks = Object.values(data.blocks ?? data.recipes ?? {});
+          if (allBlocks.length === 0) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  total: 0,
+                  blocks: [],
+                  hint: `No blocks found. Run \`${BRAND.cliCommand} build\` after adding .block.ts files.`
+                }, null, 2)
+              }]
+            };
+          }
+          let filtered = allBlocks;
+          if (blockName) {
+            filtered = filtered.filter(
+              (b) => b.name.toLowerCase() === blockName.toLowerCase()
+            );
+          }
+          if (search) {
+            filtered = filtered.filter((b) => {
+              const haystack = [
+                b.name,
+                b.description,
+                ...b.tags ?? [],
+                ...b.components,
+                b.category
+              ].join(" ").toLowerCase();
+              return haystack.includes(search);
+            });
+          }
+          if (component) {
+            filtered = filtered.filter(
+              (b) => b.components.some((c) => c.toLowerCase() === component)
+            );
+          }
+          if (category) {
+            filtered = filtered.filter(
+              (b) => b.category.toLowerCase() === category
+            );
+          }
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                total: filtered.length,
+                blocks: filtered
+              }, null, 2)
+            }]
+          };
+        }
+        // ================================================================
+        // TOKENS
+        // ================================================================
+        case TOOL_NAMES.tokens: {
+          const data = await loadSegments();
+          const category = args2?.category?.toLowerCase() ?? void 0;
+          const search = args2?.search?.toLowerCase() ?? void 0;
+          const tokenData = data.tokens;
+          if (!tokenData || tokenData.total === 0) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  total: 0,
+                  categories: {},
+                  hint: `No design tokens found. Add a tokens.include pattern to your ${BRAND.configFile} and run \`${BRAND.cliCommand} build\`.`
+                }, null, 2)
+              }]
+            };
+          }
+          let filteredCategories = {};
+          let filteredTotal = 0;
+          for (const [cat, tokens] of Object.entries(tokenData.categories)) {
+            if (category && cat !== category) continue;
+            let filtered = tokens;
+            if (search) {
+              filtered = tokens.filter(
+                (t) => t.name.toLowerCase().includes(search) || t.description && t.description.toLowerCase().includes(search)
+              );
+            }
+            if (filtered.length > 0) {
+              filteredCategories[cat] = filtered;
+              filteredTotal += filtered.length;
+            }
+          }
+          let hint;
+          if (filteredTotal === 0) {
+            const availableCategories = Object.keys(tokenData.categories);
+            hint = search ? `No tokens matching "${search}". Try: ${availableCategories.join(", ")}` : category ? `Category "${category}" not found. Available: ${availableCategories.join(", ")}` : void 0;
+          } else if (!category && !search) {
+            hint = `Use var(--token-name) in your CSS/styles. Filter by category or search to narrow results.`;
+          }
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                prefix: tokenData.prefix,
+                total: filteredTotal,
+                totalAvailable: tokenData.total,
+                categories: filteredCategories,
+                ...hint && { hint },
+                ...!category && !search && {
+                  availableCategories: Object.entries(tokenData.categories).map(
+                    ([cat, tokens]) => ({ category: cat, count: tokens.length })
+                  )
+                }
+              }, null, 2)
+            }]
+          };
+        }
+        // ================================================================
+        // IMPLEMENT — one-shot discover + inspect + blocks + tokens
+        // ================================================================
+        case TOOL_NAMES.implement: {
+          const data = await loadSegments();
+          const useCase = args2?.useCase;
+          if (!useCase) {
+            throw new Error("useCase is required");
+          }
+          const allSegments = Object.values(data.segments);
+          const allBlocks = Object.values(data.blocks ?? data.recipes ?? {});
+          const tokenData = data.tokens;
+          const localData = {
+            segments: allSegments,
+            blocks: allBlocks,
+            tokenData
+          };
+          const searchResults = await hybridSearch(useCase, localData, 15);
+          const componentResults = searchResults.filter((r) => r.kind === "component").slice(0, 3);
+          const blockResults = searchResults.filter((r) => r.kind === "block").slice(0, 2);
+          const tokenResults = searchResults.filter((r) => r.kind === "token").slice(0, 5);
+          const topMatches = componentResults.map((result) => {
+            const segment = allSegments.find(
+              (s) => s.meta.name.toLowerCase() === result.name.toLowerCase()
+            );
+            return segment ? { segment, score: result.score } : null;
+          }).filter(Boolean);
+          const components = await Promise.all(
+            topMatches.map(async ({ segment: s, score }) => {
+              const pkgName = await getPackageName(s.meta.name);
+              const examples = s.variants.slice(0, 2).map((v) => ({
+                variant: v.name,
+                code: v.code ?? `<${s.meta.name} />`
+              }));
+              const propsSummary = Object.entries(s.props ?? {}).slice(0, 10).map(
+                ([pName, p]) => `${pName}${p.required ? " (required)" : ""}: ${p.type}${p.values ? ` = ${p.values.join("|")}` : ""}`
+              );
+              return {
+                name: s.meta.name,
+                category: s.meta.category,
+                description: s.meta.description,
+                confidence: score >= 0.025 ? "high" : score >= 0.015 ? "medium" : "low",
+                import: `import { ${s.meta.name} } from '${pkgName}';`,
+                props: propsSummary,
+                examples,
+                guidelines: filterPlaceholders(s.usage?.when).slice(0, 3),
+                accessibility: s.usage?.accessibility?.slice(0, 2) ?? []
+              };
+            })
+          );
+          const matchingBlocks = blockResults.map((result) => {
+            const block = allBlocks.find(
+              (b) => b.name.toLowerCase() === result.name.toLowerCase()
+            );
+            return block ? { name: block.name, description: block.description, components: block.components, code: block.code } : null;
+          }).filter(Boolean);
+          let relevantTokens;
+          if (tokenResults.length > 0 && tokenData) {
+            relevantTokens = {};
+            for (const result of tokenResults) {
+              for (const [cat, tokens] of Object.entries(tokenData.categories)) {
+                if (tokens.some((t) => t.name === result.name)) {
+                  if (!relevantTokens[cat]) relevantTokens[cat] = [];
+                  relevantTokens[cat].push(result.name);
+                  break;
+                }
+              }
+            }
+            if (Object.keys(relevantTokens).length === 0) relevantTokens = void 0;
+          }
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                useCase,
+                components,
+                blocks: matchingBlocks.length > 0 ? matchingBlocks : void 0,
+                tokens: relevantTokens,
+                noMatch: components.length === 0,
+                summary: components.length > 0 ? `Found ${components.length} component(s) for "${useCase}". ${matchingBlocks.length > 0 ? `Plus ${matchingBlocks.length} ready-to-use block(s).` : ""}` : `No components match "${useCase}". Try ${TOOL_NAMES.discover} with different terms${tokenData ? ` or ${TOOL_NAMES.tokens} for CSS variables` : ""}.`
+              }, null, 2)
+            }]
+          };
+        }
+        // ================================================================
+        // RENDER — HTTP-only (no Playwright)
+        // ================================================================
+        case TOOL_NAMES.render: {
+          const componentName = args2?.component;
+          const variantName = args2?.variant;
+          const props = args2?.props ?? {};
+          const viewport = args2?.viewport;
+          const figmaUrl = args2?.figmaUrl;
+          const threshold = args2?.threshold ?? (figmaUrl ? 1 : config.threshold ?? DEFAULTS.diffThreshold);
+          if (!componentName) {
+            return {
+              content: [{ type: "text", text: "Error: component name is required" }],
+              isError: true
+            };
+          }
+          const viewerUrl2 = config.viewerUrl;
+          if (!viewerUrl2) {
+            return {
+              content: [{
+                type: "text",
+                text: "Render requires a running Fragments dev server. Start it with `fragments dev` and pass --viewer-url, or use the CLI MCP server which includes Playwright."
+              }],
+              isError: true
+            };
+          }
+          if (figmaUrl) {
+            try {
+              const result = await compareComponent(viewerUrl2, {
+                component: componentName,
+                variant: variantName,
+                props,
+                figmaUrl,
+                threshold
+              });
+              if (result.error) {
+                return {
+                  content: [{
+                    type: "text",
+                    text: `Compare error: ${result.error}${result.suggestion ? `
+Suggestion: ${result.suggestion}` : ""}`
+                  }],
+                  isError: true
+                };
+              }
+              const content = [];
+              const summaryText = result.match ? `MATCH: ${componentName} matches Figma design (${result.diffPercentage}% diff, threshold: ${result.threshold}%)` : `MISMATCH: ${componentName} differs from Figma design by ${result.diffPercentage}% (threshold: ${result.threshold}%)`;
+              content.push({ type: "text", text: summaryText });
+              if (result.diff && !result.match) {
+                content.push({
+                  type: "image",
+                  data: result.diff.replace("data:image/png;base64,", ""),
+                  mimeType: "image/png"
+                });
+                content.push({
+                  type: "text",
+                  text: `Diff image above shows visual differences (red highlights). Changed regions: ${result.changedRegions?.length ?? 0}`
+                });
+              }
+              content.push({
+                type: "text",
+                text: JSON.stringify({
+                  match: result.match,
+                  diffPercentage: result.diffPercentage,
+                  threshold: result.threshold,
+                  figmaUrl: result.figmaUrl,
+                  changedRegions: result.changedRegions
+                }, null, 2)
+              });
+              return { content };
+            } catch (error) {
+              return {
+                content: [{
+                  type: "text",
+                  text: `Failed to compare component: ${error instanceof Error ? error.message : "Unknown error"}. Make sure the Fragments dev server is running and FIGMA_ACCESS_TOKEN is set.`
+                }],
+                isError: true
+              };
+            }
+          }
+          try {
+            const result = await renderComponent(viewerUrl2, {
+              component: componentName,
+              props,
+              viewport: viewport ?? { width: 800, height: 600 }
+            });
+            if (result.error) {
+              return {
+                content: [{ type: "text", text: `Render error: ${result.error}` }],
+                isError: true
+              };
+            }
+            return {
+              content: [
+                {
+                  type: "image",
+                  data: result.screenshot.replace("data:image/png;base64,", ""),
+                  mimeType: "image/png"
+                },
+                {
+                  type: "text",
+                  text: `Successfully rendered ${componentName} with props: ${JSON.stringify(props)}`
+                }
+              ]
+            };
+          } catch (error) {
+            return {
+              content: [{
+                type: "text",
+                text: `Failed to render component: ${error instanceof Error ? error.message : "Unknown error"}. Make sure the Fragments dev server is running.`
+              }],
+              isError: true
+            };
+          }
+        }
+        // ================================================================
+        // FIX — HTTP-only (no Playwright)
+        // ================================================================
+        case TOOL_NAMES.fix: {
+          const data = await loadSegments();
+          const componentName = args2?.component;
+          const variantName = args2?.variant ?? void 0;
+          const fixType = args2?.fixType ?? "all";
+          if (!componentName) {
+            throw new Error("component is required");
+          }
+          const segment = Object.values(data.segments).find(
+            (s) => s.meta.name.toLowerCase() === componentName.toLowerCase()
+          );
+          if (!segment) {
+            throw new Error(`Component "${componentName}" not found. Use fragments_discover to see available components.`);
+          }
+          const viewerUrl2 = config.viewerUrl;
+          if (!viewerUrl2) {
+            return {
+              content: [{
+                type: "text",
+                text: "Fix requires a running Fragments dev server. Start it with `fragments dev` and pass --viewer-url."
+              }],
+              isError: true
+            };
+          }
+          try {
+            const result = await fixComponent(viewerUrl2, {
+              component: componentName,
+              variant: variantName,
+              fixType
+            });
+            if (result.error) {
+              return {
+                content: [{
+                  type: "text",
+                  text: `Fix generation error: ${result.error}`
+                }],
+                isError: true
+              };
+            }
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  component: componentName,
+                  variant: variantName ?? "all",
+                  fixType,
+                  patches: result.patches,
+                  summary: result.summary,
+                  patchCount: result.patches.length,
+                  nextStep: result.patches.length > 0 ? "Apply patches using your editor or `patch` command, then run fragments_render to confirm fixes." : void 0
+                }, null, 2)
+              }]
+            };
+          } catch (error) {
+            return {
+              content: [{
+                type: "text",
+                text: `Failed to generate fixes: ${error instanceof Error ? error.message : "Unknown error"}. Make sure the Fragments dev server is running.`
+              }],
+              isError: true
+            };
+          }
+        }
+        default:
+          throw new Error(`Unknown tool: ${name}`);
+      }
+    } catch (error) {
+      return {
+        content: [{
+          type: "text",
+          text: JSON.stringify({
+            error: error instanceof Error ? error.message : String(error)
+          })
+        }],
+        isError: true
+      };
+    }
+  });
+  return server;
+}
+async function startMcpServer(config) {
+  const server = createMcpServer(config);
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+
+// src/bin.ts
+var args = process.argv.slice(2);
+var projectRoot = process.cwd();
+var viewerUrl;
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+  if (arg === "--project-root" || arg === "-p") {
+    projectRoot = args[++i] ?? projectRoot;
+  } else if (arg === "--viewer-url" || arg === "-u") {
+    viewerUrl = args[++i];
+  } else if (arg === "--help" || arg === "-h") {
+    console.log(`
+Usage: fragments-mcp [options]
+
+Standalone MCP server for Fragments design system.
+Provides component discovery with semantic search, no CLI/Playwright needed.
+
+Options:
+  -p, --project-root <path>  Project root directory (default: cwd)
+  -u, --viewer-url <url>     Viewer URL for render/fix tools (optional)
+  -h, --help                 Show this help message
+
+Setup (Claude Code / Cursor):
+  {
+    "mcpServers": {
+      "fragments": {
+        "command": "npx",
+        "args": ["@fragments-sdk/mcp"]
+      }
+    }
+  }
+`);
+    process.exit(0);
+  }
+}
+startMcpServer({
+  projectRoot,
+  viewerUrl
+}).catch((error) => {
+  console.error("Failed to start MCP server:", error);
+  process.exit(1);
+});
+//# sourceMappingURL=bin.js.map