uilint-core 0.1.0

package/dist/chunk-B4HNWMXB.js

@@ -0,0 +1,1024 @@
+// src/ollama/prompts.ts
+function buildAnalysisPrompt(styleSummary, styleGuide) {
+  const guideSection = styleGuide ? `## Current Style Guide
+${styleGuide}
+
+` : "## No Style Guide Found\nAnalyze the styles and identify inconsistencies.\n\n";
+  return `You are a UI consistency analyzer. Analyze the following extracted styles and identify inconsistencies.
+
+${guideSection}
+
+${styleSummary}
+
+Respond with a JSON object containing an "issues" array. Each issue should have:
+- id: unique string identifier
+- type: one of "color", "typography", "spacing", "component", "responsive", "accessibility"
+- message: human-readable description of the issue
+- currentValue: the problematic value found
+- expectedValue: what it should be (if known from style guide)
+- suggestion: how to fix it
+
+Focus on:
+1. Similar but not identical colors (e.g., #3B82F6 vs #3575E2)
+2. Inconsistent font sizes or weights
+3. Spacing values that don't follow a consistent scale (e.g., 4px base unit)
+4. Mixed border-radius values
+
+Be concise and actionable. Only report significant inconsistencies.
+
+Example response:
+{
+  "issues": [
+    {
+      "id": "color-1",
+      "type": "color",
+      "message": "Found similar blue colors that should be consolidated",
+      "currentValue": "#3575E2",
+      "expectedValue": "#3B82F6",
+      "suggestion": "Use the primary blue #3B82F6 consistently"
+    }
+  ]
+}`;
+}
+function buildStyleGuidePrompt(styleSummary) {
+  return `You are a design system expert. Based on the following detected styles, generate a clean, organized style guide in Markdown format.
+
+${styleSummary}
+
+Generate a style guide with these sections:
+1. Colors - List the main colors with semantic names (Primary, Secondary, etc.)
+2. Typography - Font families, sizes, and weights
+3. Spacing - Base unit and common spacing values
+4. Components - Common component patterns
+
+Use this format:
+# UI Style Guide
+
+## Colors
+- **Primary**: #HEXCODE (usage description)
+- **Secondary**: #HEXCODE (usage description)
+...
+
+## Typography
+- **Font Family**: FontName
+- **Font Sizes**: list of sizes
+- **Font Weights**: list of weights
+
+## Spacing
+- **Base unit**: Xpx
+- **Common values**: list of values
+
+## Components
+- **Buttons**: styles
+- **Cards**: styles
+...
+
+Be concise and focus on the most used values.`;
+}
+function buildQueryPrompt(query, styleGuide) {
+  if (!styleGuide) {
+    return `The user is asking: "${query}"
+
+No style guide has been created yet. Explain that they should run "uilint init" to create a style guide from their existing styles.`;
+  }
+  return `You are a helpful assistant that answers questions about a UI style guide.
+
+## Style Guide
+${styleGuide}
+
+## User Question
+${query}
+
+Provide a clear, concise answer based on the style guide above. If the style guide doesn't contain the information needed, say so and suggest what might be missing.`;
+}
+function buildValidationPrompt(code, styleGuide) {
+  const guideSection = styleGuide ? `## Style Guide
+${styleGuide}
+
+` : "## No Style Guide\nValidate for general best practices.\n\n";
+  return `You are a UI code validator. Check the following code against the style guide and best practices.
+
+${guideSection}
+
+## Code to Validate
+\`\`\`tsx
+${code}
+\`\`\`
+
+Respond with a JSON object containing:
+- valid: boolean (true if no errors found)
+- issues: array of issues, each with:
+  - type: "error" or "warning"
+  - message: description of the issue
+  - suggestion: how to fix it
+
+Focus on:
+1. Colors not in the style guide
+2. Spacing values not following the design system
+3. Typography inconsistencies
+4. Accessibility issues (missing alt text, etc.)
+
+Example response:
+{
+  "valid": false,
+  "issues": [
+    {
+      "type": "warning",
+      "message": "Color #FF0000 is not in the style guide",
+      "suggestion": "Use the error color #EF4444 instead"
+    }
+  ]
+}`;
+}
+
+// src/ollama/client.ts
+var DEFAULT_BASE_URL = "http://localhost:11434";
+var DEFAULT_MODEL = "qwen2.5-coder:7b";
+var DEFAULT_TIMEOUT = 6e4;
+var OllamaClient = class {
+  baseUrl;
+  model;
+  timeout;
+  constructor(options = {}) {
+    this.baseUrl = options.baseUrl || DEFAULT_BASE_URL;
+    this.model = options.model || DEFAULT_MODEL;
+    this.timeout = options.timeout || DEFAULT_TIMEOUT;
+  }
+  /**
+   * Analyzes styles and returns issues
+   */
+  async analyzeStyles(styleSummary, styleGuide) {
+    const startTime = Date.now();
+    const prompt = buildAnalysisPrompt(styleSummary, styleGuide);
+    try {
+      const response = await this.generate(prompt);
+      const issues = this.parseIssuesResponse(response);
+      return {
+        issues,
+        analysisTime: Date.now() - startTime
+      };
+    } catch (error) {
+      console.error("[UILint] Analysis failed:", error);
+      return {
+        issues: [],
+        analysisTime: Date.now() - startTime
+      };
+    }
+  }
+  /**
+   * Generates a style guide from detected styles
+   */
+  async generateStyleGuide(styleSummary) {
+    const prompt = buildStyleGuidePrompt(styleSummary);
+    try {
+      const response = await this.generate(prompt, false);
+      return response;
+    } catch (error) {
+      console.error("[UILint] Style guide generation failed:", error);
+      return null;
+    }
+  }
+  /**
+   * Queries the style guide for specific information
+   */
+  async queryStyleGuide(query, styleGuide) {
+    const prompt = buildQueryPrompt(query, styleGuide);
+    try {
+      const response = await this.generate(prompt, false);
+      return response;
+    } catch (error) {
+      console.error("[UILint] Query failed:", error);
+      return "Failed to query style guide. Please try again.";
+    }
+  }
+  /**
+   * Validates code against the style guide
+   */
+  async validateCode(code, styleGuide) {
+    const prompt = buildValidationPrompt(code, styleGuide);
+    try {
+      const response = await this.generate(prompt);
+      return this.parseValidationResponse(response);
+    } catch (error) {
+      console.error("[UILint] Validation failed:", error);
+      return { valid: true, issues: [] };
+    }
+  }
+  /**
+   * Core generate method that calls Ollama API
+   */
+  async generate(prompt, jsonFormat = true) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const response = await fetch(`${this.baseUrl}/api/generate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          model: this.model,
+          prompt,
+          stream: false,
+          ...jsonFormat && { format: "json" }
+        }),
+        signal: controller.signal
+      });
+      if (!response.ok) {
+        throw new Error(`Ollama API error: ${response.status}`);
+      }
+      const data = await response.json();
+      return data.response || "";
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+  /**
+   * Parses issues from LLM response
+   */
+  parseIssuesResponse(response) {
+    try {
+      const parsed = JSON.parse(response);
+      return parsed.issues || [];
+    } catch {
+      console.warn("[UILint] Failed to parse LLM response as JSON");
+      return [];
+    }
+  }
+  /**
+   * Parses validation result from LLM response
+   */
+  parseValidationResponse(response) {
+    try {
+      const parsed = JSON.parse(response);
+      return {
+        valid: parsed.valid ?? true,
+        issues: parsed.issues || []
+      };
+    } catch {
+      console.warn("[UILint] Failed to parse validation response");
+      return { valid: true, issues: [] };
+    }
+  }
+  /**
+   * Checks if Ollama is available
+   */
+  async isAvailable() {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/tags`, {
+        method: "GET",
+        signal: AbortSignal.timeout(5e3)
+      });
+      return response.ok;
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Gets the current model
+   */
+  getModel() {
+    return this.model;
+  }
+  /**
+   * Sets the model
+   */
+  setModel(model) {
+    this.model = model;
+  }
+};
+var defaultClient = null;
+function getOllamaClient(options) {
+  if (!defaultClient || options) {
+    defaultClient = new OllamaClient(options);
+  }
+  return defaultClient;
+}
+
+// src/scanner/style-extractor.ts
+function extractStyles(root, getComputedStyle) {
+  const styles = {
+    colors: /* @__PURE__ */ new Map(),
+    fontSizes: /* @__PURE__ */ new Map(),
+    fontFamilies: /* @__PURE__ */ new Map(),
+    fontWeights: /* @__PURE__ */ new Map(),
+    spacing: /* @__PURE__ */ new Map(),
+    borderRadius: /* @__PURE__ */ new Map()
+  };
+  const elements = root.querySelectorAll("*");
+  elements.forEach((element) => {
+    if (element.nodeType !== 1) return;
+    const computed = getComputedStyle(element);
+    extractColor(computed.color, styles.colors);
+    extractColor(computed.backgroundColor, styles.colors);
+    extractColor(computed.borderColor, styles.colors);
+    incrementMap(styles.fontSizes, computed.fontSize);
+    incrementMap(styles.fontFamilies, normalizeFontFamily(computed.fontFamily));
+    incrementMap(styles.fontWeights, computed.fontWeight);
+    extractSpacing(computed.margin, styles.spacing);
+    extractSpacing(computed.padding, styles.spacing);
+    incrementMap(styles.spacing, computed.gap);
+    incrementMap(styles.borderRadius, computed.borderRadius);
+  });
+  return styles;
+}
+function extractStylesFromDOM(root) {
+  const targetRoot = root || document.body;
+  return extractStyles(targetRoot, (el) => window.getComputedStyle(el));
+}
+function extractColor(color, map) {
+  if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") return;
+  const hex = rgbToHex(color);
+  if (hex) {
+    incrementMap(map, hex);
+  }
+}
+function extractSpacing(value, map) {
+  if (!value || value === "0px") return;
+  const values = value.split(" ").filter((v) => v && v !== "0px");
+  values.forEach((v) => incrementMap(map, v));
+}
+function incrementMap(map, value) {
+  if (!value || value === "normal" || value === "auto") return;
+  map.set(value, (map.get(value) || 0) + 1);
+}
+function normalizeFontFamily(fontFamily) {
+  const primary = fontFamily.split(",")[0].trim();
+  return primary.replace(/['"]/g, "");
+}
+function rgbToHex(rgb) {
+  if (rgb.startsWith("#")) return rgb.toUpperCase();
+  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (!match) return null;
+  const [, r, g, b] = match;
+  const toHex = (n) => parseInt(n).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function serializeStyles(styles) {
+  return {
+    colors: Object.fromEntries(styles.colors),
+    fontSizes: Object.fromEntries(styles.fontSizes),
+    fontFamilies: Object.fromEntries(styles.fontFamilies),
+    fontWeights: Object.fromEntries(styles.fontWeights),
+    spacing: Object.fromEntries(styles.spacing),
+    borderRadius: Object.fromEntries(styles.borderRadius)
+  };
+}
+function deserializeStyles(serialized) {
+  return {
+    colors: new Map(Object.entries(serialized.colors)),
+    fontSizes: new Map(Object.entries(serialized.fontSizes)),
+    fontFamilies: new Map(Object.entries(serialized.fontFamilies)),
+    fontWeights: new Map(Object.entries(serialized.fontWeights)),
+    spacing: new Map(Object.entries(serialized.spacing)),
+    borderRadius: new Map(Object.entries(serialized.borderRadius))
+  };
+}
+function createStyleSummary(styles) {
+  const lines = [];
+  lines.push("## Detected Styles Summary\n");
+  lines.push("### Colors");
+  const sortedColors = [...styles.colors.entries()].sort((a, b) => b[1] - a[1]);
+  sortedColors.slice(0, 20).forEach(([color, count]) => {
+    lines.push(`- ${color}: ${count} occurrences`);
+  });
+  lines.push("");
+  lines.push("### Font Sizes");
+  const sortedFontSizes = [...styles.fontSizes.entries()].sort(
+    (a, b) => b[1] - a[1]
+  );
+  sortedFontSizes.forEach(([size, count]) => {
+    lines.push(`- ${size}: ${count} occurrences`);
+  });
+  lines.push("");
+  lines.push("### Font Families");
+  const sortedFontFamilies = [...styles.fontFamilies.entries()].sort(
+    (a, b) => b[1] - a[1]
+  );
+  sortedFontFamilies.forEach(([family, count]) => {
+    lines.push(`- ${family}: ${count} occurrences`);
+  });
+  lines.push("");
+  lines.push("### Font Weights");
+  const sortedFontWeights = [...styles.fontWeights.entries()].sort(
+    (a, b) => b[1] - a[1]
+  );
+  sortedFontWeights.forEach(([weight, count]) => {
+    lines.push(`- ${weight}: ${count} occurrences`);
+  });
+  lines.push("");
+  lines.push("### Spacing Values");
+  const sortedSpacing = [...styles.spacing.entries()].sort((a, b) => b[1] - a[1]);
+  sortedSpacing.slice(0, 15).forEach(([value, count]) => {
+    lines.push(`- ${value}: ${count} occurrences`);
+  });
+  lines.push("");
+  lines.push("### Border Radius");
+  const sortedBorderRadius = [...styles.borderRadius.entries()].sort(
+    (a, b) => b[1] - a[1]
+  );
+  sortedBorderRadius.forEach(([value, count]) => {
+    lines.push(`- ${value}: ${count} occurrences`);
+  });
+  return lines.join("\n");
+}
+function truncateHTML(html, maxLength = 5e4) {
+  if (html.length <= maxLength) return html;
+  return html.slice(0, maxLength) + "<!-- truncated -->";
+}
+
+// src/styleguide/schema.ts
+function createEmptyStyleGuide() {
+  return {
+    colors: [],
+    typography: [],
+    spacing: [],
+    components: []
+  };
+}
+function validateStyleGuide(guide) {
+  if (!guide || typeof guide !== "object") return false;
+  const g = guide;
+  return Array.isArray(g.colors) && Array.isArray(g.typography) && Array.isArray(g.spacing) && Array.isArray(g.components);
+}
+function mergeStyleGuides(existing, detected) {
+  return {
+    colors: mergeColorRules(existing.colors, detected.colors || []),
+    typography: mergeTypographyRules(existing.typography, detected.typography || []),
+    spacing: mergeSpacingRules(existing.spacing, detected.spacing || []),
+    components: mergeComponentRules(existing.components, detected.components || [])
+  };
+}
+function mergeColorRules(existing, detected) {
+  const merged = [...existing];
+  detected.forEach((rule) => {
+    const existingIndex = merged.findIndex(
+      (e) => e.name === rule.name || e.value === rule.value
+    );
+    if (existingIndex === -1) {
+      merged.push(rule);
+    }
+  });
+  return merged;
+}
+function mergeTypographyRules(existing, detected) {
+  const merged = [...existing];
+  detected.forEach((rule) => {
+    const existingIndex = merged.findIndex((e) => e.element === rule.element);
+    if (existingIndex === -1) {
+      merged.push(rule);
+    }
+  });
+  return merged;
+}
+function mergeSpacingRules(existing, detected) {
+  const merged = [...existing];
+  detected.forEach((rule) => {
+    const existingIndex = merged.findIndex(
+      (e) => e.name === rule.name || e.value === rule.value
+    );
+    if (existingIndex === -1) {
+      merged.push(rule);
+    }
+  });
+  return merged;
+}
+function mergeComponentRules(existing, detected) {
+  const merged = [...existing];
+  detected.forEach((rule) => {
+    const existingIndex = merged.findIndex((e) => e.name === rule.name);
+    if (existingIndex === -1) {
+      merged.push(rule);
+    }
+  });
+  return merged;
+}
+function createColorRule(name, value, usage = "") {
+  return { name, value: value.toUpperCase(), usage };
+}
+function createTypographyRule(element, options = {}) {
+  return { element, ...options };
+}
+function createSpacingRule(name, value) {
+  return { name, value };
+}
+function createComponentRule(name, styles) {
+  return { name, styles };
+}
+
+// src/styleguide/parser.ts
+function parseStyleGuide(markdown) {
+  const guide = createEmptyStyleGuide();
+  const sections = splitIntoSections(markdown);
+  sections.forEach(({ title, content }) => {
+    const lowerTitle = title.toLowerCase();
+    if (lowerTitle.includes("color")) {
+      guide.colors = parseColorSection(content);
+    } else if (lowerTitle.includes("typography") || lowerTitle.includes("font")) {
+      guide.typography = parseTypographySection(content);
+    } else if (lowerTitle.includes("spacing")) {
+      guide.spacing = parseSpacingSection(content);
+    } else if (lowerTitle.includes("component")) {
+      guide.components = parseComponentSection(content);
+    }
+  });
+  return guide;
+}
+function splitIntoSections(markdown) {
+  const sections = [];
+  const lines = markdown.split("\n");
+  let currentTitle = "";
+  let currentContent = [];
+  lines.forEach((line) => {
+    const headerMatch = line.match(/^##\s+(.+)$/);
+    if (headerMatch) {
+      if (currentTitle) {
+        sections.push({
+          title: currentTitle,
+          content: currentContent.join("\n")
+        });
+      }
+      currentTitle = headerMatch[1];
+      currentContent = [];
+    } else {
+      currentContent.push(line);
+    }
+  });
+  if (currentTitle) {
+    sections.push({
+      title: currentTitle,
+      content: currentContent.join("\n")
+    });
+  }
+  return sections;
+}
+function parseColorSection(content) {
+  const colors = [];
+  const lines = content.split("\n");
+  lines.forEach((line) => {
+    const match = line.match(
+      /[-*]\s*\*?\*?([^*:]+)\*?\*?:\s*(#[A-Fa-f0-9]{6})\s*(?:\(([^)]+)\))?/
+    );
+    if (match) {
+      colors.push({
+        name: match[1].trim(),
+        value: match[2].toUpperCase(),
+        usage: match[3] || ""
+      });
+    }
+  });
+  return colors;
+}
+function parseTypographySection(content) {
+  const typography = [];
+  const lines = content.split("\n");
+  lines.forEach((line) => {
+    const elementMatch = line.match(/[-*]\s*\*?\*?([^*:]+)\*?\*?:\s*(.+)/);
+    if (elementMatch) {
+      const rule = {
+        element: elementMatch[1].trim()
+      };
+      const props = elementMatch[2];
+      const fontFamilyMatch = props.match(/font-family:\s*"?([^",]+)"?/);
+      if (fontFamilyMatch) rule.fontFamily = fontFamilyMatch[1].trim();
+      const fontSizeMatch = props.match(/font-size:\s*(\d+px)/);
+      if (fontSizeMatch) rule.fontSize = fontSizeMatch[1];
+      const fontWeightMatch = props.match(/font-weight:\s*(\d+)/);
+      if (fontWeightMatch) rule.fontWeight = fontWeightMatch[1];
+      const lineHeightMatch = props.match(/line-height:\s*([\d.]+)/);
+      if (lineHeightMatch) rule.lineHeight = lineHeightMatch[1];
+      typography.push(rule);
+    }
+  });
+  return typography;
+}
+function parseSpacingSection(content) {
+  const spacing = [];
+  const lines = content.split("\n");
+  lines.forEach((line) => {
+    const match = line.match(/[-*]\s*\*?\*?([^*:]+)\*?\*?:\s*(.+)/);
+    if (match) {
+      spacing.push({
+        name: match[1].trim(),
+        value: match[2].trim()
+      });
+    }
+  });
+  return spacing;
+}
+function parseComponentSection(content) {
+  const components = [];
+  const lines = content.split("\n");
+  lines.forEach((line) => {
+    const match = line.match(/[-*]\s*\*?\*?([^*:]+)\*?\*?:\s*(.+)/);
+    if (match) {
+      components.push({
+        name: match[1].trim(),
+        styles: match[2].split(",").map((s) => s.trim())
+      });
+    }
+  });
+  return components;
+}
+function parseStyleGuideSections(content) {
+  const sections = {};
+  const lines = content.split("\n");
+  let currentSection = "intro";
+  let currentContent = [];
+  for (const line of lines) {
+    const headerMatch = line.match(/^##\s+(.+)$/);
+    if (headerMatch) {
+      if (currentContent.length > 0) {
+        sections[currentSection.toLowerCase()] = currentContent.join("\n").trim();
+      }
+      currentSection = headerMatch[1];
+      currentContent = [];
+    } else {
+      currentContent.push(line);
+    }
+  }
+  if (currentContent.length > 0) {
+    sections[currentSection.toLowerCase()] = currentContent.join("\n").trim();
+  }
+  return sections;
+}
+function extractStyleValues(content) {
+  const result = {
+    colors: [],
+    fontSizes: [],
+    fontFamilies: [],
+    spacing: [],
+    borderRadius: []
+  };
+  const colorMatches = content.matchAll(/#[A-Fa-f0-9]{6}\b/g);
+  for (const match of colorMatches) {
+    if (!result.colors.includes(match[0].toUpperCase())) {
+      result.colors.push(match[0].toUpperCase());
+    }
+  }
+  const fontSizeMatches = content.matchAll(/\b(\d+(?:\.\d+)?(?:px|rem|em))\b/g);
+  for (const match of fontSizeMatches) {
+    if (!result.fontSizes.includes(match[1])) {
+      result.fontSizes.push(match[1]);
+    }
+  }
+  const fontFamilyMatches = content.matchAll(/font-family:\s*["']?([^"',\n]+)/gi);
+  for (const match of fontFamilyMatches) {
+    const family = match[1].trim();
+    if (!result.fontFamilies.includes(family)) {
+      result.fontFamilies.push(family);
+    }
+  }
+  return result;
+}
+
+// src/styleguide/generator.ts
+function generateStyleGuideFromStyles(styles) {
+  const lines = [];
+  lines.push("# UI Style Guide");
+  lines.push("");
+  lines.push("> Auto-generated by UILint. Edit this file to define your design system.");
+  lines.push("");
+  lines.push("## Colors");
+  lines.push("");
+  const sortedColors = [...styles.colors.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10);
+  if (sortedColors.length > 0) {
+    const colorNames = [
+      "Primary",
+      "Secondary",
+      "Accent",
+      "Background",
+      "Text",
+      "Muted",
+      "Border",
+      "Success",
+      "Warning",
+      "Error"
+    ];
+    sortedColors.forEach(([color, count], index) => {
+      const name = colorNames[index] || `Color ${index + 1}`;
+      lines.push(`- **${name}**: ${color} (${count} occurrences)`);
+    });
+  } else {
+    lines.push("- No colors detected");
+  }
+  lines.push("");
+  lines.push("## Typography");
+  lines.push("");
+  const sortedFontFamilies = [...styles.fontFamilies.entries()].sort(
+    (a, b) => b[1] - a[1]
+  );
+  if (sortedFontFamilies.length > 0) {
+    lines.push(`- **Font Family**: ${sortedFontFamilies[0][0]}`);
+  }
+  const sortedFontSizes = [...styles.fontSizes.entries()].sort(
+    (a, b) => parseFloat(a[0]) - parseFloat(b[0])
+  );
+  if (sortedFontSizes.length > 0) {
+    const sizes = sortedFontSizes.map(([size]) => size).join(", ");
+    lines.push(`- **Font Sizes**: ${sizes}`);
+  }
+  const sortedFontWeights = [...styles.fontWeights.entries()].sort(
+    (a, b) => parseInt(a[0]) - parseInt(b[0])
+  );
+  if (sortedFontWeights.length > 0) {
+    const weights = sortedFontWeights.map(([weight]) => weight).join(", ");
+    lines.push(`- **Font Weights**: ${weights}`);
+  }
+  lines.push("");
+  lines.push("## Spacing");
+  lines.push("");
+  const sortedSpacing = [...styles.spacing.entries()].filter(([value]) => value.endsWith("px")).sort((a, b) => parseFloat(a[0]) - parseFloat(b[0]));
+  if (sortedSpacing.length > 0) {
+    const spacingValues = sortedSpacing.map(([value]) => parseFloat(value));
+    const gcd = findGCD(spacingValues.filter((v) => v > 0));
+    if (gcd >= 4) {
+      lines.push(`- **Base unit**: ${gcd}px`);
+    }
+    const uniqueSpacing = [...new Set(sortedSpacing.map(([v]) => v))].slice(0, 8);
+    lines.push(`- **Common values**: ${uniqueSpacing.join(", ")}`);
+  } else {
+    lines.push("- No spacing values detected");
+  }
+  lines.push("");
+  lines.push("## Border Radius");
+  lines.push("");
+  const sortedBorderRadius = [...styles.borderRadius.entries()].filter(([value]) => value !== "0px").sort((a, b) => b[1] - a[1]);
+  if (sortedBorderRadius.length > 0) {
+    sortedBorderRadius.slice(0, 5).forEach(([value, count]) => {
+      lines.push(`- ${value} (${count} occurrences)`);
+    });
+  } else {
+    lines.push("- No border radius values detected");
+  }
+  lines.push("");
+  lines.push("## Components");
+  lines.push("");
+  lines.push("- **Buttons**: Define button styles here");
+  lines.push("- **Cards**: Define card styles here");
+  lines.push("- **Inputs**: Define input styles here");
+  lines.push("");
+  return lines.join("\n");
+}
+function findGCD(numbers) {
+  if (numbers.length === 0) return 0;
+  if (numbers.length === 1) return numbers[0];
+  const gcd = (a, b) => {
+    a = Math.abs(Math.round(a));
+    b = Math.abs(Math.round(b));
+    while (b) {
+      const t = b;
+      b = a % b;
+      a = t;
+    }
+    return a;
+  };
+  return numbers.reduce((acc, n) => gcd(acc, n));
+}
+function styleGuideToMarkdown(guide) {
+  const lines = [];
+  lines.push("# UI Style Guide");
+  lines.push("");
+  lines.push("## Colors");
+  guide.colors.forEach((color) => {
+    const usage = color.usage ? ` (${color.usage})` : "";
+    lines.push(`- **${color.name}**: ${color.value}${usage}`);
+  });
+  lines.push("");
+  lines.push("## Typography");
+  guide.typography.forEach((typo) => {
+    const props = [];
+    if (typo.fontFamily) props.push(`font-family: "${typo.fontFamily}"`);
+    if (typo.fontSize) props.push(`font-size: ${typo.fontSize}`);
+    if (typo.fontWeight) props.push(`font-weight: ${typo.fontWeight}`);
+    if (typo.lineHeight) props.push(`line-height: ${typo.lineHeight}`);
+    lines.push(`- **${typo.element}**: ${props.join(", ")}`);
+  });
+  lines.push("");
+  lines.push("## Spacing");
+  guide.spacing.forEach((space) => {
+    lines.push(`- **${space.name}**: ${space.value}`);
+  });
+  lines.push("");
+  lines.push("## Components");
+  guide.components.forEach((comp) => {
+    lines.push(`- **${comp.name}**: ${comp.styles.join(", ")}`);
+  });
+  return lines.join("\n");
+}
+
+// src/validation/validate.ts
+function validateCode(code, styleGuide) {
+  const issues = [];
+  if (!styleGuide) {
+    return {
+      valid: true,
+      issues: [
+        {
+          type: "warning",
+          message: "No style guide found. Create .uilint/styleguide.md to enable validation."
+        }
+      ]
+    };
+  }
+  const styleValues = extractStyleValues(styleGuide);
+  const codeColors = extractColorsFromCode(code);
+  for (const color of codeColors) {
+    if (!styleValues.colors.includes(color.toUpperCase())) {
+      const similar = findSimilarColor(color, styleValues.colors);
+      issues.push({
+        type: "warning",
+        message: `Color ${color} is not in the style guide`,
+        suggestion: similar ? `Consider using ${similar} instead` : `Add ${color} to the style guide if intentional`
+      });
+    }
+  }
+  const hardcodedPixels = code.matchAll(/(?:margin|padding|gap)[-:].*?(\d+)px/gi);
+  for (const match of hardcodedPixels) {
+    const value = parseInt(match[1]);
+    if (value % 4 !== 0) {
+      issues.push({
+        type: "warning",
+        message: `Spacing value ${value}px doesn't follow the 4px grid`,
+        suggestion: `Use ${Math.round(value / 4) * 4}px instead`
+      });
+    }
+  }
+  if (code.includes("style={{") || code.includes("style={")) {
+    const inlineStyleCount = (code.match(/style=\{/g) || []).length;
+    if (inlineStyleCount > 2) {
+      issues.push({
+        type: "warning",
+        message: `Found ${inlineStyleCount} inline styles. Consider using CSS classes for consistency.`
+      });
+    }
+  }
+  return {
+    valid: issues.filter((i) => i.type === "error").length === 0,
+    issues
+  };
+}
+function lintSnippet(code, styleGuide) {
+  const issues = [];
+  issues.push(...lintBasicPatterns(code));
+  if (styleGuide) {
+    issues.push(...lintAgainstStyleGuide(code, styleGuide));
+  }
+  const errorCount = issues.filter((i) => i.severity === "error").length;
+  const warningCount = issues.filter((i) => i.severity === "warning").length;
+  return {
+    issues,
+    summary: issues.length === 0 ? "No issues found" : `Found ${errorCount} errors and ${warningCount} warnings`
+  };
+}
+function lintBasicPatterns(code) {
+  const issues = [];
+  const magicNumbers = code.matchAll(
+    /(?:width|height|size):\s*(\d+)(?!px|rem|em|%)/g
+  );
+  for (const match of magicNumbers) {
+    issues.push({
+      severity: "warning",
+      type: "spacing",
+      message: `Magic number ${match[1]} found without unit`,
+      code: match[0],
+      suggestion: `Add a unit like ${match[1]}px or use a design token`
+    });
+  }
+  const hardcodedTailwindColors = code.matchAll(
+    /className=["'][^"']*(?:bg|text|border)-\[#[A-Fa-f0-9]+\][^"']*/g
+  );
+  for (const match of hardcodedTailwindColors) {
+    issues.push({
+      severity: "warning",
+      type: "color",
+      message: "Hardcoded color in Tailwind arbitrary value",
+      code: match[0],
+      suggestion: "Use a color from your Tailwind config or style guide"
+    });
+  }
+  if (code.includes("<img") && !code.includes("alt=")) {
+    issues.push({
+      severity: "error",
+      type: "accessibility",
+      message: "Image without alt attribute",
+      suggestion: 'Add alt="" for decorative images or descriptive alt text'
+    });
+  }
+  if (code.includes("<button") && !code.match(/<button[^>]*>.*\S.*<\/button>/s)) {
+    issues.push({
+      severity: "warning",
+      type: "accessibility",
+      message: "Button may be missing accessible text",
+      suggestion: "Ensure button has visible text or aria-label"
+    });
+  }
+  const singleQuotes = (code.match(/className='/g) || []).length;
+  const doubleQuotes = (code.match(/className="/g) || []).length;
+  if (singleQuotes > 0 && doubleQuotes > 0) {
+    issues.push({
+      severity: "info",
+      type: "component",
+      message: "Mixed quote styles in className attributes",
+      suggestion: "Use consistent quote style throughout"
+    });
+  }
+  return issues;
+}
+function lintAgainstStyleGuide(code, styleGuide) {
+  const issues = [];
+  const values = extractStyleValues(styleGuide);
+  const codeColors = code.matchAll(/#[A-Fa-f0-9]{6}\b/g);
+  for (const match of codeColors) {
+    const color = match[0].toUpperCase();
+    if (!values.colors.includes(color)) {
+      issues.push({
+        severity: "warning",
+        type: "color",
+        message: `Color ${color} not in style guide`,
+        code: match[0],
+        suggestion: `Allowed colors: ${values.colors.slice(0, 5).join(", ")}${values.colors.length > 5 ? "..." : ""}`
+      });
+    }
+  }
+  const spacingValues = code.matchAll(/(?:p|m|gap)-(\d+)/g);
+  for (const match of spacingValues) {
+    const value = parseInt(match[1]);
+    if (value > 12 && value % 4 !== 0) {
+      issues.push({
+        severity: "info",
+        type: "spacing",
+        message: `Spacing value ${match[0]} might not align with design system`,
+        suggestion: "Consider using standard Tailwind spacing values (1-12, 16, 20, 24...)"
+      });
+    }
+  }
+  return issues;
+}
+function extractColorsFromCode(code) {
+  const colors = [];
+  const hexMatches = code.matchAll(/#[A-Fa-f0-9]{6}\b/g);
+  for (const match of hexMatches) {
+    colors.push(match[0].toUpperCase());
+  }
+  const tailwindMatches = code.matchAll(/(?:bg|text|border)-(\w+)-(\d+)/g);
+  for (const match of tailwindMatches) {
+    colors.push(`tailwind:${match[1]}-${match[2]}`);
+  }
+  return [...new Set(colors)];
+}
+function findSimilarColor(color, allowedColors) {
+  const colorRgb = hexToRgb(color);
+  if (!colorRgb) return null;
+  let closest = null;
+  let closestDistance = Infinity;
+  for (const allowed of allowedColors) {
+    const allowedRgb = hexToRgb(allowed);
+    if (!allowedRgb) continue;
+    const distance = Math.sqrt(
+      Math.pow(colorRgb.r - allowedRgb.r, 2) + Math.pow(colorRgb.g - allowedRgb.g, 2) + Math.pow(colorRgb.b - allowedRgb.b, 2)
+    );
+    if (distance < closestDistance && distance < 50) {
+      closestDistance = distance;
+      closest = allowed;
+    }
+  }
+  return closest;
+}
+function hexToRgb(hex) {
+  const match = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (!match) return null;
+  return {
+    r: parseInt(match[1], 16),
+    g: parseInt(match[2], 16),
+    b: parseInt(match[3], 16)
+  };
+}
+
+export {
+  buildAnalysisPrompt,
+  buildStyleGuidePrompt,
+  buildQueryPrompt,
+  buildValidationPrompt,
+  OllamaClient,
+  getOllamaClient,
+  extractStyles,
+  extractStylesFromDOM,
+  serializeStyles,
+  deserializeStyles,
+  createStyleSummary,
+  truncateHTML,
+  createEmptyStyleGuide,
+  validateStyleGuide,
+  mergeStyleGuides,
+  createColorRule,
+  createTypographyRule,
+  createSpacingRule,
+  createComponentRule,
+  parseStyleGuide,
+  parseStyleGuideSections,
+  extractStyleValues,
+  generateStyleGuideFromStyles,
+  styleGuideToMarkdown,
+  validateCode,
+  lintSnippet
+};
+//# sourceMappingURL=chunk-B4HNWMXB.js.map