@designtools/shadows 0.1.5 → 0.1.7

package/dist/cli.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
 // ../core/src/cli/bootstrap.ts
-import fs2 from "fs";
-import path2 from "path";
+import fs3 from "fs";
+import path3 from "path";
+import process2 from "process";
 
 // ../core/src/scanner/detect-framework.ts
 import fs from "fs/promises";
@@ -91,14 +92,139 @@ async function findCssFiles(projectRoot) {
   return found;
 }
 
+// ../core/src/scanner/detect-styling.ts
+import fs2 from "fs/promises";
+import path2 from "path";
+async function detectStylingSystem(projectRoot, framework) {
+  const pkgPath = path2.join(projectRoot, "package.json");
+  let pkg = {};
+  try {
+    pkg = JSON.parse(await fs2.readFile(pkgPath, "utf-8"));
+  } catch {
+  }
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps.tailwindcss) {
+    const version = deps.tailwindcss;
+    const isV4 = version.startsWith("^4") || version.startsWith("~4") || version.startsWith("4");
+    if (isV4) {
+      const hasDarkMode3 = await checkDarkMode(projectRoot, framework.cssFiles);
+      return {
+        type: "tailwind-v4",
+        cssFiles: framework.cssFiles,
+        scssFiles: [],
+        hasDarkMode: hasDarkMode3
+      };
+    }
+    const configCandidates = [
+      "tailwind.config.ts",
+      "tailwind.config.js",
+      "tailwind.config.mjs",
+      "tailwind.config.cjs"
+    ];
+    let configPath;
+    for (const candidate of configCandidates) {
+      try {
+        await fs2.access(path2.join(projectRoot, candidate));
+        configPath = candidate;
+        break;
+      } catch {
+      }
+    }
+    const hasDarkMode2 = await checkDarkMode(projectRoot, framework.cssFiles);
+    return {
+      type: "tailwind-v3",
+      configPath,
+      cssFiles: framework.cssFiles,
+      scssFiles: [],
+      hasDarkMode: hasDarkMode2
+    };
+  }
+  if (deps.bootstrap) {
+    const hasDarkMode2 = await checkDarkMode(projectRoot, framework.cssFiles);
+    const scssFiles = await findBootstrapScssFiles(projectRoot);
+    return {
+      type: "bootstrap",
+      cssFiles: framework.cssFiles,
+      scssFiles,
+      hasDarkMode: hasDarkMode2
+    };
+  }
+  const hasDarkMode = await checkDarkMode(projectRoot, framework.cssFiles);
+  const hasCustomProps = await checkCustomProperties(projectRoot, framework.cssFiles);
+  if (hasCustomProps) {
+    return {
+      type: "css-variables",
+      cssFiles: framework.cssFiles,
+      scssFiles: [],
+      hasDarkMode
+    };
+  }
+  return {
+    type: framework.cssFiles.length > 0 ? "plain-css" : "unknown",
+    cssFiles: framework.cssFiles,
+    scssFiles: [],
+    hasDarkMode
+  };
+}
+async function checkDarkMode(projectRoot, cssFiles) {
+  for (const file of cssFiles) {
+    try {
+      const css = await fs2.readFile(path2.join(projectRoot, file), "utf-8");
+      if (css.includes(".dark") || css.includes('[data-theme="dark"]') || css.includes("prefers-color-scheme: dark")) {
+        return true;
+      }
+    } catch {
+    }
+  }
+  return false;
+}
+async function checkCustomProperties(projectRoot, cssFiles) {
+  for (const file of cssFiles) {
+    try {
+      const css = await fs2.readFile(path2.join(projectRoot, file), "utf-8");
+      if (/--[\w-]+\s*:/.test(css)) {
+        return true;
+      }
+    } catch {
+    }
+  }
+  return false;
+}
+async function findBootstrapScssFiles(projectRoot) {
+  const candidates = [
+    "src/scss/_variables.scss",
+    "src/scss/_custom.scss",
+    "src/scss/custom.scss",
+    "src/styles/_variables.scss",
+    "src/styles/variables.scss",
+    "assets/scss/_variables.scss",
+    "scss/_variables.scss",
+    "styles/_variables.scss"
+  ];
+  const found = [];
+  for (const candidate of candidates) {
+    try {
+      await fs2.access(path2.join(projectRoot, candidate));
+      found.push(candidate);
+    } catch {
+    }
+  }
+  return found;
+}
+
 // ../core/src/cli/bootstrap.ts
+var originalEmitWarning = process2.emitWarning;
+process2.emitWarning = ((warning, ...args) => {
+  if (typeof warning === "string" && warning.includes("util._extend")) return;
+  return originalEmitWarning.call(process2, warning, ...args);
+});
 var green = (s) => `\x1B[32m${s}\x1B[0m`;
 var yellow = (s) => `\x1B[33m${s}\x1B[0m`;
 var red = (s) => `\x1B[31m${s}\x1B[0m`;
 var dim = (s) => `\x1B[2m${s}\x1B[0m`;
 var bold = (s) => `\x1B[1m${s}\x1B[0m`;
 async function bootstrap(config) {
-  const args = process.argv.slice(2);
+  const args = process2.argv.slice(2);
   let targetPort = config.defaultTargetPort;
   let toolPort = config.defaultToolPort;
   for (let i = 0; i < args.length; i++) {
@@ -111,16 +237,18 @@ async function bootstrap(config) {
       i++;
     }
   }
-  const projectRoot = process.cwd();
+  const projectRoot = process2.cwd();
   console.log("");
   console.log(`  ${bold(config.name)}`);
+  console.log(`  ${dim(projectRoot)}`);
   console.log("");
-  const pkgPath = path2.join(projectRoot, "package.json");
-  if (!fs2.existsSync(pkgPath)) {
-    console.log(`  ${red("\u2717")} No package.json found`);
-    console.log(`    ${dim("Run this command from your project root.")}`);
+  const pkgPath = path3.join(projectRoot, "package.json");
+  if (!fs3.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.")}`);
     console.log("");
-    process.exit(1);
+    process2.exit(1);
   }
   const framework = await detectFramework(projectRoot);
   const frameworkLabel = framework.name === "nextjs" ? "Next.js" : framework.name === "remix" ? "Remix" : framework.name === "vite" ? "Vite" : "Unknown";
@@ -142,6 +270,21 @@ async function bootstrap(config) {
   } else {
     console.log(`  ${yellow("\u26A0")} CSS files      ${dim("no CSS files found")}`);
   }
+  const styling = await detectStylingSystem(projectRoot, framework);
+  const stylingLabels = {
+    "tailwind-v4": "Tailwind CSS v4",
+    "tailwind-v3": "Tailwind CSS v3",
+    "bootstrap": "Bootstrap",
+    "css-variables": "CSS Custom Properties",
+    "plain-css": "Plain CSS",
+    "unknown": "Unknown"
+  };
+  const stylingLabel = stylingLabels[styling.type];
+  if (styling.type !== "unknown") {
+    console.log(`  ${green("\u2713")} Styling        ${stylingLabel}`);
+  } else {
+    console.log(`  ${yellow("\u26A0")} Styling        ${dim("no styling system detected")}`);
+  }
   if (config.extraChecks) {
     const lines = await config.extraChecks(framework, projectRoot);
     for (const line of lines) {
@@ -152,7 +295,7 @@ async function bootstrap(config) {
       }
       if (line.status === "error") {
         console.log("");
-        process.exit(1);
+        process2.exit(1);
       }
     }
   }
@@ -166,24 +309,27 @@ async function bootstrap(config) {
     console.log(`    ${dim("Start your dev server first, then run this command.")}`);
     console.log(`    ${dim(`Use --port to specify a different port.`)}`);
     console.log("");
-    process.exit(1);
+    process2.exit(1);
   }
   console.log(`  ${green("\u2713")} Tool           http://localhost:${toolPort}`);
   console.log("");
-  return { framework, targetPort, toolPort, projectRoot };
+  console.log(`  ${dim("All file writes are scoped to:")} ${bold(projectRoot)}`);
+  console.log("");
+  return { framework, styling, targetPort, toolPort, projectRoot };
 }
 
 // src/server/index.ts
-import path9 from "path";
+import path10 from "path";
 import fs10 from "fs";
 import { fileURLToPath } from "url";
+import { createRequire } from "module";
 
 // ../core/src/server/create-server.ts
 import express from "express";
 import { createProxyMiddleware } from "http-proxy-middleware";
 import httpProxy from "http-proxy";
 import { WebSocketServer } from "ws";
-import fs3 from "fs";
+import fs4 from "fs";
 import zlib from "zlib";
 import open from "open";
 import { createServer as createViteServer } from "vite";
@@ -200,7 +346,7 @@ async function createToolServer(config) {
   app.get(injectScriptUrl, async (_req, res) => {
     try {
       if (!compiledInjectCache) {
-        const raw = fs3.readFileSync(config.injectScriptPath, "utf-8");
+        const raw = fs4.readFileSync(config.injectScriptPath, "utf-8");
         if (config.injectScriptPath.endsWith(".ts")) {
           const result = await transform(raw, { loader: "ts" });
           compiledInjectCache = result.code;
@@ -241,7 +387,11 @@ async function createToolServer(config) {
             });
             stream.on("end", () => {
               const body = Buffer.concat(chunks).toString("utf-8");
-              const injected = body.replace(
+              let injected = body.replace(
+                "<head>",
+                `<head><base href="/proxy/">`
+              );
+              injected = injected.replace(
                 "</body>",
                 `<script src="${injectScriptUrl}"></script></body>`
               );
@@ -308,14 +458,35 @@ async function createToolServer(config) {
   return { app, wss, projectRoot };
 }
 
+// ../core/src/server/safe-path.ts
+import path4 from "path";
+function safePath(projectRoot, filePath) {
+  if (!filePath || typeof filePath !== "string") {
+    throw new Error("File path is required");
+  }
+  if (path4.isAbsolute(filePath)) {
+    throw new Error(
+      `Absolute paths are not allowed: "${filePath}". Paths must be relative to the project root.`
+    );
+  }
+  const resolvedRoot = path4.resolve(projectRoot);
+  const resolvedPath = path4.resolve(resolvedRoot, filePath);
+  if (resolvedPath !== resolvedRoot && !resolvedPath.startsWith(resolvedRoot + path4.sep)) {
+    throw new Error(
+      `Path "${filePath}" resolves outside the project directory. Refusing to write.`
+    );
+  }
+  return resolvedPath;
+}
+
 // src/server/api/write-shadows.ts
 import { Router } from "express";
-import fs5 from "fs/promises";
-import path4 from "path";
+import fs6 from "fs/promises";
+import path6 from "path";
 
 // src/server/scanner/presets/w3c-design-tokens.ts
-import fs4 from "fs/promises";
-import path3 from "path";
+import fs5 from "fs/promises";
+import path5 from "path";
 async function findDesignTokenFiles(projectRoot) {
   const candidates = [
     "tokens",
@@ -328,11 +499,11 @@ async function findDesignTokenFiles(projectRoot) {
   const found = [];
   for (const dir of candidates) {
     try {
-      const fullDir = path3.join(projectRoot, dir);
-      const entries = await fs4.readdir(fullDir);
+      const fullDir = path5.join(projectRoot, dir);
+      const entries = await fs5.readdir(fullDir);
       for (const entry of entries) {
         if (entry.endsWith(".tokens.json") || entry.endsWith(".tokens")) {
-          found.push(path3.join(dir, entry));
+          found.push(path5.join(dir, entry));
         }
       }
     } catch {
@@ -345,7 +516,7 @@ async function scanDesignTokenShadows(projectRoot, tokenFiles) {
   const tokens = [];
   for (const file of files) {
     try {
-      const content = await fs4.readFile(path3.join(projectRoot, file), "utf-8");
+      const content = await fs5.readFile(path5.join(projectRoot, file), "utf-8");
       const parsed = JSON.parse(content);
       extractShadowTokens(parsed, [], file, tokens);
     } catch {
@@ -469,10 +640,10 @@ function buildDesignTokensJson(shadows) {
 }
 async function writeDesignTokensFile(filePath, tokens) {
   const content = JSON.stringify(tokens, null, 2) + "\n";
-  await fs4.writeFile(filePath, content, "utf-8");
+  await fs5.writeFile(filePath, content, "utf-8");
 }
 async function updateDesignTokenShadow(filePath, tokenPath, newCssValue) {
-  const content = await fs4.readFile(filePath, "utf-8");
+  const content = await fs5.readFile(filePath, "utf-8");
   const tokens = JSON.parse(content);
   const pathParts = tokenPath.split(".");
   let current = tokens;
@@ -485,7 +656,7 @@ async function updateDesignTokenShadow(filePath, tokenPath, newCssValue) {
     throw new Error(`Token "${tokenPath}" not found`);
   }
   current[lastKey].$value = cssToW3cShadow(newCssValue);
-  await fs4.writeFile(filePath, JSON.stringify(tokens, null, 2) + "\n", "utf-8");
+  await fs5.writeFile(filePath, JSON.stringify(tokens, null, 2) + "\n", "utf-8");
 }
 
 // src/server/api/write-shadows.ts
@@ -494,19 +665,19 @@ function createShadowsRouter(projectRoot) {
   router.post("/", async (req, res) => {
     try {
       const { filePath, variableName, value, selector } = req.body;
-      const fullPath = path4.join(projectRoot, filePath);
+      const fullPath = safePath(projectRoot, filePath);
       if (selector === "scss") {
-        let scss = await fs5.readFile(fullPath, "utf-8");
+        let scss = await fs6.readFile(fullPath, "utf-8");
         scss = writeShadowToScss(scss, variableName, value);
-        await fs5.writeFile(fullPath, scss, "utf-8");
+        await fs6.writeFile(fullPath, scss, "utf-8");
       } else if (selector === "@theme") {
-        let css = await fs5.readFile(fullPath, "utf-8");
+        let css = await fs6.readFile(fullPath, "utf-8");
         css = writeShadowToTheme(css, variableName, value);
-        await fs5.writeFile(fullPath, css, "utf-8");
+        await fs6.writeFile(fullPath, css, "utf-8");
       } else {
-        let css = await fs5.readFile(fullPath, "utf-8");
+        let css = await fs6.readFile(fullPath, "utf-8");
         css = writeShadowToSelector(css, selector, variableName, value);
-        await fs5.writeFile(fullPath, css, "utf-8");
+        await fs6.writeFile(fullPath, css, "utf-8");
       }
       res.json({ ok: true, filePath, variableName, value });
     } catch (err) {
@@ -517,24 +688,24 @@ function createShadowsRouter(projectRoot) {
   router.post("/create", async (req, res) => {
     try {
       const { filePath, variableName, value, selector } = req.body;
-      const fullPath = path4.join(projectRoot, filePath);
+      const fullPath = safePath(projectRoot, filePath);
       if (selector === "scss") {
         let scss;
         try {
-          scss = await fs5.readFile(fullPath, "utf-8");
+          scss = await fs6.readFile(fullPath, "utf-8");
         } catch {
           scss = "";
         }
         scss = addShadowToScss(scss, variableName, value);
-        await fs5.writeFile(fullPath, scss, "utf-8");
+        await fs6.writeFile(fullPath, scss, "utf-8");
       } else if (selector === "@theme") {
-        let css = await fs5.readFile(fullPath, "utf-8");
+        let css = await fs6.readFile(fullPath, "utf-8");
         css = addShadowToTheme(css, variableName, value);
-        await fs5.writeFile(fullPath, css, "utf-8");
+        await fs6.writeFile(fullPath, css, "utf-8");
       } else {
-        let css = await fs5.readFile(fullPath, "utf-8");
+        let css = await fs6.readFile(fullPath, "utf-8");
         css = addShadowToSelector(css, selector, variableName, value);
-        await fs5.writeFile(fullPath, css, "utf-8");
+        await fs6.writeFile(fullPath, css, "utf-8");
       }
       res.json({ ok: true, filePath, variableName, value });
     } catch (err) {
@@ -545,7 +716,7 @@ function createShadowsRouter(projectRoot) {
   router.post("/design-token", async (req, res) => {
     try {
       const { filePath, tokenPath, value } = req.body;
-      const fullPath = path4.join(projectRoot, filePath);
+      const fullPath = safePath(projectRoot, filePath);
       await updateDesignTokenShadow(fullPath, tokenPath, value);
       res.json({ ok: true, filePath, tokenPath, value });
     } catch (err) {
@@ -556,9 +727,9 @@ function createShadowsRouter(projectRoot) {
   router.post("/export-tokens", async (req, res) => {
     try {
       const { filePath, shadows } = req.body;
-      const fullPath = path4.join(projectRoot, filePath);
+      const fullPath = safePath(projectRoot, filePath);
       const tokens = buildDesignTokensJson(shadows);
-      await fs5.mkdir(path4.dirname(fullPath), { recursive: true });
+      await fs6.mkdir(path6.dirname(fullPath), { recursive: true });
       await writeDesignTokensFile(fullPath, tokens);
       res.json({ ok: true, filePath, tokenCount: shadows.length });
     } catch (err) {
@@ -586,14 +757,15 @@ function writeShadowToSelector(css, selector, variableName, newValue) {
   let block = css.slice(openBrace + 1, blockEnd - 1);
   const varEscaped = variableName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const tokenRegex = new RegExp(`(${varEscaped}\\s*:\\s*)([^;]+)(;)`, "g");
-  if (!tokenRegex.test(block)) {
+  const original = block;
+  block = block.replace(tokenRegex, `$1${newValue}$3`);
+  if (block === original) {
     throw new Error(`Variable "${variableName}" not found in "${selector}" block`);
   }
-  block = block.replace(tokenRegex, `$1${newValue}$3`);
   return css.slice(0, openBrace + 1) + block + css.slice(blockEnd - 1);
 }
 function writeShadowToTheme(css, variableName, newValue) {
-  const themeMatch = css.match(/@theme\s*\{/);
+  const themeMatch = css.match(/@theme\s*(?:inline\s*)?\{/);
   if (!themeMatch) {
     throw new Error("No @theme block found in CSS file");
   }
@@ -610,9 +782,9 @@ function writeShadowToTheme(css, variableName, newValue) {
   let block = css.slice(openBrace + 1, blockEnd - 1);
   const varEscaped = variableName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const tokenRegex = new RegExp(`(${varEscaped}\\s*:\\s*)([^;]+)(;)`, "g");
-  if (tokenRegex.test(block)) {
-    block = block.replace(tokenRegex, `$1${newValue}$3`);
-  } else {
+  const original = block;
+  block = block.replace(tokenRegex, `$1${newValue}$3`);
+  if (block === original) {
     block = block.trimEnd() + `
   ${variableName}: ${newValue};
 `;
@@ -645,7 +817,7 @@ ${selector} {
   return css.slice(0, openBrace + 1) + newBlock + css.slice(blockEnd - 1);
 }
 function addShadowToTheme(css, variableName, value) {
-  const themeMatch = css.match(/@theme\s*\{/);
+  const themeMatch = css.match(/@theme\s*(?:inline\s*)?\{/);
   if (!themeMatch) {
     return css + `
 @theme {
@@ -661,10 +833,11 @@ function writeShadowToScss(scss, variableName, newValue) {
     `(${varEscaped}\\s*:\\s*)(.+?)(\\s*(?:!default)?\\s*;)`,
     "g"
   );
-  if (!regex.test(scss)) {
+  const result = scss.replace(regex, `$1${newValue}$3`);
+  if (result === scss) {
     throw new Error(`Sass variable "${variableName}" not found in SCSS file`);
   }
-  return scss.replace(regex, `$1${newValue}$3`);
+  return result;
 }
 function addShadowToScss(scss, variableName, value) {
   const line = `${variableName}: ${value};
@@ -676,15 +849,15 @@ function addShadowToScss(scss, variableName, value) {
 import { Router as Router2 } from "express";
 
 // ../core/src/scanner/scan-tokens.ts
-import fs6 from "fs/promises";
-import path5 from "path";
+import fs7 from "fs/promises";
+import path7 from "path";
 async function scanTokens(projectRoot, framework) {
   if (framework.cssFiles.length === 0) {
     return { tokens: [], cssFilePath: "", groups: {} };
   }
   const cssFilePath = framework.cssFiles[0];
-  const fullPath = path5.join(projectRoot, cssFilePath);
-  const css = await fs6.readFile(fullPath, "utf-8");
+  const fullPath = path7.join(projectRoot, cssFilePath);
+  const css = await fs7.readFile(fullPath, "utf-8");
   const rootTokens = parseBlock(css, ":root");
   const darkTokens = parseBlock(css, ".dark");
   const tokenMap = /* @__PURE__ */ new Map();
@@ -791,129 +964,9 @@ function detectColorFormat(value) {
   return null;
 }
 
-// ../core/src/scanner/detect-styling.ts
-import fs7 from "fs/promises";
-import path6 from "path";
-async function detectStylingSystem(projectRoot, framework) {
-  const pkgPath = path6.join(projectRoot, "package.json");
-  let pkg = {};
-  try {
-    pkg = JSON.parse(await fs7.readFile(pkgPath, "utf-8"));
-  } catch {
-  }
-  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-  if (deps.tailwindcss) {
-    const version = deps.tailwindcss;
-    const isV4 = version.startsWith("^4") || version.startsWith("~4") || version.startsWith("4");
-    if (isV4) {
-      const hasDarkMode3 = await checkDarkMode(projectRoot, framework.cssFiles);
-      return {
-        type: "tailwind-v4",
-        cssFiles: framework.cssFiles,
-        scssFiles: [],
-        hasDarkMode: hasDarkMode3
-      };
-    }
-    const configCandidates = [
-      "tailwind.config.ts",
-      "tailwind.config.js",
-      "tailwind.config.mjs",
-      "tailwind.config.cjs"
-    ];
-    let configPath;
-    for (const candidate of configCandidates) {
-      try {
-        await fs7.access(path6.join(projectRoot, candidate));
-        configPath = candidate;
-        break;
-      } catch {
-      }
-    }
-    const hasDarkMode2 = await checkDarkMode(projectRoot, framework.cssFiles);
-    return {
-      type: "tailwind-v3",
-      configPath,
-      cssFiles: framework.cssFiles,
-      scssFiles: [],
-      hasDarkMode: hasDarkMode2
-    };
-  }
-  if (deps.bootstrap) {
-    const hasDarkMode2 = await checkDarkMode(projectRoot, framework.cssFiles);
-    const scssFiles = await findBootstrapScssFiles(projectRoot);
-    return {
-      type: "bootstrap",
-      cssFiles: framework.cssFiles,
-      scssFiles,
-      hasDarkMode: hasDarkMode2
-    };
-  }
-  const hasDarkMode = await checkDarkMode(projectRoot, framework.cssFiles);
-  const hasCustomProps = await checkCustomProperties(projectRoot, framework.cssFiles);
-  if (hasCustomProps) {
-    return {
-      type: "css-variables",
-      cssFiles: framework.cssFiles,
-      scssFiles: [],
-      hasDarkMode
-    };
-  }
-  return {
-    type: framework.cssFiles.length > 0 ? "plain-css" : "unknown",
-    cssFiles: framework.cssFiles,
-    scssFiles: [],
-    hasDarkMode
-  };
-}
-async function checkDarkMode(projectRoot, cssFiles) {
-  for (const file of cssFiles) {
-    try {
-      const css = await fs7.readFile(path6.join(projectRoot, file), "utf-8");
-      if (css.includes(".dark") || css.includes('[data-theme="dark"]') || css.includes("prefers-color-scheme: dark")) {
-        return true;
-      }
-    } catch {
-    }
-  }
-  return false;
-}
-async function checkCustomProperties(projectRoot, cssFiles) {
-  for (const file of cssFiles) {
-    try {
-      const css = await fs7.readFile(path6.join(projectRoot, file), "utf-8");
-      if (/--[\w-]+\s*:/.test(css)) {
-        return true;
-      }
-    } catch {
-    }
-  }
-  return false;
-}
-async function findBootstrapScssFiles(projectRoot) {
-  const candidates = [
-    "src/scss/_variables.scss",
-    "src/scss/_custom.scss",
-    "src/scss/custom.scss",
-    "src/styles/_variables.scss",
-    "src/styles/variables.scss",
-    "assets/scss/_variables.scss",
-    "scss/_variables.scss",
-    "styles/_variables.scss"
-  ];
-  const found = [];
-  for (const candidate of candidates) {
-    try {
-      await fs7.access(path6.join(projectRoot, candidate));
-      found.push(candidate);
-    } catch {
-    }
-  }
-  return found;
-}
-
 // src/server/scanner/scan-shadows.ts
 import fs9 from "fs/promises";
-import path8 from "path";
+import path9 from "path";
 
 // src/server/scanner/presets/tailwind.ts
 var TAILWIND_SHADOW_PRESETS = [
@@ -961,7 +1014,7 @@ var TAILWIND_SHADOW_PRESETS = [
 
 // src/server/scanner/presets/bootstrap.ts
 import fs8 from "fs/promises";
-import path7 from "path";
+import path8 from "path";
 var BOOTSTRAP_SHADOW_PRESETS = [
   {
     name: "box-shadow-sm",
@@ -984,7 +1037,7 @@ async function scanBootstrapScssOverrides(projectRoot, scssFiles) {
   const overrides = [];
   for (const file of scssFiles) {
     try {
-      const content = await fs8.readFile(path7.join(projectRoot, file), "utf-8");
+      const content = await fs8.readFile(path8.join(projectRoot, file), "utf-8");
       const lines = content.split("\n");
       for (const line of lines) {
         const match = line.match(
@@ -1012,7 +1065,7 @@ async function scanBootstrapCssOverrides(projectRoot, cssFiles) {
   const overrides = [];
   for (const file of cssFiles) {
     try {
-      const content = await fs8.readFile(path7.join(projectRoot, file), "utf-8");
+      const content = await fs8.readFile(path8.join(projectRoot, file), "utf-8");
       const propRegex = /(--bs-box-shadow(?:-sm|-lg|-inset)?)\s*:\s*([^;]+);/g;
       let match;
       while ((match = propRegex.exec(content)) !== null) {
@@ -1039,8 +1092,9 @@ function resolveBootstrapSassColors(value) {
 // src/server/scanner/scan-shadows.ts
 async function scanShadows(projectRoot, framework, styling) {
   const shadows = [];
-  const cssFilePath = framework.cssFiles[0] || "";
-  const customShadows = await scanCustomShadows(projectRoot, framework.cssFiles);
+  const allCssFiles = framework.cssFiles.length > 0 ? framework.cssFiles : styling.cssFiles;
+  const cssFilePath = allCssFiles[0] || "";
+  const customShadows = await scanCustomShadows(projectRoot, allCssFiles);
   const overriddenNames = new Set(customShadows.map((s) => s.name));
   if (styling.type === "tailwind-v4" || styling.type === "tailwind-v3") {
     addPresets(shadows, TAILWIND_SHADOW_PRESETS, overriddenNames);
@@ -1070,12 +1124,41 @@ async function scanShadows(projectRoot, framework, styling) {
       isOverridden: true
     });
   }
+  const sizeOrder = {
+    "2xs": 0,
+    "xs": 1,
+    "sm": 2,
+    "": 3,
+    "md": 4,
+    "lg": 5,
+    "xl": 6,
+    "2xl": 7
+  };
+  const naturalCollator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
   shadows.sort((a, b) => {
     const order = { custom: 0, "design-token": 1, "framework-preset": 2 };
     const aOrder = order[a.source] ?? 3;
     const bOrder = order[b.source] ?? 3;
     if (aOrder !== bOrder) return aOrder - bOrder;
-    return a.name.localeCompare(b.name);
+    const extractSize = (name) => {
+      const match = name.match(/^[\w-]+-(\d*x[sl]|sm|md|lg)$/);
+      if (match) return match[1];
+      if (/^[a-z]+(-[a-z]+)*$/.test(name) && !name.includes("-inner") && !name.includes("-none")) {
+        const parts = name.split("-");
+        const last = parts[parts.length - 1];
+        if (last in sizeOrder) return last;
+        if (parts.length === 1 || !Object.keys(sizeOrder).includes(last)) return "";
+      }
+      return null;
+    };
+    const aSize = extractSize(a.name);
+    const bSize = extractSize(b.name);
+    if (aSize !== null && bSize !== null) {
+      const aIdx = sizeOrder[aSize] ?? 99;
+      const bIdx = sizeOrder[bSize] ?? 99;
+      if (aIdx !== bIdx) return aIdx - bIdx;
+    }
+    return naturalCollator.compare(a.name, b.name);
   });
   return { shadows, cssFilePath, stylingType: styling.type, designTokenFiles };
 }
@@ -1087,7 +1170,8 @@ function addPresets(shadows, presets, overriddenNames) {
         value: preset.value,
         source: "framework-preset",
         isOverridden: false,
-        layers: parseShadowValue(preset.value)
+        layers: parseShadowValue(preset.value),
+        cssVariable: `--${preset.name}`
       });
     }
   }
@@ -1129,7 +1213,7 @@ async function scanCustomShadows(projectRoot, cssFiles) {
   const shadows = [];
   for (const file of cssFiles) {
     try {
-      const css = await fs9.readFile(path8.join(projectRoot, file), "utf-8");
+      const css = await fs9.readFile(path9.join(projectRoot, file), "utf-8");
       const rootTokens = parseBlock(css, ":root");
       for (const [name, value] of rootTokens) {
         if (name.includes("shadow") || isShadowValue(value)) {
@@ -1143,7 +1227,7 @@ async function scanCustomShadows(projectRoot, cssFiles) {
           });
         }
       }
-      const themeMatch = css.match(/@theme\s*\{([\s\S]*?)\}/);
+      const themeMatch = css.match(/@theme\s*(?:inline\s*)?\{([\s\S]*?)\}/);
       if (themeMatch) {
         const themeBlock = themeMatch[1];
         const propRegex = /(--shadow[\w-]*)\s*:\s*([^;]+);/g;
@@ -1267,13 +1351,28 @@ function createShadowsScanRouter(projectRoot) {
 }
 
 // src/server/index.ts
-var __dirname = path9.dirname(fileURLToPath(import.meta.url));
-var packageRoot = fs10.existsSync(path9.join(__dirname, "../package.json")) ? path9.resolve(__dirname, "..") : path9.resolve(__dirname, "../..");
+var __dirname = path10.dirname(fileURLToPath(import.meta.url));
+var require2 = createRequire(import.meta.url);
+var packageRoot = fs10.existsSync(path10.join(__dirname, "../package.json")) ? path10.resolve(__dirname, "..") : path10.resolve(__dirname, "../..");
+function resolveInjectScript() {
+  const compiledInject = path10.join(packageRoot, "dist/inject/selection.js");
+  if (fs10.existsSync(compiledInject)) return compiledInject;
+  try {
+    const corePkg = require2.resolve("@designtools/core/package.json");
+    const coreRoot = path10.dirname(corePkg);
+    const coreInject = path10.join(coreRoot, "src/inject/selection.ts");
+    if (fs10.existsSync(coreInject)) return coreInject;
+  } catch {
+  }
+  const monorepoInject = path10.join(packageRoot, "../core/src/inject/selection.ts");
+  if (fs10.existsSync(monorepoInject)) return monorepoInject;
+  throw new Error(
+    "Could not find inject script (selection.ts). Ensure @designtools/core is installed."
+  );
+}
 async function startShadowsServer(preflight) {
-  const clientRoot = path9.join(packageRoot, "src/client");
-  const injectScriptPath = path9.join(packageRoot, "../core/src/inject/selection.ts");
-  const compiledInject = path9.join(packageRoot, "dist/inject/selection.js");
-  const actualInjectPath = fs10.existsSync(compiledInject) ? compiledInject : injectScriptPath;
+  const clientRoot = path10.join(packageRoot, "src/client");
+  const actualInjectPath = resolveInjectScript();
   const { app, wss, projectRoot } = await createToolServer({
     targetPort: preflight.targetPort,
     toolPort: preflight.toolPort,