@fragments-sdk/context 0.2.0 → 0.3.0

package/dist/{chunk-ZMBYQK43.js → chunk-F3ZH5BUA.js}

@@ -58,7 +58,6 @@ function mergeOverlapping(chunks) {
     if (next.startLine <= current.endLine + 1) {
       const currentLines = current.content.split("\n");
       const nextLines = next.content.split("\n");
-      const overlapStart = next.startLine - current.startLine;
       const newLines = nextLines.slice(current.endLine - next.startLine + 1);
       if (newLines.length > 0) {
         current = {

package/dist/chunk-HAJWPNLU.js

@@ -0,0 +1,310 @@
+// src/mcp-tools/index.ts
+var MCP_TOOL_DEFINITIONS = [
+  {
+    key: "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.",
+    params: {
+      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"
+      }
+    }
+  },
+  {
+    key: "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.",
+    params: {
+      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"]
+  },
+  {
+    key: "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.',
+    params: {
+      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")'
+      }
+    }
+  },
+  {
+    key: "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.",
+    params: {
+      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")'
+      }
+    }
+  },
+  {
+    key: "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.",
+    params: {
+      useCase: {
+        type: "string",
+        description: 'What you want to implement (e.g., "login form", "data table with sorting", "streaming chat messages")'
+      }
+    },
+    required: ["useCase"]
+  },
+  {
+    key: "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.",
+    params: {
+      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"]
+  },
+  {
+    key: "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.",
+    params: {
+      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"]
+  },
+  {
+    key: "graph",
+    description: 'Query the component relationship graph. Understand dependencies, impact analysis, composition trees, alternatives, and design system health. Use "health" for an overview, "dependencies"/"dependents" for direct relationships, "impact" for change analysis, "composition" for compound component trees.',
+    params: {
+      mode: {
+        type: "string",
+        enum: ["dependencies", "dependents", "impact", "path", "composition", "alternatives", "islands", "health"],
+        description: "Query mode"
+      },
+      component: {
+        type: "string",
+        description: "Component name (required for most modes)"
+      },
+      target: {
+        type: "string",
+        description: 'Target component for "path" mode'
+      },
+      edgeTypes: {
+        type: "array",
+        items: { type: "string" },
+        description: "Filter by edge types (imports, hook-depends, renders, composes, parent-of, alternative-to, sibling-of)"
+      },
+      maxDepth: {
+        type: "number",
+        description: "Max traversal depth for impact mode (default: 3)"
+      }
+    },
+    required: ["mode"]
+  },
+  {
+    key: "a11y",
+    description: "Run an accessibility audit on a component. Returns axe-core violations, a WCAG compliance score, and optional fix suggestions. Requires a running Fragments dev server.",
+    params: {
+      component: {
+        type: "string",
+        description: 'Component name to audit (e.g., "Button", "Card")'
+      },
+      variant: {
+        type: "string",
+        description: "Specific variant to audit (optional, audits all variants if omitted)"
+      },
+      standard: {
+        type: "string",
+        enum: ["AA", "AAA"],
+        description: "WCAG compliance level to check against (default: AA)"
+      },
+      includeFixPatches: {
+        type: "boolean",
+        description: "If true, includes auto-fix suggestions for each violation"
+      }
+    },
+    required: ["component"]
+  }
+];
+var CLI_TOOL_EXTENSIONS = [
+  {
+    key: "render",
+    description: "Render a component and return a screenshot. Optionally compare against a stored baseline ('baseline: true') or against a Figma design ('figmaUrl'). Use this to verify your implementation looks correct.",
+    params: {
+      baseline: {
+        type: "boolean",
+        description: "If true, compares the render against the stored baseline screenshot (requires variant)"
+      },
+      theme: {
+        type: "string",
+        enum: ["light", "dark"],
+        description: "Theme for baseline verification (default: light)"
+      }
+    }
+  },
+  {
+    key: "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. Use this after fragments_render identifies issues to automatically fix them.",
+    params: {}
+  }
+];
+function buildToolNames(prefix) {
+  const map = {};
+  for (const def of MCP_TOOL_DEFINITIONS) {
+    map[def.key] = `${prefix}_${def.key}`;
+  }
+  return map;
+}
+function buildMcpTools(prefix, extensions) {
+  const extMap = /* @__PURE__ */ new Map();
+  if (extensions) {
+    for (const ext of extensions) {
+      extMap.set(ext.key, ext);
+    }
+  }
+  return MCP_TOOL_DEFINITIONS.map((def) => {
+    const ext = extMap.get(def.key);
+    const mergedParams = ext ? { ...def.params, ...ext.params } : def.params;
+    const properties = {};
+    for (const [name, param] of Object.entries(mergedParams)) {
+      const prop = {
+        type: param.type,
+        description: param.description
+      };
+      if (param.enum) prop.enum = param.enum;
+      if (param.items) prop.items = param.items;
+      if (param.properties) {
+        const nested = {};
+        for (const [k, v] of Object.entries(param.properties)) {
+          nested[k] = { type: v.type, description: v.description };
+        }
+        prop.properties = nested;
+      }
+      properties[name] = prop;
+    }
+    return {
+      name: `${prefix}_${def.key}`,
+      description: ext?.description ?? def.description,
+      inputSchema: {
+        type: "object",
+        properties,
+        ...def.required && { required: def.required }
+      }
+    };
+  });
+}
+
+export {
+  MCP_TOOL_DEFINITIONS,
+  CLI_TOOL_EXTENSIONS,
+  buildToolNames,
+  buildMcpTools
+};