@fragments-sdk/cli 0.15.0 → 0.15.2

package/src/core/token-resolver.ts

@@ -1,155 +0,0 @@
-/**
- * Token Resolver — resolves unresolved SCSS token values using actual sass compilation.
- *
- * The regex-based resolver in token-parser.ts cannot handle SCSS module namespaces,
- * functions (color.scale, math.div), or map lookups. This module provides a fallback
- * that compiles the actual SCSS sources to extract computed CSS custom property values.
- *
- * Used at build time only — no runtime sass dependency in the MCP server.
- */
-
-import { resolve, dirname, basename } from 'node:path';
-import { existsSync, readdirSync } from 'node:fs';
-
-/**
- * Round fractional RGB channel values produced by Sass color math.
- *
- * Sass functions like color.scale() and color.adjust() can produce
- * fractional values like rgb(217.8, 217.8, 217.8). This normalizes
- * them to clean integers: rgb(218, 218, 218).
- *
- * Alpha channels in rgba() are preserved as-is (they're legitimately fractional).
- */
-function roundRgbValues(value: string): string {
-  return value
-    .replace(
-      /rgb\(([^)]+)\)/g,
-      (_full, inner: string) => {
-        const parts = inner.split(',').map(p => p.trim());
-        const rounded = parts.map(p => {
-          const num = parseFloat(p);
-          return isNaN(num) ? p : String(Math.round(num));
-        });
-        return `rgb(${rounded.join(', ')})`;
-      },
-    )
-    .replace(
-      /rgba\(([^)]+)\)/g,
-      (_full, inner: string) => {
-        const parts = inner.split(',').map(p => p.trim());
-        // Round RGB channels (first 3), preserve alpha as-is
-        const rounded = parts.map((p, i) => {
-          if (i >= 3) return p; // alpha channel — don't round
-          const num = parseFloat(p);
-          return isNaN(num) ? p : String(Math.round(num));
-        });
-        return `rgba(${rounded.join(', ')})`;
-      },
-    );
-}
-
-/**
- * Resolve unresolved SCSS token values by compiling the project's token SCSS.
- *
- * Generates a temporary SCSS string that imports the project's _variables.scss
- * and includes the fui-css-variables mixin, then compiles it with sass to extract
- * the actual computed values for all CSS custom properties.
- *
- * @param unresolvedTokens - Tokens with values containing #{} or $ that need resolution
- * @param tokensDir - Absolute path to the directory containing _variables.scss
- * @returns Map of token name → resolved CSS value (only for tokens that were unresolved)
- */
-export async function resolveTokensWithSass(
-  unresolvedTokens: Array<{ name: string; value: string }>,
-  tokensDir: string,
-): Promise<Map<string, string>> {
-  const resolvedMap = new Map<string, string>();
-
-  // Filter to only tokens that actually need resolution
-  const needsResolution = unresolvedTokens.filter(
-    t => t.value.includes('#{') || t.value.includes('$'),
-  );
-
-  if (needsResolution.length === 0) {
-    return resolvedMap;
-  }
-
-  try {
-    // Dynamic import so sass is only loaded when needed (build-time only)
-    const sass = await import('sass');
-
-    // Find the _variables.scss file and determine the mixin name
-    const variablesPath = findVariablesFile(tokensDir);
-    if (!variablesPath) {
-      return resolvedMap;
-    }
-
-    // Determine the module name for @use (filename without _ prefix and .scss suffix)
-    const fileName = basename(variablesPath);
-    const moduleName = fileName.replace(/^_/, '').replace(/\.scss$/, '');
-
-    // Generate a SCSS string that imports the variables and includes the mixin
-    const scssSource = `
-@use '${moduleName}' as vars;
-:root { @include vars.fui-css-variables; }
-`;
-
-    // Compile the SCSS with the tokens directory as a load path
-    const compiled = sass.compileString(scssSource, {
-      loadPaths: [tokensDir, dirname(tokensDir)],
-      style: 'expanded',
-      // Suppress sass deprecation warnings during build
-      logger: { warn() {}, debug() {} } as never,
-    });
-
-    // Parse the compiled CSS for --fui-* custom property declarations
-    const cssVarRegex = /(--[\w-]+)\s*:\s*([^;]+)/g;
-    let match: RegExpExecArray | null;
-    const allResolved = new Map<string, string>();
-
-    while ((match = cssVarRegex.exec(compiled.css)) !== null) {
-      allResolved.set(match[1], roundRgbValues(match[2].trim()));
-    }
-
-    // Only return values for the tokens that were originally unresolved
-    for (const token of needsResolution) {
-      const value = allResolved.get(token.name);
-      if (value !== undefined) {
-        resolvedMap.set(token.name, value);
-      }
-    }
-  } catch {
-    // Sass compilation failure is non-fatal — fall back to regex-resolved values
-  }
-
-  return resolvedMap;
-}
-
-/**
- * Find the _variables.scss file in the tokens directory.
- */
-function findVariablesFile(tokensDir: string): string | null {
-  const candidates = ['_variables.scss', 'variables.scss'];
-  for (const name of candidates) {
-    const path = resolve(tokensDir, name);
-    if (existsSync(path)) {
-      return path;
-    }
-  }
-
-  // Fallback: look for any SCSS file containing 'css-variables' mixin
-  try {
-    const files = readdirSync(tokensDir).filter(f => f.endsWith('.scss'));
-    for (const file of files) {
-      const path = resolve(tokensDir, file);
-      // We just need to find it exists; the @use import will handle the rest
-      if (file.includes('variables') || file.includes('tokens')) {
-        return path;
-      }
-    }
-  } catch {
-    // Directory read failure
-  }
-
-  return null;
-}

package/src/viewer/preview-adapter.ts

@@ -1,116 +0,0 @@
-/**
- * Preview Adapter — generates render modules from contract.json metadata.
- *
- * Each adapter takes a CompiledFragment sourced from a .contract.json
- * and produces a virtual ES module string that a bundler (Vite) can serve.
- */
-
-import type { CompiledFragment } from '@fragments-sdk/core';
-
-export interface PreviewConfig {
-  setupModule?: string;
-  wrapperModule?: string;
-  wrapperExport?: string;
-  css?: string[];
-  theme?: 'light' | 'dark';
-}
-
-export interface PreviewAdapter {
-  framework: string;
-  canHandle(fragment: CompiledFragment): boolean;
-  generateRenderModule(
-    fragment: CompiledFragment,
-    variant: string,
-    previewConfig: PreviewConfig,
-  ): string;
-}
-
-/**
- * React preview adapter — generates a virtual module that:
- * 1. Imports the component from sourcePath/exportName
- * 2. Wraps with providers from project config
- * 3. Renders with args from the selected example
- * 4. Injects CSS from config
- */
-class ReactPreviewAdapter implements PreviewAdapter {
-  framework = 'react';
-
-  canHandle(fragment: CompiledFragment): boolean {
-    return (fragment.framework ?? 'react') === 'react';
-  }
-
-  generateRenderModule(
-    fragment: CompiledFragment,
-    variant: string,
-    config: PreviewConfig,
-  ): string {
-    if (!fragment.sourcePath || !fragment.exportName) {
-      throw new Error(
-        `Cannot preview ${fragment.meta.name}: missing sourcePath or exportName`,
-      );
-    }
-
-    const example = fragment.variants.find((v) => v.name === variant) ??
-      fragment.variants[0];
-
-    const args = example?.args ?? {};
-    const argsStr = JSON.stringify(args);
-
-    const lines: string[] = [];
-
-    // Setup module (global CSS, MSW, etc.)
-    if (config.setupModule) {
-      lines.push(`import '${config.setupModule}';`);
-    }
-
-    // CSS imports
-    if (config.css?.length) {
-      for (const css of config.css) {
-        lines.push(`import '${css}';`);
-      }
-    }
-
-    // Import React
-    lines.push(`import React from 'react';`);
-
-    // Import the component
-    lines.push(`import { ${fragment.exportName} } from '${fragment.sourcePath}';`);
-
-    // Import wrapper if configured
-    if (config.wrapperModule && config.wrapperExport) {
-      lines.push(`import { ${config.wrapperExport} } from '${config.wrapperModule}';`);
-    }
-
-    // Generate the render function
-    lines.push('');
-    lines.push(`const args = ${argsStr};`);
-    lines.push('');
-    lines.push('export default function PreviewRender() {');
-
-    if (config.wrapperModule && config.wrapperExport) {
-      lines.push(`  return React.createElement(${config.wrapperExport}, null,`);
-      lines.push(`    React.createElement(${fragment.exportName}, args)`);
-      lines.push('  );');
-    } else {
-      lines.push(`  return React.createElement(${fragment.exportName}, args);`);
-    }
-
-    lines.push('}');
-
-    return lines.join('\n');
-  }
-}
-
-/**
- * Create a preview adapter for the given framework.
- */
-export function createPreviewAdapter(
-  framework: string,
-  _config: PreviewConfig,
-): PreviewAdapter {
-  if (framework === 'react') {
-    return new ReactPreviewAdapter();
-  }
-  // Future: Vue, Svelte adapters
-  throw new Error(`No preview adapter available for framework: ${framework}`);
-}