@stayicon/drift-guard 0.1.0 → 0.2.0

package/dist/{chunk-27T45SVD.js → chunk-HI6H6PCS.js}

@@ -1,3 +1,113 @@
+// src/parsers/structure-parser.ts
+import * as cheerio from "cheerio";
+import { createHash } from "crypto";
+var SEMANTIC_TAGS = [
+  "header",
+  "nav",
+  "main",
+  "section",
+  "article",
+  "aside",
+  "footer",
+  "form",
+  "table",
+  "dialog"
+];
+function shortHash(input) {
+  return createHash("sha256").update(input).digest("hex").slice(0, 8);
+}
+function computeMaxDepth($, el, depth) {
+  let maxDepth = depth;
+  el.children().each((_, child) => {
+    if ($(child).prop("nodeType") === 1) {
+      const childDepth = computeMaxDepth($, $(child), depth + 1);
+      if (childDepth > maxDepth) {
+        maxDepth = childDepth;
+      }
+    }
+  });
+  return maxDepth;
+}
+function computeStructureFingerprint(htmlContent) {
+  const $ = cheerio.load(htmlContent);
+  const semanticTags = {};
+  for (const tag of SEMANTIC_TAGS) {
+    const count = $(tag).length;
+    if (count > 0) {
+      semanticTags[tag] = count;
+    }
+  }
+  const body = $("body");
+  const maxDepth = body.length > 0 ? computeMaxDepth($, body, 0) : 0;
+  const layoutElements = [];
+  $("[style]").each((_, el) => {
+    const style = $(el).attr("style") ?? "";
+    if (/display\s*:\s*(flex|grid|inline-flex|inline-grid)/i.test(style)) {
+      const tag = ($(el).prop("tagName") ?? "div").toLowerCase();
+      const cls = $(el).attr("class") ?? "";
+      layoutElements.push(`${tag}.${cls}`);
+    }
+  });
+  $('[class*="flex"], [class*="grid"]').each((_, el) => {
+    const tag = ($(el).prop("tagName") ?? "div").toLowerCase();
+    const cls = $(el).attr("class") ?? "";
+    if (/\b(flex|grid|inline-flex|inline-grid)\b/.test(cls)) {
+      const key = `${tag}.${cls}`;
+      if (!layoutElements.includes(key)) {
+        layoutElements.push(key);
+      }
+    }
+  });
+  layoutElements.sort();
+  const layoutHash = layoutElements.length > 0 ? shortHash(layoutElements.join("|")) : "empty";
+  const childTags = [];
+  body.children().each((_, child) => {
+    if ($(child).prop("nodeType") === 1) {
+      const tag = ($(child).prop("tagName") ?? "").toLowerCase();
+      if (tag && tag !== "script" && tag !== "link") {
+        childTags.push(tag);
+      }
+    }
+  });
+  const childSequenceHash = childTags.length > 0 ? shortHash(childTags.join(",")) : "empty";
+  return {
+    semanticTags,
+    maxDepth,
+    layoutHash,
+    childSequenceHash
+  };
+}
+function compareStructure(original, current) {
+  const details = [];
+  if (original.maxDepth !== current.maxDepth) {
+    details.push(`maxDepth: ${original.maxDepth} \u2192 ${current.maxDepth}`);
+  }
+  const allTags = /* @__PURE__ */ new Set([
+    ...Object.keys(original.semanticTags),
+    ...Object.keys(current.semanticTags)
+  ]);
+  for (const tag of allTags) {
+    const origCount = original.semanticTags[tag] ?? 0;
+    const currCount = current.semanticTags[tag] ?? 0;
+    if (origCount !== currCount) {
+      if (origCount === 0) {
+        details.push(`<${tag}> added (${currCount})`);
+      } else if (currCount === 0) {
+        details.push(`<${tag}> removed (was ${origCount})`);
+      } else {
+        details.push(`<${tag}> count: ${origCount} \u2192 ${currCount}`);
+      }
+    }
+  }
+  if (original.layoutHash !== current.layoutHash) {
+    details.push(`layout elements changed (hash: ${original.layoutHash} \u2192 ${current.layoutHash})`);
+  }
+  if (original.childSequenceHash !== current.childSequenceHash) {
+    details.push(`body child sequence changed (hash: ${original.childSequenceHash} \u2192 ${current.childSequenceHash})`);
+  }
+  return details;
+}
+
 // src/types/index.ts
 var DEFAULT_CONFIG = {
   cssFiles: [
@@ -77,19 +187,62 @@ var CATEGORY_MAP = {
   "align-items": "layout",
   "grid-template-columns": "layout",
   "grid-template-rows": "layout",
-  "position": "layout"
+  "position": "layout",
+  // Visual effects
+  "backdrop-filter": "other",
+  "filter": "other",
+  "animation": "other",
+  "transition": "other"
 };
-function getCategory(property) {
+function getCategory(property, value) {
   if (CATEGORY_MAP[property]) {
     return CATEGORY_MAP[property];
   }
   if (property.startsWith("--")) {
     const lower = property.toLowerCase();
-    if (lower.includes("color") || lower.includes("bg") || lower.includes("text")) return "color";
-    if (lower.includes("font") || lower.includes("size") || lower.includes("weight")) return "font";
-    if (lower.includes("spacing") || lower.includes("margin") || lower.includes("padding") || lower.includes("gap")) return "spacing";
+    const colorKeywords = [
+      "color",
+      "bg",
+      "text",
+      "foreground",
+      "background",
+      // Semantic color tokens (Shadcn UI / Tailwind)
+      "primary",
+      "secondary",
+      "accent",
+      "muted",
+      "destructive",
+      "success",
+      "warning",
+      "danger",
+      "error",
+      "info",
+      // UI component colors
+      "card",
+      "popover",
+      "border",
+      "input",
+      "ring",
+      "sidebar",
+      "chart",
+      "glow",
+      // State colors
+      "hover",
+      "active",
+      "focus",
+      "disabled"
+    ];
+    if (colorKeywords.some((kw) => lower.includes(kw))) return "color";
+    if (lower.includes("font") || lower.includes("size") || lower.includes("weight") || lower.includes("line-height") || lower.includes("letter")) return "font";
+    if (lower.includes("spacing") || lower.includes("margin") || lower.includes("padding") || lower.includes("gap") || lower.includes("inset")) return "spacing";
     if (lower.includes("shadow")) return "shadow";
     if (lower.includes("radius") || lower.includes("rounded")) return "radius";
+    if (lower.includes("width") || lower.includes("height") || lower.includes("sidebar-width")) return "layout";
+    if (value) {
+      const trimmed = value.trim();
+      if (/^\d{1,3}\s+\d{1,3}%\s+\d{1,3}%$/.test(trimmed)) return "color";
+      if (/^(#|rgb|hsl|oklch|lch|lab|color\()/.test(trimmed)) return "color";
+    }
     return "other";
   }
   return null;
@@ -105,9 +258,9 @@ function parseCss(cssContent, filePath) {
       visit: "Declaration",
       enter(node) {
         const property = node.property;
-        const category = getCategory(property);
-        if (!category) return;
         const value = csstree.generate(node.value);
+        const category = getCategory(property, value);
+        if (!category) return;
         if (!value || ["inherit", "initial", "unset", "revert"].includes(value)) return;
         let selector = ":root";
         let parent = this.atrule ?? this.rule;
@@ -136,7 +289,7 @@ function extractCssVariables(cssContent, filePath) {
   while ((match = varRegex.exec(cssContent)) !== null) {
     const property = `--${match[1]}`;
     const value = match[2].trim();
-    const category = getCategory(property) ?? "other";
+    const category = getCategory(property, value) ?? "other";
     tokens.push({
       category,
       property,
@@ -150,7 +303,7 @@ function extractCssVariables(cssContent, filePath) {
 }
 
 // src/parsers/html-parser.ts
-import * as cheerio from "cheerio";
+import * as cheerio2 from "cheerio";
 var TRACKED_PROPERTIES = {
   "color": "color",
   "background-color": "color",
@@ -177,7 +330,12 @@ var TRACKED_PROPERTIES = {
   "display": "layout",
   "flex-direction": "layout",
   "justify-content": "layout",
-  "align-items": "layout"
+  "align-items": "layout",
+  // Visual effects
+  "backdrop-filter": "other",
+  "filter": "other",
+  "animation": "other",
+  "transition": "other"
 };
 function parseInlineStyle(styleStr) {
   const result = {};
@@ -195,7 +353,7 @@ function parseInlineStyle(styleStr) {
 }
 function parseHtml(htmlContent, filePath) {
   const tokens = [];
-  const $ = cheerio.load(htmlContent);
+  const $ = cheerio2.load(htmlContent);
   const styleBlocks = [];
   $("style").each((_, el) => {
     const text = $(el).text();
@@ -224,7 +382,7 @@ function parseHtml(htmlContent, filePath) {
   return tokens;
 }
 function extractStyleBlocks(htmlContent) {
-  const $ = cheerio.load(htmlContent);
+  const $ = cheerio2.load(htmlContent);
   const blocks = [];
   $("style").each((_, el) => {
     const text = $(el).text();
@@ -234,6 +392,64 @@ function extractStyleBlocks(htmlContent) {
   });
   return blocks;
 }
+function extractTailwindConfig(htmlContent, filePath) {
+  const tokens = [];
+  const $ = cheerio2.load(htmlContent);
+  $("script").each((_, el) => {
+    const scriptId = $(el).attr("id") ?? "";
+    const text = $(el).text();
+    if (!text) return;
+    const isTailwindConfig = scriptId.toLowerCase().includes("tailwind") || text.includes("tailwind.config");
+    if (!isTailwindConfig) return;
+    const colorsMatch = text.match(/colors\s*:\s*\{([^}]+)\}/);
+    if (colorsMatch) {
+      const colorsBlock = colorsMatch[1];
+      const colorRegex = /["']([^"']+)["']\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = colorRegex.exec(colorsBlock)) !== null) {
+        tokens.push({
+          category: "color",
+          property: `--tw-${match[1]}`,
+          value: match[2],
+          selector: "[tailwind.config]",
+          file: filePath
+        });
+      }
+    }
+    const radiusMatch = text.match(/borderRadius\s*:\s*\{([^}]+)\}/);
+    if (radiusMatch) {
+      const radiusBlock = radiusMatch[1];
+      const radiusRegex = /["']([^"']+)["']\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = radiusRegex.exec(radiusBlock)) !== null) {
+        tokens.push({
+          category: "radius",
+          property: `--tw-radius-${match[1]}`,
+          value: match[2],
+          selector: "[tailwind.config]",
+          file: filePath
+        });
+      }
+    }
+    const fontMatch = text.match(/fontFamily\s*:\s*\{([^}]+)\}/);
+    if (fontMatch) {
+      const fontBlock = fontMatch[1];
+      const fontRegex = /["']([^"']+)["']\s*:\s*\[([^\]]+)\]/g;
+      let match;
+      while ((match = fontRegex.exec(fontBlock)) !== null) {
+        const familyValues = match[2].split(",").map((v) => v.trim().replace(/["']/g, "")).join(", ");
+        tokens.push({
+          category: "font",
+          property: `--tw-font-${match[1]}`,
+          value: familyValues,
+          selector: "[tailwind.config]",
+          file: filePath
+        });
+      }
+    }
+  });
+  return tokens;
+}
 function buildSelectorPath($, element) {
   const parts = [];
   const tagName = element.prop("tagName")?.toLowerCase() ?? "div";
@@ -292,6 +508,8 @@ async function scanProject(projectRoot, config, stitchHtmlPath) {
         allTokens.push(...vars);
       }
       scannedFiles.push(stitchHtmlPath);
+      const twTokens = extractTailwindConfig(htmlContent, stitchHtmlPath);
+      allTokens.push(...twTokens);
     }
   }
   const cssFiles = await fg(config.cssFiles, {
@@ -324,6 +542,8 @@ async function scanProject(projectRoot, config, stitchHtmlPath) {
       const cssTokens = parseCss(block, file);
       allTokens.push(...cssTokens);
     }
+    const twTokens = extractTailwindConfig(content, file);
+    allTokens.push(...twTokens);
     scannedFiles.push(file);
   }
   const filtered = allTokens.filter(
@@ -356,13 +576,38 @@ function buildSummary(tokens) {
 async function createSnapshot(projectRoot, stitchHtmlPath) {
   const config = loadConfig(projectRoot);
   const { tokens, files } = await scanProject(projectRoot, config, stitchHtmlPath);
+  let structure;
+  try {
+    let htmlForStructure = null;
+    if (stitchHtmlPath) {
+      const absPath = path.resolve(projectRoot, stitchHtmlPath);
+      if (fs.existsSync(absPath)) {
+        htmlForStructure = fs.readFileSync(absPath, "utf-8");
+      }
+    } else {
+      for (const file of files) {
+        if (file.endsWith(".html")) {
+          const absPath = path.join(projectRoot, file);
+          if (fs.existsSync(absPath)) {
+            htmlForStructure = fs.readFileSync(absPath, "utf-8");
+            break;
+          }
+        }
+      }
+    }
+    if (htmlForStructure) {
+      structure = computeStructureFingerprint(htmlForStructure);
+    }
+  } catch {
+  }
   const snapshot = {
     version: "1.0.0",
     createdAt: (/* @__PURE__ */ new Date()).toISOString(),
     projectRoot,
     sourceFiles: files,
     tokens,
-    summary: buildSummary(tokens)
+    summary: buildSummary(tokens),
+    structure
   };
   return snapshot;
 }
@@ -430,6 +675,37 @@ async function detectDrift(projectRoot, snapshot, threshold = 10) {
       driftPercent: total > 0 ? Math.round(changed / total * 100 * 100) / 100 : 0
     };
   }
+  let structureDrift;
+  if (snapshot.structure) {
+    try {
+      const config2 = loadConfig(projectRoot);
+      const fg2 = (await import("fast-glob")).default;
+      const htmlFiles = await fg2(config2.htmlFiles, {
+        cwd: projectRoot,
+        ignore: config2.ignore,
+        absolute: false
+      });
+      let htmlContent = null;
+      const fs3 = await import("fs");
+      const path3 = await import("path");
+      for (const file of htmlFiles) {
+        const absPath = path3.join(projectRoot, file);
+        if (fs3.existsSync(absPath)) {
+          htmlContent = fs3.readFileSync(absPath, "utf-8");
+          break;
+        }
+      }
+      if (htmlContent) {
+        const currentStructure = computeStructureFingerprint(htmlContent);
+        const details = compareStructure(snapshot.structure, currentStructure);
+        structureDrift = {
+          changed: details.length > 0,
+          details
+        };
+      }
+    } catch {
+    }
+  }
   return {
     checkedAt: (/* @__PURE__ */ new Date()).toISOString(),
     snapshotCreatedAt: snapshot.createdAt,
@@ -439,7 +715,8 @@ async function detectDrift(projectRoot, snapshot, threshold = 10) {
     threshold,
     passed: driftScore <= threshold,
     items: driftItems,
-    categorySummary
+    categorySummary,
+    structureDrift
   };
 }
 
@@ -612,7 +889,235 @@ ${buildTokenList(snapshot)}
 `;
 }
 
+// src/core/sync.ts
+var CATEGORY_LABELS = {
+  color: "color",
+  font: "font",
+  spacing: "spacing",
+  shadow: "shadow",
+  radius: "border-radius",
+  layout: "layout",
+  other: "style"
+};
+function isDesignTokenProperty(property) {
+  if (property.startsWith("--")) return true;
+  if (property === "font-family") return true;
+  return false;
+}
+function normalizeTokenKey(property) {
+  return property.replace(/^--tw-/, "--").replace(/^--tw-font-/, "--font-").toLowerCase();
+}
+function driftItemsToSyncChanges(items) {
+  return items.map((item) => {
+    if (item.changeType === "deleted") {
+      return {
+        category: item.original.category,
+        property: item.original.property,
+        fromValue: item.original.value,
+        toValue: "",
+        action: "remove"
+      };
+    }
+    if (item.changeType === "added") {
+      return {
+        category: (item.current ?? item.original).category,
+        property: (item.current ?? item.original).property,
+        fromValue: "",
+        toValue: (item.current ?? item.original).value,
+        action: "add"
+      };
+    }
+    return {
+      category: item.original.category,
+      property: item.original.property,
+      fromValue: item.original.value,
+      toValue: item.current?.value ?? "",
+      action: "update"
+    };
+  });
+}
+function generateSyncPrompt(changes) {
+  if (changes.length === 0) {
+    return "";
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const change of changes) {
+    const existing = grouped.get(change.category) ?? [];
+    existing.push(change);
+    grouped.set(change.category, existing);
+  }
+  const lines = [
+    "Update the following design tokens to match the latest code changes:",
+    ""
+  ];
+  for (const [category, categoryChanges] of grouped) {
+    const label = CATEGORY_LABELS[category];
+    for (const change of categoryChanges) {
+      const propName = cleanPropertyName(change.property);
+      if (change.action === "update") {
+        lines.push(
+          `- Change ${label} '${propName}' from ${change.fromValue} to ${change.toValue}`
+        );
+      } else if (change.action === "add") {
+        lines.push(
+          `- Add new ${label} '${propName}' with value ${change.toValue}`
+        );
+      } else if (change.action === "remove") {
+        lines.push(
+          `- Remove ${label} '${propName}' (was ${change.fromValue})`
+        );
+      }
+    }
+  }
+  lines.push("");
+  lines.push(
+    "Keep all other design elements unchanged. Only modify the specified tokens."
+  );
+  return lines.join("\n");
+}
+function cleanPropertyName(property) {
+  return property.replace(/^--tw-/, "").replace(/^--tw-radius-/, "").replace(/^--tw-font-/, "").replace(/^--/, "");
+}
+function syncToStitch(driftItems) {
+  const changes = driftItemsToSyncChanges(driftItems);
+  const prompt = generateSyncPrompt(changes);
+  return {
+    direction: "to-stitch",
+    changes,
+    prompt: prompt || void 0,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function syncFromStitch(stitchTokens, snapshotTokens) {
+  const changes = [];
+  const stitchDesignTokens = stitchTokens.filter((t) => isDesignTokenProperty(t.property));
+  const snapshotDesignTokens = snapshotTokens.filter((t) => isDesignTokenProperty(t.property));
+  const snapshotMap = /* @__PURE__ */ new Map();
+  for (const token of snapshotDesignTokens) {
+    const key = normalizeTokenKey(token.property);
+    if (!snapshotMap.has(key)) {
+      snapshotMap.set(key, token);
+    }
+  }
+  const stitchMap = /* @__PURE__ */ new Map();
+  for (const token of stitchDesignTokens) {
+    const key = normalizeTokenKey(token.property);
+    if (!stitchMap.has(key)) {
+      stitchMap.set(key, token);
+    }
+  }
+  for (const [key, stitchToken] of stitchMap) {
+    const snapshotToken = snapshotMap.get(key);
+    if (!snapshotToken) {
+      changes.push({
+        category: stitchToken.category,
+        property: stitchToken.property,
+        fromValue: "",
+        toValue: stitchToken.value,
+        action: "add"
+      });
+    } else if (stitchToken.value !== snapshotToken.value) {
+      changes.push({
+        category: stitchToken.category,
+        property: snapshotToken.property,
+        fromValue: snapshotToken.value,
+        toValue: stitchToken.value,
+        action: "update"
+      });
+    }
+  }
+  if (stitchDesignTokens.length > 0) {
+    for (const [key, snapshotToken] of snapshotMap) {
+      const isStitchOrigin = snapshotToken.property.startsWith("--tw-") || snapshotToken.selector === "[tailwind.config]";
+      if (isStitchOrigin && !stitchMap.has(key)) {
+        changes.push({
+          category: snapshotToken.category,
+          property: snapshotToken.property,
+          fromValue: snapshotToken.value,
+          toValue: "",
+          action: "remove"
+        });
+      }
+    }
+  }
+  const patchFile = generateCssPatch(changes);
+  return {
+    direction: "to-code",
+    changes,
+    patchFile: patchFile || void 0,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function applySyncChanges(changes, cssFiles) {
+  const modifiedFiles = /* @__PURE__ */ new Map();
+  let appliedCount = 0;
+  const updateChanges = changes.filter((c) => c.action === "update");
+  for (const [filename, content] of cssFiles) {
+    let modified = content;
+    let fileChanged = false;
+    for (const change of updateChanges) {
+      const propName = change.property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const escapedFrom = change.fromValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const cssRegex = new RegExp(
+        `(${propName}\\s*:\\s*)${escapedFrom}(\\s*[;\\n])`,
+        "g"
+      );
+      let newContent = modified.replace(cssRegex, `$1${change.toValue}$2`);
+      if (newContent === modified) {
+        const twResult = applySyncToHtml(modified, change);
+        if (twResult !== modified) {
+          newContent = twResult;
+        }
+      }
+      if (newContent !== modified) {
+        modified = newContent;
+        fileChanged = true;
+        appliedCount++;
+      }
+    }
+    if (fileChanged) {
+      modifiedFiles.set(filename, modified);
+    }
+  }
+  return { modifiedFiles, appliedCount };
+}
+function applySyncToHtml(html, change) {
+  const tokenName = change.property.replace(/^--tw-/, "").replace(/^--/, "");
+  const escapedFrom = change.fromValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(
+    `("${tokenName}"\\s*:\\s*)["']${escapedFrom}["']`,
+    "g"
+  );
+  return html.replace(regex, `$1"${change.toValue}"`);
+}
+function generateCssPatch(changes) {
+  if (changes.length === 0) return "";
+  const lines = [
+    "/* drift-guard sync patch \u2014 apply these changes to your CSS */",
+    "/* Generated by: drift-guard sync --direction to-code */",
+    "",
+    ":root {"
+  ];
+  for (const change of changes) {
+    if (change.action === "remove") {
+      lines.push(`  /* REMOVED: ${change.property}: ${change.fromValue}; */`);
+    } else {
+      const comment = change.action === "update" ? ` /* was: ${change.fromValue} */` : " /* NEW */";
+      lines.push(`  ${change.property}: ${change.toValue};${comment}`);
+    }
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+
 export {
+  parseCss,
+  extractCssVariables,
+  parseHtml,
+  extractStyleBlocks,
+  extractTailwindConfig,
+  computeStructureFingerprint,
+  compareStructure,
   DEFAULT_CONFIG,
   loadConfig,
   saveConfig,
@@ -622,6 +1127,11 @@ export {
   loadSnapshot,
   detectDrift,
   generateRules,
-  saveRules
+  saveRules,
+  driftItemsToSyncChanges,
+  generateSyncPrompt,
+  syncToStitch,
+  syncFromStitch,
+  applySyncChanges
 };
-//# sourceMappingURL=chunk-27T45SVD.js.map
+//# sourceMappingURL=chunk-HI6H6PCS.js.map