@designtools/codesurface 0.1.3 → 0.1.8

package/dist/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 // src/cli.ts
-import fs18 from "fs";
-import path16 from "path";
+import fs19 from "fs";
+import path17 from "path";
 import process2 from "process";
 import readline from "readline";
 import open from "open";
@@ -216,8 +216,8 @@ async function findBootstrapScssFiles(projectRoot) {
 
 // src/server/index.ts
 import express from "express";
-import path15 from "path";
-import fs17 from "fs";
+import path16 from "path";
+import fs18 from "fs";
 import { fileURLToPath } from "url";
 import { exec } from "child_process";
 
@@ -400,13 +400,13 @@ import { namedTypes as n2 } from "ast-types";
 function findElementAtSource(ast, line, col) {
   let found = null;
   visit(ast, {
-    visitJSXOpeningElement(path17) {
-      const loc = path17.node.loc;
+    visitJSXOpeningElement(path18) {
+      const loc = path18.node.loc;
       if (loc && loc.start.line === line && loc.start.column === col) {
-        found = path17;
+        found = path18;
         return false;
       }
-      this.traverse(path17);
+      this.traverse(path18);
     }
   });
   return found;
@@ -414,16 +414,16 @@ function findElementAtSource(ast, line, col) {
 function findComponentAtSource(ast, componentName, line, col) {
   let found = null;
   visit(ast, {
-    visitJSXOpeningElement(path17) {
-      const name = path17.node.name;
+    visitJSXOpeningElement(path18) {
+      const name = path18.node.name;
       if (n2.JSXIdentifier.check(name) && name.name === componentName) {
-        const loc = path17.node.loc;
+        const loc = path18.node.loc;
         if (loc && loc.start.line === line && loc.start.column === col) {
-          found = path17;
+          found = path18;
           return false;
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     }
   });
   return found;
@@ -1207,12 +1207,12 @@ function createWriteElementRouter(config) {
 
 // src/server/api/write-tokens.ts
 import { Router as Router3 } from "express";
-import fs13 from "fs/promises";
+import fs14 from "fs/promises";
 
 // src/server/lib/scanner.ts
 import { Router as Router2 } from "express";
-import fs12 from "fs/promises";
-import path12 from "path";
+import fs13 from "fs/promises";
+import path13 from "path";
 
 // src/server/lib/scan-tokens.ts
 import fs4 from "fs/promises";
@@ -1381,8 +1381,8 @@ function parseComponentAST(source, filePath, parser) {
   let currentComponentName = null;
   recast2.visit(ast, {
     // Find cva() calls: const fooVariants = cva("base classes", { variants: {...}, defaultVariants: {...} })
-    visitVariableDeclaration(path17) {
-      for (const decl of path17.node.declarations) {
+    visitVariableDeclaration(path18) {
+      for (const decl of path18.node.declarations) {
         if (n3.VariableDeclarator.check(decl) && n3.Identifier.check(decl.id) && n3.CallExpression.check(decl.init) && isIdentifierNamed(decl.init.callee, "cva")) {
           const varName = decl.id.name;
           const args = decl.init.arguments;
@@ -1392,45 +1392,45 @@ function parseComponentAST(source, filePath, parser) {
           cvaMap.set(varName, { baseClasses, variants });
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     },
     // Find forwardRef and function components to track data-slot and currentComponentName
-    visitCallExpression(path17) {
-      const node = path17.node;
+    visitCallExpression(path18) {
+      const node = path18.node;
       if (isForwardRefCall(node)) {
-        const parent = path17.parent?.node;
+        const parent = path18.parent?.node;
         if (n3.VariableDeclarator.check(parent) && n3.Identifier.check(parent.id)) {
           currentComponentName = parent.id.name;
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     },
     // Find data-slot JSX attributes
-    visitJSXAttribute(path17) {
-      const attr = path17.node;
+    visitJSXAttribute(path18) {
+      const attr = path18.node;
       if (n3.JSXIdentifier.check(attr.name) && attr.name.name === "data-slot" && n3.StringLiteral.check(attr.value)) {
         const slotValue = attr.value.value;
-        const compName = findEnclosingComponentName(path17) || currentComponentName;
+        const compName = findEnclosingComponentName(path18) || currentComponentName;
         if (compName) {
           slotToComponent.set(slotValue, compName);
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     },
     // Detect {...props} spread in JSX — indicates component accepts children
-    visitJSXSpreadAttribute(path17) {
-      const expr = path17.node.argument;
+    visitJSXSpreadAttribute(path18) {
+      const expr = path18.node.argument;
       if (n3.Identifier.check(expr) && expr.name === "props") {
-        const compName = findEnclosingComponentName(path17) || currentComponentName;
+        const compName = findEnclosingComponentName(path18) || currentComponentName;
         if (compName) {
           acceptsChildrenSet.add(compName);
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     },
     // Collect named exports: export { Button, Card, ... }
-    visitExportNamedDeclaration(path17) {
-      const node = path17.node;
+    visitExportNamedDeclaration(path18) {
+      const node = path18.node;
       if (node.specifiers) {
         for (const spec of node.specifiers) {
           if (n3.ExportSpecifier.check(spec) && n3.Identifier.check(spec.exported)) {
@@ -1449,37 +1449,37 @@ function parseComponentAST(source, filePath, parser) {
           exportedNames.add(node.declaration.id.name);
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     },
     // export default function Foo
-    visitExportDefaultDeclaration(path17) {
-      const decl = path17.node.declaration;
+    visitExportDefaultDeclaration(path18) {
+      const decl = path18.node.declaration;
       if (n3.FunctionDeclaration.check(decl) && decl.id) {
         exportedNames.add(decl.id.name);
       }
-      this.traverse(path17);
+      this.traverse(path18);
     }
   });
   recast2.visit(ast, {
-    visitFunctionDeclaration(path17) {
-      const name = path17.node.id ? String(path17.node.id.name) : null;
+    visitFunctionDeclaration(path18) {
+      const name = path18.node.id ? String(path18.node.id.name) : null;
       if (name) {
         currentComponentName = name;
-        this.traverse(path17);
+        this.traverse(path18);
         currentComponentName = null;
       } else {
-        this.traverse(path17);
+        this.traverse(path18);
       }
     },
-    visitJSXAttribute(path17) {
-      const attr = path17.node;
+    visitJSXAttribute(path18) {
+      const attr = path18.node;
       if (n3.JSXIdentifier.check(attr.name) && attr.name.name === "data-slot" && n3.StringLiteral.check(attr.value)) {
         const slotValue = attr.value.value;
         if (!slotToComponent.has(slotValue) && currentComponentName) {
           slotToComponent.set(slotValue, currentComponentName);
         }
       }
-      this.traverse(path17);
+      this.traverse(path18);
     }
   });
   const tokenRefs = extractTokenReferences(source);
@@ -2333,24 +2333,105 @@ function isGradientValue(name, value) {
   return false;
 }
 
-// src/server/lib/scan-usages.ts
+// src/server/lib/scan-spacing.ts
 import fs11 from "fs/promises";
 import path11 from "path";
+var TAILWIND_SPACING_BASE = {
+  name: "spacing",
+  value: "0.25rem",
+  source: "framework-preset",
+  isOverridden: false,
+  cssVariable: "--spacing",
+  isBase: true
+};
+async function scanSpacing(projectRoot, framework, styling) {
+  const spacing = [];
+  const allCssFiles = framework.cssFiles.length > 0 ? framework.cssFiles : styling.cssFiles;
+  const cssFilePath = allCssFiles[0] || "";
+  const customSpacing = await scanCustomSpacing(projectRoot, allCssFiles);
+  const overriddenNames = new Set(customSpacing.map((s) => s.name));
+  if (styling.type === "tailwind-v4") {
+    if (!overriddenNames.has("spacing")) {
+      spacing.push(TAILWIND_SPACING_BASE);
+    }
+  } else if (styling.type === "tailwind-v3") {
+    if (!overriddenNames.has("spacing")) {
+      spacing.push({
+        ...TAILWIND_SPACING_BASE,
+        source: "framework-preset"
+      });
+    }
+  }
+  for (const custom of customSpacing) {
+    spacing.push({ ...custom, isOverridden: true });
+  }
+  return { spacing, cssFilePath, stylingType: styling.type };
+}
+async function scanCustomSpacing(projectRoot, cssFiles) {
+  const spacing = [];
+  for (const file of cssFiles) {
+    try {
+      const css = await fs11.readFile(path11.join(projectRoot, file), "utf-8");
+      const rootTokens = parseBlock(css, ":root");
+      for (const [name, value] of rootTokens) {
+        const s = classifySpacingToken(name, value);
+        if (s) spacing.push(s);
+      }
+      const themeMatch = css.match(/@theme\s*(?:inline\s*)?\{([\s\S]*?)\}/);
+      if (themeMatch) {
+        const themeBlock = themeMatch[1];
+        const propRegex = /(--[\w-]+)\s*:\s*([^;]+);/g;
+        let match;
+        while ((match = propRegex.exec(themeBlock)) !== null) {
+          const name = match[1];
+          const value = match[2].trim();
+          if (!spacing.find((s) => s.name === name.replace(/^--/, ""))) {
+            const s = classifySpacingToken(name, value);
+            if (s) spacing.push(s);
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  return spacing;
+}
+function classifySpacingToken(name, value) {
+  const cleanName = name.replace(/^--/, "");
+  if (value.includes("oklch") || value.includes("hsl") || value.includes("rgb") || value.startsWith("#")) {
+    return null;
+  }
+  if (cleanName === "spacing" || cleanName.startsWith("spacing-")) {
+    return {
+      name: cleanName,
+      value,
+      source: "custom",
+      isOverridden: false,
+      cssVariable: name.startsWith("--") ? name : `--${name}`,
+      isBase: cleanName === "spacing"
+    };
+  }
+  return null;
+}
+
+// src/server/lib/scan-usages.ts
+import fs12 from "fs/promises";
+import path12 from "path";
 var PAGE_EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
 var LAYOUT_FILES = ["layout", "page"];
 async function scanUsages(projectRoot, framework) {
   if (!framework.appDirExists) {
     return { usages: {} };
   }
-  const absAppDir = path11.join(projectRoot, framework.appDir);
+  const absAppDir = path12.join(projectRoot, framework.appDir);
   const usages = {};
   const routeFiles = [];
   await walkAppDir(absAppDir, absAppDir, "", routeFiles);
   for (const { file, route } of routeFiles) {
-    const absFile = path11.join(absAppDir, file);
+    const absFile = path12.join(absAppDir, file);
     let source;
     try {
-      source = await fs11.readFile(absFile, "utf-8");
+      source = await fs12.readFile(absFile, "utf-8");
     } catch {
       continue;
     }
@@ -2366,7 +2447,7 @@ async function scanUsages(projectRoot, framework) {
       const rf = routeFiles.find((r) => r.route === route);
       return {
         route,
-        file: rf ? path11.join(framework.appDir, rf.file) : ""
+        file: rf ? path12.join(framework.appDir, rf.file) : ""
       };
     });
   }
@@ -2375,7 +2456,7 @@ async function scanUsages(projectRoot, framework) {
 async function walkAppDir(baseDir, currentDir, routePrefix, results) {
   let entries;
   try {
-    entries = await fs11.readdir(currentDir, { withFileTypes: true });
+    entries = await fs12.readdir(currentDir, { withFileTypes: true });
   } catch {
     return;
   }
@@ -2383,7 +2464,7 @@ async function walkAppDir(baseDir, currentDir, routePrefix, results) {
     for (const ext of PAGE_EXTENSIONS) {
       const candidate = `${base}${ext}`;
       if (entries.some((e) => e.isFile() && e.name === candidate)) {
-        const relFile = path11.relative(baseDir, path11.join(currentDir, candidate));
+        const relFile = path12.relative(baseDir, path12.join(currentDir, candidate));
         const route = routePrefix || "/";
         results.push({ file: relFile, route });
       }
@@ -2394,7 +2475,7 @@ async function walkAppDir(baseDir, currentDir, routePrefix, results) {
     const dirName = entry.name;
     if (dirName.startsWith("_") || dirName.startsWith(".")) continue;
     if (dirName === "api") continue;
-    const subDir = path11.join(currentDir, dirName);
+    const subDir = path12.join(currentDir, dirName);
     if (dirName.startsWith("(") && dirName.endsWith(")")) {
       await walkAppDir(baseDir, subDir, routePrefix, results);
     } else if (dirName.startsWith("@")) {
@@ -2457,15 +2538,16 @@ var cachedScan = null;
 async function runScan(projectRoot) {
   const framework = await detectFramework(projectRoot);
   const styling = await detectStylingSystem(projectRoot, framework);
-  const [tokens, components, shadows, borders, gradients, usages] = await Promise.all([
+  const [tokens, components, shadows, borders, gradients, spacing, usages] = await Promise.all([
     scanTokens(projectRoot, framework),
     scanComponents(projectRoot),
     scanShadows(projectRoot, framework, styling),
     scanBorders(projectRoot, framework, styling),
     scanGradients(projectRoot, framework, styling),
+    scanSpacing(projectRoot, framework, styling),
     scanUsages(projectRoot, framework)
   ]);
-  cachedScan = { framework, tokens, components, shadows, borders, gradients, styling, usages };
+  cachedScan = { framework, tokens, components, shadows, borders, gradients, spacing, styling, usages };
   return cachedScan;
 }
 function patchCachedScan(key, value) {
@@ -2491,6 +2573,12 @@ async function rescanBorders(projectRoot) {
   patchCachedScan("borders", borders);
   return borders;
 }
+async function rescanSpacing(projectRoot) {
+  const scan = cachedScan || await runScan(projectRoot);
+  const spacing = await scanSpacing(projectRoot, scan.framework, scan.styling);
+  patchCachedScan("spacing", spacing);
+  return spacing;
+}
 async function rescanGradients(projectRoot) {
   const scan = cachedScan || await runScan(projectRoot);
   const gradients = await scanGradients(projectRoot, scan.framework, scan.styling);
@@ -2544,6 +2632,14 @@ function createScanRouter(projectRoot) {
       res.status(500).json({ error: err.message });
     }
   });
+  router.get("/spacing", async (_req, res) => {
+    try {
+      const result = cachedScan || await runScan(projectRoot);
+      res.json(result.spacing);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
   router.get("/shadows", async (_req, res) => {
     try {
       const result = cachedScan || await runScan(projectRoot);
@@ -2592,6 +2688,14 @@ function createScanRouter(projectRoot) {
       res.status(500).json({ error: err.message });
     }
   });
+  router.post("/rescan/spacing", async (_req, res) => {
+    try {
+      const spacing = await rescanSpacing(projectRoot);
+      res.json(spacing);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
   router.post("/rescan/gradients", async (_req, res) => {
     try {
       const gradients = await rescanGradients(projectRoot);
@@ -2616,26 +2720,26 @@ function createScanRouter(projectRoot) {
 var PAGE_EXTENSIONS2 = [".tsx", ".jsx", ".ts", ".js"];
 async function resolveRouteToFile(projectRoot, appDir, routePath) {
   const segments = routePath === "/" ? [] : routePath.replace(/^\//, "").replace(/\/$/, "").split("/");
-  const absAppDir = path12.join(projectRoot, appDir);
+  const absAppDir = path13.join(projectRoot, appDir);
   const result = await matchSegments(absAppDir, segments, 0);
   if (result) {
-    return path12.relative(projectRoot, result);
+    return path13.relative(projectRoot, result);
   }
   return null;
 }
 async function findPageFile(dir) {
   for (const ext of PAGE_EXTENSIONS2) {
-    const candidate = path12.join(dir, `page${ext}`);
+    const candidate = path13.join(dir, `page${ext}`);
     try {
-      await fs12.access(candidate);
+      await fs13.access(candidate);
       return candidate;
     } catch {
     }
   }
   for (const ext of PAGE_EXTENSIONS2) {
-    const candidate = path12.join(dir, `index${ext}`);
+    const candidate = path13.join(dir, `index${ext}`);
     try {
-      await fs12.access(candidate);
+      await fs13.access(candidate);
       return candidate;
     } catch {
     }
@@ -2644,7 +2748,7 @@ async function findPageFile(dir) {
 }
 async function listDirs(dir) {
   try {
-    const entries = await fs12.readdir(dir, { withFileTypes: true });
+    const entries = await fs13.readdir(dir, { withFileTypes: true });
     return entries.filter((e) => e.isDirectory()).map((e) => e.name);
   } catch {
     return [];
@@ -2657,7 +2761,7 @@ async function matchSegments(currentDir, segments, index) {
     const dirs2 = await listDirs(currentDir);
     for (const d of dirs2) {
       if (d.startsWith("(") && d.endsWith(")")) {
-        const page2 = await findPageFile(path12.join(currentDir, d));
+        const page2 = await findPageFile(path13.join(currentDir, d));
         if (page2) return page2;
       }
     }
@@ -2666,30 +2770,30 @@ async function matchSegments(currentDir, segments, index) {
   const segment = segments[index];
   const dirs = await listDirs(currentDir);
   if (dirs.includes(segment)) {
-    const result = await matchSegments(path12.join(currentDir, segment), segments, index + 1);
+    const result = await matchSegments(path13.join(currentDir, segment), segments, index + 1);
     if (result) return result;
   }
   for (const d of dirs) {
     if (d.startsWith("(") && d.endsWith(")")) {
-      const result = await matchSegments(path12.join(currentDir, d), segments, index);
+      const result = await matchSegments(path13.join(currentDir, d), segments, index);
       if (result) return result;
     }
   }
   for (const d of dirs) {
     if (d.startsWith("[") && d.endsWith("]") && !d.startsWith("[...") && !d.startsWith("[[")) {
-      const result = await matchSegments(path12.join(currentDir, d), segments, index + 1);
+      const result = await matchSegments(path13.join(currentDir, d), segments, index + 1);
       if (result) return result;
     }
   }
   for (const d of dirs) {
     if (d.startsWith("[...") && d.endsWith("]")) {
-      const page = await findPageFile(path12.join(currentDir, d));
+      const page = await findPageFile(path13.join(currentDir, d));
       if (page) return page;
     }
   }
   for (const d of dirs) {
     if (d.startsWith("[[...") && d.endsWith("]]")) {
-      const page = await findPageFile(path12.join(currentDir, d));
+      const page = await findPageFile(path13.join(currentDir, d));
       if (page) return page;
     }
   }
@@ -2703,9 +2807,9 @@ function createTokensRouter(projectRoot) {
     try {
       const { filePath, token, value, selector } = req.body;
       const fullPath = safePath(projectRoot, filePath);
-      let css = await fs13.readFile(fullPath, "utf-8");
+      let css = await fs14.readFile(fullPath, "utf-8");
       css = replaceTokenInBlock(css, selector, token, value);
-      await fs13.writeFile(fullPath, css, "utf-8");
+      await fs14.writeFile(fullPath, css, "utf-8");
       const tokens = await rescanTokens(projectRoot);
       res.json({ ok: true, filePath, token, value, tokens });
     } catch (err) {
@@ -2737,7 +2841,11 @@ function replaceTokenInBlock(css, selector, token, newValue) {
     "g"
   );
   if (!tokenRegex.test(block)) {
-    throw new Error(`Token "${token}" not found in "${selector}" block`);
+    const indent = block.match(/\n(\s+)--/)?.[1] ?? "  ";
+    block = block.trimEnd() + `
+${indent}${token}: ${newValue};
+`;
+    return css.slice(0, openBrace + 1) + block + css.slice(blockEnd - 1);
   }
   block = block.replace(tokenRegex, `$1${newValue}$3`);
   return css.slice(0, openBrace + 1) + block + css.slice(blockEnd - 1);
@@ -2745,16 +2853,16 @@ function replaceTokenInBlock(css, selector, token, newValue) {
 
 // src/server/api/write-component.ts
 import { Router as Router4 } from "express";
-import fs14 from "fs/promises";
+import fs15 from "fs/promises";
 function createComponentRouter(projectRoot) {
   const router = Router4();
   router.post("/", async (req, res) => {
     try {
       const { filePath, oldClass, newClass, variantContext } = req.body;
       const fullPath = safePath(projectRoot, filePath);
-      let source = await fs14.readFile(fullPath, "utf-8");
+      let source = await fs15.readFile(fullPath, "utf-8");
       source = replaceClassInComponent(source, oldClass, newClass, variantContext);
-      await fs14.writeFile(fullPath, source, "utf-8");
+      await fs15.writeFile(fullPath, source, "utf-8");
       res.json({ ok: true, filePath, oldClass, newClass });
     } catch (err) {
       console.error("Component write error:", err);
@@ -2848,10 +2956,10 @@ function replaceInCvaBase(source, oldClass, newClass) {
 
 // src/server/api/write-shadows.ts
 import { Router as Router5 } from "express";
-import fs15 from "fs/promises";
-import path13 from "path";
+import fs16 from "fs/promises";
+import path14 from "path";
 function safePath2(projectRoot, filePath) {
-  const resolved = path13.resolve(projectRoot, filePath);
+  const resolved = path14.resolve(projectRoot, filePath);
   if (!resolved.startsWith(projectRoot)) {
     throw new Error(`Path "${filePath}" escapes project root`);
   }
@@ -2864,17 +2972,17 @@ function createShadowsRouter(projectRoot) {
       const { filePath, variableName, value, selector } = req.body;
       const fullPath = safePath2(projectRoot, filePath);
       if (selector === "scss") {
-        let scss = await fs15.readFile(fullPath, "utf-8");
+        let scss = await fs16.readFile(fullPath, "utf-8");
         scss = writeShadowToScss(scss, variableName, value);
-        await fs15.writeFile(fullPath, scss, "utf-8");
+        await fs16.writeFile(fullPath, scss, "utf-8");
       } else if (selector === "@theme") {
-        let css = await fs15.readFile(fullPath, "utf-8");
+        let css = await fs16.readFile(fullPath, "utf-8");
         css = writeShadowToTheme(css, variableName, value);
-        await fs15.writeFile(fullPath, css, "utf-8");
+        await fs16.writeFile(fullPath, css, "utf-8");
       } else {
-        let css = await fs15.readFile(fullPath, "utf-8");
+        let css = await fs16.readFile(fullPath, "utf-8");
         css = writeShadowToSelector(css, selector, variableName, value);
-        await fs15.writeFile(fullPath, css, "utf-8");
+        await fs16.writeFile(fullPath, css, "utf-8");
       }
       const shadows = await rescanShadows(projectRoot);
       res.json({ ok: true, filePath, variableName, value, shadows });
@@ -2890,20 +2998,20 @@ function createShadowsRouter(projectRoot) {
       if (selector === "scss") {
         let scss;
         try {
-          scss = await fs15.readFile(fullPath, "utf-8");
+          scss = await fs16.readFile(fullPath, "utf-8");
         } catch {
           scss = "";
         }
         scss = addShadowToScss(scss, variableName, value);
-        await fs15.writeFile(fullPath, scss, "utf-8");
+        await fs16.writeFile(fullPath, scss, "utf-8");
       } else if (selector === "@theme") {
-        let css = await fs15.readFile(fullPath, "utf-8");
+        let css = await fs16.readFile(fullPath, "utf-8");
         css = addShadowToTheme(css, variableName, value);
-        await fs15.writeFile(fullPath, css, "utf-8");
+        await fs16.writeFile(fullPath, css, "utf-8");
       } else {
-        let css = await fs15.readFile(fullPath, "utf-8");
+        let css = await fs16.readFile(fullPath, "utf-8");
         css = addShadowToSelector(css, selector, variableName, value);
-        await fs15.writeFile(fullPath, css, "utf-8");
+        await fs16.writeFile(fullPath, css, "utf-8");
       }
       const shadows = await rescanShadows(projectRoot);
       res.json({ ok: true, filePath, variableName, value, shadows });
@@ -2929,7 +3037,7 @@ function createShadowsRouter(projectRoot) {
       const { filePath, shadows } = req.body;
       const fullPath = safePath2(projectRoot, filePath);
       const tokens = buildDesignTokensJson(shadows);
-      await fs15.mkdir(path13.dirname(fullPath), { recursive: true });
+      await fs16.mkdir(path14.dirname(fullPath), { recursive: true });
       await writeDesignTokensFile(fullPath, tokens);
       res.json({ ok: true, filePath, tokenCount: shadows.length });
     } catch (err) {
@@ -3047,10 +3155,10 @@ function addShadowToScss(scss, variableName, value) {
 
 // src/server/api/write-gradients.ts
 import { Router as Router6 } from "express";
-import fs16 from "fs/promises";
-import path14 from "path";
+import fs17 from "fs/promises";
+import path15 from "path";
 function safePath3(projectRoot, filePath) {
-  const resolved = path14.resolve(projectRoot, filePath);
+  const resolved = path15.resolve(projectRoot, filePath);
   if (!resolved.startsWith(projectRoot)) {
     throw new Error(`Path "${filePath}" escapes project root`);
   }
@@ -3062,13 +3170,13 @@ function createGradientsRouter(projectRoot) {
     try {
       const { filePath, variableName, value, selector } = req.body;
       const fullPath = safePath3(projectRoot, filePath);
-      let css = await fs16.readFile(fullPath, "utf-8");
+      let css = await fs17.readFile(fullPath, "utf-8");
       if (selector === "@theme") {
         css = writeToTheme(css, variableName, value);
       } else {
         css = writeToSelector(css, selector, variableName, value);
       }
-      await fs16.writeFile(fullPath, css, "utf-8");
+      await fs17.writeFile(fullPath, css, "utf-8");
       const [gradients, borders] = await Promise.all([
         rescanGradients(projectRoot),
         rescanBorders(projectRoot)
@@ -3083,13 +3191,13 @@ function createGradientsRouter(projectRoot) {
     try {
       const { filePath, variableName, value, selector } = req.body;
       const fullPath = safePath3(projectRoot, filePath);
-      let css = await fs16.readFile(fullPath, "utf-8");
+      let css = await fs17.readFile(fullPath, "utf-8");
       if (selector === "@theme") {
         css = addToTheme(css, variableName, value);
       } else {
         css = addToSelector(css, selector, variableName, value);
       }
-      await fs16.writeFile(fullPath, css, "utf-8");
+      await fs17.writeFile(fullPath, css, "utf-8");
       const [gradients, borders] = await Promise.all([
         rescanGradients(projectRoot),
         rescanBorders(projectRoot)
@@ -3104,9 +3212,9 @@ function createGradientsRouter(projectRoot) {
     try {
       const { filePath, variableName, selector } = req.body;
       const fullPath = safePath3(projectRoot, filePath);
-      let css = await fs16.readFile(fullPath, "utf-8");
+      let css = await fs17.readFile(fullPath, "utf-8");
       css = deleteFromBlock(css, selector, variableName);
-      await fs16.writeFile(fullPath, css, "utf-8");
+      await fs17.writeFile(fullPath, css, "utf-8");
       const [gradients, borders] = await Promise.all([
         rescanGradients(projectRoot),
         rescanBorders(projectRoot)
@@ -3244,7 +3352,7 @@ async function createServer(config) {
       res.status(400).json({ error: "Missing file" });
       return;
     }
-    const absPath = path15.isAbsolute(file) ? file : path15.join(config.projectRoot, file);
+    const absPath = path16.isAbsolute(file) ? file : path16.join(config.projectRoot, file);
     const lineCol = line ? `:${line}${col ? `:${col}` : ""}` : "";
     const platform = process.platform;
     const tryOpen = () => {
@@ -3276,15 +3384,15 @@ async function createServer(config) {
     tryOpen();
   });
   app.use("/scan", createScanRouter(config.projectRoot));
-  const __dirname = path15.dirname(fileURLToPath(import.meta.url));
-  const clientDistPath = path15.join(__dirname, "client");
-  const isDev = !fs17.existsSync(path15.join(clientDistPath, "index.html"));
+  const __dirname = path16.dirname(fileURLToPath(import.meta.url));
+  const clientDistPath = path16.join(__dirname, "client");
+  const isDev = !fs18.existsSync(path16.join(clientDistPath, "index.html"));
   let viteDevServer = null;
   if (isDev) {
     const { createServer: createViteServer } = await import("vite");
-    const viteRoot = path15.resolve(__dirname, "../client");
+    const viteRoot = path16.resolve(__dirname, "../client");
     viteDevServer = await createViteServer({
-      configFile: path15.resolve(__dirname, "../../vite.config.ts"),
+      configFile: path16.resolve(__dirname, "../../vite.config.ts"),
       server: {
         middlewareMode: true,
         hmr: { port: 24679 }
@@ -3295,8 +3403,8 @@ async function createServer(config) {
     app.use(async (req, res, next) => {
       try {
         const url = req.originalUrl || "/";
-        const htmlPath = path15.join(viteRoot, "index.html");
-        let html = fs17.readFileSync(htmlPath, "utf-8");
+        const htmlPath = path16.join(viteRoot, "index.html");
+        let html = fs18.readFileSync(htmlPath, "utf-8");
         html = await viteDevServer.transformIndexHtml(url, html);
         res.status(200).set({ "Content-Type": "text/html" }).end(html);
       } catch (err) {
@@ -3307,7 +3415,7 @@ async function createServer(config) {
   } else {
     app.use(express.static(clientDistPath));
     app.use((_req, res) => {
-      res.sendFile(path15.join(clientDistPath, "index.html"));
+      res.sendFile(path16.join(clientDistPath, "index.html"));
     });
   }
   return { app, viteDevServer };
@@ -3379,8 +3487,8 @@ async function main() {
   console.log(`  ${bold("@designtools/codesurface")}`);
   console.log(`  ${dim(projectRoot)}`);
   console.log("");
-  const pkgPath = path16.join(projectRoot, "package.json");
-  if (!fs18.existsSync(pkgPath)) {
+  const pkgPath = path17.join(projectRoot, "package.json");
+  if (!fs19.existsSync(pkgPath)) {
     console.log(`  ${red("\u2717")} No package.json found in ${projectRoot}`);
     console.log(`    ${dim("Run this command from the root of the app you want to edit.")}`);
     console.log(`    ${dim("All file reads and writes are scoped to this directory.")}`);