@fragments-sdk/cli 0.11.1 → 0.13.0

package/src/ai.ts

@@ -1,266 +0,0 @@
-import type { CompiledFragment, CompiledFragmentsFile } from "./core/index.js";
-import { generateContext } from "./core/index.js";
-
-export interface AiSuggestOptions {
-  /** The user's prompt describing what they want to build */
-  prompt: string;
-  /** Optional additional context */
-  context?: string;
-  /** Compiled fragments to use */
-  fragments: CompiledFragment[];
-  /** Whether to stream output */
-  stream?: boolean;
-}
-
-export interface AiSuggestResult {
-  success: boolean;
-  response?: string;
-  error?: string;
-  tokensUsed?: number;
-}
-
-/**
- * Call AI API to get component suggestions based on design system context.
- * Supports both Anthropic and OpenAI APIs via environment variables.
- */
-export async function aiSuggest(options: AiSuggestOptions): Promise<AiSuggestResult> {
-  const { prompt, context, fragments, stream = true } = options;
-
-  // Check for API keys
-  const anthropicKey = process.env.ANTHROPIC_API_KEY;
-  const openaiKey = process.env.OPENAI_API_KEY;
-
-  if (!anthropicKey && !openaiKey) {
-    return {
-      success: false,
-      error: "No API key found. Set ANTHROPIC_API_KEY or OPENAI_API_KEY environment variable.",
-    };
-  }
-
-  // Generate design system context
-  const { content: systemContext } = generateContext(fragments, {
-    format: "markdown",
-    compact: false,
-    include: {
-      props: true,
-      variants: true,
-      usage: true,
-      code: true,
-    },
-  });
-
-  // Build the system prompt
-  const systemPrompt = `You are a UI developer assistant helping to build interfaces using a specific design system.
-
-You have access to the following design system components:
-
-${systemContext}
-
-When suggesting components:
-1. ONLY use components from this design system - never suggest generic HTML or components not listed above
-2. Explain WHY each component is appropriate for the use case
-3. Show complete, ready-to-use code examples with correct props
-4. Follow the "when to use" and "when NOT to use" guidelines for each component
-5. Consider accessibility and best practices
-6. If multiple approaches are valid, recommend the simplest one first
-
-Format your response as:
-1. A brief explanation of the approach
-2. Code example(s) with comments
-3. Any important notes about props or customization`;
-
-  // Build the user prompt
-  const userPrompt = context
-    ? `${prompt}\n\nAdditional context: ${context}`
-    : prompt;
-
-  // Prefer Anthropic, fallback to OpenAI
-  if (anthropicKey) {
-    return callAnthropic(anthropicKey, systemPrompt, userPrompt, stream);
-  } else {
-    return callOpenAI(openaiKey!, systemPrompt, userPrompt, stream);
-  }
-}
-
-/**
- * Call Anthropic's Claude API
- */
-async function callAnthropic(
-  apiKey: string,
-  systemPrompt: string,
-  userPrompt: string,
-  stream: boolean
-): Promise<AiSuggestResult> {
-  try {
-    const response = await fetch("https://api.anthropic.com/v1/messages", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": apiKey,
-        "anthropic-version": "2023-06-01",
-      },
-      body: JSON.stringify({
-        model: "claude-sonnet-4-20250514",
-        max_tokens: 4096,
-        system: systemPrompt,
-        messages: [
-          {
-            role: "user",
-            content: userPrompt,
-          },
-        ],
-        stream: stream,
-      }),
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      return {
-        success: false,
-        error: `Anthropic API error: ${response.status} - ${error}`,
-      };
-    }
-
-    if (stream && response.body) {
-      // Stream the response
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let fullResponse = "";
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-
-        const chunk = decoder.decode(value, { stream: true });
-        const lines = chunk.split("\n");
-
-        for (const line of lines) {
-          if (line.startsWith("data: ")) {
-            const data = line.slice(6);
-            if (data === "[DONE]") continue;
-
-            try {
-              const parsed = JSON.parse(data);
-              if (parsed.type === "content_block_delta" && parsed.delta?.text) {
-                process.stdout.write(parsed.delta.text);
-                fullResponse += parsed.delta.text;
-              }
-            } catch {
-              // Skip malformed JSON
-            }
-          }
-        }
-      }
-
-      console.log(); // Final newline
-      return {
-        success: true,
-        response: fullResponse,
-      };
-    } else {
-      const data = await response.json();
-      const text = data.content?.[0]?.text ?? "";
-
-      return {
-        success: true,
-        response: text,
-        tokensUsed: data.usage?.input_tokens + data.usage?.output_tokens,
-      };
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: `Failed to call Anthropic API: ${error instanceof Error ? error.message : error}`,
-    };
-  }
-}
-
-/**
- * Call OpenAI's API
- */
-async function callOpenAI(
-  apiKey: string,
-  systemPrompt: string,
-  userPrompt: string,
-  stream: boolean
-): Promise<AiSuggestResult> {
-  try {
-    const response = await fetch("https://api.openai.com/v1/chat/completions", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${apiKey}`,
-      },
-      body: JSON.stringify({
-        model: "gpt-4o",
-        messages: [
-          { role: "system", content: systemPrompt },
-          { role: "user", content: userPrompt },
-        ],
-        max_tokens: 4096,
-        stream: stream,
-      }),
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      return {
-        success: false,
-        error: `OpenAI API error: ${response.status} - ${error}`,
-      };
-    }
-
-    if (stream && response.body) {
-      // Stream the response
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let fullResponse = "";
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-
-        const chunk = decoder.decode(value, { stream: true });
-        const lines = chunk.split("\n");
-
-        for (const line of lines) {
-          if (line.startsWith("data: ")) {
-            const data = line.slice(6);
-            if (data === "[DONE]") continue;
-
-            try {
-              const parsed = JSON.parse(data);
-              const content = parsed.choices?.[0]?.delta?.content;
-              if (content) {
-                process.stdout.write(content);
-                fullResponse += content;
-              }
-            } catch {
-              // Skip malformed JSON
-            }
-          }
-        }
-      }
-
-      console.log(); // Final newline
-      return {
-        success: true,
-        response: fullResponse,
-      };
-    } else {
-      const data = await response.json();
-      const text = data.choices?.[0]?.message?.content ?? "";
-
-      return {
-        success: true,
-        response: text,
-        tokensUsed: data.usage?.total_tokens,
-      };
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: `Failed to call OpenAI API: ${error instanceof Error ? error.message : error}`,
-    };
-  }
-}

package/src/commands/init-framework.ts

@@ -1,414 +0,0 @@
-/**
- * Framework detection and auto-configuration for fragments init.
- *
- * Detects the consumer's framework (Next.js, Vite, Remix, Astro)
- * and generates appropriate configuration files.
- */
-
-import { readFile, writeFile, access } from "node:fs/promises";
-import { join } from "node:path";
-import pc from "picocolors";
-
-// ============================================
-// Types
-// ============================================
-
-export type Framework = "nextjs" | "vite" | "remix" | "astro" | "unknown";
-
-export interface FrameworkDetection {
-  framework: Framework;
-  /** Package that triggered the detection */
-  detectedBy: string | null;
-}
-
-export interface FrameworkSetupOptions {
-  /** Project root directory */
-  projectRoot: string;
-  /** Override auto-detected framework */
-  framework?: Framework;
-  /** Seed overrides for globals.scss generation */
-  seeds?: {
-    brand?: string;
-    neutral?: string;
-    density?: string;
-    radiusStyle?: string;
-  };
-}
-
-export interface FrameworkSetupResult {
-  framework: Framework;
-  filesCreated: string[];
-  packagesToInstall: string[];
-  configModified: string[];
-  warnings: string[];
-}
-
-// ============================================
-// Framework Detection
-// ============================================
-
-/**
- * Detect framework from package.json dependencies
- */
-export async function detectFramework(
-  projectRoot: string
-): Promise<FrameworkDetection> {
-  try {
-    const pkgPath = join(projectRoot, "package.json");
-    const pkgContent = await readFile(pkgPath, "utf-8");
-    const pkg = JSON.parse(pkgContent);
-
-    const allDeps = {
-      ...pkg.dependencies,
-      ...pkg.devDependencies,
-    };
-
-    // Check in order of specificity
-    if (allDeps["next"]) {
-      return { framework: "nextjs", detectedBy: "next" };
-    }
-    if (allDeps["@remix-run/react"]) {
-      return { framework: "remix", detectedBy: "@remix-run/react" };
-    }
-    if (allDeps["astro"]) {
-      return { framework: "astro", detectedBy: "astro" };
-    }
-    if (allDeps["vite"]) {
-      return { framework: "vite", detectedBy: "vite" };
-    }
-
-    return { framework: "unknown", detectedBy: null };
-  } catch {
-    return { framework: "unknown", detectedBy: null };
-  }
-}
-
-// ============================================
-// Globals SCSS Generation
-// ============================================
-
-function generateGlobalsSCSS(seeds?: FrameworkSetupOptions["seeds"]): string {
-  const withClauses: string[] = [];
-
-  if (seeds?.brand) {
-    withClauses.push(`  $fui-brand: ${seeds.brand}`);
-  }
-  if (seeds?.neutral) {
-    withClauses.push(`  $fui-neutral: "${seeds.neutral}"`);
-  }
-  if (seeds?.density) {
-    withClauses.push(`  $fui-density: "${seeds.density}"`);
-  }
-  if (seeds?.radiusStyle) {
-    withClauses.push(`  $fui-radius-style: "${seeds.radiusStyle}"`);
-  }
-
-  const useStatement =
-    withClauses.length > 0
-      ? `@use '@fragments-sdk/ui/styles' with (\n${withClauses.join(",\n")}\n);`
-      : `@use '@fragments-sdk/ui/styles';`;
-
-  return `// Fragments SDK Global Styles
-// Customize seed values to theme the entire design system.
-// See: https://usefragments.com/docs/theming
-${useStatement}
-`;
-}
-
-// ============================================
-// Providers Component Generation
-// ============================================
-
-function generateProviders(): string {
-  return `'use client';
-
-import { ThemeProvider } from '@fragments-sdk/ui';
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider defaultMode="system" attribute="data-theme">
-      {children}
-    </ThemeProvider>
-  );
-}
-`;
-}
-
-// ============================================
-// Per-Framework Configuration
-// ============================================
-
-async function setupNextJS(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "nextjs",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  // Check if sass is installed
-  try {
-    const pkgContent = await readFile(
-      join(projectRoot, "package.json"),
-      "utf-8"
-    );
-    const pkg = JSON.parse(pkgContent);
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (!allDeps["sass"]) {
-      result.packagesToInstall.push("sass");
-    }
-  } catch {
-    // Proceed without checking
-  }
-
-  // Update next.config if transpilePackages is needed
-  const nextConfigPaths = [
-    "next.config.ts",
-    "next.config.mjs",
-    "next.config.js",
-  ];
-
-  for (const configName of nextConfigPaths) {
-    const configPath = join(projectRoot, configName);
-    try {
-      await access(configPath);
-      const content = await readFile(configPath, "utf-8");
-
-      if (!content.includes("transpilePackages")) {
-        // Add transpilePackages to the config
-        if (content.includes("const nextConfig")) {
-          const updated = content.replace(
-            /const nextConfig\s*=\s*\{/,
-            `const nextConfig = {\n  transpilePackages: ['@fragments-sdk/ui'],`
-          );
-          await writeFile(configPath, updated, "utf-8");
-          result.configModified.push(configName);
-        } else {
-          result.warnings.push(
-            `Could not auto-modify ${configName}. Add transpilePackages: ['@fragments-sdk/ui'] manually.`
-          );
-        }
-      }
-      break;
-    } catch {
-      continue;
-    }
-  }
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "src", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("src/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("src/providers.tsx");
-  }
-
-  return result;
-}
-
-async function setupVite(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "vite",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  // Check if sass is installed
-  try {
-    const pkgContent = await readFile(
-      join(projectRoot, "package.json"),
-      "utf-8"
-    );
-    const pkg = JSON.parse(pkgContent);
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (!allDeps["sass"]) {
-      result.packagesToInstall.push("sass");
-    }
-  } catch {
-    // Proceed
-  }
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "src", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("src/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("src/providers.tsx");
-  }
-
-  return result;
-}
-
-async function setupRemix(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "remix",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  result.packagesToInstall.push("sass");
-
-  // Generate globals.scss in app/styles
-  const globalsPath = join(projectRoot, "app", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "app/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("app/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "app", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("app/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("app/providers.tsx");
-  }
-
-  result.warnings.push(
-    'Add @fragments-sdk/ui to serverDependenciesToBundle in remix.config if using source imports.'
-  );
-
-  return result;
-}
-
-async function setupAstro(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "astro",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  result.packagesToInstall.push("sass");
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  return result;
-}
-
-// ============================================
-// Main Setup Function
-// ============================================
-
-/**
- * Set up framework-specific configuration for @fragments-sdk/ui
- */
-export async function setupFramework(
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const { projectRoot } = options;
-
-  // Detect or use provided framework
-  let framework = options.framework;
-  if (!framework || framework === "unknown") {
-    const detection = await detectFramework(projectRoot);
-    framework = detection.framework;
-
-    if (detection.detectedBy) {
-      console.log(
-        pc.green(`  Detected ${frameworkLabel(framework)}`) +
-          pc.dim(` (via ${detection.detectedBy})`)
-      );
-    }
-  } else {
-    console.log(pc.green(`  Framework: ${frameworkLabel(framework)}`));
-  }
-
-  switch (framework) {
-    case "nextjs":
-      return setupNextJS(projectRoot, options);
-    case "vite":
-      return setupVite(projectRoot, options);
-    case "remix":
-      return setupRemix(projectRoot, options);
-    case "astro":
-      return setupAstro(projectRoot, options);
-    default:
-      return {
-        framework: "unknown",
-        filesCreated: [],
-        packagesToInstall: ["sass"],
-        configModified: [],
-        warnings: [
-          "Could not detect framework. Install sass and import @fragments-sdk/ui/styles manually.",
-        ],
-      };
-  }
-}
-
-function frameworkLabel(framework: Framework): string {
-  switch (framework) {
-    case "nextjs":
-      return "Next.js";
-    case "vite":
-      return "Vite";
-    case "remix":
-      return "Remix";
-    case "astro":
-      return "Astro";
-    default:
-      return "Unknown";
-  }
-}

package/src/mcp/bin.ts

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-import { startMcpServer } from './server.js';
-
-// Parse command line arguments
-const args = process.argv.slice(2);
-let projectRoot = process.cwd();
-let viewerUrl: string | undefined;
-
-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]
-
-Options:
-  -p, --project-root <path>  Project root directory (default: cwd)
-  -u, --viewer-url <url>     Viewer URL (default: http://localhost:6006)
-  -h, --help                 Show this help message
-`);
-    process.exit(0);
-  }
-}
-
-// Start server
-startMcpServer({
-  projectRoot,
-  viewerUrl,
-}).catch((error) => {
-  console.error('Failed to start MCP server:', error);
-  process.exit(1);
-});