peekr-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2211 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+import { resolve as resolve3 } from "path";
+import { existsSync as existsSync4 } from "fs";
+import pc from "picocolors";
+
+// src/config.ts
+import { existsSync } from "fs";
+import { join } from "path";
+import { pathToFileURL } from "url";
+var CONFIG_FILES = ["peekr.config.ts", "peekr.config.js", "peek.config.ts", "peek.config.js"];
+async function loadConfig(rootDir) {
+  for (const filename of CONFIG_FILES) {
+    const configPath = join(rootDir, filename);
+    if (existsSync(configPath)) {
+      try {
+        const mod = await import(pathToFileURL(configPath).href);
+        const config = mod.default ?? mod;
+        return config;
+      } catch {
+      }
+    }
+  }
+  return {};
+}
+function mergeConfig(base, overrides) {
+  return {
+    port: overrides.port ?? base.port ?? 4321,
+    open: overrides.open ?? base.open ?? true,
+    include: overrides.include ?? base.include ?? [],
+    exclude: overrides.exclude ?? base.exclude ?? [],
+    framework: overrides.framework ?? base.framework ?? "react",
+    globalCss: overrides.globalCss ?? base.globalCss ?? []
+  };
+}
+
+// src/server.ts
+import { createServer, transformWithEsbuild } from "vite";
+import { readFileSync as readFileSync2, existsSync as existsSync3, statSync as statSync3 } from "fs";
+import { join as join4, resolve as resolve2, relative as relative2, extname as extname2, dirname as dirname2 } from "path";
+import { createRequire } from "module";
+
+// src/scanner.ts
+import { readFileSync, statSync } from "fs";
+import { join as join2, relative, dirname, basename, extname, resolve } from "path";
+import fg from "fast-glob";
+import { parse } from "@babel/parser";
+var BABEL_PLUGINS = [
+  "jsx",
+  "typescript",
+  "decorators-legacy",
+  "classProperties",
+  "optionalChaining",
+  "nullishCoalescingOperator",
+  "dynamicImport",
+  "exportDefaultFrom",
+  "importMeta"
+];
+function containsJSX(node) {
+  if (!node) return false;
+  const type = node.type;
+  if (type === "JSXElement" || type === "JSXFragment") return true;
+  if (type === "ReturnStatement") return containsJSX(node.argument);
+  if (type === "BlockStatement") {
+    return node.body.some(containsJSX);
+  }
+  if (type === "ArrowFunctionExpression" || type === "FunctionExpression") {
+    return containsJSX(node.body);
+  }
+  if (type === "FunctionDeclaration") {
+    return containsJSX(node.body);
+  }
+  if (type === "ConditionalExpression") {
+    return containsJSX(node.consequent) || containsJSX(node.alternate);
+  }
+  if (type === "LogicalExpression") {
+    return containsJSX(node.left) || containsJSX(node.right);
+  }
+  if (type === "IfStatement") {
+    return containsJSX(node.consequent) || containsJSX(node.alternate);
+  }
+  if (type === "ParenthesizedExpression" || type === "ExpressionStatement") {
+    return containsJSX(node.expression);
+  }
+  if (type === "CallExpression") {
+    const callee = node.callee;
+    const calleeStr = callee?.type === "MemberExpression" ? `${callee.object?.name}.${callee.property?.name}` : callee?.name ?? "";
+    if (calleeStr === "React.forwardRef" || calleeStr === "React.memo" || calleeStr === "forwardRef" || calleeStr === "memo") {
+      return true;
+    }
+    return node.arguments.some(containsJSX);
+  }
+  return false;
+}
+function isComponentNode(name, init) {
+  if (!name) return false;
+  if (!/^[A-Z]/.test(name)) return false;
+  return containsJSX(init);
+}
+function parseFileForComponents(code, filePath) {
+  let ast;
+  try {
+    ast = parse(code, {
+      sourceType: "module",
+      plugins: BABEL_PLUGINS,
+      errorRecovery: true
+    });
+  } catch {
+    return [];
+  }
+  const exports = [];
+  const body = ast.program.body;
+  const declaredComponents = /* @__PURE__ */ new Map();
+  for (const stmt of body) {
+    const type = stmt.type;
+    if (type === "VariableDeclaration") {
+      for (const decl of stmt.declarations) {
+        const id = decl.id;
+        if (id?.type === "Identifier") {
+          const name = id.name;
+          if (/^[A-Z]/.test(name)) {
+            declaredComponents.set(name, decl.init);
+          }
+        }
+      }
+    }
+    if (type === "FunctionDeclaration") {
+      const name = stmt.id?.name ?? "";
+      if (/^[A-Z]/.test(name)) {
+        declaredComponents.set(name, stmt);
+      }
+    }
+    if (type === "ExportNamedDeclaration") {
+      const decl = stmt.declaration;
+      if (decl?.type === "VariableDeclaration") {
+        for (const d of decl.declarations) {
+          const name = d.id?.name ?? "";
+          if (isComponentNode(name, d.init)) {
+            exports.push({ exportName: name, isDefault: false });
+            declaredComponents.set(name, d.init);
+          }
+        }
+      }
+      if (decl?.type === "FunctionDeclaration") {
+        const name = decl.id?.name ?? "";
+        if (isComponentNode(name, decl)) {
+          exports.push({ exportName: name, isDefault: false });
+          declaredComponents.set(name, decl);
+        }
+      }
+      if (!decl && stmt.specifiers?.length > 0 && !stmt.source) {
+        for (const spec of stmt.specifiers) {
+          const localName = spec.local?.name ?? "";
+          if (declaredComponents.has(localName)) {
+            const init = declaredComponents.get(localName);
+            if (isComponentNode(localName, init)) {
+              exports.push({ exportName: spec.exported?.name ?? localName, isDefault: false });
+            }
+          }
+        }
+      }
+    }
+    if (type === "ExportDefaultDeclaration") {
+      const decl = stmt.declaration;
+      if (decl?.type === "ArrowFunctionExpression" || decl?.type === "FunctionExpression") {
+        if (containsJSX(decl)) {
+          exports.push({ exportName: "default", isDefault: true });
+        }
+      }
+      if (decl?.type === "FunctionDeclaration") {
+        if (containsJSX(decl)) {
+          exports.push({ exportName: "default", isDefault: true });
+        }
+      }
+      if (decl?.type === "Identifier") {
+        const name = decl.name;
+        if (declaredComponents.has(name)) {
+          const init = declaredComponents.get(name);
+          if (/^[A-Z]/.test(name) && containsJSX(init)) {
+            exports.push({ exportName: "default", isDefault: true });
+          }
+        }
+      }
+      if (decl?.type === "CallExpression") {
+        if (containsJSX(decl)) {
+          exports.push({ exportName: "default", isDefault: true });
+        }
+      }
+    }
+  }
+  return deduplicateExports(exports);
+}
+function parseBarrelForReExports(code) {
+  const result = [];
+  let ast;
+  try {
+    ast = parse(code, {
+      sourceType: "module",
+      plugins: BABEL_PLUGINS,
+      errorRecovery: true
+    });
+  } catch {
+    return [];
+  }
+  for (const stmt of ast.program.body) {
+    if (stmt.type === "ExportNamedDeclaration" && !stmt.declaration && stmt.source) {
+      const source = stmt.source.value;
+      if (!source.startsWith(".")) continue;
+      for (const spec of stmt.specifiers ?? []) {
+        const localName = spec.local?.name ?? "";
+        const exportedName = spec.exported?.name ?? localName;
+        if (localName) {
+          result.push({ localName, exportedName, source, isStar: false });
+        }
+      }
+    }
+    if (stmt.type === "ExportAllDeclaration" && stmt.source) {
+      const source = stmt.source.value;
+      if (source.startsWith(".")) {
+        result.push({ localName: "*", exportedName: "*", source, isStar: true });
+      }
+    }
+  }
+  return result;
+}
+function deduplicateExports(exports) {
+  const seen = /* @__PURE__ */ new Set();
+  return exports.filter((e) => {
+    if (seen.has(e.exportName)) return false;
+    seen.add(e.exportName);
+    return true;
+  });
+}
+function makeId(filePath, exportName) {
+  return `${filePath}::${exportName}`;
+}
+function getDisplayName(filePath, exportName) {
+  if (exportName !== "default") return exportName;
+  const base = basename(filePath, extname(filePath));
+  return base === "index" ? basename(dirname(filePath)) : base;
+}
+async function runWithConcurrency(tasks, limit) {
+  const results = [];
+  let idx = 0;
+  const workers = Array.from({ length: Math.min(limit, tasks.length) }, async () => {
+    while (idx < tasks.length) {
+      const i = idx++;
+      results[i] = await tasks[i]();
+    }
+  });
+  await Promise.all(workers);
+  return results;
+}
+var DEFAULT_EXCLUDE = [
+  "**/node_modules/**",
+  "**/.next/**",
+  "**/.nuxt/**",
+  "**/dist/**",
+  "**/build/**",
+  "**/.cache/**",
+  "**/*.test.*",
+  "**/*.spec.*",
+  "**/*.stories.*",
+  "**/*.story.*",
+  // Config & tooling files (never React components)
+  "**/vite.config.*",
+  "**/vitest.config.*",
+  "**/webpack.config.*",
+  "**/babel.config.*",
+  "**/jest.config.*",
+  "**/rollup.config.*",
+  "**/tailwind.config.*",
+  "**/postcss.config.*",
+  "**/.eslintrc.*",
+  "**/eslint.config.*",
+  "**/prettier.config.*",
+  "**/playwright.config.*",
+  "**/cypress.config.*",
+  "**/craco.config.*",
+  // Next.js Pages Router — special files only
+  "**/pages/api/**",
+  "**/pages/_app.*",
+  "**/pages/_document.*",
+  "**/pages/_error.*",
+  // Next.js App Router — route-special files only
+  "**/app/layout.*",
+  "**/app/page.*",
+  "**/app/**/page.*",
+  "**/app/**/layout.*",
+  "**/app/**/loading.*",
+  "**/app/**/error.*",
+  "**/app/**/not-found.*",
+  "**/app/route.*",
+  "**/app/**/route.*",
+  "**/__tests__/**",
+  "**/.storybook/**"
+];
+async function scanComponents(rootDir, cache, extraExclude = []) {
+  const excludePatterns = [...DEFAULT_EXCLUDE, ...extraExclude];
+  const files = await fg(["**/*.{tsx,jsx,js}"], {
+    cwd: rootDir,
+    ignore: excludePatterns,
+    absolute: false,
+    dot: false
+  });
+  const tasks = files.map((relPath) => async () => {
+    const absPath = join2(rootDir, relPath);
+    let mtime = 0;
+    try {
+      mtime = statSync(absPath).mtimeMs;
+    } catch {
+      return;
+    }
+    const cached = cache.files.get(absPath);
+    if (cached && cached.mtime === mtime) return;
+    let code = "";
+    try {
+      code = readFileSync(absPath, "utf-8");
+    } catch {
+      cache.files.delete(absPath);
+      return;
+    }
+    const components = parseFileForComponents(code, relPath);
+    cache.files.set(absPath, { mtime, components });
+  });
+  await runWithConcurrency(tasks, 50);
+  for (const [absPath] of cache.files) {
+    if (!files.includes(relative(rootDir, absPath))) {
+      cache.files.delete(absPath);
+    }
+  }
+  const barrelFiles = await fg(["**/index.{ts,js}"], {
+    cwd: rootDir,
+    ignore: excludePatterns,
+    absolute: false,
+    dot: false
+  });
+  const barrelTasks = barrelFiles.map((relPath) => async () => {
+    const absPath = join2(rootDir, relPath);
+    let mtime = 0;
+    try {
+      mtime = statSync(absPath).mtimeMs;
+    } catch {
+      return;
+    }
+    const cached = cache.barrels.get(absPath);
+    if (cached && cached.mtime === mtime) return;
+    let code = "";
+    try {
+      code = readFileSync(absPath, "utf-8");
+    } catch {
+      cache.barrels.delete(absPath);
+      return;
+    }
+    const reExports = parseBarrelForReExports(code);
+    cache.barrels.set(absPath, { mtime, reExports });
+  });
+  await runWithConcurrency(barrelTasks, 50);
+  for (const [absPath] of cache.barrels) {
+    if (!barrelFiles.includes(relative(rootDir, absPath))) {
+      cache.barrels.delete(absPath);
+    }
+  }
+  const seenIds = /* @__PURE__ */ new Set();
+  const all = [];
+  for (const [absPath, { components }] of cache.files) {
+    const filePath = relative(rootDir, absPath);
+    for (const exp of components) {
+      const id = makeId(filePath, exp.exportName);
+      if (seenIds.has(id)) continue;
+      seenIds.add(id);
+      all.push({
+        id,
+        name: getDisplayName(filePath, exp.exportName),
+        filePath,
+        exportName: exp.exportName,
+        isDefault: exp.isDefault,
+        folder: dirname(filePath)
+      });
+    }
+  }
+  for (const [barrelAbsPath, { reExports }] of cache.barrels) {
+    const barrelDir = dirname(barrelAbsPath);
+    for (const reExport of reExports) {
+      const sourceBase = resolve(barrelDir, reExport.source);
+      const sourceCandidates = [
+        sourceBase + ".tsx",
+        sourceBase + ".jsx",
+        sourceBase + ".js",
+        join2(sourceBase, "index.tsx"),
+        join2(sourceBase, "index.jsx"),
+        join2(sourceBase, "index.js")
+      ];
+      for (const sourcePath of sourceCandidates) {
+        const sourceEntry = cache.files.get(sourcePath);
+        if (!sourceEntry) continue;
+        const relSourcePath = relative(rootDir, sourcePath);
+        if (reExport.isStar) {
+          for (const comp of sourceEntry.components) {
+            const id = makeId(relSourcePath, comp.exportName);
+            if (seenIds.has(id)) continue;
+            seenIds.add(id);
+            all.push({
+              id,
+              name: getDisplayName(relSourcePath, comp.exportName),
+              filePath: relSourcePath,
+              exportName: comp.exportName,
+              isDefault: comp.isDefault,
+              folder: dirname(relSourcePath)
+            });
+          }
+        } else {
+          const found = sourceEntry.components.find(
+            (c) => c.exportName === reExport.localName || reExport.localName === "default" && c.isDefault
+          );
+          if (found) {
+            const id = makeId(relSourcePath, found.exportName);
+            if (!seenIds.has(id)) {
+              seenIds.add(id);
+              const displayName = reExport.exportedName !== reExport.localName && reExport.exportedName !== "*" ? reExport.exportedName : getDisplayName(relSourcePath, found.exportName);
+              all.push({
+                id,
+                name: displayName,
+                filePath: relSourcePath,
+                exportName: found.exportName,
+                isDefault: found.isDefault,
+                folder: dirname(relSourcePath)
+              });
+            }
+          }
+        }
+        break;
+      }
+    }
+  }
+  all.sort((a, b) => {
+    if (a.folder !== b.folder) return a.folder.localeCompare(b.folder);
+    return a.name.localeCompare(b.name);
+  });
+  cache.all = all;
+  return all;
+}
+function invalidateScanFile(rootDir, relPath, cache) {
+  const absPath = join2(rootDir, relPath);
+  cache.files.delete(absPath);
+  cache.barrels.delete(absPath);
+}
+
+// src/typeParser.ts
+import { statSync as statSync2 } from "fs";
+import { join as join3 } from "path";
+import {
+  Project,
+  SyntaxKind
+} from "ts-morph";
+var _project = null;
+function getProject(rootDir) {
+  if (_project) return _project;
+  const tsconfigPath = join3(rootDir, "tsconfig.json");
+  try {
+    _project = new Project({
+      tsConfigFilePath: tsconfigPath,
+      skipAddingFilesFromTsConfig: true
+    });
+  } catch {
+    _project = new Project({
+      compilerOptions: {
+        jsx: 4,
+        // JsxEmit.ReactJSX
+        strict: true,
+        moduleResolution: 99,
+        // ModuleResolutionKind.Bundler
+        allowJs: true
+      }
+    });
+  }
+  return _project;
+}
+function mapType(type, seenTypes = /* @__PURE__ */ new Set()) {
+  const typeText = type.getText();
+  if (seenTypes.has(typeText)) return { type: "unknown" };
+  seenTypes.add(typeText);
+  if (type.isBoolean() || type.isBooleanLiteral()) {
+    return { type: "boolean" };
+  }
+  if (type.isNumber() || type.isNumberLiteral()) {
+    return { type: "number" };
+  }
+  if (type.isString()) {
+    return { type: "string" };
+  }
+  if (type.isStringLiteral()) {
+    return { type: "select", options: [type.getLiteralValue()] };
+  }
+  if (type.getCallSignatures().length > 0) {
+    return { type: "function" };
+  }
+  if (typeText.includes("ReactNode") || typeText.includes("ReactElement") || typeText.includes("JSX.Element") || typeText.includes("React.ReactChild") || typeText === "ReactNode" || typeText === "ReactElement") {
+    return { type: "node" };
+  }
+  if (type.isIntersection()) {
+    const intersectTypes = type.getIntersectionTypes();
+    for (const t of intersectTypes) {
+      const mapped = mapType(t, new Set(seenTypes));
+      if (mapped.type !== "unknown") return mapped;
+    }
+    return { type: "unknown" };
+  }
+  if (typeText === "string" && typeText.toLowerCase().includes("color")) {
+    return { type: "color" };
+  }
+  if (type.isUnion()) {
+    const unionTypes = type.getUnionTypes();
+    const meaningful = unionTypes.filter(
+      (t) => !t.isUndefined() && !t.isNull()
+    );
+    if (meaningful.length === 0) return { type: "unknown" };
+    if (meaningful.every((t) => t.isBoolean() || t.isBooleanLiteral())) {
+      return { type: "boolean" };
+    }
+    if (meaningful.every((t) => t.isStringLiteral())) {
+      return {
+        type: "select",
+        options: meaningful.map((t) => t.getLiteralValue())
+      };
+    }
+    if (meaningful.some((t) => t.isString() || t.isStringLiteral())) {
+      return { type: "string" };
+    }
+    return mapType(meaningful[0], seenTypes);
+  }
+  if (type.isEnum() || type.isEnumLiteral()) {
+    const symbol = type.getSymbol();
+    if (symbol) {
+      const decls = symbol.getDeclarations();
+      const options = [];
+      for (const decl of decls) {
+        if (decl.getKind() === SyntaxKind.EnumMember) {
+          const val = decl.getValue?.();
+          if (typeof val === "string") options.push(val);
+          else options.push(decl.getName?.() ?? "");
+        }
+      }
+      if (options.length > 0) return { type: "select", options };
+    }
+    return { type: "select", options: [] };
+  }
+  return { type: "unknown" };
+}
+function extractPropsFromCallExpr(callExpr, checker, depth = 0) {
+  if (depth > 6) return null;
+  const calleeExpr = callExpr.getExpression?.();
+  const calleeName = calleeExpr?.getText?.() ?? "";
+  const isForwardRef = calleeName === "forwardRef" || calleeName === "React.forwardRef";
+  const isMemo = calleeName === "memo" || calleeName === "React.memo";
+  if (isForwardRef) {
+    const typeArgs = callExpr.getTypeArguments?.();
+    if (typeArgs?.length >= 2) {
+      return checker.getTypeAtLocation(typeArgs[1]);
+    }
+    const callArgs2 = callExpr.getArguments?.();
+    if (callArgs2?.length > 0) {
+      const cb = callArgs2[0];
+      const cbParams = cb.getParameters?.();
+      if (cbParams?.length > 0) {
+        return checker.getTypeAtLocation(cbParams[0]);
+      }
+      if (cb.getKind?.() === SyntaxKind.CallExpression) {
+        return extractPropsFromCallExpr(cb, checker, depth + 1);
+      }
+    }
+    return null;
+  }
+  if (isMemo) {
+    const callArgs2 = callExpr.getArguments?.();
+    if (callArgs2?.length > 0) {
+      const inner = callArgs2[0];
+      const innerParams = inner.getParameters?.();
+      if (innerParams?.length > 0) {
+        return checker.getTypeAtLocation(innerParams[0]);
+      }
+      if (inner.getKind?.() === SyntaxKind.CallExpression) {
+        return extractPropsFromCallExpr(inner, checker, depth + 1);
+      }
+    }
+    return null;
+  }
+  const callArgs = callExpr.getArguments?.();
+  if (callArgs?.length > 0) {
+    for (let i = callArgs.length - 1; i >= 0; i--) {
+      const arg = callArgs[i];
+      const argParams = arg.getParameters?.();
+      if (argParams?.length > 0) {
+        return checker.getTypeAtLocation(argParams[0]);
+      }
+      if (arg.getKind?.() === SyntaxKind.CallExpression) {
+        const inner = extractPropsFromCallExpr(arg, checker, depth + 1);
+        if (inner) return inner;
+      }
+    }
+  }
+  if (calleeExpr?.getKind?.() === SyntaxKind.CallExpression) {
+    const innerResult = extractPropsFromCallExpr(calleeExpr, checker, depth + 1);
+    if (innerResult) return innerResult;
+  }
+  return null;
+}
+async function parseComponentProps(rootDir, relFilePath, exportName, cache) {
+  const absPath = join3(rootDir, relFilePath);
+  const cacheKey = `${relFilePath}::${exportName}`;
+  let mtime = 0;
+  try {
+    mtime = statSync2(absPath).mtimeMs;
+  } catch {
+    return [];
+  }
+  const cached = cache.entries.get(cacheKey);
+  if (cached && cached.mtime === mtime) return cached.props;
+  try {
+    const project = getProject(rootDir);
+    let sourceFile;
+    sourceFile = project.getSourceFile(absPath);
+    if (!sourceFile) {
+      sourceFile = project.addSourceFileAtPath(absPath);
+    } else {
+      sourceFile.refreshFromFileSystemSync();
+    }
+    const props = extractPropsFromFile(sourceFile, exportName, rootDir);
+    cache.entries.set(cacheKey, { mtime, props });
+    return props;
+  } catch {
+    cache.entries.set(cacheKey, { mtime, props: [] });
+    return [];
+  }
+}
+function extractPropsFromFile(sourceFile, exportName, rootDir) {
+  const checker = sourceFile.getProject().getTypeChecker();
+  const exportedDecls = sourceFile.getExportedDeclarations();
+  let componentDecl = null;
+  if (exportName === "default") {
+    const defaultExports = exportedDecls.get("default");
+    componentDecl = defaultExports?.[0] ?? null;
+  } else {
+    const namedExports = exportedDecls.get(exportName);
+    componentDecl = namedExports?.[0] ?? null;
+  }
+  if (!componentDecl) return [];
+  let propsType = null;
+  const kind = componentDecl.getKind();
+  if (kind === SyntaxKind.ArrowFunction || kind === SyntaxKind.FunctionExpression || kind === SyntaxKind.FunctionDeclaration) {
+    const params = componentDecl.getParameters?.();
+    if (params?.length > 0) {
+      propsType = checker.getTypeAtLocation(params[0]);
+    }
+  }
+  if (kind === SyntaxKind.VariableDeclaration) {
+    const init = componentDecl.getInitializer?.();
+    if (init) {
+      const initKind = init.getKind?.();
+      const params = init.getParameters?.();
+      if (params?.length > 0) {
+        propsType = checker.getTypeAtLocation(params[0]);
+      }
+      if (!propsType && initKind === SyntaxKind.CallExpression) {
+        propsType = extractPropsFromCallExpr(init, checker);
+      }
+    }
+    const typeNode = componentDecl.getTypeNode?.();
+    if (typeNode && !propsType) {
+      const typeArgs = typeNode.getTypeArguments?.();
+      if (typeArgs?.length > 0) {
+        propsType = checker.getTypeAtLocation(typeArgs[0]);
+      }
+    }
+  }
+  if (!propsType) return [];
+  const props = [];
+  const project = sourceFile.getProject();
+  const properties = propsType.getProperties();
+  for (const prop of properties) {
+    const propName = prop.getName();
+    if (propName.startsWith("__") || propName === "key" || propName === "ref") continue;
+    const declarations = prop.getDeclarations();
+    if (!declarations.length) continue;
+    const decl = declarations[0];
+    const propType = project.getTypeChecker().getTypeAtLocation(decl);
+    const { type: mappedType, options } = mapType(propType);
+    const finalType = mappedType === "string" && /colou?r/i.test(propName) ? "color" : mappedType;
+    const isOptional = decl.hasQuestionToken?.() ?? false;
+    const hasUndefined = propType.isUnion() ? propType.getUnionTypes().some((t) => t.isUndefined()) : propType.isUndefined();
+    let defaultValue = void 0;
+    const init = decl.getInitializer?.();
+    if (init) {
+      try {
+        const text = init.getText();
+        if (text === "true") defaultValue = true;
+        else if (text === "false") defaultValue = false;
+        else if (!isNaN(Number(text))) defaultValue = Number(text);
+        else if (text.startsWith('"') && text.endsWith('"') || text.startsWith("'") && text.endsWith("'")) {
+          defaultValue = text.slice(1, -1);
+        }
+      } catch {
+      }
+    }
+    let description;
+    try {
+      const jsDocs = decl.getJsDocs?.();
+      if (jsDocs?.length) {
+        description = jsDocs[0].getDescription?.()?.trim() || void 0;
+      }
+    } catch {
+    }
+    props.push({
+      name: propName,
+      type: finalType,
+      options,
+      required: !isOptional && !hasUndefined,
+      defaultValue,
+      description
+    });
+  }
+  return props;
+}
+function invalidateTypeCache(relFilePath, cache) {
+  for (const key of cache.entries.keys()) {
+    if (key.startsWith(relFilePath + "::")) {
+      cache.entries.delete(key);
+    }
+  }
+  if (_project) {
+    const sf = _project.getSourceFiles().find(
+      (f) => f.getFilePath().includes(relFilePath)
+    );
+    if (sf) {
+      try {
+        _project.removeSourceFile(sf);
+      } catch {
+      }
+    }
+  }
+}
+
+// src/server.ts
+var _require = createRequire(import.meta.url);
+var NODE_BUILTINS = /* @__PURE__ */ new Set([
+  "assert",
+  "async_hooks",
+  "buffer",
+  "child_process",
+  "cluster",
+  "console",
+  "constants",
+  "crypto",
+  "dgram",
+  "diagnostics_channel",
+  "dns",
+  "domain",
+  "events",
+  "fs",
+  "http",
+  "http2",
+  "https",
+  "inspector",
+  "module",
+  "net",
+  "os",
+  "path",
+  "perf_hooks",
+  "process",
+  "punycode",
+  "querystring",
+  "readline",
+  "repl",
+  "stream",
+  "string_decoder",
+  "sys",
+  "timers",
+  "tls",
+  "trace_events",
+  "tty",
+  "url",
+  "util",
+  "v8",
+  "vm",
+  "wasi",
+  "worker_threads",
+  "zlib"
+]);
+var SERVER_PACKAGES = /* @__PURE__ */ new Set([
+  // Email
+  "nodemailer",
+  "@sendgrid/mail",
+  "mailgun.js",
+  "postmark",
+  "resend",
+  "@emailjs/nodejs",
+  // Auth / crypto
+  "bcrypt",
+  "bcryptjs",
+  "argon2",
+  "passport",
+  "passport-local",
+  "passport-jwt",
+  "passport-github",
+  "passport-google-oauth20",
+  "passport-oauth2",
+  "passport-saml",
+  "jsonwebtoken",
+  "jose",
+  "express-session",
+  "cookie-session",
+  "connect-flash",
+  // Database / ORM
+  "mongoose",
+  "mongodb",
+  "prisma",
+  "@prisma/client",
+  "sequelize",
+  "typeorm",
+  "@mikro-orm/core",
+  "knex",
+  "objection",
+  "drizzle-orm",
+  "@planetscale/database",
+  "pg",
+  "mysql",
+  "mysql2",
+  "sqlite3",
+  "better-sqlite3",
+  "mariadb",
+  "tedious",
+  "mssql",
+  // Redis / cache
+  "redis",
+  "ioredis",
+  "memcached",
+  "node-cache",
+  "cache-manager",
+  // Server frameworks
+  "express",
+  "fastify",
+  "koa",
+  "@hapi/hapi",
+  "restify",
+  "polka",
+  "micro",
+  "body-parser",
+  "cors",
+  "helmet",
+  "morgan",
+  "compression",
+  "cookie-parser",
+  "multer",
+  "express-validator",
+  "express-rate-limit",
+  "@nestjs/core",
+  "@nestjs/common",
+  "@nestjs/platform-express",
+  // Queue / jobs
+  "bull",
+  "bullmq",
+  "agenda",
+  "bee-queue",
+  "node-cron",
+  "cron",
+  // AWS
+  "aws-sdk",
+  "@aws-sdk/client-s3",
+  "@aws-sdk/client-ses",
+  "@aws-sdk/client-sns",
+  "@aws-sdk/client-sqs",
+  "@aws-sdk/client-dynamodb",
+  "@aws-sdk/lib-dynamodb",
+  // Google / Firebase
+  "googleapis",
+  "@google-cloud/storage",
+  "@google-cloud/firestore",
+  "firebase-admin",
+  // Logging (server)
+  "winston",
+  "pino",
+  "bunyan",
+  "log4js",
+  // File / image processing
+  "sharp",
+  "jimp",
+  "canvas",
+  "puppeteer",
+  "playwright",
+  "jsdom",
+  "cheerio",
+  "archiver",
+  "adm-zip",
+  "unzipper",
+  "pdfkit",
+  "exceljs",
+  "xlsx",
+  // SSH / FTP
+  "node-ssh",
+  "ssh2",
+  // WebSocket server (Node.js only — browser uses native WebSocket)
+  "ws",
+  "socket.io",
+  // Misc server
+  "node-forge",
+  "pem",
+  "selfsigned",
+  "newrelic",
+  "@sentry/node",
+  "swagger-ui-express",
+  "swagger-jsdoc"
+]);
+var STUB_IMPORT_PREFIX = "__peekrStub__";
+function isNodeBuiltin(id) {
+  return id.startsWith("node:") || NODE_BUILTINS.has(id);
+}
+function isServerPkg(id) {
+  const pkg2 = id.startsWith("@") ? id.split("/").slice(0, 2).join("/") : id.split("/")[0];
+  return SERVER_PACKAGES.has(pkg2);
+}
+function detectReactVersion(rootDir) {
+  try {
+    const pkg2 = JSON.parse(readFileSync2(join4(rootDir, "node_modules/react/package.json"), "utf-8"));
+    return parseInt(pkg2.version.split(".")[0], 10) || 18;
+  } catch {
+    return 18;
+  }
+}
+function generateStubModule(moduleId) {
+  return `// [peekr] stub for "${moduleId}" \u2014 server-only, unavailable in browser
+const __s = (n) => {
+  const f = (...a) => Promise.resolve()
+  f.toString = () => '[peekr stub: ' + n + ']'
+  return new Proxy(f, {
+    get(_, k) {
+      if (k === 'then' || k === 'catch' || k === 'finally') return undefined
+      if (typeof k === 'symbol') return undefined
+      return __s(n + '.' + String(k))
+    },
+    apply: () => Promise.resolve(),
+    construct: () => ({ destroy: () => {}, end: () => {}, close: () => {}, emit: () => {} }),
+  })
+}
+export default __s(${JSON.stringify(moduleId)})
+`;
+}
+function rewriteServerImports(code) {
+  const IMPORT_RE = /^([ \t]*)import\s+(type\s+)?((?:\*\s+as\s+\w+|\{[^}]*\}|\w+)(?:\s*,\s*\{[^}]*\})?)\s+from\s+(['"])([^'"]+)\4[ \t]*;?/gm;
+  const SIDE_RE = /^[ \t]*import\s+(['"])([^'"]+)\1[ \t]*;?[ \t]*$/gm;
+  const REEXPORT_RE = /^([ \t]*)export\s+(\*|\{[^}]*\})\s+from\s+(['"])([^'"]+)\3[ \t]*;?/gm;
+  const patches = [];
+  const stubs = /* @__PURE__ */ new Map();
+  let m;
+  const getStub = (pkg2) => {
+    if (!stubs.has(pkg2)) stubs.set(pkg2, `__stub${stubs.size}`);
+    return stubs.get(pkg2);
+  };
+  SIDE_RE.lastIndex = 0;
+  while ((m = SIDE_RE.exec(code)) !== null) {
+    if (isNodeBuiltin(m[2]) || isServerPkg(m[2])) {
+      patches.push({ start: m.index, end: m.index + m[0].length, text: `// [peekr] stubbed: import '${m[2]}'` });
+    }
+  }
+  IMPORT_RE.lastIndex = 0;
+  while ((m = IMPORT_RE.exec(code)) !== null) {
+    const [full, indent, typeOnly, clause, , pkg2] = m;
+    if (!isNodeBuiltin(pkg2) && !isServerPkg(pkg2)) continue;
+    if (typeOnly) {
+      patches.push({ start: m.index, end: m.index + full.length, text: `// [peekr] removed type import: '${pkg2}'` });
+      continue;
+    }
+    const v = getStub(pkg2);
+    let text;
+    if (clause.startsWith("*")) {
+      const ns = clause.match(/\*\s+as\s+(\w+)/)?.[1] ?? "_ns";
+      text = `${indent}const ${ns} = ${v}`;
+    } else if (clause.startsWith("{")) {
+      text = `${indent}const ${clause} = ${v}`;
+    } else {
+      const parts = clause.split(/,\s*/);
+      const defName = parts[0].trim();
+      text = `${indent}const ${defName} = ${v}`;
+      if (parts[1]?.trim().startsWith("{")) text += `
+${indent}const ${parts[1].trim()} = ${v}`;
+    }
+    patches.push({ start: m.index, end: m.index + full.length, text: text + " // [peekr stub]" });
+  }
+  REEXPORT_RE.lastIndex = 0;
+  while ((m = REEXPORT_RE.exec(code)) !== null) {
+    const [full, indent, clause, , pkg2] = m;
+    if (!isNodeBuiltin(pkg2) && !isServerPkg(pkg2)) continue;
+    if (clause === "*") {
+      patches.push({ start: m.index, end: m.index + full.length, text: `// [peekr] stubbed: export * from '${pkg2}'` });
+    } else {
+      const v = getStub(pkg2);
+      const names = clause.slice(1, -1).split(",").map((s) => s.trim()).filter(Boolean);
+      const lines = names.map((n) => {
+        const [local, exported] = n.split(/\s+as\s+/).map((s) => s.trim());
+        const exportName = exported ?? local;
+        return `${indent}export const ${exportName} = ${v}.${local}`;
+      });
+      patches.push({ start: m.index, end: m.index + full.length, text: lines.join("\n") + " // [peekr stub]" });
+    }
+  }
+  if (patches.length === 0) return null;
+  patches.sort((a, b) => b.start - a.start);
+  let out = code;
+  for (const p of patches) out = out.slice(0, p.start) + p.text + out.slice(p.end);
+  if (stubs.size > 0) {
+    const decls = [...stubs.entries()].map(
+      ([pkg2, v]) => `import ${v} from '${STUB_IMPORT_PREFIX}${encodeURIComponent(pkg2)}'`
+    ).join("\n");
+    out = decls + "\n" + out;
+  }
+  return { code: out, map: null };
+}
+function getAppDistDir() {
+  const thisFileDir = new URL(".", import.meta.url).pathname;
+  const candidates = [
+    join4(thisFileDir, "../app-dist"),
+    join4(thisFileDir, "app-dist"),
+    join4(thisFileDir, "../../app/dist"),
+    join4(thisFileDir, "../../../packages/app/dist")
+  ];
+  for (const candidate of candidates) {
+    if (existsSync3(candidate)) return resolve2(candidate);
+  }
+  throw new Error(
+    "[peekr] Cannot find the built app. Run `pnpm build:app` first or reinstall peekr-ui."
+  );
+}
+function detectProjectType(rootDir) {
+  let deps = {};
+  try {
+    const pkg2 = JSON.parse(readFileSync2(join4(rootDir, "package.json"), "utf-8"));
+    deps = { ...pkg2.dependencies ?? {}, ...pkg2.devDependencies ?? {} };
+  } catch {
+  }
+  if ("next" in deps) {
+    const appLayoutExists = existsSync3(join4(rootDir, "app/layout.tsx")) || existsSync3(join4(rootDir, "app/layout.jsx")) || existsSync3(join4(rootDir, "app/layout.js")) || existsSync3(join4(rootDir, "src/app/layout.tsx")) || existsSync3(join4(rootDir, "src/app/layout.jsx"));
+    if (appLayoutExists) return "next-app-router";
+    const pagesAppExists = existsSync3(join4(rootDir, "pages/_app.tsx")) || existsSync3(join4(rootDir, "pages/_app.jsx")) || existsSync3(join4(rootDir, "pages/_app.js")) || existsSync3(join4(rootDir, "src/pages/_app.tsx")) || existsSync3(join4(rootDir, "src/pages/_app.jsx"));
+    if (pagesAppExists) return "next-pages-router";
+    return "next-app-router";
+  }
+  if ("react-scripts" in deps) return "cra";
+  if ("@vitejs/plugin-react" in deps || "@vitejs/plugin-react-swc" in deps || "vite" in deps) {
+    return "vite";
+  }
+  return "unknown";
+}
+function loadNextConfig(rootDir) {
+  const candidates = ["next.config.js", "next.config.mjs", "next.config.ts", "next.config.cjs"];
+  for (const candidate of candidates) {
+    const abs = join4(rootDir, candidate);
+    if (!existsSync3(abs)) continue;
+    try {
+      const content = readFileSync2(abs, "utf-8");
+      const vars = {};
+      const envBlock = content.match(/\benv\s*:\s*\{([^}]*)\}/s);
+      if (envBlock) {
+        const kvRe = /['"]?(\w+)['"]?\s*:\s*['"]([^'"]*)['"]/g;
+        let m;
+        while ((m = kvRe.exec(envBlock[1])) !== null) {
+          if (m[1] && m[2] !== void 0) vars[m[1]] = m[2];
+        }
+      }
+      return vars;
+    } catch {
+    }
+    break;
+  }
+  return {};
+}
+var CSS_CANDIDATES = [
+  "src/index.css",
+  "src/index.scss",
+  "src/index.sass",
+  "src/globals.css",
+  "src/global.css",
+  "src/App.css",
+  // CRA default — App.js imports this
+  "src/app.css",
+  // lowercase variant (Linux is case-sensitive)
+  "src/style.css",
+  "src/styles.css",
+  "src/main.css",
+  "src/styles/global.css",
+  "src/styles/globals.css",
+  "src/styles/index.css",
+  "src/styles/main.css",
+  "src/app/globals.css",
+  // Next.js App Router
+  "src/app/global.css",
+  "app/globals.css",
+  // Next.js 13+ app dir
+  "styles/globals.css",
+  "styles/global.css",
+  "index.css",
+  "App.css",
+  "app.css"
+];
+function extractCssImports(filePath) {
+  try {
+    const content = readFileSync2(filePath, "utf-8");
+    const found = [];
+    const re = /import\s+['"]([^'"]+\.(?:css|scss|sass|less|styl))['"]/g;
+    let m;
+    while ((m = re.exec(content)) !== null) {
+      found.push(m[1]);
+    }
+    return found;
+  } catch {
+    return [];
+  }
+}
+function traceEntryCss(rootDir) {
+  const entryPoints = [
+    "src/index.js",
+    "src/index.jsx",
+    "src/index.ts",
+    "src/index.tsx",
+    "src/main.js",
+    "src/main.jsx",
+    "src/main.ts",
+    "src/main.tsx",
+    "src/App.js",
+    "src/App.jsx",
+    "src/App.ts",
+    "src/App.tsx",
+    "App.js",
+    "App.jsx",
+    "index.js",
+    "index.jsx"
+  ];
+  const found = [];
+  for (const entry of entryPoints) {
+    const entryAbs = join4(rootDir, entry);
+    if (!existsSync3(entryAbs)) continue;
+    const cssImports = extractCssImports(entryAbs);
+    for (const cssImport of cssImports) {
+      if (!cssImport.startsWith(".")) continue;
+      const resolved = resolve2(dirname2(entryAbs), cssImport);
+      const relPath = relative2(rootDir, resolved);
+      if (existsSync3(resolved) && !found.includes(relPath)) {
+        found.push(relPath);
+      }
+    }
+  }
+  return found;
+}
+function detectGlobalCss(rootDir, extraCss = []) {
+  const detected = [];
+  const addIfExists = (relPath) => {
+    if (!detected.includes(relPath) && existsSync3(join4(rootDir, relPath))) {
+      detected.push(relPath);
+    }
+  };
+  for (const candidate of CSS_CANDIDATES) addIfExists(candidate);
+  for (const relPath of traceEntryCss(rootDir)) addIfExists(relPath);
+  for (const css of extraCss) addIfExists(css);
+  return detected;
+}
+var ROOT_LAYOUT_CANDIDATES = [
+  { path: "app/layout.tsx", type: "layout" },
+  { path: "app/layout.jsx", type: "layout" },
+  { path: "app/layout.js", type: "layout" },
+  { path: "src/app/layout.tsx", type: "layout" },
+  { path: "src/app/layout.jsx", type: "layout" },
+  { path: "src/app/layout.js", type: "layout" },
+  { path: "pages/_app.tsx", type: "pages-app" },
+  { path: "pages/_app.jsx", type: "pages-app" },
+  { path: "pages/_app.js", type: "pages-app" },
+  { path: "src/pages/_app.tsx", type: "pages-app" },
+  { path: "src/pages/_app.jsx", type: "pages-app" },
+  { path: "src/pages/_app.js", type: "pages-app" },
+  // CRA / Vite style — detected last so Next.js files take priority
+  { path: "src/App.tsx", type: "app" },
+  { path: "src/App.jsx", type: "app" },
+  { path: "src/App.js", type: "app" },
+  { path: "App.tsx", type: "app" },
+  { path: "App.jsx", type: "app" },
+  { path: "App.js", type: "app" }
+];
+var SERVER_ONLY_PATTERNS = [
+  /import\s+['"]server-only['"]/,
+  /from\s+['"]next\/headers['"]/,
+  /from\s+['"]next\/cookies['"]/,
+  /from\s+['"]next\/font\//,
+  /from\s+['"]next\/server['"]/,
+  /from\s+['"]next\/navigation['"]/
+  // useRouter / redirect / notFound are server-side in App Router
+];
+function detectRootLayout(rootDir, projectType = "unknown") {
+  const isNext = projectType === "next-app-router" || projectType === "next-pages-router";
+  const candidates = ROOT_LAYOUT_CANDIDATES.filter((c) => {
+    if (projectType === "next-app-router") return c.type === "layout";
+    if (projectType === "next-pages-router") return c.type === "pages-app";
+    if (projectType === "cra" || projectType === "vite") return c.type === "app";
+    return true;
+  });
+  const toTry = candidates.length > 0 ? candidates : ROOT_LAYOUT_CANDIDATES;
+  for (const candidate of toTry) {
+    const absPath = join4(rootDir, candidate.path);
+    if (!existsSync3(absPath)) continue;
+    try {
+      const content = readFileSync2(absPath, "utf-8");
+      if (SERVER_ONLY_PATTERNS.some((re) => re.test(content))) {
+        continue;
+      }
+      if (!/export\s+default/.test(content)) continue;
+    } catch {
+      continue;
+    }
+    return { path: candidate.path, type: candidate.type };
+  }
+  if (isNext) {
+    const providerCandidates = [
+      "src/providers.tsx",
+      "src/providers.jsx",
+      "app/providers.tsx",
+      "app/providers.jsx",
+      "src/app/providers.tsx",
+      "src/app/providers.jsx"
+    ];
+    for (const relPath of providerCandidates) {
+      const absPath = join4(rootDir, relPath);
+      if (!existsSync3(absPath)) continue;
+      try {
+        const content = readFileSync2(absPath, "utf-8");
+        if (SERVER_ONLY_PATTERNS.some((re) => re.test(content))) continue;
+        if (!/export\s+default/.test(content)) continue;
+        return { path: relPath, type: "app" };
+      } catch {
+        continue;
+      }
+    }
+  }
+  return null;
+}
+function extractHtmlLinkTags(rootDir) {
+  const candidates = ["public/index.html", "index.html"];
+  for (const candidate of candidates) {
+    const absPath = join4(rootDir, candidate);
+    if (!existsSync3(absPath)) continue;
+    try {
+      const html = readFileSync2(absPath, "utf-8");
+      const tags = [];
+      const linkRe = /<link\b[^>]*\brel=["']stylesheet["'][^>]*>/gi;
+      let m;
+      while ((m = linkRe.exec(html)) !== null) {
+        if (/href=["'](https?:)?\/\//i.test(m[0])) {
+          tags.push("  " + m[0].trim());
+        }
+      }
+      const preRe = /<link\b[^>]*\brel=["'](preconnect|preload)["'][^>]*>/gi;
+      while ((m = preRe.exec(html)) !== null) {
+        if (/href=["'](https?:)?\/\//i.test(m[0])) {
+          tags.push("  " + m[0].trim());
+        }
+      }
+      const styleRe = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+      while ((m = styleRe.exec(html)) !== null) {
+        const content = m[1].trim();
+        if (content) tags.push(`  <style>${content}</style>`);
+      }
+      if (tags.length > 0) return tags.join("\n") + "\n";
+    } catch {
+    }
+  }
+  return "";
+}
+function loadDotEnv(rootDir) {
+  const envFiles = [".env", ".env.development", ".env.local", ".env.development.local"];
+  const vars = { NODE_ENV: "development" };
+  for (const f of envFiles) {
+    const abs = join4(rootDir, f);
+    if (!existsSync3(abs)) continue;
+    try {
+      for (const line of readFileSync2(abs, "utf-8").split("\n")) {
+        const t = line.trim();
+        if (!t || t.startsWith("#")) continue;
+        const eq = t.indexOf("=");
+        if (eq === -1) continue;
+        const key = t.slice(0, eq).trim();
+        let val = t.slice(eq + 1).trim();
+        if (val.startsWith('"') && val.endsWith('"') || val.startsWith("'") && val.endsWith("'")) val = val.slice(1, -1);
+        if (key) vars[key] = val;
+      }
+    } catch {
+    }
+  }
+  return vars;
+}
+var jsxInJsPlugin = {
+  name: "peekr:jsx-in-js",
+  async transform(code, id) {
+    if (id.includes("node_modules")) return null;
+    if (!id.endsWith(".js")) return null;
+    try {
+      const needsReact = !/import\s+(React|\*\s+as\s+React)\b/.test(code);
+      const src = needsReact ? `import React from 'react'
+${code}` : code;
+      return await transformWithEsbuild(src, id, {
+        loader: "jsx",
+        jsx: "transform"
+        // classic: compiles to React.createElement(...)
+      });
+    } catch {
+      return null;
+    }
+  }
+};
+var autoReactImportPlugin = {
+  name: "peekr:auto-react-import",
+  enforce: "pre",
+  transform(code, id) {
+    if (id.includes("node_modules")) return null;
+    if (!/\.[jt]sx$/.test(id)) return null;
+    if (/import\s+(React|\*\s+as\s+React)\b/.test(code)) return null;
+    return `import React from 'react'
+${code}`;
+  }
+};
+function createStubPlugin() {
+  return {
+    name: "peekr:stubs",
+    enforce: "pre",
+    resolveId(id) {
+      if (id.startsWith(STUB_IMPORT_PREFIX)) {
+        const pkg2 = decodeURIComponent(id.slice(STUB_IMPORT_PREFIX.length));
+        return `\0peekr:stub:${pkg2}`;
+      }
+      if (isNodeBuiltin(id)) return `\0peekr:stub:${id}`;
+      if (isServerPkg(id)) return `\0peekr:stub:${id}`;
+    },
+    load(id) {
+      if (id.startsWith("\0peekr:stub:")) {
+        return generateStubModule(id.slice("\0peekr:stub:".length));
+      }
+    },
+    transform(code, id) {
+      if (id.includes("node_modules") || id.startsWith("\0") || !/\.[jt]sx?$/.test(id)) return null;
+      if (!code.includes("from '") && !code.includes('from "')) return null;
+      const hasCandidate = /from\s+['"](?:node:|fs|path|os|crypto|http|https|net|child_process|stream|events|buffer|util|url|tls|zlib|worker_threads|nodemailer|bcrypt|mongoose|prisma|sequelize|typeorm|express|passport|jsonwebtoken|bull|redis|ioredis|aws-sdk|@aws-sdk|googleapis|firebase-admin|winston|pino|puppeteer|sharp|pg['"\/]|mysql|sqlite|ws['"]|\@prisma|\@nestjs|\@hapi|\@google-cloud)/.test(code);
+      if (!hasCandidate) return null;
+      return rewriteServerImports(code);
+    }
+  };
+}
+var VIRTUAL_PREFIX = "virtual:peekr-frame";
+var RESOLVED_PREFIX = "\0virtual:peekr-frame";
+var FRAME_SHARED_JS = `
+class __PeekrErrorBoundary extends React.Component {
+  constructor(props) { super(props); this.state = { error: null } }
+  static getDerivedStateFromError(e) { return { error: e } }
+  componentDidCatch(error, info) {
+    window.parent.postMessage({
+      type: 'RENDER_ERROR', message: error.message,
+      stack: error.stack, componentStack: info?.componentStack,
+    }, '*')
+  }
+  render() {
+    if (this.state.error) {
+      return React.createElement('div', {
+        style: {
+          padding: '20px', fontFamily: 'ui-monospace, monospace', color: '#dc2626',
+          background: '#fef2f2', borderRadius: '8px', margin: '16px',
+          fontSize: '13px', lineHeight: '1.6', border: '1px solid #fecaca',
+        }
+      },
+        React.createElement('div', { style: { fontWeight: 600, marginBottom: 8, fontSize: 14 } }, '\u26A0 Component Error'),
+        React.createElement('pre', { style: { margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' } }, this.state.error.message)
+      )
+    }
+    return this.props.children
+  }
+}
+function __resolveComponent(mod, exportName) {
+  if (exportName === 'default') {
+    return mod.default
+      ?? Object.values(mod).find(v => typeof v === 'function' && /^[A-Z]/.test((v.displayName ?? v.name) ?? ''))
+  }
+  return mod[exportName] ?? mod.default
+}
+function __applyTheme(theme) {
+  document.documentElement.className = theme === 'dark' ? 'dark' : ''
+  document.body.style.background = theme === 'dark' ? '#0f172a' : 'transparent'
+}
+// Props sent via postMessage use structuredClone \u2014 functions can't be cloned.
+// Sender marks function values as { __peekrFn: true, name }; we reconstruct them here.
+function __hydrateProps(raw) {
+  if (!raw || typeof raw !== 'object') return {}
+  const out = {}
+  for (const [k, v] of Object.entries(raw)) {
+    if (v && typeof v === 'object' && v.__peekrFn === true) {
+      const n = v.name || k
+      out[k] = function() { console.log('[peekr] ' + n + '() called') }
+    } else {
+      out[k] = v
+    }
+  }
+  return out
+}
+// NOTE: __installContextStub is intentionally NOT included here.
+// Full context entries have real providers (AuthProvider etc.) so they don't
+// need stubs. Including the stub in full context mode breaks react-router-dom:
+// Router.useInRouterContext() calls useContext(NavigationContext) expecting null
+// (meaning "no router above me yet"), but the stub returns a truthy Proxy,
+// causing "cannot render a <Router> inside another <Router>".
+// The stub is injected only into isolated entries \u2014 see generateIsolatedEntry.
+
+// Mock API mode \u2014 intercepts network primitives to return empty responses.
+// Prevents network errors from crashing component previews when real APIs
+// are unavailable (auth required, CORS, no network, etc.).
+//
+// Covered:
+//   fetch          \u2192 React Query v5, SWR, native fetch
+//   XMLHttpRequest \u2192 Axios (XHR adapter), jQuery.ajax
+//   WebSocket      \u2192 socket.io, ws-based real-time queries
+//   EventSource    \u2192 SSE-based streaming / server-sent events
+//
+// Activated by SET_MOCK_MODE postMessage from the parent toolbar toggle.
+// Vite HMR and peekr internal requests are always passed through.
+let __mockActive = false
+let __origFetch = null
+let __origXHR = null
+let __origWS = null
+let __origES = null
+function __installMockApi() {
+  if (__mockActive) return
+  __mockActive = true
+
+  // fetch mock
+  __origFetch = window.fetch
+  window.fetch = function(input) {
+    const url = typeof input === 'string' ? input
+      : (input instanceof Request) ? input.url : String(input)
+    if (url.includes('/__peek/') || url.includes('@vite') || url.includes('?v=')) {
+      return __origFetch.apply(window, arguments)
+    }
+    return Promise.resolve(new Response('{}', {
+      status: 200, headers: { 'Content-Type': 'application/json' },
+    }))
+  }
+
+  // XMLHttpRequest mock
+  __origXHR = window.XMLHttpRequest
+  function _MockXHR() { this.readyState = 0; this.status = 0 }
+  _MockXHR.prototype = {
+    open: function(m, url) { this._url = url },
+    send: function() {
+      const self = this
+      setTimeout(function() {
+        self.readyState = 4; self.status = 200; self.statusText = 'OK'
+        self.response = '{}'; self.responseText = '{}'
+        self.onreadystatechange && self.onreadystatechange.call(self)
+        self.onload && self.onload.call(self)
+      }, 0)
+    },
+    setRequestHeader: function() {},
+    getResponseHeader: function() { return 'application/json' },
+    getAllResponseHeaders: function() { return 'content-type: application/json\\r\\n' },
+    abort: function() {},
+  }
+  window.XMLHttpRequest = _MockXHR
+
+  // WebSocket mock
+  if (window.WebSocket) {
+    __origWS = window.WebSocket
+    function _MockWS(url) {
+      this.readyState = 0 // CONNECTING
+      this.url = url
+      const self = this
+      setTimeout(function() {
+        self.readyState = 1 // OPEN
+        self.onopen && self.onopen({ type: 'open' })
+      }, 0)
+    }
+    _MockWS.CONNECTING = 0; _MockWS.OPEN = 1; _MockWS.CLOSING = 2; _MockWS.CLOSED = 3
+    _MockWS.prototype = {
+      send: function() { /* silently drop */ },
+      close: function() {
+        this.readyState = 3
+        this.onclose && this.onclose({ type: 'close', code: 1000, reason: 'mock', wasClean: true })
+      },
+      addEventListener: function(type, fn) { this['on' + type] = fn },
+      removeEventListener: function() {},
+    }
+    window.WebSocket = _MockWS
+  }
+
+  // EventSource mock
+  if (window.EventSource) {
+    __origES = window.EventSource
+    function _MockES(url) {
+      this.readyState = 0 // CONNECTING
+      this.url = url
+      const self = this
+      setTimeout(function() {
+        self.readyState = 1 // OPEN
+        self.onopen && self.onopen({ type: 'open' })
+        // Immediately close after opening \u2014 no messages sent
+        setTimeout(function() {
+          self.readyState = 2 // CLOSED
+          self.onclose && self.onclose({ type: 'close' })
+        }, 50)
+      }, 0)
+    }
+    _MockES.CONNECTING = 0; _MockES.OPEN = 1; _MockES.CLOSED = 2
+    _MockES.prototype = {
+      close: function() { this.readyState = 2 },
+      addEventListener: function(type, fn) { this['on' + type] = fn },
+      removeEventListener: function() {},
+      dispatchEvent: function() { return true },
+    }
+    window.EventSource = _MockES
+  }
+}
+function __uninstallMockApi() {
+  if (!__mockActive) return
+  __mockActive = false
+  if (__origFetch) { window.fetch = __origFetch; __origFetch = null }
+  if (__origXHR) { window.XMLHttpRequest = __origXHR; __origXHR = null }
+  if (__origWS) { window.WebSocket = __origWS; __origWS = null }
+  if (__origES) { window.EventSource = __origES; __origES = null }
+}
+`;
+function generateIsolatedEntry(file, exportName, hasReactRouter, reactMajor) {
+  const absFile = file.startsWith("/") ? file : `/${file}`;
+  const safeFile = JSON.stringify(absFile);
+  const safeExport = JSON.stringify(exportName);
+  const reactDomImport = reactMajor >= 18 ? `import { createRoot } from 'react-dom/client'` : `import ReactDOM from 'react-dom'`;
+  const rootInit = reactMajor >= 18 ? `let __root = null
+function __getRoot() {
+  if (!__root) { const el = document.getElementById('peek-root'); if (el) __root = createRoot(el) }
+  return __root
+}` : `function __getRoot() { return document.getElementById('peek-root') }`;
+  const renderFn = reactMajor >= 18 ? `  const root = __getRoot()
+    if (!root) { window.parent.postMessage({ type: 'RENDER_ERROR', message: '#peek-root not found.' }, '*'); return }
+    root.render(` : `  const el = __getRoot()
+    if (!el) { window.parent.postMessage({ type: 'RENDER_ERROR', message: '#peek-root not found.' }, '*'); return }
+    ReactDOM.render(`;
+  const renderClose = reactMajor >= 18 ? `)` : `, el)`;
+  const contextStub = `
+;(function __installContextStub() {
+  const __origUseContext = React.useContext
+  function __ctxStub() {
+    const fn = function __peekrStub() { return __ctxStub() }
+    const _str = { toLowerCase: () => '', toUpperCase: () => '', trim: () => '',
+      replace: () => '', slice: () => '', split: () => [], includes: () => false,
+      startsWith: () => false, endsWith: () => false, toString: () => '', valueOf: () => null }
+    Object.assign(fn, _str)  // NOTE: fn.length is read-only on functions, skip it
+    return new Proxy(fn, {
+      get(t, k) {
+        if (typeof k === 'symbol') return t[k]
+        if (k in t) return t[k]
+        return __ctxStub()
+      },
+      apply() { return __ctxStub() },
+      has() { return true },
+      set() { return true },
+    })
+  }
+  React.useContext = function(ctx) {
+    const val = __origUseContext.call(this, ctx)
+    if (val !== null && val !== undefined) return val
+    return __ctxStub()
+  }
+})()
+`;
+  const routerSetup = hasReactRouter ? `
+import { MemoryRouter as __MemoryRouter } from 'react-router-dom'
+let __wrapWithRouter = false
+// __RouterBoundary: catches errors thrown by components that need a Router context
+// but don't have one. After catching, adds MemoryRouter and re-renders once.
+// Detects router-context errors by message patterns OR by the common symptom of
+// react-router-dom trying to call string methods on undefined context values
+// (e.g. "Cannot read properties of undefined (reading 'toLowerCase')").
+class __RouterBoundary extends React.Component {
+  constructor(p) { super(p); this.state = { err: null } }
+  static getDerivedStateFromError(err) { return { err } }
+  componentDidUpdate(_, prevState) {
+    if (this.state.err && !prevState.err) {
+      const msg = (this.state.err.message || '') + (this.state.err.stack || '')
+      const isOutsideRouter = /useNavigate|useLocation|useParams|useMatch|useHref|<Link>|<NavLink>|outside.*Router|may be used only in the context|toLowerCase|Cannot read.*location|Cannot read.*pathname/i.test(msg)
+      if (isOutsideRouter && !__wrapWithRouter) {
+        __wrapWithRouter = true
+        setTimeout(() => { this.setState({ err: null }); __render(__mod, __currentProps, __currentTheme) }, 0)
+      }
+    }
+  }
+  render() {
+    if (this.state.err) {
+      const msg = (this.state.err.message || '') + (this.state.err.stack || '')
+      const isOutsideRouter = /useNavigate|useLocation|useParams|useMatch|useHref|<Link>|<NavLink>|outside.*Router|may be used only in the context|toLowerCase|Cannot read.*location|Cannot read.*pathname/i.test(msg)
+      if (isOutsideRouter) return null
+      throw this.state.err
+    }
+    return this.props.children
+  }
+}` : "";
+  return `
+import React from 'react'
+${reactDomImport}
+${routerSetup}
+${FRAME_SHARED_JS}
+${contextStub}
+let __currentProps = {}
+let __currentTheme = 'light'
+let __mod = null
+let __renderScheduled = false
+
+${rootInit}
+function __render(mod, props, theme) {
+  if (!mod) return
+  const Component = __resolveComponent(mod, ${safeExport})
+  if (!Component) {
+    window.parent.postMessage({ type: 'RENDER_ERROR',
+      message: 'Export "' + ${safeExport} + '" not found in ' + ${safeFile}, }, '*')
+    return
+  }
+  __applyTheme(theme)
+  try {
+    const inner = React.createElement(__PeekrErrorBoundary, { key: ${safeFile} + ':' + ${safeExport} },
+      ${hasReactRouter ? `React.createElement(__RouterBoundary, null, React.createElement(Component, props))` : `React.createElement(Component, props)`})
+    ${renderFn}${hasReactRouter ? `__wrapWithRouter ? React.createElement(__MemoryRouter, { initialEntries: ['/'] }, inner) : inner` : `inner`}${renderClose}
+    requestAnimationFrame(() => { window.parent.postMessage({ type: 'RENDER_SUCCESS' }, '*') })
+  } catch (err) {
+    window.parent.postMessage({ type: 'RENDER_ERROR', message: err.message, stack: err.stack }, '*')
+  }
+}
+function __scheduleRender(mod, props, theme) {
+  if (__renderScheduled) return
+  __renderScheduled = true
+  requestAnimationFrame(() => { __renderScheduled = false; __render(mod, props, theme) })
+}
+window.addEventListener('message', (e) => {
+  if (e.source !== window.parent) return
+  const { type } = e.data
+  if (type === 'UPDATE_PROPS') { __currentProps = __hydrateProps(e.data.props); if (__mod) __scheduleRender(__mod, __currentProps, __currentTheme) }
+  if (type === 'SET_THEME') { __currentTheme = e.data.theme; __applyTheme(__currentTheme); if (__mod) __scheduleRender(__mod, __currentProps, __currentTheme) }
+  if (type === 'SET_MOCK_MODE') { e.data.enabled ? __installMockApi() : __uninstallMockApi() }
+})
+if (import.meta.hot) {
+  import.meta.hot.accept(${safeFile}, (newMod) => { if (newMod) { __mod = newMod; __scheduleRender(__mod, __currentProps, __currentTheme) } })
+  import.meta.hot.on('vite:afterUpdate', () => { if (__mod) __scheduleRender(__mod, __currentProps, __currentTheme) })
+}
+// Dynamically import the component so Vite doesn't eagerly transform it.
+// If the component or any of its imports are broken/missing, the error is
+// caught here and reported as RENDER_ERROR \u2014 the frame still loads cleanly.
+import(${safeFile}).then((mod) => {
+  __mod = mod
+  __render(__mod, __currentProps, __currentTheme)
+  window.parent.postMessage({ type: 'FRAME_READY' }, '*')
+}).catch((err) => {
+  window.parent.postMessage({ type: 'RENDER_ERROR', message: err.message, stack: err.stack }, '*')
+  window.parent.postMessage({ type: 'FRAME_READY' }, '*')
+})
+`;
+}
+function generateFullContextEntry(file, exportName, rootLayout, reactMajor) {
+  const absFile = file.startsWith("/") ? file : `/${file}`;
+  const safeFile = JSON.stringify(absFile);
+  const safeExport = JSON.stringify(exportName);
+  const safeRootPath = JSON.stringify(rootLayout.path.startsWith("/") ? rootLayout.path : `/${rootLayout.path}`);
+  const safeRootType = JSON.stringify(rootLayout.type);
+  const reactDomImportFC = reactMajor >= 18 ? `import { createRoot } from 'react-dom/client'` : `import ReactDOM from 'react-dom'`;
+  const mountRoot = reactMajor >= 18 ? `const root = createRoot(rootEl)
+  // root.render called below
+` : ``;
+  const rootRender = reactMajor >= 18 ? `root.render(content)` : `ReactDOM.render(content, rootEl)`;
+  let contentInitCode;
+  if (rootLayout.type === "pages-app") {
+    contentInitCode = `
+    content = React.createElement(__PeekrErrorBoundary, null,
+      React.createElement(RootLayout, { Component: __ComponentSlot, pageProps: {} }))`;
+  } else if (rootLayout.type === "app") {
+    contentInitCode = `
+    let __MR = null
+    const __rtrRefs = new Set()
+    try {
+      const __rrd = await import(/* @vite-ignore */ 'react-router-dom')
+      __MR = __rrd.MemoryRouter
+      for (const k of ['RouterProvider','BrowserRouter','HashRouter','StaticRouter','NativeRouter']) {
+        if (__rrd[k]) __rtrRefs.add(__rrd[k])
+      }
+    } catch(e) {}
+    const __origCE = React.createElement.bind(React)
+    if (__MR && __rtrRefs.size > 0) {
+      React.createElement = function(type) {
+        if (__rtrRefs.has(type)) {
+          return __origCE(__MR, { initialEntries: ['/'] }, __origCE(__ComponentSlot, null))
+        }
+        return __origCE.apply(null, arguments)
+      }
+    }
+    content = React.createElement(__PeekrErrorBoundary, null, React.createElement(RootLayout))`;
+  } else {
+    contentInitCode = `
+    content = React.createElement(__PeekrErrorBoundary, null,
+      React.createElement(RootLayout, { params: {}, searchParams: {} },
+        React.createElement(__ComponentSlot)))`;
+  }
+  return `
+import React from 'react'
+${reactDomImportFC}
+${FRAME_SHARED_JS}
+let __mod = null
+let __currentProps = {}
+let __currentTheme = 'light'
+// Slot updater \u2014 set by ComponentSlot's useEffect after mount
+let __setSlotProps = null
+
+// ComponentSlot: the injection point inside the real provider tree.
+// Only this function re-renders on prop / module change \u2014 root never remounts.
+function __ComponentSlot() {
+  const [slotProps, setSlotProps] = React.useState(__currentProps)
+  React.useEffect(() => {
+    __setSlotProps = setSlotProps
+    return () => { if (__setSlotProps === setSlotProps) __setSlotProps = null }
+  }, [setSlotProps])
+  if (!__mod) return null
+  const Component = __resolveComponent(__mod, ${safeExport})
+  if (!Component) {
+    return React.createElement('div', {
+      style: { padding: 20, color: '#dc2626', fontFamily: 'ui-monospace, monospace', fontSize: 13 }
+    }, 'Export not found: ' + ${safeExport})
+  }
+  return React.createElement(Component, slotProps)
+}
+
+async function __initRoot() {
+  __applyTheme(__currentTheme)
+  const rootEl = document.getElementById('peek-root')
+  if (!rootEl) {
+    window.parent.postMessage({ type: 'RENDER_ERROR', message: '#peek-root not found.' }, '*')
+    return
+  }
+  // Load the component module first. Any import errors here are fatal for this frame.
+  try {
+    __mod = await import(${safeFile})
+  } catch (err) {
+    window.parent.postMessage({ type: 'RENDER_ERROR', message: err instanceof Error ? err.message : String(err), stack: err instanceof Error ? err.stack : undefined }, '*')
+    window.parent.postMessage({ type: 'FRAME_READY' }, '*')
+    return
+  }
+  ${mountRoot}let content
+  try {
+    // @vite-ignore prevents Vite from eagerly pre-analyzing this import.
+    // The layout may import packages that are not installed or server-only;
+    // any failure becomes a runtime error caught below \u2192 FULLCONTEXT_FALLBACK.
+    // A 5-second timeout guards against imports that hang indefinitely.
+    const __layoutTimeout = new Promise((_, reject) =>
+      setTimeout(() => reject(new Error('Root layout import timed out (5s). Use Isolated mode or add \\'use client\\' to your layout.')), 5000)
+    )
+    const rootMod = await Promise.race([import(/* @vite-ignore */ ${safeRootPath}), __layoutTimeout])
+    const RootLayout = rootMod.default
+    if (typeof RootLayout !== 'function') {
+      throw new Error('Root layout ' + ${safeRootPath} + ' has no default function export.')
+    }
+    ${contentInitCode}
+    window.parent.postMessage({ type: 'FULLCONTEXT_READY', rootPath: ${safeRootPath} }, '*')
+  } catch (err) {
+    // Root import failed (server-only imports, missing deps, etc.) \u2192 fall back gracefully
+    content = React.createElement(__PeekrErrorBoundary, null, React.createElement(__ComponentSlot))
+    window.parent.postMessage({
+      type: 'FULLCONTEXT_FALLBACK',
+      reason: err instanceof Error ? err.message : String(err),
+    }, '*')
+  }
+  ${rootRender}
+  requestAnimationFrame(() => { window.parent.postMessage({ type: 'RENDER_SUCCESS' }, '*') })
+  window.parent.postMessage({ type: 'FRAME_READY' }, '*')
+}
+
+window.addEventListener('message', (e) => {
+  if (e.source !== window.parent) return
+  const { type } = e.data
+  if (type === 'UPDATE_PROPS') {
+    __currentProps = __hydrateProps(e.data.props)
+    // Update slot ONLY \u2014 root provider tree stays mounted
+    if (__setSlotProps) __setSlotProps(__currentProps)
+  }
+  if (type === 'SET_THEME') { __applyTheme(e.data.theme) }
+  if (type === 'SET_MOCK_MODE') { e.data.enabled ? __installMockApi() : __uninstallMockApi() }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(${safeFile}, (newMod) => {
+    if (newMod) {
+      __mod = newMod
+      // Trigger slot re-render with new module (same props, new component)
+      if (__setSlotProps) __setSlotProps(p => ({ ...p }))
+    }
+  })
+  import.meta.hot.on('vite:afterUpdate', () => {
+    if (__setSlotProps) __setSlotProps(p => ({ ...p }))
+  })
+}
+
+__initRoot()
+`;
+}
+function generateFrameEntry(file, exportName, fullContext = false, rootLayout = null, hasReactRouter = false, reactMajor = 18) {
+  if (fullContext && rootLayout) {
+    return generateFullContextEntry(file, exportName, rootLayout, reactMajor);
+  }
+  return generateIsolatedEntry(file, exportName, hasReactRouter, reactMajor);
+}
+async function createPeekrServer(rootDir, config) {
+  const scanCache = { files: /* @__PURE__ */ new Map(), barrels: /* @__PURE__ */ new Map(), all: [] };
+  const typeCache = { entries: /* @__PURE__ */ new Map() };
+  let projectType = detectProjectType(rootDir);
+  const reactMajor = detectReactVersion(rootDir);
+  await scanComponents(rootDir, scanCache, config.exclude);
+  let globalCssFiles = detectGlobalCss(rootDir, config.globalCss ?? []);
+  let rootLayout = detectRootLayout(rootDir, projectType);
+  const dotEnvVars = loadDotEnv(rootDir);
+  if (projectType === "next-app-router" || projectType === "next-pages-router") {
+    const nextConfigVars = loadNextConfig(rootDir);
+    Object.assign(dotEnvVars, nextConfigVars);
+  }
+  const hasReactRouter = existsSync3(join4(rootDir, "node_modules/react-router-dom"));
+  const htmlCdnLinks = extractHtmlLinkTags(rootDir);
+  let appDistDir;
+  try {
+    appDistDir = getAppDistDir();
+  } catch (e) {
+    console.warn(e.message);
+    appDistDir = "";
+  }
+  let appIndexHtml = "";
+  if (appDistDir) {
+    const indexPath = join4(appDistDir, "index.html");
+    if (existsSync3(indexPath)) {
+      appIndexHtml = readFileSync2(indexPath, "utf-8");
+    }
+  }
+  const peekrPlugin = {
+    name: "peekr",
+    enforce: "pre",
+    resolveId(id) {
+      if (id.startsWith(VIRTUAL_PREFIX)) {
+        return RESOLVED_PREFIX + id.slice(VIRTUAL_PREFIX.length);
+      }
+    },
+    load(id) {
+      if (id.startsWith(RESOLVED_PREFIX)) {
+        const qIdx = id.indexOf("?");
+        const query = qIdx !== -1 ? id.slice(qIdx + 1) : "";
+        const params = new URLSearchParams(query);
+        const file = params.get("file") ?? "";
+        if (!file) return `import React from 'react'
+export default null
+`;
+        const exportName = params.get("export") ?? "default";
+        const fullContext = params.get("fullContext") === "true";
+        return generateFrameEntry(file, exportName, fullContext, rootLayout, hasReactRouter, reactMajor);
+      }
+    },
+    configureServer(server) {
+      const watcher = server.watcher;
+      watcher.on("add", async (absPath) => {
+        const relPath = relative2(rootDir, absPath);
+        const ext = extname2(absPath);
+        if ([".css", ".scss", ".sass", ".less"].includes(ext)) {
+          globalCssFiles = detectGlobalCss(rootDir, config.globalCss ?? []);
+        }
+        if ([".tsx", ".jsx", ".ts", ".js"].includes(ext)) {
+          if ([".tsx", ".jsx", ".js"].includes(ext)) {
+            const newLayout = detectRootLayout(rootDir, projectType);
+            if (newLayout?.path !== rootLayout?.path) {
+              rootLayout = newLayout;
+              server.hot.send({ type: "custom", event: "peekr:root-layout-changed", data: rootLayout });
+            }
+          }
+          await scanComponents(rootDir, scanCache, config.exclude);
+          server.hot.send({ type: "custom", event: "peekr:components-updated", data: {} });
+        }
+      });
+      watcher.on("change", async (absPath) => {
+        const relPath = relative2(rootDir, absPath);
+        const ext = extname2(absPath);
+        if (relPath === "package.json") {
+          projectType = detectProjectType(rootDir);
+          const newLayout = detectRootLayout(rootDir, projectType);
+          if (newLayout?.path !== rootLayout?.path) {
+            rootLayout = newLayout;
+            server.hot.send({ type: "custom", event: "peekr:root-layout-changed", data: rootLayout });
+          }
+          return;
+        }
+        if ([".tsx", ".jsx", ".ts", ".js"].includes(ext)) {
+          invalidateScanFile(rootDir, relPath, scanCache);
+          invalidateTypeCache(relPath, typeCache);
+          await scanComponents(rootDir, scanCache, config.exclude);
+          server.hot.send({ type: "custom", event: "peekr:components-updated", data: {} });
+        }
+      });
+      watcher.on("unlink", async (absPath) => {
+        const relPath = relative2(rootDir, absPath);
+        invalidateScanFile(rootDir, relPath, scanCache);
+        invalidateTypeCache(relPath, typeCache);
+        if ([".tsx", ".jsx", ".js"].includes(extname2(absPath))) {
+          const prevPath = rootLayout?.path;
+          rootLayout = detectRootLayout(rootDir, projectType);
+          if (prevPath !== rootLayout?.path) {
+            server.hot.send({ type: "custom", event: "peekr:root-layout-changed", data: rootLayout });
+          }
+        }
+        await scanComponents(rootDir, scanCache, config.exclude);
+        server.hot.send({ type: "custom", event: "peekr:components-updated", data: {} });
+      });
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url ?? "/";
+        const urlObj = new URL(url, "http://localhost");
+        const pathname = urlObj.pathname;
+        if (pathname === "/__peek/components") {
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(JSON.stringify(scanCache.all));
+          return;
+        }
+        if (pathname === "/__peek/types") {
+          const file = urlObj.searchParams.get("file");
+          const exportName = urlObj.searchParams.get("export") ?? "default";
+          if (!file) {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: "Missing ?file= param" }));
+            return;
+          }
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Cache-Control", "no-store");
+          try {
+            const props = await parseComponentProps(rootDir, file, exportName, typeCache);
+            res.end(JSON.stringify(props));
+          } catch {
+            res.end(JSON.stringify([]));
+          }
+          return;
+        }
+        if (pathname === "/__peek/global-css") {
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(JSON.stringify(globalCssFiles));
+          return;
+        }
+        if (pathname === "/__peek/root-layout") {
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(JSON.stringify(rootLayout));
+          return;
+        }
+        if (pathname === "/__peek/frame") {
+          const file = urlObj.searchParams.get("file") ?? "";
+          const exportName = urlObj.searchParams.get("export") ?? "default";
+          const theme = urlObj.searchParams.get("theme") ?? "light";
+          const fullContext = urlObj.searchParams.get("fullContext") === "true";
+          const virtualParams = new URLSearchParams({ file, export: exportName });
+          if (fullContext) virtualParams.set("fullContext", "true");
+          const virtualSrc = `/@id/__x00__${VIRTUAL_PREFIX}?${virtualParams.toString()}`;
+          const cssLinkTags = globalCssFiles.length > 0 ? globalCssFiles.map((f) => `  <link rel="stylesheet" href="${f.startsWith("/") ? f : `/${f}`}">`).join("\n") + "\n" : "";
+          const frameHtml = `<!DOCTYPE html>
+<html lang="en" class="${theme === "dark" ? "dark" : ""}">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+${htmlCdnLinks}${cssLinkTags}  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+      background: ${theme === "dark" ? "#0f172a" : "transparent"};
+      transition: background 0.15s ease;
+    }
+    #peek-root { min-height: 100vh; width: 100%; }
+  </style>
+</head>
+<body>
+  <div id="peek-root"></div>
+  <script type="module" src="${virtualSrc}"></script>
+</body>
+</html>`;
+          const transformed = await server.transformIndexHtml("/__peek/frame", frameHtml);
+          res.setHeader("Content-Type", "text/html");
+          res.end(transformed);
+          return;
+        }
+        if ((pathname === "/" || pathname === "/index.html") && appIndexHtml) {
+          res.setHeader("Content-Type", "text/html");
+          res.end(appIndexHtml);
+          return;
+        }
+        if (pathname.startsWith("/__peek/app/") && appDistDir) {
+          const assetRelPath = pathname.slice("/__peek/app/".length);
+          const assetAbsPath = join4(appDistDir, assetRelPath);
+          if (existsSync3(assetAbsPath)) {
+            try {
+              const stat = statSync3(assetAbsPath);
+              if (stat.isFile()) {
+                const ext = extname2(assetAbsPath);
+                const mimeTypes = {
+                  ".js": "application/javascript",
+                  ".css": "text/css",
+                  ".html": "text/html",
+                  ".svg": "image/svg+xml",
+                  ".png": "image/png",
+                  ".ico": "image/x-icon",
+                  ".woff2": "font/woff2",
+                  ".woff": "font/woff"
+                };
+                res.setHeader("Content-Type", mimeTypes[ext] ?? "application/octet-stream");
+                res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+                res.end(readFileSync2(assetAbsPath));
+                return;
+              }
+            } catch {
+            }
+          }
+        }
+        next();
+      });
+    }
+  };
+  const resolvedAliases = [];
+  function readConfigPaths(configFile) {
+    try {
+      const raw = readFileSync2(join4(rootDir, configFile), "utf-8");
+      const cleaned = raw.replace(/\/\/.*$/gm, "");
+      const json = JSON.parse(cleaned);
+      return json?.compilerOptions?.paths ?? {};
+    } catch {
+      return {};
+    }
+  }
+  let configPaths = readConfigPaths("tsconfig.json");
+  if (Object.keys(configPaths).length === 0) {
+    configPaths = readConfigPaths("jsconfig.json");
+  }
+  let hasAtAlias = false;
+  for (const [alias, targets] of Object.entries(configPaths)) {
+    const target = (targets[0] ?? "").replace(/\/\*$/, "");
+    if (!target) continue;
+    const absTarget = resolve2(rootDir, target);
+    if (alias === "@/*" || alias === "@") {
+      hasAtAlias = true;
+      resolvedAliases.push({ find: /^@\//, replacement: absTarget + "/" });
+    } else {
+      const cleanAlias = alias.replace(/\/\*$/, "");
+      resolvedAliases.push({ find: cleanAlias, replacement: absTarget });
+    }
+  }
+  if (!hasAtAlias) {
+    const isNextProject = projectType === "next-app-router" || projectType === "next-pages-router";
+    const nextConfigExists = ["next.config.js", "next.config.ts", "next.config.mjs", "next.config.cjs"].some((f) => existsSync3(join4(rootDir, f)));
+    if (isNextProject || nextConfigExists) {
+      const hasSrcDir = existsSync3(join4(rootDir, "src"));
+      resolvedAliases.push({ find: /^@\//, replacement: join4(rootDir, hasSrcDir ? "src" : ".") + "/" });
+    }
+  }
+  const vite = await createServer({
+    root: rootDir,
+    base: "/",
+    cacheDir: join4(rootDir, "node_modules/.vite-peekr"),
+    server: {
+      port: config.port,
+      strictPort: false,
+      open: false,
+      cors: true,
+      host: "localhost"
+    },
+    plugins: [createStubPlugin(), autoReactImportPlugin, jsxInJsPlugin, peekrPlugin],
+    resolve: {
+      alias: resolvedAliases
+    },
+    css: {
+      // Ensure Tailwind/PostCSS runs on user's CSS files.
+      // Search for postcss config in common formats.
+      postcss: (() => {
+        const candidates = [
+          "postcss.config.js",
+          "postcss.config.cjs",
+          "postcss.config.mjs",
+          "postcss.config.ts"
+        ];
+        for (const f of candidates) {
+          const abs = join4(rootDir, f);
+          if (existsSync3(abs)) return abs;
+        }
+        return void 0;
+      })()
+    },
+    // Use classic JSX transform globally — all JSX compiles to React.createElement(...).
+    // This is required so our React.createElement intercept in full context mode fires
+    // when user code calls RouterProvider/BrowserRouter etc.
+    // autoReactImportPlugin injects "import React from 'react'" for files that need it.
+    esbuild: {
+      jsx: "transform"
+    },
+    optimizeDeps: {
+      // Only pre-bundle react/react-dom if they're actually installed, to avoid
+      // "Failed to resolve dependency" warnings in monorepos without node_modules.
+      include: existsSync3(join4(rootDir, "node_modules/react")) ? ["react", "react-dom", "react-dom/client"] : [],
+      exclude: ["ws", "socket.io", "bufferutil", "utf-8-validate"]
+    },
+    // Shim process.env with real values from the project's .env / .env.local files.
+    // CRA uses process.env.REACT_APP_*; Next.js uses process.env.NEXT_PUBLIC_*.
+    // Vite's own import.meta.env.VITE_* is handled natively (root = user project).
+    define: {
+      "process.env": JSON.stringify(dotEnvVars)
+    },
+    appType: "custom",
+    clearScreen: false,
+    logLevel: "warn"
+  });
+  await vite.listen();
+  const actualPort = vite.config.server.port ?? config.port;
+  const typeLabel = {
+    "next-app-router": "Next.js App Router",
+    "next-pages-router": "Next.js Pages Router",
+    "vite": "Vite React",
+    "cra": "CRA",
+    "unknown": "React (unknown bundler)"
+  };
+  console.log(`  [peekr] Project type : ${typeLabel[projectType]}`);
+  console.log(`  [peekr] Components   : ${scanCache.all.length} found`);
+  if (rootLayout) {
+    console.log(`  [peekr] Root layout  : ${rootLayout.path} (${rootLayout.type})`);
+  } else {
+    console.log(`  [peekr] Root layout  : none \u2014 Full Context disabled`);
+  }
+  if (globalCssFiles.length > 0) {
+    console.log(`  [peekr] Global CSS   : ${globalCssFiles.join(", ")}`);
+  }
+  return {
+    vite,
+    port: actualPort,
+    stop: () => vite.close()
+  };
+}
+
+// src/index.ts
+var pkg = { name: "peekr-ui", version: "0.1.0" };
+function printBanner() {
+  console.log("");
+  console.log(pc.bold(pc.cyan("  \u26A1 peekr")));
+  console.log(pc.dim("  Zero-config component playground"));
+  console.log("");
+}
+var program = new Command();
+program.name("peekr").description("Zero-config component playground").version(pkg.version, "-v, --version").argument("[dir]", "Directory to scan for components", ".").option("-p, --port <number>", "Port to run on", "4321").option("--no-open", "Do not open browser automatically").option("--framework <name>", "Framework override (react | vue | svelte)", "react").option("--exclude <patterns...>", "Additional glob patterns to exclude").action(async (dir, options) => {
+  const rootDir = resolve3(process.cwd(), dir);
+  if (!existsSync4(rootDir)) {
+    console.error(pc.red(`  Directory not found: ${rootDir}`));
+    process.exit(1);
+  }
+  printBanner();
+  console.log(pc.dim(`  Scanning: ${rootDir}`));
+  const fileConfig = await loadConfig(rootDir);
+  const config = mergeConfig(fileConfig, {
+    port: parseInt(options.port, 10),
+    open: options.open,
+    framework: options.framework,
+    exclude: options.exclude ?? []
+  });
+  let server;
+  try {
+    server = await createPeekrServer(rootDir, config);
+  } catch (err) {
+    console.error(pc.red(`
+  Failed to start server: ${err.message}`));
+    if (err.code === "EADDRINUSE") {
+      console.error(pc.dim(`  Port ${config.port} is in use. Try --port <number>`));
+    }
+    process.exit(1);
+  }
+  const url = `http://localhost:${server.port}`;
+  const componentCount = server.vite.config.root ? "..." : "0";
+  console.log("");
+  console.log(`  ${pc.green("\u2713")} Ready at ${pc.bold(pc.cyan(url))}`);
+  console.log("");
+  console.log(pc.dim("  Press Ctrl+C to stop"));
+  console.log("");
+  if (config.open) {
+    try {
+      const { default: open } = await import("open");
+      await open(url);
+    } catch {
+    }
+  }
+  const shutdown = async (signal) => {
+    console.log("");
+    console.log(pc.dim(`  Stopping (${signal})...`));
+    await server.stop();
+    process.exit(0);
+  };
+  process.on("SIGINT", () => shutdown("SIGINT"));
+  process.on("SIGTERM", () => shutdown("SIGTERM"));
+});
+program.command("build").description("Build a static preview site (coming soon)").action(() => {
+  console.log(pc.yellow("  \u26A0 `peekr build` is coming in a future release."));
+  process.exit(0);
+});
+program.parseAsync(process.argv).catch((err) => {
+  console.error(pc.red("  Error: " + err.message));
+  process.exit(1);
+});