transone-cli 0.7.0 → 0.10.0

package/dist/{index-x5rrsfyb.js → index-2g3e5sjt.js}

@@ -1,36 +1,34 @@
 // @bun
 import {
-  loadTypescript
-} from "./index-k1qfvp0y.js";
+  createWebComponentContext,
+  createWebStylesPlugin
+} from "./index-d51tp4y9.js";
 import {
-  __require
-} from "./index-yb2wsc7f.js";
+  assertSafeSubdirectory,
+  assertSafeSubdirectoryDoesNotContain,
+  buildInputPaths,
+  buildOutputPath,
+  loadTypescript,
+  withBuildOutput
+} from "./index-xgn9fbc6.js";
+import {
+  PLATFORM_DEFINITIONS,
+  __require,
+  canonicalPath,
+  createComponentIndex,
+  getPlatformDefinition,
+  normalizePlatform
+} from "./index-j4h0wd27.js";
 
 // src/target/types.ts
 var TARGET_TYPES = [
-  "web",
-  "mp-weixin",
-  "mp-alipay",
-  "mp-bytedance",
-  "mp-xiaohongshu",
-  "app-ios",
-  "app-android",
-  "app-harmony"
+  ...new Set(PLATFORM_DEFINITIONS.map((definition) => definition.target))
 ];
 function isTargetType(value) {
   return typeof value === "string" && TARGET_TYPES.includes(value);
 }
-var MP_TARGET_TYPES = [
-  "mp-weixin",
-  "mp-alipay",
-  "mp-bytedance",
-  "mp-xiaohongshu"
-];
-var APP_TARGET_TYPES = [
-  "app-ios",
-  "app-android",
-  "app-harmony"
-];
+var MP_TARGET_TYPES = TARGET_TYPES.filter((target) => target.startsWith("mp-"));
+var APP_TARGET_TYPES = TARGET_TYPES.filter((target) => target.startsWith("app-"));
 function isAppTargetType(value) {
   return typeof value === "string" && APP_TARGET_TYPES.includes(value);
 }
@@ -79,7 +77,10 @@ async function resolveConfig(options = {}) {
     throw new Error(`Entry file does not exist: ${entry}`);
   }
   const pages = await resolvePages(root, entry, config.pages);
-  const target = resolveTarget(options.target);
+  const platform = resolvePlatform(options.target ?? config.target);
+  const target = getPlatformDefinition(platform).target;
+  const explicitOutDir = options.outDir ?? options.config?.build?.outDir ?? fileConfig.build?.outDir;
+  const webOutDir = explicitOutDir ?? (platform === "web-mobile" /* WebMobile */ || platform === "web-pc" /* WebPc */ ? `dist/build/${platform}` : config.build.outDir);
   const mpConfig = pickMpConfig(config.mp, target);
   const mpPages = mpConfig?.pages ? await resolvePages(root, entry, mpConfig.pages, {
     includeEntry: false,
@@ -93,21 +94,25 @@ async function resolveConfig(options = {}) {
     entry,
     pages,
     target,
+    platform,
+    ...config.components ? { components: config.components } : {},
     server: {
       host: config.server.host,
       port: config.server.port,
       proxy: config.server.proxy
     },
     build: {
-      outDir: resolve(root, config.build.outDir),
+      outDir: resolve(root, webOutDir),
       basePath: normalizeBasePath(config.build.basePath),
       directoryPages: config.build.directoryPages
     },
     ...config.library ? { library: resolveLibrary(root, config.library) } : {},
     ...mpEnabled ? {
-      mp: resolveMiniProgram(root, options.mpOutDir, mpConfig ?? {}, mpPages, target)
+      mp: resolveMiniProgram(root, options.mpOutDir ?? options.outDir, mpConfig ?? {}, mpPages, target)
     } : {},
-    ...isAppTargetType(target) ? { app: await resolveApp(root, options.outDir, appConfig ?? {}, target, pages) } : {}
+    ...isAppTargetType(target) ? {
+      app: await resolveApp(root, options.outDir, appConfig ?? {}, target, pages)
+    } : {}
   };
 }
 function isAppConfigMap(value) {
@@ -173,7 +178,7 @@ function resolveMiniProgram(root, outDirOverride, mp, pages, target) {
   return {
     ...mp.host !== undefined ? { host: mp.host } : {},
     appId: mp.appId ?? "touristappid",
-    outDir: resolve(root, outDirOverride ?? mp.outDir ?? (MP_DEFAULT_OUT_DIRS[target] ?? "dist/build/mp-weixin")),
+    outDir: resolve(root, outDirOverride ?? mp.outDir ?? MP_DEFAULT_OUT_DIRS[target] ?? "dist/build/mp-weixin"),
     navigationBarTitleText: mp.navigationBarTitleText ?? "TransOne",
     pages,
     ...mp.window !== undefined ? { window: mp.window } : {},
@@ -205,14 +210,11 @@ function normalizeBasePath(base) {
   const withLeading = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
   return withLeading.endsWith("/") ? withLeading.slice(0, -1) : withLeading;
 }
-function resolveTarget(target) {
-  if (target === undefined) {
-    return "web";
-  }
-  if (isTargetType(target)) {
-    return target;
-  }
-  throw new Error(`Unknown build target "${String(target)}". ` + "Available targets: web, mp-weixin, mp-alipay, mp-bytedance, mp-xiaohongshu, " + "app-ios, app-android, app-harmony.");
+function resolvePlatform(target) {
+  const platform = normalizePlatform(target ?? "web" /* Web */);
+  if (platform !== undefined)
+    return platform;
+  throw new Error(`Unknown build target "${String(target)}". ` + `Available targets: ${PLATFORM_DEFINITIONS.map((definition) => definition.platform).join(", ")}.`);
 }
 async function resolvePages(root, entry, pages, options = {}) {
   const resolved = options.includeEntry === false ? {} : { "/": entry };
@@ -273,6 +275,8 @@ function mergeConfig(...configs) {
     const server = config.server;
     const build = config.build;
     return {
+      target: config.target ?? merged.target,
+      components: config.components ? { ...merged.components, ...config.components } : merged.components,
       entry: config.entry ?? merged.entry,
       pages: config.pages ?? merged.pages,
       server: {
@@ -296,6 +300,16 @@ function mergeConfig(...configs) {
 }
 function validateUserConfig(config) {
   assertRecord(config, "Config");
+  if (config.target !== undefined && normalizePlatform(config.target) === undefined) {
+    throw new Error(`Config target is invalid: ${String(config.target)}`);
+  }
+  if (config.components !== undefined) {
+    assertRecord(config.components, "Config components");
+    for (const key of ["include", "exclude"]) {
+      if (config.components[key] !== undefined)
+        assertStringArray(config.components[key], `Config components.${key}`);
+    }
+  }
   if (config.entry !== undefined && typeof config.entry !== "string") {
     throw new Error("Config entry must be a string");
   }
@@ -322,7 +336,14 @@ function validateAppConfig(app) {
   assertRecord(app, "Config app");
   validateApiHost(app.host, "Config app.host");
   if (isAppConfigMap(app)) {
-    const flatKeys = ["appName", "bundleId", "outDir", "minPlatformVersion", "publicDir", "pages"];
+    const flatKeys = [
+      "appName",
+      "bundleId",
+      "outDir",
+      "minPlatformVersion",
+      "publicDir",
+      "pages"
+    ];
     if (flatKeys.some((key) => (key in app))) {
       throw new Error("Config app cannot mix flat fields with platform keys");
     }
@@ -338,7 +359,13 @@ function validateAppConfig(app) {
 function validateSingleAppConfig(app, label) {
   assertRecord(app, label);
   validateApiHost(app.host, `${label}.host`);
-  for (const key of ["appName", "bundleId", "outDir", "minPlatformVersion", "publicDir"]) {
+  for (const key of [
+    "appName",
+    "bundleId",
+    "outDir",
+    "minPlatformVersion",
+    "publicDir"
+  ]) {
     if (app[key] !== undefined && typeof app[key] !== "string") {
       throw new Error(`${label}.${key} must be a string`);
     }
@@ -359,7 +386,12 @@ function validateMpConfig(mp) {
 function validateMiniProgramConfig(mp, label) {
   assertRecord(mp, label);
   validateApiHost(mp.host, `${label}.host`);
-  for (const key of ["appId", "outDir", "navigationBarTitleText", "publicDir"]) {
+  for (const key of [
+    "appId",
+    "outDir",
+    "navigationBarTitleText",
+    "publicDir"
+  ]) {
     if (mp[key] !== undefined && typeof mp[key] !== "string") {
       throw new Error(`${label}.${key} must be a string`);
     }
@@ -498,8 +530,8 @@ function validateApiHost(host, label) {
 }
 
 // src/target/web-target.ts
-import { mkdir, rm as rm2, writeFile as writeFile2 } from "fs/promises";
-import { dirname as dirname3, isAbsolute as isAbsolute2, relative as relative2, resolve as resolve5, sep as sep2 } from "path";
+import { mkdir, writeFile as writeFile2 } from "fs/promises";
+import { dirname as dirname2, isAbsolute, relative, resolve as resolve4, sep } from "path";
 
 // src/build-output.ts
 function isEntryJavaScriptOutput(output) {
@@ -629,896 +661,85 @@ async function writeStylesheet(path, css) {
   }
 }
 
-// src/safe-path.ts
-import { lstat, realpath } from "fs/promises";
-import { dirname, isAbsolute, relative, resolve as resolve3, sep } from "path";
-async function assertSafeSubdirectory(root, path, errorMessage) {
-  try {
-    const canonicalRoot = await realpath(root);
-    const canonicalPath = await canonicalizePotentialPath(path);
-    if (!isStrictSubdirectory(canonicalRoot, canonicalPath)) {
-      throw new Error(errorMessage);
-    }
-  } catch {
-    throw new Error(errorMessage);
-  }
-}
-async function assertSafeSubdirectoryDoesNotContain(root, path, protectedPath, errorMessage) {
-  try {
-    const lexicalPath = resolve3(path);
-    const lexicalProtectedPath = resolve3(protectedPath);
-    const canonicalRoot = await realpath(root);
-    const canonicalPath = await canonicalizePotentialPath(path);
-    const canonicalProtectedPath = await realpath(protectedPath);
-    if (!isStrictSubdirectory(canonicalRoot, canonicalPath) || isPathWithinOrEqual(lexicalPath, lexicalProtectedPath) || isPathWithinOrEqual(canonicalPath, canonicalProtectedPath)) {
-      throw new Error(errorMessage);
-    }
-  } catch {
-    throw new Error(errorMessage);
-  }
-}
-async function canonicalizePotentialPath(path) {
-  const ancestor = await findExistingAncestor(path);
-  const canonicalAncestor = await realpath(ancestor);
-  return resolve3(canonicalAncestor, relative(ancestor, path));
-}
-async function findExistingAncestor(path) {
-  let candidate = path;
-  while (candidate !== dirname(candidate)) {
-    try {
-      await lstat(candidate);
-      return candidate;
-    } catch (error) {
-      if (!isMissingPathError(error)) {
-        throw error;
-      }
-    }
-    candidate = dirname(candidate);
-  }
-  await lstat(candidate);
-  return candidate;
-}
-function isMissingPathError(error) {
-  return typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT";
-}
-function isStrictSubdirectory(root, path) {
-  const pathFromRoot = relative(root, path);
-  return pathFromRoot !== "" && pathFromRoot !== ".." && !pathFromRoot.startsWith(`..${sep}`) && !isAbsolute(pathFromRoot);
-}
-function isPathWithinOrEqual(parent, candidate) {
-  const pathFromParent = relative(parent, candidate);
-  return pathFromParent === "" || pathFromParent !== ".." && !pathFromParent.startsWith(`..${sep}`) && !isAbsolute(pathFromParent);
-}
-
-// src/web-styles.ts
-import { dirname as dirname2, extname } from "path";
-import ts from "typescript";
-var ROOT_RPX_RULE = ":root{--tu-rpx:calc(min(100vw, 750px) / 750);}";
-var RPX_PATTERN = /(-?\d+(?:\.\d+)?)rpx/g;
-var SOURCE_FILTER = /\.(?:[cm]?js|jsx|tsx?)$/;
-function createWebStylesPlugin(disabledFiles = new Set) {
-  const styles = new Map;
-  const runtimeFiles = new Set;
-  const candidates = new Set;
-  const owners = new Map;
-  let unknownSelector = false;
-  let unknownInheritance = false;
-  return {
-    name: "transone-web-styles",
-    styles,
-    runtimeFiles,
+// src/bundle-inputs.ts
+import { existsSync as existsSync2, readFileSync } from "fs";
+import { dirname, resolve as resolve3 } from "path";
+function createBundleInputTracker() {
+  const inputs = new Set;
+  const plugin = {
+    name: "transone-build-inputs",
     setup(build) {
-      styles.clear();
-      runtimeFiles.clear();
-      candidates.clear();
-      owners.clear();
-      unknownSelector = false;
-      unknownInheritance = false;
-      build.onLoad({ filter: SOURCE_FILTER }, async ({ path }) => {
-        styles.delete(path);
-        const contents = await Bun.file(path).text();
-        if (!contents.includes("styleManager") && !contents.includes("extends"))
-          return;
-        const source = ts.createSourceFile(path, contents, ts.ScriptTarget.Latest, true, scriptKind(path));
-        const extracted = extractStyles(source);
-        if (extracted.bodies.length)
-          candidates.add(path);
-        for (const { selector, owner } of extracted.selectors) {
-          const selectorOwners = owners.get(selector) ?? new Map;
-          selectorOwners.set(`${path}:${owner}`, path);
-          owners.set(selector, selectorOwners);
-          if (selectorOwners.size > 1)
-            for (const file of selectorOwners.values())
-              runtimeFiles.add(file);
-        }
-        unknownSelector ||= extracted.unknownSelector;
-        unknownInheritance ||= extracted.unknownInheritance;
-        if (unknownSelector || unknownInheritance)
-          for (const file of candidates)
-            runtimeFiles.add(file);
-        if (!extracted.bodies.length || disabledFiles.has(path))
-          return;
-        styles.set(path, extracted.css);
-        let transformed = contents;
-        for (const body of extracted.bodies.sort((left, right) => right.getStart(source) - left.getStart(source))) {
-          transformed = transformed.slice(0, body.getStart(source)) + "{}" + transformed.slice(body.end);
-        }
-        return {
-          contents: transformed,
-          loader: sourceLoader(path),
-          resolveDir: dirname2(path)
-        };
+      build.onLoad({ filter: /.*/, namespace: "file" }, ({ path }) => {
+        inputs.add(resolve3(path));
+        return;
       });
     }
   };
-}
-function extractStyles(source) {
-  const bindings = collectBindings(source);
-  const unsafeBindings = findUnsafeBindings(source, bindings);
-  const classes = topLevelClasses(source);
-  const descendants = [];
-  walk(source, (node) => {
-    if (ts.isClassDeclaration(node) || ts.isClassExpression(node))
-      descendants.push(node);
-  });
-  const { names: componentNames, roots: componentRoots } = componentBindings(source, classes, unsafeBindings);
-  const selectorAnalysis = collectSelectors(classes, componentNames, bindings, unsafeBindings);
-  const css = [];
-  const bodies = [];
-  for (const declaration of classes) {
-    if (!extendsComponent(declaration, componentNames))
-      continue;
-    const methods = declaration.members.filter((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
-    if (methods.length !== 1)
-      continue;
-    const method = methods[0];
-    if (!method.body || method.parameters.length || method.asteriskToken || hasModifier(method, ts.SyntaxKind.StaticKeyword) || hasModifier(method, ts.SyntaxKind.AsyncKeyword) || ts.canHaveDecorators(method) && ts.getDecorators(method)?.length || ts.canHaveDecorators(declaration) && ts.getDecorators(declaration)?.length || hasManagerAccessOutside(declaration, method) || hasUnsafeAncestor(declaration, classes, componentRoots) || hasUnsafeDescendant(declaration, descendants))
-      continue;
-    const entries = new Map;
-    let safe = true;
-    for (const statement of method.body.statements) {
-      if (ts.isEmptyStatement(statement))
-        continue;
-      if (!ts.isExpressionStatement(statement)) {
-        safe = false;
-        break;
-      }
-      for (const expression of splitComma(statement.expression)) {
-        const entry = readAddStyle(expression, bindings, unsafeBindings, declaration);
-        if (!entry) {
-          safe = false;
-          break;
-        }
-        entries.set(entry.name, entry.style);
-      }
-      if (!safe)
-        break;
-    }
-    if (!safe || !entries.size)
-      continue;
-    const rendered = [...entries.values()].map(renderStyle).join("");
-    if (hasRelativeResource(rendered))
-      continue;
-    css.push(rendered);
-    bodies.push(method.body);
-  }
   return {
-    css: bodies.length ? ROOT_RPX_RULE + `
-` + css.join(`
-`) : "",
-    bodies,
-    ...selectorAnalysis,
-    unknownInheritance: hasUnknownUnsafeAncestor(descendants, componentRoots, bindings)
-  };
-}
-function collectSelectors(classes, componentNames, bindings, unsafe) {
-  const selectors = [];
-  let unknownSelector = false;
-  for (const declaration of classes) {
-    if (!extendsComponent(declaration, componentNames))
-      continue;
-    const method = declaration.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
-    if (!method?.body)
-      continue;
-    let calls = 0;
-    walk(declaration, (node) => {
-      if (!ts.isCallExpression(node) || !isAddStyleCall(node))
-        return;
-      calls++;
-      const options = node.arguments[1] && unwrap(node.arguments[1]);
-      let selector;
-      let hover = false;
-      if (options && ts.isObjectLiteralExpression(options)) {
-        const evaluate = (expression) => staticValue(expression, bindings, unsafe, declaration.name?.text);
-        selector = objectMember(options, "selector", evaluate).value;
-        const hoverMember = objectMember(options, "hover", evaluate);
-        hover = hoverMember.present && (hoverMember.value === undefined || !!hoverMember.value);
-      } else if (options) {
-        const value = staticValue(options, bindings, unsafe, declaration.name?.text);
-        if (isRecord2(value)) {
-          selector = value.selector;
-          hover = !!value.hover;
+    plugin,
+    paths(result) {
+      for (const [path, input] of Object.entries(result.metafile?.inputs ?? {})) {
+        const file = resolve3(path);
+        if (!existsSync2(file))
+          continue;
+        inputs.add(file);
+        for (const dependency of input.imports) {
+          const resolved = resolve3(dependency.path);
+          if (existsSync2(resolved))
+            inputs.add(resolved);
+          try {
+            const imported = Bun.resolveSync(dependency.original ?? dependency.path, dirname(file));
+            if (existsSync2(imported))
+              inputs.add(imported);
+          } catch {}
         }
       }
-      if (typeof selector !== "string") {
-        unknownSelector = true;
-        return;
-      }
-      const items = splitSelectorList(selector);
-      const hoverItems = hover ? splitSelectorList(selector + ":hover") : [];
-      if (!items || !hoverItems) {
-        unknownSelector = true;
-        return;
-      }
-      for (const item of [...items, ...hoverItems]) {
-        selectors.push({
-          selector: item,
-          owner: String(declaration.getStart())
-        });
-      }
-    });
-    if (!calls && method.body.statements.some((statement) => !ts.isEmptyStatement(statement)))
-      unknownSelector = true;
-  }
-  return { selectors, unknownSelector };
-}
-function objectMember(object, key, evaluate) {
-  let result = {
-    value: undefined,
-    present: false
-  };
-  for (const property of object.properties) {
-    if (ts.isSpreadAssignment(property)) {
-      const value = evaluate(property.expression);
-      if (!isRecord2(value))
-        result = { value: undefined, present: true };
-      else if (Object.prototype.hasOwnProperty.call(value, key))
-        result = { value: value[key], present: true };
-      continue;
-    }
-    const name = ts.isComputedPropertyName(property.name) ? evaluate(property.name.expression) : ts.isIdentifier(property.name) || ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ? property.name.text : undefined;
-    if (name === undefined) {
-      result = { value: undefined, present: true };
-      continue;
-    }
-    if (name !== key)
-      continue;
-    result = {
-      value: ts.isPropertyAssignment(property) ? evaluate(property.initializer) : ts.isShorthandPropertyAssignment(property) ? evaluate(property.name) : undefined,
-      present: true
-    };
-  }
-  return result;
-}
-function hasUnknownUnsafeAncestor(classes, roots, bindings) {
-  const reachesUnknown = (name, seen) => {
-    if (!name || seen.has(name))
-      return true;
-    if (roots.has(name))
-      return false;
-    seen.add(name);
-    const ancestor = classes.find((declaration) => classBinding(declaration) === name);
-    if (ancestor) {
-      if (!ancestor.heritageClauses?.some((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword))
-        return false;
-      return reachesUnknown(baseName(ancestor), seen);
-    }
-    const initializer = bindings.get(name)?.expression;
-    if (initializer) {
-      const alias = unwrap(initializer);
-      if (ts.isIdentifier(alias))
-        return reachesUnknown(alias.text, seen);
-      if (ts.isPropertyAccessExpression(alias) && ts.isIdentifier(alias.expression))
-        return reachesUnknown(`${alias.expression.text}.${alias.name.text}`, seen);
-    }
-    return true;
-  };
-  return classes.some((declaration) => {
-    if (!declaration.heritageClauses?.some((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword))
-      return false;
-    let unsafe = declaration.members.some((member) => memberName(member) === "styleManager");
-    walk(declaration, (node) => {
-      if (unsafeManagerAccess(node))
-        unsafe = true;
-    });
-    return unsafe && reachesUnknown(baseName(declaration), new Set);
-  });
-}
-function splitSelectorList(selector) {
-  const items = [];
-  const delimiters = [];
-  let quote;
-  let escaped = false;
-  let start = 0;
-  for (let index = 0;index < selector.length; index++) {
-    const character = selector[index];
-    if (escaped) {
-      escaped = false;
-      continue;
-    }
-    if (character === "\\") {
-      escaped = true;
-      continue;
-    }
-    if (quote) {
-      if (character === quote)
-        quote = undefined;
-      continue;
-    }
-    if (character === '"' || character === "'") {
-      quote = character;
-      continue;
-    }
-    if (character === "/" && selector[index + 1] === "*" || character === "{" || character === "}")
-      return;
-    if (character === "(" || character === "[") {
-      delimiters.push(character);
-    } else if (character === ")" || character === "]") {
-      if (delimiters.pop() !== (character === ")" ? "(" : "["))
-        return;
-    } else if (character === "," && delimiters.length === 0) {
-      const item2 = selector.slice(start, index).trim();
-      if (!item2)
-        return;
-      items.push(item2);
-      start = index + 1;
-    }
-  }
-  if (quote || escaped || delimiters.length)
-    return;
-  const item = selector.slice(start).trim();
-  return item ? [...items, item] : undefined;
-}
-function sourceLoader(path) {
-  const extension = extname(path);
-  return extension === ".tsx" ? "tsx" : extension === ".jsx" ? "jsx" : extension === ".ts" ? "ts" : "js";
-}
-function scriptKind(path) {
-  const loader = sourceLoader(path);
-  return loader === "tsx" ? ts.ScriptKind.TSX : loader === "jsx" ? ts.ScriptKind.JSX : loader === "ts" ? ts.ScriptKind.TS : ts.ScriptKind.JS;
-}
-function memberName(member) {
-  return member.name && (ts.isIdentifier(member.name) || ts.isStringLiteral(member.name)) ? member.name.text : undefined;
-}
-function hasModifier(node, kind) {
-  return ts.canHaveModifiers(node) && !!ts.getModifiers(node)?.some((modifier) => modifier.kind === kind);
-}
-function topLevelClasses(source) {
-  const classes = [];
-  for (const statement of source.statements) {
-    if (ts.isClassDeclaration(statement))
-      classes.push(statement);
-    if (ts.isVariableStatement(statement)) {
-      for (const declaration of statement.declarationList.declarations) {
-        if (declaration.initializer && ts.isClassExpression(declaration.initializer))
-          classes.push(declaration.initializer);
-      }
-    }
-  }
-  return classes;
-}
-function classBinding(declaration) {
-  const parent = declaration.parent;
-  return ts.isVariableDeclaration(parent) && ts.isIdentifier(parent.name) ? parent.name.text : declaration.name?.text;
-}
-function componentBindings(source, classes, unsafe) {
-  const names = new Set;
-  for (const statement of source.statements) {
-    if (ts.isVariableStatement(statement)) {
-      for (const declaration of statement.declarationList.declarations) {
-        const initializer = declaration.initializer && unwrap(declaration.initializer);
-        if (!initializer)
-          continue;
-        if (isTransoneRequire(initializer)) {
-          if (ts.isIdentifier(declaration.name) && !unsafe.has(declaration.name.text))
-            names.add(`${declaration.name.text}.Component`);
-          if (ts.isObjectBindingPattern(declaration.name)) {
-            for (const binding of declaration.name.elements) {
-              const imported = binding.propertyName ?? binding.name;
-              if (ts.isIdentifier(imported) && imported.text === "Component" && ts.isIdentifier(binding.name) && !binding.initializer && !binding.dotDotDotToken && !unsafe.has(binding.name.text))
-                names.add(binding.name.text);
+      if (!result.metafile) {
+        for (const file of [...inputs]) {
+          if (!/\.[cm]?[jt]sx?$/i.test(file))
+            continue;
+          const loader = file.endsWith(".tsx") ? "tsx" : file.endsWith(".jsx") ? "jsx" : /\.[cm]?ts$/.test(file) ? "ts" : "js";
+          try {
+            for (const dependency of new Bun.Transpiler({ loader }).scanImports(readFileSync(file, "utf8"))) {
+              try {
+                const path = Bun.resolveSync(dependency.path, dirname(file));
+                if (existsSync2(path))
+                  inputs.add(path);
+              } catch {}
             }
-          }
-        } else if (ts.isPropertyAccessExpression(initializer) && initializer.name.text === "Component" && isTransoneRequire(initializer.expression) && ts.isIdentifier(declaration.name) && !unsafe.has(declaration.name.text))
-          names.add(declaration.name.text);
-      }
-    }
-    if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== "transone" || statement.importClause?.isTypeOnly)
-      continue;
-    const named = statement.importClause?.namedBindings;
-    if (named && ts.isNamedImports(named)) {
-      for (const binding of named.elements) {
-        if (!binding.isTypeOnly && (binding.propertyName?.text ?? binding.name.text) === "Component")
-          names.add(binding.name.text);
-      }
-    } else if (named && ts.isNamespaceImport(named))
-      names.add(`${named.name.text}.Component`);
-  }
-  const managers = new Set(classes.filter((declaration) => isBundledStyleManager(declaration, source)).map(classBinding));
-  for (const declaration of classes) {
-    if (!["mount", "mountToNode", "update", "unmount"].every((name2) => declaration.members.some((member) => memberName(member) === name2)))
-      continue;
-    const constructor = declaration.members.find((member) => ts.isConstructorDeclaration(member));
-    if (!constructor?.body)
-      continue;
-    let createsManager = 0;
-    let unsafeConstructor = false;
-    let initializesState = false;
-    let initializesStyles = false;
-    walk(constructor.body, (node) => {
-      if (unsafeManagerAccess(node)) {
-        const assignment = node.parent;
-        if (thisProperty(node) === "styleManager" && ts.isBinaryExpression(assignment) && assignment.operatorToken.kind === ts.SyntaxKind.EqualsToken && assignment.left === node && ts.isNewExpression(assignment.right) && ts.isIdentifier(assignment.right.expression) && managers.has(assignment.right.expression.text))
-          createsManager++;
-        else
-          unsafeConstructor = true;
-      }
-      if (ts.isCallExpression(node)) {
-        if (thisProperty(node.expression) === "initState")
-          initializesState = true;
-        if (thisProperty(node.expression) === "initStyles")
-          initializesStyles = true;
-      }
-    });
-    const name = classBinding(declaration);
-    if (createsManager === 1 && !unsafeConstructor && initializesState && initializesStyles && name)
-      names.add(name);
-  }
-  const roots = new Set(names);
-  let changed = true;
-  while (changed) {
-    changed = false;
-    for (const declaration of classes) {
-      const name = classBinding(declaration);
-      if (name && !names.has(name) && extendsComponent(declaration, names)) {
-        names.add(name);
-        changed = true;
-      }
-    }
-  }
-  return { names, roots };
-}
-function isBundledStyleManager(declaration, source) {
-  const method = (name) => declaration.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === name);
-  const mutatesMap = (name, operation, count) => {
-    const member = method(name);
-    if (!member?.body || member.parameters.length !== count)
-      return false;
-    const calls = [];
-    for (const statement of member.body.statements) {
-      if (!ts.isExpressionStatement(statement))
-        return false;
-      calls.push(...splitComma(statement.expression));
-    }
-    if (calls.length !== 2 || !ts.isCallExpression(calls[0]) || !ts.isCallExpression(calls[1]))
-      return false;
-    const write = calls[0];
-    const update = calls[1];
-    return ts.isPropertyAccessExpression(write.expression) && write.expression.name.text === operation && thisProperty(write.expression.expression) === "styles" && write.arguments.length === count && write.arguments.every((argument, index) => ts.isIdentifier(argument) && ts.isIdentifier(member.parameters[index].name) && argument.text === member.parameters[index].name.text) && thisProperty(update.expression) === "updateStyles" && update.arguments.length === 0;
-  };
-  if (!mutatesMap("addStyle", "set", 2) || !mutatesMap("removeStyle", "delete", 1) || !method("clearStyles") || !method("destroy") || !method("convertToCSS") || !method("updateStyles"))
-    return false;
-  const ensure = method("ensureStyleElement");
-  if (!ensure?.body)
-    return false;
-  let createsStyleElement = false;
-  walk(ensure.body, (node) => {
-    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && ts.isIdentifier(node.expression.expression) && node.expression.expression.text === "document" && node.expression.name.text === "createElement" && node.arguments.length === 1 && ts.isStringLiteral(node.arguments[0]) && node.arguments[0].text === "style")
-      createsStyleElement = true;
-  });
-  if (!createsStyleElement)
-    return false;
-  let hasRpxRule = false;
-  walk(source, (node) => {
-    if (ts.isStringLiteral(node) && node.text === ROOT_RPX_RULE)
-      hasRpxRule = true;
-  });
-  return hasRpxRule;
-}
-function isTransoneRequire(node) {
-  return ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "require" && node.arguments.length === 1 && ts.isStringLiteral(node.arguments[0]) && node.arguments[0].text === "transone";
-}
-function baseName(declaration) {
-  const base = declaration.heritageClauses?.find((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword)?.types[0]?.expression;
-  if (base && ts.isIdentifier(base))
-    return base.text;
-  if (base && ts.isPropertyAccessExpression(base) && ts.isIdentifier(base.expression))
-    return `${base.expression.text}.${base.name.text}`;
-  return;
-}
-function extendsComponent(declaration, names) {
-  const name = baseName(declaration);
-  return name !== undefined && names.has(name);
-}
-function thisProperty(expression) {
-  if (ts.isPropertyAccessExpression(expression) && expression.expression.kind === ts.SyntaxKind.ThisKeyword)
-    return expression.name.text;
-  if (ts.isElementAccessExpression(expression) && expression.expression.kind === ts.SyntaxKind.ThisKeyword && expression.argumentExpression && ts.isStringLiteral(expression.argumentExpression))
-    return expression.argumentExpression.text;
-  return;
-}
-function hasManagerAccessOutside(declaration, method) {
-  let unsafe = false;
-  for (const member of declaration.members) {
-    if (member === method)
-      continue;
-    if (memberName(member) === "styleManager")
-      return true;
-    walk(member, (node) => {
-      if (unsafeManagerAccess(node))
-        unsafe = true;
-    });
-  }
-  return unsafe;
-}
-function unsafeManagerAccess(node) {
-  if (thisProperty(node) === "styleManager")
-    return true;
-  if (ts.isElementAccessExpression(node) && node.expression.kind === ts.SyntaxKind.ThisKeyword)
-    return true;
-  if (node.kind !== ts.SyntaxKind.ThisKeyword)
-    return false;
-  const parent = node.parent;
-  return !(ts.isPropertyAccessExpression(parent) && parent.expression === node) && !(ts.isElementAccessExpression(parent) && parent.expression === node);
-}
-function hasUnsafeAncestor(declaration, classes, roots, seen = new Set) {
-  const name = baseName(declaration);
-  if (!name || roots.has(name) || seen.has(name))
-    return false;
-  seen.add(name);
-  const ancestor = classes.find((candidate) => classBinding(candidate) === name);
-  if (!ancestor)
-    return false;
-  const initStyles = ancestor.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
-  let unsafe = false;
-  for (const member of ancestor.members) {
-    if (member === initStyles)
-      continue;
-    walk(member, (node) => {
-      if (unsafeManagerAccess(node))
-        unsafe = true;
-    });
-  }
-  return unsafe || hasUnsafeAncestor(ancestor, classes, roots, seen);
-}
-function hasUnsafeDescendant(declaration, classes, seen = new Set) {
-  const name = classBinding(declaration);
-  if (!name || seen.has(name))
-    return false;
-  seen.add(name);
-  return classes.some((child) => {
-    if (baseName(child) !== name)
-      return false;
-    let unsafe = false;
-    walk(child, (node) => {
-      if (unsafeManagerAccess(node))
-        unsafe = true;
-    });
-    return unsafe || hasUnsafeDescendant(child, classes, seen);
-  });
-}
-function collectBindings(source) {
-  const bindings = new Map;
-  for (const statement of source.statements) {
-    if (!ts.isVariableStatement(statement))
-      continue;
-    for (const declaration of statement.declarationList.declarations) {
-      if (ts.isIdentifier(declaration.name) && declaration.initializer) {
-        bindings.set(declaration.name.text, {
-          expression: declaration.initializer,
-          declaration,
-          exported: hasModifier(statement, ts.SyntaxKind.ExportKeyword)
-        });
-      }
-    }
-  }
-  return bindings;
-}
-function rootIdentifier(node) {
-  if (ts.isIdentifier(node))
-    return node.text;
-  if (ts.isPropertyAccessExpression(node) || ts.isElementAccessExpression(node))
-    return rootIdentifier(node.expression);
-  return;
-}
-function findUnsafeBindings(source, bindings) {
-  const unsafe = new Set;
-  const markWritten = (node) => {
-    const name = rootIdentifier(node);
-    if (name) {
-      unsafe.add(name);
-      return;
-    }
-    if (ts.isPropertyAssignment(node)) {
-      markWritten(node.initializer);
-      return;
-    }
-    ts.forEachChild(node, markWritten);
-  };
-  walk(source, (node) => {
-    if (ts.isBinaryExpression(node) && node.operatorToken.kind >= ts.SyntaxKind.FirstAssignment && node.operatorToken.kind <= ts.SyntaxKind.LastAssignment) {
-      markWritten(node.left);
-    }
-    if ((ts.isPrefixUnaryExpression(node) || ts.isPostfixUnaryExpression(node)) && (node.operator === ts.SyntaxKind.PlusPlusToken || node.operator === ts.SyntaxKind.MinusMinusToken)) {
-      const name = rootIdentifier(node.operand);
-      if (name)
-        unsafe.add(name);
-    }
-    if (ts.isDeleteExpression(node)) {
-      const name = rootIdentifier(node.expression);
-      if (name)
-        unsafe.add(name);
-    }
-    if (ts.isForOfStatement(node) || ts.isForInStatement(node)) {
-      markWritten(node.initializer);
-    }
-  });
-  for (const [name, binding] of bindings) {
-    if (!containsObject(binding.expression, bindings, new Set))
-      continue;
-    if (binding.exported) {
-      unsafe.add(name);
-      continue;
-    }
-    walk(source, (node) => {
-      if (!ts.isIdentifier(node) || node.text !== name || !isReference(node))
-        return;
-      let parent = node.parent;
-      while (parent && !ts.isStatement(parent) && !ts.isVariableDeclaration(parent) && !ts.isCallExpression(parent) && !ts.isExportSpecifier(parent))
-        parent = parent.parent;
-      if (parent && ts.isCallExpression(parent) && isAddStyleCall(parent))
-        return;
-      if (parent && ts.isVariableDeclaration(parent) && ts.isVariableDeclarationList(parent.parent) && ts.isVariableStatement(parent.parent.parent) && parent.parent.parent.parent === source)
-        return;
-      unsafe.add(name);
-    });
-  }
-  let changed = true;
-  while (changed) {
-    changed = false;
-    for (const [name, binding] of bindings) {
-      const dependencies = new Set;
-      walk(binding.expression, (node) => {
-        if (ts.isIdentifier(node) && isReference(node) && bindings.has(node.text))
-          dependencies.add(node.text);
-      });
-      for (const dependency of dependencies) {
-        if (unsafe.has(dependency) && !unsafe.has(name)) {
-          unsafe.add(name);
-          changed = true;
+          } catch {}
         }
-        if (unsafe.has(name) && containsObject(bindings.get(dependency).expression, bindings, new Set) && !unsafe.has(dependency)) {
-          unsafe.add(dependency);
-          changed = true;
-        }
-      }
-    }
-  }
-  return unsafe;
-}
-function isReference(node) {
-  const parent = node.parent;
-  if ((ts.isVariableDeclaration(parent) || ts.isParameter(parent) || ts.isBindingElement(parent)) && parent.name === node)
-    return false;
-  if ((ts.isPropertyAccessExpression(parent) || ts.isPropertyAssignment(parent) || ts.isMethodDeclaration(parent) || ts.isPropertyDeclaration(parent)) && parent.name === node)
-    return false;
-  return true;
-}
-function containsObject(expression, bindings, seen) {
-  const node = unwrap(expression);
-  if (ts.isObjectLiteralExpression(node) || ts.isArrayLiteralExpression(node))
-    return true;
-  if (ts.isIdentifier(node) && !seen.has(node.text)) {
-    seen.add(node.text);
-    const binding = bindings.get(node.text);
-    return !!binding && containsObject(binding.expression, bindings, seen);
-  }
-  return false;
-}
-function unwrap(expression) {
-  while (ts.isParenthesizedExpression(expression) || ts.isAsExpression(expression) || ts.isTypeAssertionExpression(expression) || ts.isNonNullExpression(expression) || ts.isSatisfiesExpression(expression))
-    expression = expression.expression;
-  return expression;
-}
-function splitComma(expression) {
-  const node = unwrap(expression);
-  return ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.CommaToken ? [...splitComma(node.left), ...splitComma(node.right)] : [node];
-}
-function isAddStyleCall(node) {
-  const callee = node.expression;
-  return !node.questionDotToken && ts.isPropertyAccessExpression(callee) && !callee.questionDotToken && callee.name.text === "addStyle" && thisProperty(callee.expression) === "styleManager";
-}
-function readAddStyle(expression, bindings, unsafe, declaration) {
-  if (!ts.isCallExpression(expression) || !isAddStyleCall(expression) || expression.arguments.length !== 2)
-    return;
-  const evaluate = (node) => staticValue(node, bindings, unsafe, declaration.name?.text);
-  const name = evaluate(expression.arguments[0]);
-  const options = evaluate(expression.arguments[1]);
-  if (typeof name !== "string" || !isRecord2(options) || typeof options.selector !== "string" || !isProperties(options.properties) || Object.keys(options).some((key) => !["selector", "properties", "hover", "media"].includes(key)))
-    return;
-  if (options.hover !== undefined && !isProperties(options.hover))
-    return;
-  if (options.media !== undefined && (!isRecord2(options.media) || !Object.values(options.media).every(isProperties)))
-    return;
-  return { name, style: options };
-}
-function staticValue(expression, bindings, unsafe, className, seen = new Set) {
-  const node = unwrap(expression);
-  const evaluate = (value) => staticValue(value, bindings, unsafe, className, seen);
-  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node))
-    return node.text;
-  if (ts.isNumericLiteral(node))
-    return Number(node.text);
-  if (node.kind === ts.SyntaxKind.TrueKeyword)
-    return true;
-  if (node.kind === ts.SyntaxKind.FalseKeyword)
-    return false;
-  if (node.kind === ts.SyntaxKind.NullKeyword)
-    return null;
-  if (ts.isIdentifier(node)) {
-    const binding = bindings.get(node.text);
-    if (!binding || unsafe.has(node.text) || seen.has(node.text) || node.text === className || identifierIsShadowed(node) || binding.declaration.getStart() >= node.getStart())
-      return;
-    const next = new Set(seen);
-    next.add(node.text);
-    return staticValue(binding.expression, bindings, unsafe, className, next);
-  }
-  if (ts.isTemplateExpression(node)) {
-    let value = node.head.text;
-    for (const span of node.templateSpans) {
-      const item = evaluate(span.expression);
-      if (item === undefined || isRecord2(item))
-        return;
-      value += String(item) + span.literal.text;
-    }
-    return value;
-  }
-  if (ts.isObjectLiteralExpression(node)) {
-    const result = Object.create(null);
-    for (const property of node.properties) {
-      if (ts.isShorthandPropertyAssignment(property)) {
-        const value2 = evaluate(property.name);
-        if (value2 === undefined || property.objectAssignmentInitializer)
-          return;
-        result[property.name.text] = value2;
-        continue;
       }
-      if (!ts.isPropertyAssignment(property))
-        return;
-      const name = ts.isComputedPropertyName(property.name) ? evaluate(property.name.expression) : ts.isIdentifier(property.name) || ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ? property.name.text : undefined;
-      const value = evaluate(property.initializer);
-      if (typeof name !== "string" && typeof name !== "number" || name === "__proto__" || value === undefined)
-        return;
-      result[String(name)] = value;
+      return [...inputs];
     }
-    return result;
-  }
-  if (ts.isPropertyAccessExpression(node) || ts.isElementAccessExpression(node)) {
-    const object = evaluate(node.expression);
-    const key = ts.isPropertyAccessExpression(node) ? node.name.text : node.argumentExpression && evaluate(node.argumentExpression);
-    if (isRecord2(object) && (typeof key === "string" || typeof key === "number"))
-      return object[String(key)];
-    return;
-  }
-  if (ts.isPrefixUnaryExpression(node)) {
-    const operand = evaluate(node.operand);
-    if (operand === undefined || isRecord2(operand))
-      return;
-    if (node.operator === ts.SyntaxKind.ExclamationToken)
-      return !operand;
-    if (typeof operand !== "number")
-      return;
-    if (node.operator === ts.SyntaxKind.MinusToken)
-      return -operand;
-    if (node.operator === ts.SyntaxKind.PlusToken)
-      return operand;
-  }
-  if (ts.isConditionalExpression(node)) {
-    const condition = evaluate(node.condition);
-    return condition === undefined || isRecord2(condition) ? undefined : evaluate(condition ? node.whenTrue : node.whenFalse);
-  }
-  if (ts.isBinaryExpression(node)) {
-    const left = evaluate(node.left);
-    const right = evaluate(node.right);
-    if (left === undefined || right === undefined || isRecord2(left) || isRecord2(right))
-      return;
-    if (node.operatorToken.kind === ts.SyntaxKind.PlusToken) {
-      if (typeof left === "string" || typeof right === "string")
-        return String(left) + String(right);
-      if (typeof left === "number" && typeof right === "number")
-        return left + right;
-      return;
-    }
-    if (typeof left !== "number" || typeof right !== "number")
-      return;
-    switch (node.operatorToken.kind) {
-      case ts.SyntaxKind.MinusToken:
-        return left - right;
-      case ts.SyntaxKind.AsteriskToken:
-        return left * right;
-      case ts.SyntaxKind.SlashToken:
-        return left / right;
-      case ts.SyntaxKind.PercentToken:
-        return left % right;
-      case ts.SyntaxKind.AsteriskAsteriskToken:
-        return left ** right;
-    }
-  }
-  return;
-}
-function identifierIsShadowed(identifier) {
-  for (let parent = identifier.parent;parent && !ts.isSourceFile(parent); parent = parent.parent) {
-    if (!ts.isFunctionLike(parent))
-      continue;
-    let shadowed = false;
-    walk(parent, (node) => {
-      if ((ts.isVariableDeclaration(node) || ts.isParameter(node) || ts.isBindingElement(node) || ts.isClassDeclaration(node) || ts.isFunctionDeclaration(node)) && node.name && ts.isIdentifier(node.name) && node.name.text === identifier.text)
-        shadowed = true;
-    });
-    if (shadowed)
-      return true;
-  }
-  return false;
-}
-function isRecord2(value) {
-  return typeof value === "object" && value !== null;
-}
-function isProperties(value) {
-  return isRecord2(value) && Object.values(value).every((item) => typeof item === "string" || typeof item === "number" && Number.isFinite(item));
-}
-function renderProperties(properties) {
-  return Object.entries(properties).map(([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${String(value).replace(RPX_PATTERN, (_match, number) => `calc(${number} * var(--tu-rpx))`)};`).join(`
-`);
-}
-function renderStyle(style) {
-  let css = `${style.selector} {
-${renderProperties(style.properties)}
-}
-`;
-  if (style.hover)
-    css += `${style.selector}:hover {
-${renderProperties(style.hover)}
-}
-`;
-  for (const [query, properties] of Object.entries(style.media ?? {})) {
-    css += `@media ${query} {
-${style.selector} {
-${renderProperties(properties)}
-}
-}
-`;
-  }
-  return css;
-}
-function hasRelativeResource(css) {
-  if (css.includes("\\") || /@import\b|(?:-webkit-)?image(?:-set)?\s*\(/i.test(css))
-    return true;
-  for (const match of css.matchAll(/url\s*\(\s*(?:(["'])(.*?)\1|([^)]*))\s*\)/gi)) {
-    const url = (match[2] ?? match[3] ?? "").trim();
-    if (!/^(?:\/|[a-z][a-z\d+.-]*:)/i.test(url))
-      return true;
-  }
-  return false;
-}
-function walk(node, visit) {
-  visit(node);
-  ts.forEachChild(node, (child) => walk(child, visit));
+  };
 }
 
 // src/web-bundle.ts
-import { resolve as resolve4 } from "path";
-async function buildWebBundle(options) {
+async function buildWebBundle(options, components) {
   const { outdir, ...inMemoryOptions } = options;
-  let stylesPlugin = createWebStylesPlugin();
-  let result = await Bun.build({ ...inMemoryOptions, plugins: [stylesPlugin] });
+  const inputs = createBundleInputTracker();
+  let stylesPlugin = createWebStylesPlugin(new Set, components?.transform);
+  const buildOptions = {
+    ...inMemoryOptions,
+    metafile: true,
+    ...components?.active ? { entrypoints: [components.entrypoint] } : {}
+  };
+  const plugins = () => [
+    inputs.plugin,
+    ...inMemoryOptions.plugins ?? [],
+    ...components?.active ? [components.plugin] : [],
+    stylesPlugin
+  ];
+  let result = await Bun.build({ ...buildOptions, plugins: plugins() });
   if (result.success && stylesPlugin.styles.size && stylesPlugin.runtimeFiles.size) {
-    stylesPlugin = createWebStylesPlugin(stylesPlugin.runtimeFiles);
-    result = await Bun.build({ ...inMemoryOptions, plugins: [stylesPlugin] });
+    stylesPlugin = createWebStylesPlugin(stylesPlugin.runtimeFiles, components?.transform);
+    result = await Bun.build({ ...buildOptions, plugins: plugins() });
   }
   const outputs = [];
   if (result.success) {
     for (const output of result.outputs) {
-      const path = resolve4(outdir, output.path);
+      const path = buildOutputPath(outdir, output.path);
       const contents = await output.arrayBuffer();
       await Bun.write(path, contents);
       outputs.push({ path, kind: output.kind, type: output.type });
@@ -1526,7 +747,8 @@ async function buildWebBundle(options) {
   }
   return {
     result: { success: result.success, logs: result.logs, outputs },
-    styles: stylesPlugin.styles
+    styles: stylesPlugin.styles,
+    inputPaths: inputs.paths(result)
   };
 }
 
@@ -1541,16 +763,25 @@ class WebTarget {
     for (const entry of entries) {
       await assertSafeSubdirectoryDoesNotContain(config.root, config.build.outDir, entry, INVALID_OUTPUT_DIRECTORY_MESSAGE);
     }
-    const { renderProjectHtml } = await import("./project-ybacfze8.js");
+    const contexts = new Map(entries.map((entry) => [entry, createWebComponentContext(config, entry)]));
+    const protectedPaths = buildInputPaths(config, entries, [...contexts.values()].flatMap((context) => context.sourcePaths));
+    return withBuildOutput({
+      root: config.root,
+      outDir: config.build.outDir,
+      protectedPaths,
+      requireProjectSubdirectory: true
+    }, (outDir) => this.buildOutput({ ...config, build: { ...config.build, outDir } }, contexts, protectedPaths));
+  }
+  async buildOutput(config, contexts, protectedPaths) {
+    const entries = [...new Set(Object.values(config.pages))];
+    const { renderProjectHtml } = await import("./project-6tft5e77.js");
     for (const [route, entry] of Object.entries(config.pages)) {
-      await renderProjectHtml(config, {}, entry, route);
+      await renderProjectHtml(config, {}, entry, route, contexts.get(entry));
     }
-    await rm2(config.build.outDir, { recursive: true, force: true });
-    await mkdir(config.build.outDir, { recursive: true });
     const builtByEntry = new Map;
     const failures = [];
     for (const entry of entries) {
-      const built = await buildPage(config, entry);
+      const built = await buildPage(config, entry, contexts.get(entry), protectedPaths);
       if (typeof built === "string") {
         failures.push(built);
         continue;
@@ -1579,9 +810,9 @@ class WebTarget {
           type: "module",
           src: toAssetUrl(config.build.outDir, pageHtmlPath, asset)
         }))
-      }, page.entry, route);
+      }, page.entry, route, contexts.get(entry));
       const { html, assets: documentStyles } = await emitDocumentStyles(rendered, config.build.outDir, (asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset), page.stylesheetAssets.map((asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset)), page.componentStylesheetAssets.map((asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset)));
-      await mkdir(dirname3(pageHtmlPath), { recursive: true });
+      await mkdir(dirname2(pageHtmlPath), { recursive: true });
       await writeFile2(pageHtmlPath, html);
       assetsBuilt.push(...page.assets, ...documentStyles, pageHtmlPath);
     }
@@ -1592,7 +823,7 @@ class WebTarget {
     };
   }
 }
-async function buildPage(config, entry) {
+async function buildPage(config, entry, components, protectedPaths = []) {
   let result;
   let styles;
   try {
@@ -1604,15 +835,16 @@ async function buildPage(config, entry) {
       minify: process.env.TRANSONE_MINIFY !== "0",
       naming: { entry: "[name]-[hash].[ext]", chunk: "[name]-[hash].[ext]" },
       throw: false
-    });
+    }, components);
+    protectedPaths.push(...bundle.inputPaths);
     result = bundle.result;
     styles = bundle.styles;
   } catch (error) {
     return pageFailureReason(entry, [errorMessage(error)]);
   }
-  const assets = result.outputs.map((output) => resolve5(output.path));
-  const javascriptAssets = result.outputs.filter(isEntryJavaScriptOutput).map((output) => resolve5(output.path));
-  const stylesheetAssets = result.outputs.filter(isStylesheetOutput).map((output) => resolve5(output.path));
+  const assets = result.outputs.map((output) => resolve4(output.path));
+  const javascriptAssets = result.outputs.filter(isEntryJavaScriptOutput).map((output) => resolve4(output.path));
+  const stylesheetAssets = result.outputs.filter(isStylesheetOutput).map((output) => resolve4(output.path));
   if (!result.success || assets.length === 0 || javascriptAssets.length === 0) {
     return pageFailureReason(entry, result.logs.map((log) => log.message), {
       success: result.success,
@@ -1649,21 +881,21 @@ ${failures.map((failure) => `- ${failure}`).join(`
 }
 function htmlPath(config, route) {
   if (route === "/") {
-    return resolve5(config.build.outDir, "index.html");
+    return buildOutputPath(config.build.outDir, "index.html");
   }
   const relativeRoute = route.replace(/^\/+/, "");
   if (config.build.directoryPages) {
-    return resolve5(config.build.outDir, relativeRoute, "index.html");
+    return buildOutputPath(config.build.outDir, `${relativeRoute}/index.html`);
   }
-  return resolve5(config.build.outDir, `${relativeRoute}.html`);
+  return buildOutputPath(config.build.outDir, `${relativeRoute}.html`);
 }
 function toAssetUrl(outDir, fromHtmlFile, asset) {
-  const fromOutDir = relative2(outDir, asset).split(sep2).join("/");
-  if (fromOutDir === "" || fromOutDir === ".." || fromOutDir.startsWith("../") || isAbsolute2(fromOutDir)) {
+  const fromOutDir = relative(outDir, asset).split(sep).join("/");
+  if (fromOutDir === "" || fromOutDir === ".." || fromOutDir.startsWith("../") || isAbsolute(fromOutDir)) {
     throw new Error(`Build asset must be inside the output directory: ${asset}`);
   }
-  const fromHtmlDir = dirname3(fromHtmlFile);
-  const assetPath = relative2(fromHtmlDir, asset).split(sep2).join("/");
+  const fromHtmlDir = dirname2(fromHtmlFile);
+  const assetPath = relative(fromHtmlDir, asset).split(sep).join("/");
   return `./${assetPath}`;
 }
 function errorMessage(error) {
@@ -1817,7 +1049,7 @@ class MpTarget {
     if (!config.mp) {
       throw new Error("Mini program build requires config.mp\uFF08\u8BF7\u5728 transone.config.ts \u914D\u7F6E mp \u5B57\u6BB5\uFF0C" + "\u5982 appId / pages / outDir\uFF09");
     }
-    const { buildMiniProgram } = await import("./build-mp-vk5ap2cw.js");
+    const { buildMiniProgram } = await import("./build-mp-y5pwahsy.js");
     return buildMiniProgram(config, this.dialect);
   }
 }
@@ -1827,9 +1059,9 @@ var mpBytedanceTarget = new MpTarget(MP_BYTEDANCE_DIALECT);
 var mpXiaohongshuTarget = new MpTarget(MP_XIAOHONGSHU_DIALECT);
 
 // src/app/build-app.ts
-import { cp, mkdir as mkdir2, rm as rm3, writeFile as writeFile3 } from "fs/promises";
-import { existsSync as existsSync3 } from "fs";
-import { dirname as dirname4, join, resolve as resolve6 } from "path";
+import { cp, mkdir as mkdir2, writeFile as writeFile3 } from "fs/promises";
+import { existsSync as existsSync4 } from "fs";
+import { dirname as dirname3, resolve as resolve5 } from "path";
 
 // src/app/errors.ts
 import { basename } from "path";
@@ -1838,15 +1070,591 @@ function nativeError(filePath, message) {
 }
 
 // src/app/analyze.ts
-import { existsSync as existsSync2, readFileSync } from "fs";
+import { existsSync as existsSync3, readFileSync as readFileSync2 } from "fs";
+
+// src/app/components.ts
+import ts from "typescript";
+import { realpathSync } from "fs";
 var CONTAINERS = new Set(["view", "main", "div"]);
 var TEXT = new Set(["text", "span", "p", "h1"]);
+var STYLES = new Set([
+  "color",
+  "backgroundColor",
+  "fontSize",
+  "fontWeight",
+  "padding",
+  "margin",
+  "width",
+  "height",
+  "borderRadius",
+  "textAlign"
+]);
+function fail(node, message) {
+  const source = node.getSourceFile();
+  const point = source.getLineAndCharacterOfPosition(node.getStart());
+  throw nativeError(`${source.fileName}`, `${point.line + 1}:${point.character + 1} ${message}`);
+}
+function unwrap(node) {
+  while (ts.isParenthesizedExpression(node) || ts.isAsExpression(node) || ts.isNonNullExpression(node) || ts.isSatisfiesExpression(node))
+    node = node.expression;
+  return node;
+}
+function name(node) {
+  return ts.isIdentifier(node) || ts.isStringLiteralLike(node) || ts.isNumericLiteral(node) ? node.text : fail(node, "\u53EA\u652F\u6301\u9759\u6001\u5C5E\u6027\u540D");
+}
+function property(node, key) {
+  const item = node.properties.find((p) => !ts.isSpreadAssignment(p) && name(p.name) === key);
+  if (!item)
+    return;
+  if (ts.isPropertyAssignment(item))
+    return item.initializer;
+  if (ts.isShorthandPropertyAssignment(item))
+    return item.name;
+  return fail(item, "\u53EA\u652F\u6301\u9759\u6001\u5BF9\u8C61\u5C5E\u6027");
+}
+function object(node, label) {
+  if (!node || !ts.isObjectLiteralExpression(unwrap(node))) {
+    if (node)
+      fail(node, `${label} \u5FC5\u987B\u662F\u9759\u6001\u5BF9\u8C61`);
+    throw new Error(`[transone app] \u7F3A\u5C11 ${label}`);
+  }
+  return unwrap(node);
+}
+function returnValue(member) {
+  const declaration = member.declaration;
+  if (!ts.isMethodDeclaration(declaration) || !declaration.body || declaration.parameters.length !== 0 || declaration.modifiers?.some((m) => m.kind === ts.SyntaxKind.AsyncKeyword) || declaration.body.statements.length !== 1 || !ts.isReturnStatement(declaration.body.statements[0]) || !declaration.body.statements[0].expression)
+    fail(declaration, `${declaration.name?.getText()} \u53EA\u652F\u6301\u5355\u4E2A\u9759\u6001 return \u8868\u8FBE\u5F0F`);
+  return declaration.body.statements[0].expression;
+}
+function isTopLevelStartup(call) {
+  function outer(node) {
+    let value = node;
+    while (value.parent && (ts.isParenthesizedExpression(value.parent) || ts.isAsExpression(value.parent) || ts.isNonNullExpression(value.parent) || ts.isSatisfiesExpression(value.parent)))
+      value = value.parent;
+    return value;
+  }
+  let expression = outer(call);
+  const access = expression.parent;
+  if (ts.isPropertyAccessExpression(access) && access.name.text === "mount" && ts.isCallExpression(access.parent) && access.parent.expression === access && !access.parent.arguments.length)
+    expression = outer(access.parent);
+  const parent = expression.parent;
+  if (ts.isExpressionStatement(parent) || ts.isExportAssignment(parent))
+    return ts.isSourceFile(parent.parent);
+  if (ts.isVariableDeclaration(parent) && parent.initializer === expression && ts.isIdentifier(parent.name) && ts.isVariableDeclarationList(parent.parent)) {
+    const statement = parent.parent.parent;
+    return ts.isVariableStatement(statement) && ts.isSourceFile(statement.parent);
+  }
+  return false;
+}
+function validateStaticMetadata(expression) {
+  const node = unwrap(expression);
+  if (ts.isStringLiteralLike(node) || ts.isNumericLiteral(node) || node.kind === ts.SyntaxKind.TrueKeyword || node.kind === ts.SyntaxKind.FalseKeyword || node.kind === ts.SyntaxKind.NullKeyword)
+    return;
+  if (ts.isObjectLiteralExpression(node)) {
+    const seen = new Set;
+    for (const item of node.properties) {
+      if (!ts.isPropertyAssignment(item))
+        fail(item, "\u539F\u751F createApp \u6587\u6863\u914D\u7F6E\u53EA\u652F\u6301\u9759\u6001\u5B57\u9762\u91CF\u5C5E\u6027");
+      const key = name(item.name);
+      if (seen.has(key))
+        fail(item, `\u539F\u751F createApp \u6587\u6863\u914D\u7F6E\u5B58\u5728\u91CD\u590D\u5C5E\u6027 ${key}`);
+      seen.add(key);
+      validateStaticMetadata(item.initializer);
+    }
+    return;
+  }
+  if (ts.isArrayLiteralExpression(node)) {
+    for (const value of node.elements)
+      validateStaticMetadata(value);
+    return;
+  }
+  fail(node, "\u539F\u751F createApp \u6587\u6863\u914D\u7F6E\u53EA\u652F\u6301\u9759\u6001\u5B57\u9762\u91CF\u8868\u8FBE\u5F0F");
+}
+function composeNativeScreen(entry, config, onSourcePaths) {
+  const index = createComponentIndex({
+    root: config.root,
+    entrypoints: [entry],
+    platform: config.platform,
+    ...config.components
+  });
+  onSourcePaths?.(index.sources.map((source2) => source2.fileName));
+  const source = index.sources.find((s) => realpathSync(s.fileName) === realpathSync(entry));
+  if (!source)
+    throw nativeError(entry, "\u6E90\u6587\u4EF6\u4E0D\u5B58\u5728");
+  const compiler = new NativeComposer(index);
+  const roots = [];
+  const startupCalls = [];
+  function findStartup(node) {
+    if (ts.isCallExpression(node) && compiler.frameworkCall(node, "createApp"))
+      startupCalls.push(node);
+    ts.forEachChild(node, findStartup);
+  }
+  findStartup(source);
+  function createdApp(expression, seen = new Set) {
+    const value = unwrap(expression);
+    if (seen.has(value))
+      return false;
+    seen.add(value);
+    if (ts.isCallExpression(value))
+      return compiler.frameworkCall(value, "createApp");
+    const declaration = index.symbolAt(value)?.valueDeclaration;
+    return !!declaration && ts.isVariableDeclaration(declaration) && !!declaration.initializer && createdApp(declaration.initializer, seen);
+  }
+  function rejectInstalledPlugins(node) {
+    if (ts.isFunctionLike(node) || ts.isClassLike(node))
+      return;
+    if (ts.isCallExpression(node)) {
+      const callee = unwrap(node.expression);
+      const receiver = ts.isPropertyAccessExpression(callee) ? callee.expression : ts.isElementAccessExpression(callee) ? callee.expression : undefined;
+      const method = ts.isPropertyAccessExpression(callee) ? callee.name.text : ts.isElementAccessExpression(callee) && ts.isStringLiteralLike(callee.argumentExpression) ? callee.argumentExpression.text : undefined;
+      if (method === "use" && receiver && (createdApp(receiver) || compiler.frameworkCall(node, "use")))
+        fail(node, "\u539F\u751F App \u4E0D\u652F\u6301\u8DEF\u7531\u6216\u63D2\u4EF6\u5B89\u88C5 app.use()");
+    }
+    ts.forEachChild(node, rejectInstalledPlugins);
+  }
+  rejectInstalledPlugins(source);
+  for (const call of startupCalls) {
+    if (!isTopLevelStartup(call))
+      fail(call, "\u539F\u751F createApp \u5FC5\u987B\u76F4\u63A5\u4F4D\u4E8E\u9876\u5C42\u542F\u52A8\u8BED\u53E5\uFF1B\u4E0D\u652F\u6301\u6761\u4EF6\u3001\u51FD\u6570\u6216\u52A8\u6001\u8868\u8FBE\u5F0F");
+    if (call.arguments.length !== 1)
+      fail(call, "\u539F\u751F createApp \u53EA\u652F\u6301\u4E00\u4E2A\u9759\u6001 options \u5BF9\u8C61");
+    const options = object(call.arguments[0], "createApp options");
+    const seen = new Set;
+    for (const option of options.properties) {
+      if (ts.isSpreadAssignment(option))
+        fail(option, "\u539F\u751F createApp options \u4E0D\u652F\u6301\u5BF9\u8C61\u5C55\u5F00");
+      if (!ts.isPropertyAssignment(option) && !ts.isShorthandPropertyAssignment(option))
+        fail(option, "\u539F\u751F createApp options \u53EA\u652F\u6301\u9759\u6001\u5C5E\u6027");
+      const key = name(option.name);
+      if (seen.has(key))
+        fail(option, `\u539F\u751F createApp options \u5B58\u5728\u91CD\u590D\u5C5E\u6027 ${key}`);
+      seen.add(key);
+      if (!["root", "rootProps", "document", "rootElement"].includes(key))
+        fail(option, `\u539F\u751F createApp \u4E0D\u652F\u6301 options.${key}`);
+      if (key === "document" || key === "rootElement")
+        validateStaticMetadata(ts.isPropertyAssignment(option) ? option.initializer : option.name);
+    }
+    const root = property(options, "root");
+    if (!root)
+      fail(call, "createApp \u7F3A\u5C11 root");
+    roots.push({ reference: root, props: property(options, "rootProps") });
+  }
+  if (roots.length > 1)
+    fail(roots[1].reference, "\u539F\u751F\u9875\u9762\u53EA\u652F\u6301\u4E00\u4E2A createApp \u6839\u7EC4\u4EF6");
+  let reference = roots[0] && index.resolve(roots[0].reference, source);
+  if (roots.length && (!reference || !index.isComponent(reference)))
+    fail(roots[0].reference, "root \u5FC5\u987B\u662F\u53EF\u89E3\u6790\u7684\u9759\u6001\u7EC4\u4EF6\u5F15\u7528");
+  if (!reference) {
+    const local = index.classes.filter((c) => c.source === source && index.isComponent(c));
+    const logical = local.filter((c) => index.metadata(c).platforms.length === 0);
+    const candidates = logical.length ? logical : local;
+    if (candidates.length > 1)
+      fail(candidates[1].declaration, "\u591A\u4E2A\u6839\u7EC4\u4EF6\uFF0C\u8BF7\u4F7F\u7528 createApp({ root })");
+    reference = candidates[0];
+  }
+  return reference ? compiler.screen(reference, roots[0]?.props) : undefined;
+}
+
+class NativeComposer {
+  index;
+  nextInstance = 0;
+  state = [];
+  stack = [];
+  constructor(index) {
+    this.index = index;
+  }
+  frameworkCall(call, expected) {
+    const symbol = this.index.symbolAt(call.expression);
+    return symbol?.name === expected && !!symbol.declarations?.some((d) => /(?:^|\/)transone\/(?:lib|dist)\//.test(d.getSourceFile().fileName.replace(/\\/g, "/")));
+  }
+  screen(reference, props) {
+    const bindings = new Map;
+    if (props)
+      for (const p of object(props, "rootProps").properties) {
+        if (!ts.isPropertyAssignment(p))
+          fail(p, "rootProps \u53EA\u652F\u6301\u9759\u6001\u5C5E\u6027");
+        bindings.set(name(p.name), {
+          kind: "literal",
+          value: this.literal(p.initializer)
+        });
+      }
+    const root = this.instance(reference, bindings);
+    if (root.kind !== "container")
+      fail(reference.declaration, "\u6839\u8282\u70B9\u5FC5\u987B\u662F\u5BB9\u5668\u8282\u70B9");
+    return { name: reference.className, state: this.state, root };
+  }
+  member(reference, key) {
+    return this.index.members(reference).find((m) => m.declaration.name && name(m.declaration.name) === key && !(ts.canHaveModifiers(m.declaration) && ts.getModifiers(m.declaration)?.some((modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword)));
+  }
+  parent(member, key) {
+    const parent = this.index.metadata(member.owner).parent;
+    const result = parent && this.member(parent, key);
+    if (!result)
+      fail(member.declaration, `\u65E0\u6CD5\u89E3\u6790 super.${key}`);
+    return result;
+  }
+  literal(expression, seen = new Set) {
+    const node = unwrap(expression);
+    if (ts.isStringLiteralLike(node))
+      return node.text;
+    if (ts.isNumericLiteral(node))
+      return Number(node.text);
+    if (node.kind === ts.SyntaxKind.TrueKeyword)
+      return true;
+    if (node.kind === ts.SyntaxKind.FalseKeyword)
+      return false;
+    if (ts.isPrefixUnaryExpression(node) && (node.operator === ts.SyntaxKind.MinusToken || node.operator === ts.SyntaxKind.PlusToken)) {
+      const value = this.literal(node.operand, seen);
+      if (typeof value === "number")
+        return node.operator === ts.SyntaxKind.MinusToken ? -value : value;
+    }
+    if (ts.isIdentifier(node) || ts.isPropertyAccessExpression(node)) {
+      const declaration = this.index.symbolAt(node)?.valueDeclaration;
+      if (declaration && ts.isVariableDeclaration(declaration) && declaration.initializer && ts.isVariableDeclarationList(declaration.parent) && declaration.parent.flags & ts.NodeFlags.Const) {
+        if (seen.has(declaration))
+          fail(node, "\u5E38\u91CF\u5F15\u7528\u5FAA\u73AF");
+        return this.literal(declaration.initializer, new Set([...seen, declaration]));
+      }
+    }
+    return fail(node, `\u4E0D\u652F\u6301\u7684\u539F\u751F\u8868\u8FBE\u5F0F: ${node.getText()}`);
+  }
+  initialState(member, active = new Set) {
+    if (active.has(member.declaration))
+      fail(member.declaration, "initState \u5FAA\u73AF");
+    active.add(member.declaration);
+    const value = object(returnValue(member), "initState()");
+    const values = new Map;
+    for (const p of value.properties) {
+      if (ts.isSpreadAssignment(p)) {
+        const call = unwrap(p.expression);
+        if (!ts.isCallExpression(call) || !ts.isPropertyAccessExpression(call.expression) || call.expression.expression.kind !== ts.SyntaxKind.SuperKeyword || call.expression.name.text !== "initState" || call.arguments.length)
+          fail(p, "state \u5C55\u5F00\u53EA\u652F\u6301 super.initState()");
+        for (const [key, value2] of this.initialState(this.parent(member, "initState"), active))
+          values.set(key, value2);
+      } else if (ts.isPropertyAssignment(p))
+        values.set(name(p.name), this.literal(p.initializer));
+      else
+        fail(p, "state \u5FC5\u987B\u4F7F\u7528\u9759\u6001\u5C5E\u6027");
+    }
+    active.delete(member.declaration);
+    return values;
+  }
+  instance(logical, props) {
+    const reference = this.index.select(logical);
+    if (this.stack.includes(reference.id))
+      fail(reference.declaration, `\u9759\u6001\u7EC4\u4EF6\u7EC4\u5408\u5FAA\u73AF: ${reference.className}`);
+    this.stack.push(reference.id);
+    this.validateInstance(reference);
+    const instance = {
+      reference,
+      prefix: `c${this.nextInstance++}_`,
+      state: new Map,
+      props
+    };
+    const init = this.member(reference, "initState");
+    if (init)
+      for (const [key, value] of this.initialState(init)) {
+        const scoped = `${instance.prefix}s${instance.state.size}_${key.replace(/[^A-Za-z0-9_]/g, "_")}`;
+        instance.state.set(key, scoped);
+        this.state.push({ key: scoped, value });
+      }
+    const styles = this.member(reference, "initStyles");
+    if (styles)
+      this.validateStyles(styles);
+    const render = this.member(reference, "render");
+    if (!render)
+      fail(reference.declaration, "\u7F3A\u5C11 render()");
+    const root = this.node(returnValue(render), instance, render);
+    this.stack.pop();
+    return root;
+  }
+  validateInstance(reference) {
+    for (const owner of this.index.hierarchy(reference))
+      for (const member of owner.declaration.members) {
+        if (ts.isConstructorDeclaration(member))
+          fail(member, "\u539F\u751F\u7EC4\u4EF6\u4E0D\u652F\u6301\u81EA\u5B9A\u4E49 constructor");
+        if (ts.isPropertyDeclaration(member) && member.initializer && !member.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword))
+          fail(member, "\u539F\u751F\u7EC4\u4EF6\u4E0D\u652F\u6301\u5B9E\u4F8B\u5B57\u6BB5\u521D\u59CB\u5316\uFF1B\u8BF7\u4F7F\u7528 initState");
+      }
+    for (const key of [
+      "beforeMount",
+      "onMounted",
+      "beforeUpdate",
+      "onUpdated",
+      "onPropsChange",
+      "beforeUnmount",
+      "onUnmounted",
+      "onErrorCaptured"
+    ]) {
+      const member = this.member(reference, key);
+      if (member && (!ts.isMethodDeclaration(member.declaration) || member.declaration.body?.statements.length))
+        fail(member.declaration, `\u539F\u751F\u7EC4\u4EF6\u4E0D\u652F\u6301\u751F\u547D\u5468\u671F ${key} \u4E2D\u7684 JavaScript`);
+    }
+  }
+  validateStyles(member) {
+    const declaration = member.declaration;
+    if (!ts.isMethodDeclaration(declaration) || !declaration.body)
+      fail(declaration, "\u539F\u751F initStyles \u5FC5\u987B\u5177\u6709\u9759\u6001\u65B9\u6CD5\u4F53");
+    for (const statement of declaration.body.statements) {
+      if (ts.isExpressionStatement(statement) && ts.isCallExpression(statement.expression) && ts.isPropertyAccessExpression(statement.expression.expression) && statement.expression.expression.expression.kind === ts.SyntaxKind.SuperKeyword && statement.expression.expression.name.text === "initStyles" && !statement.expression.arguments.length)
+        this.validateStyles(this.parent(member, "initStyles"));
+      else
+        fail(statement, "\u539F\u751F initStyles \u4E0D\u652F\u6301 CSS \u89C4\u5219\uFF1B\u8BF7\u4F7F\u7528 VNode \u5185\u8054 style \u6216\u8986\u76D6\u4E3A\u7A7A\u65B9\u6CD5");
+    }
+  }
+  binding(expression, instance) {
+    const node = unwrap(expression);
+    if (ts.isPropertyAccessExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.expression.kind === ts.SyntaxKind.ThisKeyword) {
+      const group = node.expression.name.text;
+      const key = node.name.text;
+      if (group === "state") {
+        const scoped = instance.state.get(key);
+        if (!scoped)
+          fail(node, `\u672A\u58F0\u660E\u7684 state.${key}`);
+        return { kind: "state", key: scoped };
+      }
+      if (group === "props") {
+        const binding = instance.props.get(key);
+        if (!binding)
+          fail(node, `\u672A\u63D0\u4F9B\u7684 props.${key}`);
+        return binding;
+      }
+    }
+    return { kind: "literal", value: this.literal(node) };
+  }
+  text(expression, instance) {
+    const value = this.binding(expression, instance);
+    if (value.kind === "state")
+      return [value];
+    if (typeof value.value !== "string")
+      return [{ kind: "literal", value: String(value.value) }];
+    const result = [];
+    const matcher = /{{([^}]+)}}/g;
+    let cursor = 0;
+    let match;
+    while (match = matcher.exec(value.value)) {
+      if (match.index > cursor)
+        result.push({
+          kind: "literal",
+          value: value.value.slice(cursor, match.index)
+        });
+      const key = match[1].trim();
+      const scoped = instance.state.get(key);
+      const prop = instance.props.get(key);
+      if (scoped)
+        result.push({ kind: "state", key: scoped });
+      else if (prop)
+        result.push(prop.kind === "state" ? prop : { kind: "literal", value: String(prop.value) });
+      else
+        fail(expression, `\u53EA\u652F\u6301\u5DF2\u58F0\u660E state/props \u7684 {{key}} \u7ED1\u5B9A: ${key}`);
+      cursor = matcher.lastIndex;
+    }
+    if (cursor < value.value.length || !result.length)
+      result.push({ kind: "literal", value: value.value.slice(cursor) });
+    return result;
+  }
+  props(node, instance) {
+    const result = new Map;
+    if (!node)
+      return result;
+    for (const p of object(node, "\u7EC4\u4EF6 props").properties) {
+      if (!ts.isPropertyAssignment(p))
+        fail(p, "\u7EC4\u4EF6 props \u53EA\u652F\u6301\u9759\u6001\u5C5E\u6027");
+      result.set(name(p.name), this.binding(p.initializer, instance));
+    }
+    return result;
+  }
+  style(props) {
+    if (!props)
+      return;
+    const p = object(props, "VNode props");
+    for (const field of p.properties)
+      if (ts.isSpreadAssignment(field) || name(field.name) !== "style")
+        fail(field, "\u539F\u751F VNode props \u53EA\u652F\u6301 style");
+    const style = property(p, "style");
+    if (!style)
+      return;
+    const out = {};
+    for (const item of object(style, "style").properties) {
+      if (!ts.isPropertyAssignment(item) || !STYLES.has(name(item.name)))
+        fail(item, "\u4E0D\u652F\u6301\u7684\u539F\u751F\u6837\u5F0F\u5C5E\u6027");
+      const key = name(item.name), value = this.literal(item.initializer);
+      if (["color", "backgroundColor", "fontWeight", "textAlign"].includes(key) && (typeof value === "string" || typeof value === "number"))
+        out[key] = value;
+      else if (typeof value === "number")
+        out[key] = value;
+      else if (typeof value === "string" && /^\d+(\.\d+)?px$/.test(value))
+        out[key] = parseFloat(value);
+      else
+        fail(item, `\u6837\u5F0F ${key} \u53EA\u652F\u6301\u6570\u5B57\u6216 px`);
+    }
+    return out;
+  }
+  node(expression, instance, owner) {
+    const node = unwrap(expression);
+    let tag, props, children, listeners;
+    if (ts.isCallExpression(node) && this.frameworkCall(node, "createComponent")) {
+      const first = node.arguments[0];
+      if (!first)
+        fail(node, "createComponent \u7F3A\u5C11\u9759\u6001\u7EC4\u4EF6");
+      if (ts.isObjectLiteralExpression(unwrap(first))) {
+        if (node.arguments.length !== 1)
+          fail(node, "createComponent options \u4E0D\u652F\u6301\u989D\u5916\u53C2\u6570/slots");
+        return this.componentNode(unwrap(first), instance);
+      }
+      if (node.arguments.length > 2)
+        fail(node, "\u539F\u751F\u7EC4\u4EF6\u4E0D\u652F\u6301 children/slots \u6216\u989D\u5916\u53C2\u6570");
+      const reference = this.index.resolve(first, first.getSourceFile());
+      if (!reference || !this.index.isComponent(reference))
+        fail(node, "createComponent \u5FC5\u987B\u5F15\u7528\u9759\u6001\u7EC4\u4EF6");
+      return this.instance(reference, this.props(node.arguments[1], instance));
+    } else if (ts.isCallExpression(node) && this.frameworkCall(node, "h")) {
+      if (node.arguments.length > 4)
+        fail(node, "h \u4E0D\u652F\u6301\u989D\u5916\u53C2\u6570/slots");
+      [tag, props, children, listeners] = node.arguments;
+    } else if (ts.isObjectLiteralExpression(node)) {
+      if (property(node, "component"))
+        return this.componentNode(node, instance);
+      for (const p of node.properties)
+        if (ts.isSpreadAssignment(p) || !["tag", "props", "children", "listeners"].includes(name(p.name)))
+          fail(p, "\u4E0D\u652F\u6301\u7684\u539F\u751F VNode \u5C5E\u6027/slots");
+      tag = property(node, "tag");
+      props = property(node, "props");
+      children = property(node, "children");
+      listeners = property(node, "listeners");
+    } else if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.expression.kind === ts.SyntaxKind.SuperKeyword && node.expression.name.text === "render" && !node.arguments.length) {
+      const parent = this.parent(owner, "render");
+      return this.node(returnValue(parent), instance, parent);
+    } else
+      return fail(node, "\u53EA\u652F\u6301\u9759\u6001 h/createComponent/VNode \u8868\u8FBE\u5F0F");
+    if (!tag)
+      fail(node, "VNode \u7F3A\u5C11 tag");
+    const tagName = this.literal(tag);
+    if (typeof tagName !== "string")
+      fail(tag, "VNode tag \u5FC5\u987B\u662F\u5B57\u7B26\u4E32");
+    const style = this.style(props);
+    let values = [];
+    if (children) {
+      const array = unwrap(children);
+      if (!ts.isArrayLiteralExpression(array))
+        fail(children, "children \u5FC5\u987B\u662F\u9759\u6001\u6570\u7EC4");
+      values = array.elements;
+    }
+    if (CONTAINERS.has(tagName)) {
+      if (listeners)
+        fail(listeners, "\u539F\u751F\u5BB9\u5668\u4E0D\u652F\u6301 listeners");
+      return {
+        kind: "container",
+        children: values.map((child) => this.node(child, instance, owner)),
+        ...style ? { style } : {}
+      };
+    }
+    if (!TEXT.has(tagName) && tagName !== "button")
+      fail(tag, `\u4E0D\u652F\u6301\u7684\u539F\u751F\u8282\u70B9: ${tagName}`);
+    const parts = values.flatMap((value) => this.text(value, instance));
+    if (tagName === "button")
+      return {
+        kind: "button",
+        parts,
+        action: this.click(listeners, instance),
+        ...style ? { style } : {}
+      };
+    if (listeners)
+      fail(listeners, "\u539F\u751F\u6587\u672C\u4E0D\u652F\u6301 listeners");
+    return { kind: "text", parts, ...style ? { style } : {} };
+  }
+  componentNode(options, instance) {
+    for (const p of options.properties)
+      if (ts.isSpreadAssignment(p) || !["component", "props"].includes(name(p.name)))
+        fail(p, "\u539F\u751F\u7EC4\u4EF6\u4E0D\u652F\u6301 slots\u3001emitters \u6216\u52A8\u6001 options");
+    const component = property(options, "component");
+    const reference = component && this.index.resolve(component, component.getSourceFile());
+    if (!reference || !this.index.isComponent(reference))
+      fail(options, "createComponent \u5FC5\u987B\u5F15\u7528\u9759\u6001\u7EC4\u4EF6");
+    return this.instance(reference, this.props(property(options, "props"), instance));
+  }
+  click(listeners, instance) {
+    const options = object(listeners, "button listeners.click");
+    for (const p of options.properties)
+      if (ts.isSpreadAssignment(p) || name(p.name) !== "click")
+        fail(p, "\u53EA\u652F\u6301 listeners.click");
+    const handler = property(options, "click");
+    if (!handler || !ts.isArrowFunction(handler) || handler.parameters.length)
+      fail(options, "click \u53EA\u652F\u6301 () => this.method()");
+    const body = handler.body;
+    const call = ts.isBlock(body) && body.statements.length === 1 && ts.isExpressionStatement(body.statements[0]) ? body.statements[0].expression : body;
+    if (!ts.isCallExpression(call) || !ts.isPropertyAccessExpression(call.expression) || call.expression.expression.kind !== ts.SyntaxKind.ThisKeyword || call.arguments.length)
+      fail(handler, "click \u53EA\u652F\u6301\u8C03\u7528 this.method()");
+    const member = this.member(instance.reference, call.expression.name.text);
+    if (!member)
+      fail(call, "click \u65B9\u6CD5\u4E0D\u5B58\u5728");
+    return this.action(member, instance, new Set);
+  }
+  action(member, instance, active) {
+    if (active.has(member.declaration))
+      fail(member.declaration, "\u539F\u751F\u65B9\u6CD5\u8C03\u7528\u5FAA\u73AF");
+    const declaration = member.declaration;
+    if (!ts.isMethodDeclaration(declaration) || !declaration.body || declaration.parameters.length || declaration.modifiers?.some((m) => m.kind === ts.SyntaxKind.AsyncKeyword))
+      fail(declaration, "\u539F\u751F\u52A8\u4F5C\u53EA\u652F\u6301\u540C\u6B65\u65E0\u53C2\u6570\u65B9\u6CD5");
+    const next = new Set([...active, declaration]);
+    const actions = [];
+    for (const statement of declaration.body.statements) {
+      if (!ts.isExpressionStatement(statement))
+        fail(statement, "\u65B9\u6CD5\u4E0D\u652F\u6301\u539F\u751F\u7F16\u8BD1");
+      const expression = unwrap(statement.expression);
+      if (ts.isCallExpression(expression) && ts.isPropertyAccessExpression(expression.expression) && !expression.arguments.length) {
+        const target = expression.expression;
+        let called;
+        if (target.expression.kind === ts.SyntaxKind.SuperKeyword)
+          called = this.parent(member, target.name.text);
+        else if (target.expression.kind === ts.SyntaxKind.ThisKeyword)
+          called = this.member(instance.reference, target.name.text);
+        if (!called)
+          fail(expression, "\u65B9\u6CD5\u4E0D\u652F\u6301\u539F\u751F\u7F16\u8BD1");
+        actions.push(this.action(called, instance, next));
+        continue;
+      }
+      if (ts.isBinaryExpression(expression) && ts.isPropertyAccessExpression(expression.left) && ts.isPropertyAccessExpression(expression.left.expression) && expression.left.expression.expression.kind === ts.SyntaxKind.ThisKeyword && expression.left.expression.name.text === "state") {
+        const key = instance.state.get(expression.left.name.text);
+        if (!key)
+          fail(expression.left, "\u52A8\u4F5C\u5F15\u7528\u672A\u58F0\u660E state");
+        const value = this.literal(expression.right);
+        const operator = expression.operatorToken.kind;
+        const initial = this.state.find((s) => s.key === key).value;
+        if ((operator === ts.SyntaxKind.PlusEqualsToken || operator === ts.SyntaxKind.MinusEqualsToken) && typeof value === "number" && typeof initial === "number")
+          actions.push({
+            kind: "increment",
+            key,
+            by: operator === ts.SyntaxKind.MinusEqualsToken ? -value : value
+          });
+        else if (operator === ts.SyntaxKind.EqualsToken && typeof value === typeof initial)
+          actions.push({ kind: "set-literal", key, value });
+        else
+          fail(expression, "\u539F\u751F\u52A8\u4F5C\u53EA\u652F\u6301\u540C\u7C7B\u578B\u8D4B\u503C\u6216\u6570\u503C\u589E\u51CF");
+        continue;
+      }
+      fail(expression, "\u65B9\u6CD5\u4E0D\u652F\u6301\u539F\u751F\u7F16\u8BD1");
+    }
+    if (!actions.length)
+      fail(declaration, "\u539F\u751F\u52A8\u4F5C\u4E0D\u80FD\u4E3A\u7A7A");
+    return actions.length === 1 ? actions[0] : { kind: "sequence", actions };
+  }
+}
+
+// src/app/analyze.ts
+var CONTAINERS2 = new Set(["view", "main", "div"]);
+var TEXT2 = new Set(["text", "span", "p", "h1"]);
 var STYLE_KEYS = new Set(["color", "backgroundColor", "fontSize", "fontWeight", "padding", "margin", "width", "height", "borderRadius", "textAlign"]);
-async function analyzeNativeScreen(entry) {
-  if (!existsSync2(entry))
+async function analyzeNativeScreen(entry, config, onSourcePaths) {
+  if (!existsSync3(entry))
     throw nativeError(entry, "\u6E90\u6587\u4EF6\u4E0D\u5B58\u5728");
+  if (config) {
+    const screen = composeNativeScreen(entry, config, onSourcePaths);
+    if (screen)
+      return screen;
+  }
   const ts2 = await loadTypescript();
-  const source = ts2.createSourceFile(entry, readFileSync(entry, "utf8"), ts2.ScriptTarget.Latest, true);
+  const source = ts2.createSourceFile(entry, readFileSync2(entry, "utf8"), ts2.ScriptTarget.Latest, true);
   const component = source.statements.find((s) => ts2.isClassDeclaration(s));
   if (!component)
     throw nativeError(entry, "\u672A\u627E\u5230 Component \u7C7B");
@@ -1903,14 +1711,14 @@ function readNode(ts2, node, file, state, actions) {
   const style = readStyle(ts2, get(ts2, node, "props"), file);
   const children = get(ts2, node, "children");
   const childNodes = children && ts2.isArrayLiteralExpression(children) ? [...children.elements].filter(ts2.isExpression) : [];
-  if (CONTAINERS.has(tag))
+  if (CONTAINERS2.has(tag))
     return { kind: "container", children: childNodes.map((child) => {
       if (!ts2.isObjectLiteralExpression(child))
         throw nativeError(file, "\u5BB9\u5668 children \u53EA\u652F\u6301\u9759\u6001 VNode");
       return readNode(ts2, child, file, state, actions);
     }), ...style ? { style } : {} };
   const parts = childNodes.flatMap((child) => readText(ts2, child, file, state));
-  if (TEXT.has(tag))
+  if (TEXT2.has(tag))
     return { kind: "text", parts, ...style ? { style } : {} };
   if (tag === "button")
     return { kind: "button", parts, action: readClick(ts2, get(ts2, node, "listeners"), file, actions), ...style ? { style } : {} };
@@ -1972,8 +1780,8 @@ function readStyle(ts2, props, file) {
   }
   return out;
 }
-function get(ts2, node, name) {
-  const item = node.properties.find((p) => ts2.isPropertyAssignment(p) && p.name.getText().replace(/['"]/g, "") === name);
+function get(ts2, node, name2) {
+  const item = node.properties.find((p) => ts2.isPropertyAssignment(p) && p.name.getText().replace(/['"]/g, "") === name2);
   return item && ts2.isPropertyAssignment(item) ? item.initializer : undefined;
 }
 function stringValue(ts2, expression, file, label) {
@@ -2001,23 +1809,34 @@ async function buildNativeApp(config, dialect) {
   const entries = Object.values(config.app.pages);
   if (entries.length !== 1)
     throw nativeError(config.entry, "\u9996\u671F\u539F\u751F App \u53EA\u652F\u6301\u4E00\u4E2A\u9875\u9762");
-  const screen = await analyzeNativeScreen(entries[0]);
-  const files = dialect.generateProject(screen, config.app);
-  if (config.app.host !== undefined) {
-    files[`${dialect.resourceDirectory}/transone.config.json`] = `${JSON.stringify({ host: config.app.host }, null, 2)}
+  const sourcePaths = [];
+  const screen = await analyzeNativeScreen(entries[0], config, (paths) => sourcePaths.push(...paths));
+  return withBuildOutput({
+    root: config.root,
+    outDir: config.app.outDir,
+    protectedPaths: buildInputPaths(config, entries, [
+      config.app.publicDir,
+      ...sourcePaths
+    ])
+  }, (outDir) => generateNativeApp(config, dialect, outDir, screen));
+}
+async function generateNativeApp(config, dialect, outDir, screen) {
+  const app = config.app;
+  const files = dialect.generateProject(screen, app);
+  if (app.host !== undefined) {
+    files[`${dialect.resourceDirectory}/transone.config.json`] = `${JSON.stringify({ host: app.host }, null, 2)}
 `;
   }
-  await rm3(config.app.outDir, { recursive: true, force: true });
   const assetsBuilt = [];
-  for (const [relative3, content] of Object.entries(files).sort(([a], [b]) => a.localeCompare(b))) {
-    const target = join(config.app.outDir, relative3);
-    await mkdir2(dirname4(target), { recursive: true });
+  for (const [relative2, content] of Object.entries(files).sort(([a], [b]) => a.localeCompare(b))) {
+    const target = buildOutputPath(outDir, relative2);
+    await mkdir2(dirname3(target), { recursive: true });
     await writeFile3(target, content, "utf8");
     assetsBuilt.push(target);
   }
-  if (existsSync3(config.app.publicDir))
-    await cp(config.app.publicDir, join(config.app.outDir, dialect.resourceDirectory), { recursive: true });
-  return { root: config.root, outDir: resolve6(config.app.outDir), assetsBuilt };
+  if (existsSync4(app.publicDir))
+    await cp(app.publicDir, buildOutputPath(outDir, dialect.resourceDirectory), { recursive: true });
+  return { root: config.root, outDir: resolve5(outDir), assetsBuilt };
 }
 
 // src/target/app-target.ts
@@ -2049,7 +1868,11 @@ function text(parts, language) {
   return parts.map((part) => part.kind === "literal" ? JSON.stringify(part.value) : `this.${part.key}`).join(" + ") || '""';
 }
 function action(node, language) {
-  const { action: action2 } = node;
+  return nativeAction(node.action, language);
+}
+function nativeAction(action2, language) {
+  if (action2.kind === "sequence")
+    return action2.actions.map((item) => nativeAction(item, language)).join("; ");
   const target = language === "ark" ? `this.${action2.key}` : action2.key;
   return action2.kind === "increment" ? `${target} ${action2.by >= 0 ? "+=" : "-="} ${Math.abs(action2.by)}` : `${target} = ${typeof action2.value === "string" ? JSON.stringify(action2.value) : action2.value}`;
 }
@@ -2273,10 +2096,12 @@ class TargetRegistry {
 var targetRegistry = new TargetRegistry;
 
 // src/build.ts
-import { mkdir as mkdir3, rm as rm4 } from "fs/promises";
-import { dirname as dirname5, resolve as resolve7 } from "path";
+import { mkdirSync, writeFileSync } from "fs";
+import { dirname as dirname4, isAbsolute as isAbsolute2, relative as relative2, resolve as resolve6, sep as sep2 } from "path";
 async function build(options = {}) {
-  const config = await resolveConfig(options);
+  return buildConfigured(await resolveConfig(options), options);
+}
+async function buildConfigured(config, options = {}) {
   if (options.library) {
     return buildLibrary(config);
   }
@@ -2288,102 +2113,311 @@ async function buildLibrary(config) {
   if (!library) {
     throw new Error("TransOne library build requires config.library");
   }
-  await rm4(library.outDir, { recursive: true, force: true });
-  await mkdir3(library.outDir, { recursive: true });
-  if (library.dts) {
-    for (const tsconfig of library.tsconfigs) {
-      await runTsc(config.root, tsconfig);
-    }
-  }
-  const minify = library.minify ?? process.env.TRANSONE_MINIFY !== "0";
-  const result = await Bun.build({
-    entrypoints: [library.entry],
-    outdir: library.outDir,
-    root: dirname5(library.entry),
-    target: "browser",
-    format: "esm",
-    sourcemap: library.sourcemap ? "linked" : undefined,
-    splitting: library.splitting,
-    minify,
-    external: library.external,
-    throw: false
-  });
-  if (!result.success || result.outputs.length === 0) {
-    throw new Error(`Failed to build TransOne library:
+  const declarations = library.dts ? await Promise.all(library.tsconfigs.map(loadDeclarationProject)) : [];
+  const protectedPaths = buildInputPaths(config, [library.entry], [...library.tsconfigs, ...declarations.flatMap((project) => project.inputs)]);
+  return withBuildOutput({
+    root: config.root,
+    outDir: library.outDir,
+    protectedPaths
+  }, async (outDir) => {
+    const declarationAssets = declarations.flatMap((project) => emitDeclarations(project, library.outDir, outDir));
+    const minify = library.minify ?? process.env.TRANSONE_MINIFY !== "0";
+    const inputs = createBundleInputTracker();
+    const result = await Bun.build({
+      entrypoints: [library.entry],
+      outdir: outDir,
+      metafile: true,
+      plugins: [inputs.plugin],
+      root: dirname4(library.entry),
+      target: "browser",
+      format: "esm",
+      sourcemap: library.sourcemap ? "linked" : undefined,
+      splitting: library.splitting,
+      minify,
+      external: library.external,
+      throw: false
+    });
+    if (!result.success || result.outputs.length === 0) {
+      throw new Error(`Failed to build TransOne library:
 ${result.logs.map((log) => log.message).join(`
 `)}`);
-  }
-  const assetsBuilt = result.outputs.map((output) => resolve7(output.path));
-  return { root: config.root, outDir: library.outDir, assetsBuilt };
+    }
+    protectedPaths.push(...inputs.paths(result));
+    const assetsBuilt = [
+      ...declarationAssets,
+      ...result.outputs.map((output) => resolve6(output.path))
+    ];
+    return {
+      root: config.root,
+      outDir,
+      assetsBuilt: [...new Set(assetsBuilt)]
+    };
+  });
+}
+async function loadDeclarationProject(configFile) {
+  const ts2 = await loadTypescript();
+  const inputs = new Set;
+  const diagnostics = [];
+  const parsed = ts2.getParsedCommandLineOfConfigFile(configFile, {}, {
+    ...ts2.sys,
+    readFile: (path) => {
+      inputs.add(resolve6(path));
+      return ts2.sys.readFile(path);
+    },
+    onUnRecoverableConfigFileDiagnostic: (diagnostic) => {
+      diagnostics.push(diagnostic);
+    }
+  });
+  if (!parsed)
+    throw declarationError(ts2, configFile, diagnostics);
+  const program = ts2.createProgram({
+    rootNames: parsed.fileNames,
+    options: parsed.options,
+    projectReferences: parsed.projectReferences
+  });
+  for (const source of program.getSourceFiles())
+    inputs.add(resolve6(source.fileName));
+  return {
+    ts: ts2,
+    program,
+    diagnostics: [...diagnostics, ...parsed.errors],
+    inputs: [...inputs],
+    configFile
+  };
 }
-async function runTsc(root, tsconfig) {
-  const proc = Bun.spawn(["bunx", "tsc", "--project", tsconfig], {
-    cwd: root,
-    stdout: "inherit",
-    stderr: "inherit"
+function emitDeclarations(project, finalOutDir, staging) {
+  const { ts: ts2, program, configFile } = project;
+  const diagnostics = [
+    ...project.diagnostics,
+    ...ts2.getPreEmitDiagnostics(program)
+  ];
+  if (diagnostics.some((diagnostic) => diagnostic.category === ts2.DiagnosticCategory.Error)) {
+    throw declarationError(ts2, configFile, diagnostics);
+  }
+  const assets = [];
+  const emitted = program.emit(undefined, (file, content, byteOrderMark) => {
+    const path = relative2(finalOutDir, resolve6(file));
+    if (path === "" || path === ".." || path.startsWith(`..${sep2}`) || isAbsolute2(path)) {
+      throw new Error(`TypeScript output must be inside library.outDir for recoverable publication: ${file} (${configFile})`);
+    }
+    const target = resolve6(staging, path);
+    mkdirSync(dirname4(target), { recursive: true });
+    writeFileSync(target, `${byteOrderMark ? "\uFEFF" : ""}${content}`);
+    assets.push(target);
   });
-  const exitCode = await proc.exited;
-  if (exitCode !== 0) {
-    throw new Error(`tsc --project ${tsconfig} failed with exit code ${exitCode}`);
+  if (emitted.emitSkipped || emitted.diagnostics.some((diagnostic) => diagnostic.category === ts2.DiagnosticCategory.Error)) {
+    throw declarationError(ts2, configFile, emitted.diagnostics);
   }
+  return assets;
+}
+function declarationError(ts2, configFile, diagnostics) {
+  return new Error(`TypeScript compilation failed for ${configFile}:
+${ts2.formatDiagnostics(diagnostics, {
+    getCanonicalFileName: (file) => file,
+    getCurrentDirectory: () => dirname4(configFile),
+    getNewLine: () => `
+`
+  })}`);
 }
 
-// src/create.ts
-import { existsSync as existsSync4, mkdirSync, writeFileSync } from "fs";
-import { basename as basename2, join as join2 } from "path";
-var TRANSONE_FRAMEWORK_VERSION = "0.4.0";
-var TRANSONE_CLI_VERSION = "0.7.0";
-var GITHUB_URL = "https://github.com/geektech-team/transone";
-function createProject(options = {}) {
-  const root = options.root ?? process.cwd();
-  const name = options.name ?? basename2(root);
-  const files = scaffoldFiles(name);
-  const existing = files.filter((file) => existsSync4(join2(root, file.path)));
-  if (existing.length > 0) {
-    throw new Error(`Refusing to overwrite existing TransOne project files: ${existing.map((file) => file.path).join(", ")}`);
+// src/components/report.ts
+import { relative as relative3, sep as sep3 } from "path";
+async function reportComponents(options = {}) {
+  return reportConfiguredComponents(await resolveConfig(options));
+}
+function reportConfiguredComponents(config) {
+  const family = getPlatformDefinition(config.platform).family;
+  const pages = family === "miniprogram" ? config.mp?.pages ?? config.pages : family === "app" ? config.app?.pages ?? config.pages : config.pages;
+  const entries = [...new Set(Object.values(pages))];
+  const contexts = family === "web" ? entries.map((entry) => [entry]) : [entries];
+  const root = canonicalPath(config.root);
+  const sourcePath = (path) => relative3(root, canonicalPath(path)).split(sep3).join("/");
+  const location = (reference) => {
+    const point = reference.source.getLineAndCharacterOfPosition(reference.declaration.getStart(reference.source));
+    return {
+      source: sourcePath(reference.filePath),
+      className: reference.className,
+      line: point.line + 1,
+      column: point.character + 1
+    };
+  };
+  const components = [];
+  for (const context of contexts) {
+    const index = createComponentIndex({
+      root: config.root,
+      entrypoints: context,
+      platform: config.platform,
+      include: config.components?.include,
+      exclude: config.components?.exclude
+    });
+    const entrypoints = context.map(sourcePath).sort();
+    for (const reference of index.classes) {
+      if (!index.isComponent(reference) || index.metadata(reference).framework)
+        continue;
+      const decision = index.decision(reference);
+      if (decision.reason === "explicit")
+        continue;
+      components.push({
+        entrypoints,
+        component: location(reference),
+        implementation: decision.implementation ? location(decision.implementation) : null,
+        reason: decision.reason,
+        candidates: decision.candidates.map((candidate) => ({
+          ...location(candidate),
+          platforms: [...index.metadata(candidate).platforms].sort()
+        })).sort(compareLocations)
+      });
+    }
   }
-  mkdirSync(join2(root, "src"), { recursive: true });
-  const created = [];
-  for (const file of files) {
-    writeFileSync(join2(root, file.path), file.content, "utf8");
-    created.push(file.path);
+  components.sort((left, right) => compareText(left.entrypoints.join("\x00"), right.entrypoints.join("\x00")) || compareLocations(left.component, right.component));
+  return {
+    platform: config.platform,
+    scope: "discovered-logical-components",
+    components
+  };
+}
+function compareText(left, right) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+function compareLocations(left, right) {
+  return compareText(left.source, right.source) || left.line - right.line || left.column - right.column || compareText(left.className, right.className);
+}
+function formatComponentSelectionReport(report) {
+  const describe = (value) => `${value.className} (${value.source}:${value.line}:${value.column})`;
+  return [
+    `TransOne component selection: ${report.platform}`,
+    "Scope: discovered logical component mappings; runtime constructor usage is not analyzed.",
+    ...report.components.length ? report.components.flatMap((row) => [
+      `${describe(row.component)} -> ${row.implementation ? describe(row.implementation) : "(missing)"} [${row.reason}]`,
+      `  Entrypoints: ${row.entrypoints.join(", ")}`,
+      ...row.candidates.length ? [
+        `  Candidates: ${row.candidates.map((candidate) => `${describe(candidate)} [${candidate.platforms.join(", ")}]`).join("; ")}`
+      ] : []
+    ]) : ["(no logical components discovered)"]
+  ].join(`
+`);
+}
+
+// src/create.ts
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, writeFileSync as writeFileSync2 } from "fs";
+import { basename as basename2, dirname as dirname5, join } from "path";
+
+// src/scaffold.ts
+var cardViews = [
+  {
+    className: "CardWebComponent",
+    decorator: "Web",
+    label: "Web Card",
+    background: "#eff6ff"
+  },
+  {
+    className: "CardMiniprogramComponent",
+    decorator: "Miniprogram",
+    label: "Miniprogram Card",
+    background: "#f0fdf4"
+  },
+  {
+    className: "CardAppComponent",
+    decorator: "App",
+    label: "App Card",
+    background: "#f8fafc"
+  },
+  {
+    className: "CardMobileComponent",
+    decorator: "WebMobile",
+    label: "Mobile Web Card",
+    background: "#f0fdf4"
+  },
+  {
+    className: "CardPcComponent",
+    decorator: "WebPc",
+    label: "PC Web Card",
+    background: "#eef2ff"
+  },
+  {
+    className: "CardWeixinComponent",
+    decorator: "MiniprogramWeixin",
+    label: "Weixin Card",
+    background: "#f0fdf4"
+  },
+  {
+    className: "CardAlipayComponent",
+    decorator: "MiniprogramAlipay",
+    label: "Alipay Card",
+    background: "#eff6ff"
+  },
+  {
+    className: "CardIosComponent",
+    decorator: "AppIos",
+    label: "iOS Card",
+    background: "#f8fafc"
+  },
+  {
+    className: "CardAndroidComponent",
+    decorator: "AppAndroid",
+    label: "Android Card",
+    background: "#f0fdf4"
   }
-  return { root, files: created };
+];
+function cardRender(label, background = "#ffffff") {
+  return `  protected render(): VNode {
+    return h('main', {
+      style: { padding: '16px', borderRadius: '12px', backgroundColor: '${background}' },
+    }, [
+      h('h1', { style: { fontSize: '20px' } }, [this.props.title]),
+      h('p', {}, ['${label}']),
+      h('p', {}, ['Count: {{count}}']),
+      h('button', {}, ['+1'], { click: () => this.increment() }),
+    ]);
+  }`;
 }
-function scaffoldFiles(name) {
+function scaffoldFiles(name2, frameworkVersion, cliVersion) {
   return [
     {
       path: "package.json",
-      content: `${JSON.stringify({
-        name,
+      content: JSON.stringify({
+        name: name2,
         private: true,
         type: "module",
         scripts: {
           dev: "transone dev",
+          "dev:mobile": "transone dev --target web-mobile",
+          "dev:pc": "transone dev --target web-pc",
           build: "transone build",
+          "build:web": "transone build --target web",
+          "build:mobile": "transone build --target web-mobile",
+          "build:pc": "transone build --target web-pc",
+          "build:weixin": "transone build --target miniprogram-weixin",
+          "build:alipay": "transone build --target miniprogram-alipay",
+          "build:bytedance": "transone build --target miniprogram-bytedance",
+          "build:xiaohongshu": "transone build --target miniprogram-xiaohongshu",
+          "build:ios": "transone build --target app-ios",
+          "build:android": "transone build --target app-android",
+          "build:harmony": "transone build --target app-harmony",
           typecheck: "bunx tsc --noEmit"
         },
-        dependencies: {
-          transone: `^${TRANSONE_FRAMEWORK_VERSION}`
-        },
+        dependencies: { transone: `^${frameworkVersion}` },
         devDependencies: {
-          "transone-cli": `^${TRANSONE_CLI_VERSION}`
+          "transone-cli": `^${cliVersion}`,
+          typescript: "^5.3.3"
         }
-      }, null, 2)}
+      }, null, 2) + `
 `
     },
     {
       path: "transone.config.ts",
-      content: `import { defineConfig } from 'transone-cli';
+      content: `import { Platform } from 'transone';
+import { defineConfig } from 'transone-cli';
 
 export default defineConfig({
   entry: 'src/main.ts',
+  target: Platform.Web,
 });
 `
     },
     {
       path: "tsconfig.json",
-      content: `${JSON.stringify({
+      content: JSON.stringify({
         compilerOptions: {
           target: "ESNext",
           module: "ESNext",
@@ -2395,105 +2429,112 @@ export default defineConfig({
           verbatimModuleSyntax: true
         },
         include: ["src/**/*", "transone.config.ts"]
-      }, null, 2)}
+      }, null, 2) + `
 `
     },
-    {
-      path: ".gitignore",
-      content: `node_modules/
+    { path: ".gitignore", content: `node_modules/
 dist/
+` },
+    {
+      path: "src/main.ts",
+      content: `import { createApp } from 'transone';
+import { AppComponent } from './AppComponent';
+
+export const app = createApp({
+  root: AppComponent,
+  document: { title: 'TransOne component variants' },
+});
+app.mount();
 `
     },
     {
-      path: "src/main.ts",
-      content: `import { Component, createApp, h, type VNode } from 'transone';
+      path: "src/AppComponent.ts",
+      content: `import { BaseComponent, createComponent, h, type VNode } from 'transone';
+import { CardComponent } from './components/card/CardComponent';
 
-class App extends Component<object, object> {
-  protected initState(): object {
-    return {};
-  }
-
-  protected initStyles(): void {
-    this.styleManager.addStyle('app-body', {
-      selector: 'body',
-      properties: {
-        margin: 0,
-        background: '#f7fbf6',
-        color: '#142216',
-        fontFamily:
-          "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
-      },
-    });
-    this.styleManager.addStyle('app-shell', {
-      selector: '.app-shell',
-      properties: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '14px',
-        justifyContent: 'center',
-        minHeight: '100vh',
-      },
-    });
-    this.styleManager.addStyle('app-title', {
-      selector: '.app-title',
-      properties: {
-        fontSize: '64px',
-        letterSpacing: 0,
-        lineHeight: 1.05,
-        margin: 0,
-      },
-    });
-    this.styleManager.addStyle('app-link', {
-      selector: '.app-link',
-      properties: {
-        color: '#2f7c39',
-        fontSize: '16px',
-        textDecoration: 'none',
-      },
-      hover: {
-        textDecoration: 'underline',
-      },
-    });
-  }
+export class AppComponent extends BaseComponent<object, object> {
+  protected initState(): object { return {}; }
+  protected initStyles(): void {}
 
   protected render(): VNode {
-    return h('main', { className: 'app-shell' }, [
-      h('h1', { className: 'app-title' }, ['TransOne']),
-      h(
-        'a',
-        { className: 'app-link', href: '${GITHUB_URL}' },
-        ['GitHub']
-      ),
+    return h('main', { style: { padding: '16px' } }, [
+      h('h1', {}, ['TransOne component variants']),
+      createComponent({
+        component: CardComponent,
+        props: { title: 'Shared business, platform view' },
+      }),
     ]);
   }
 }
+`
+    },
+    {
+      path: "src/components/card/CardComponent.ts",
+      content: `import { BaseComponent, h, type VNode } from 'transone';
 
-export const app = createApp({
-  root: App,
-  document: {
-    lang: 'zh-CN',
-    title: 'TransOne',
-    description: '\u8F7B\u91CF\u7EA7\u7EAF TypeScript \u524D\u7AEF\u6846\u67B6',
-  },
-});
+export interface CardProps { title: string; }
+export interface CardState { count: number; }
 
-app.mount();
+/** Shared state and business methods; pages only import this class. */
+export class CardComponent extends BaseComponent<CardProps, CardState> {
+  protected initState(): CardState { return { count: 0 }; }
+  protected initStyles(): void {}
+  protected increment(): void { this.state.count += 1; }
+
+${cardRender("Shared Card")}
+}
 `
-    }
+    },
+    ...cardViews.map((view) => ({
+      path: `src/components/card/${view.className}.ts`,
+      content: `import { ${view.decorator}, h, type VNode } from 'transone';
+import { CardComponent } from './CardComponent';
+
+@${view.decorator}()
+export class ${view.className} extends CardComponent {
+${cardRender(view.label, view.background)}
+}
+`
+    }))
   ];
 }
 
+// src/create.ts
+var TRANSONE_FRAMEWORK_VERSION = "0.9.0";
+var TRANSONE_CLI_VERSION = "0.10.0";
+function createProject(options = {}) {
+  const root = options.root ?? process.cwd();
+  const name2 = options.name ?? basename2(root);
+  const files = scaffoldFiles(name2, TRANSONE_FRAMEWORK_VERSION, TRANSONE_CLI_VERSION);
+  const existing = files.filter((file) => existsSync5(join(root, file.path)));
+  if (existing.length > 0) {
+    throw new Error(`Refusing to overwrite existing TransOne project files: ${existing.map((file) => file.path).join(", ")}`);
+  }
+  mkdirSync2(join(root, "src"), { recursive: true });
+  const created = [];
+  for (const file of files) {
+    mkdirSync2(dirname5(join(root, file.path)), { recursive: true });
+    writeFileSync2(join(root, file.path), file.content, {
+      encoding: "utf8",
+      flag: "wx"
+    });
+    created.push(file.path);
+  }
+  return { root, files: created };
+}
+
 // src/server.ts
 import { randomUUID as randomUUID2 } from "crypto";
-import { rm as rm5 } from "fs/promises";
+import { existsSync as existsSync6, realpathSync as realpathSync2, statSync } from "fs";
+import { rm as rm2 } from "fs/promises";
 import {
   basename as basename3,
-  extname as extname2,
+  dirname as dirname6,
+  extname,
   isAbsolute as isAbsolute4,
-  relative as relative4,
-  resolve as resolve8,
-  sep as sep3
+  relative as relative5,
+  resolve as resolve7,
+  sep as sep4
 } from "path";
 
 // src/proxy.ts
@@ -2568,9 +2609,9 @@ function filterHeaders(source) {
   const connection = headers.get("connection");
   if (connection) {
     connection.split(",").forEach((header) => {
-      const name = header.trim();
-      if (name) {
-        headers.delete(name);
+      const name2 = header.trim();
+      if (name2) {
+        headers.delete(name2);
       }
     });
   }
@@ -2581,7 +2622,7 @@ function filterHeaders(source) {
 // src/watch.ts
 import { watch } from "fs";
 import { readdir, stat } from "fs/promises";
-import { isAbsolute as isAbsolute3, join as join3, relative as relative3 } from "path";
+import { isAbsolute as isAbsolute3, join as join2, relative as relative4 } from "path";
 var RECURSIVE_WATCH_UNSUPPORTED_ERROR = "ERR_FEATURE_UNAVAILABLE_ON_PLATFORM";
 var DEFAULT_DEBOUNCE_MS = 100;
 var DEFAULT_POLL_INTERVAL_MS = 300;
@@ -2692,7 +2733,7 @@ async function collectRelevantFiles(root, isRelevant, output) {
     if (relativeDirectory === undefined) {
       break;
     }
-    const absoluteDirectory = join3(root, relativeDirectory);
+    const absoluteDirectory = join2(root, relativeDirectory);
     let entries;
     try {
       entries = await readdir(absoluteDirectory, { withFileTypes: true });
@@ -2709,14 +2750,14 @@ async function collectRelevantFiles(root, isRelevant, output) {
         continue;
       }
       try {
-        const info = await stat(join3(root, relativePath));
+        const info = await stat(join2(root, relativePath));
         output.set(relativePath, { mtimeMs: info.mtimeMs, size: info.size });
       } catch {}
     }
   }
 }
 function toRelativePath(root, filename) {
-  const relativePath = isAbsolute3(filename) ? relative3(root, filename) : filename.split("\\").join("/");
+  const relativePath = isAbsolute3(filename) ? relative4(root, filename) : filename.split("\\").join("/");
   if (relativePath === "" || relativePath === ".." || relativePath.startsWith("../")) {
     return;
   }
@@ -2733,6 +2774,7 @@ var LIVE_RELOAD_PATH = "/__transone/reload";
 var DEVELOPMENT_OUTPUT_RETENTION_MS = 5000;
 var WATCHED_EXTENSIONS = new Set([
   ".ts",
+  ".tsx",
   ".js",
   ".mjs",
   ".cjs",
@@ -2798,27 +2840,97 @@ async function startWatchingDevServer(options) {
   return createServerHandle(() => instance, () => watcher.dispose());
 }
 function createProjectWatcher(instance, onChange) {
-  return createFileWatcher({
-    root: instance.config.root,
-    isRelevant: (relativePath) => isWatchedFile(instance, relativePath),
-    onChange: (changedPath) => {
-      onChange(changedPath);
+  const root = realpathSync2(instance.config.root);
+  const watchers = [];
+  try {
+    watchers.push(createFileWatcher({
+      root,
+      isRelevant: (relativePath) => isWatchedFile(instance, relativePath),
+      onChange: (changedPath) => {
+        onChange(changedPath);
+      }
+    }));
+    for (const group of externalComponentWatchRoots(instance.config, root)) {
+      const excluded = (instance.config.components?.exclude ?? []).map((pattern) => new Bun.Glob(pattern.split(sep4).join("/")));
+      watchers.push(createFileWatcher({
+        root: group.root,
+        isRelevant: (relativePath) => {
+          const path = resolve7(group.root, relativePath);
+          if (isWithinOrEqual(root, path) || ![".ts", ".tsx"].includes(extname(path).toLowerCase()) || path.endsWith(".d.ts"))
+            return false;
+          if (path.split(sep4).some((segment) => IGNORED_WATCH_SEGMENTS.has(segment)))
+            return false;
+          const portable = path.split(sep4).join("/");
+          const fromApp = toRelativePath2(root, path);
+          return group.patterns.some((pattern) => pattern.match(portable)) && !excluded.some((pattern) => pattern.match(fromApp) || pattern.match(portable));
+        },
+        onChange: (changedPath) => {
+          onChange(toRelativePath2(root, resolve7(group.root, changedPath)));
+        }
+      }));
     }
-  });
+  } catch (error) {
+    watchers.forEach((watcher) => watcher.dispose());
+    throw error;
+  }
+  return {
+    dispose: () => {
+      watchers.splice(0).reverse().forEach((watcher) => watcher.dispose());
+    }
+  };
+}
+function externalComponentWatchRoots(config, appRoot) {
+  const groups = [];
+  for (const include of config.components?.include ?? []) {
+    const absolute = resolve7(config.root, include);
+    const wildcard = absolute.search(/[*?\[\]{}]/);
+    const prefix = wildcard < 0 ? absolute : absolute.slice(0, wildcard);
+    const directoryPattern = wildcard < 0 && (existsSync6(absolute) && statSync(absolute).isDirectory() || !extname(absolute));
+    let directory = wildcard < 0 ? directoryPattern ? absolute : dirname6(absolute) : prefix.endsWith(sep4) ? prefix : dirname6(prefix);
+    while (!existsSync6(directory)) {
+      const parent2 = dirname6(directory);
+      if (parent2 === directory)
+        break;
+      directory = parent2;
+    }
+    if (!existsSync6(directory) || !statSync(directory).isDirectory())
+      continue;
+    const canonical = realpathSync2(directory);
+    if (isWithinOrEqual(appRoot, canonical))
+      continue;
+    const patternPath = directoryPattern ? resolve7(absolute, "**", "*") : absolute;
+    const pattern = new Bun.Glob(resolve7(canonical, relative5(directory, patternPath)).split(sep4).join("/"));
+    const parent = groups.find((group) => isWithinOrEqual(group.root, canonical));
+    if (parent) {
+      parent.patterns.push(pattern);
+      continue;
+    }
+    const nested = groups.filter((group) => isWithinOrEqual(canonical, group.root));
+    for (const group of nested)
+      groups.splice(groups.indexOf(group), 1);
+    groups.push({
+      root: canonical,
+      patterns: [pattern, ...nested.flatMap((group) => group.patterns)]
+    });
+  }
+  return groups;
 }
 async function createServerInstance(options, watch2) {
   const config = await resolveConfig(options);
-  const { renderProjectHtml } = await import("./project-ybacfze8.js");
+  if (config.target !== "web") {
+    throw new Error("Development server only supports Web targets: web, web-mobile, web-pc");
+  }
+  const { renderProjectHtml } = await import("./project-6tft5e77.js");
   for (const [route, entry] of Object.entries(config.pages)) {
     await renderProjectHtml(config, {}, entry, route);
   }
-  const developmentOutDir = resolve8(config.root, "dist", "dev", "h5");
+  const developmentOutDir = resolve7(config.root, "dist", "dev", "h5");
   await assertSafeSubdirectory(config.root, developmentOutDir, INVALID_DEVELOPMENT_DIRECTORY_MESSAGE);
   const proxy = createProxyHandler(config.server.proxy);
   const sessionId = createGenerationId();
-  const sessionOutDir = resolve8(developmentOutDir, sessionId);
+  const sessionOutDir = resolve7(developmentOutDir, sessionId);
   const artifacts = new Map;
-  const buildProject = createDevelopmentBuilder(sessionId, sessionOutDir, artifacts);
+  const buildProject = createDevelopmentBuilder(sessionId, sessionOutDir, artifacts, config);
   const liveReload = watch2 ? createLiveReloadHub() : undefined;
   const bundles = new Map;
   const dirtyEntries = new Set;
@@ -2868,8 +2980,8 @@ async function createServerInstance(options, watch2) {
 }
 function createServerHandle(getInstance, disposeWatcher) {
   return new Proxy({}, {
-    get(_target, property) {
-      if (property === "stop") {
+    get(_target, property2) {
+      if (property2 === "stop") {
         return async (closeActiveConnections) => {
           disposeWatcher();
           const instance = getInstance();
@@ -2878,7 +2990,7 @@ function createServerHandle(getInstance, disposeWatcher) {
         };
       }
       const server = getInstance().server;
-      const value = server[property];
+      const value = server[property2];
       return typeof value === "function" ? value.bind(server) : value;
     }
   });
@@ -2893,14 +3005,14 @@ async function serveProjectRequest(request, config, pages, getBundle, artifacts,
       return bundle;
     }
     try {
-      const { renderProjectHtml } = await import("./project-ybacfze8.js");
+      const { renderProjectHtml } = await import("./project-6tft5e77.js");
       const rendered = await renderProjectHtml(config, {
         head: bundle.stylesheets.map(({ pathname: href }) => ({
           tag: "link",
           attributes: { rel: "stylesheet", href }
         })),
         scripts: [{ type: "module", src: bundle.entry.pathname }]
-      }, entry, route);
+      }, entry, route, bundle.components);
       const html = await emitDevelopmentDocumentStyles(rendered, bundle);
       publishDevelopmentBundle(bundle, artifacts);
       return new Response(liveReload ? injectLiveReloadScript(html) : html, {
@@ -2950,14 +3062,14 @@ async function serveProjectRequest(request, config, pages, getBundle, artifacts,
     const bundle = await getBundle(config.entry, true);
     if (!(bundle instanceof Response)) {
       try {
-        const { renderProjectHtml } = await import("./project-ybacfze8.js");
+        const { renderProjectHtml } = await import("./project-6tft5e77.js");
         const rendered = await renderProjectHtml(config, {
           head: bundle.stylesheets.map(({ pathname: href }) => ({
             tag: "link",
             attributes: { rel: "stylesheet", href }
           })),
           scripts: [{ type: "module", src: bundle.entry.pathname }]
-        }, config.entry, "/");
+        }, config.entry, "/", bundle.components);
         const html = await emitDevelopmentDocumentStyles(rendered, bundle);
         publishDevelopmentBundle(bundle, artifacts);
         return new Response(liveReload ? injectLiveReloadScript(html) : html, {
@@ -3066,7 +3178,7 @@ function isWatchedFile(instance, relativePath) {
   if (segments.some((segment) => IGNORED_WATCH_SEGMENTS.has(segment))) {
     return false;
   }
-  const absolutePath = resolve8(instance.config.root, relativePath);
+  const absolutePath = resolve7(instance.config.root, relativePath);
   if (isWithinOrEqual(instance.config.build.outDir, absolutePath)) {
     return false;
   }
@@ -3074,14 +3186,14 @@ function isWatchedFile(instance, relativePath) {
   if (base.startsWith(".") && absolutePath !== instance.config.configFile) {
     return false;
   }
-  return WATCHED_EXTENSIONS.has(extname2(base).toLowerCase());
+  return WATCHED_EXTENSIONS.has(extname(base).toLowerCase());
 }
 function toRelativePath2(root, absolutePath) {
-  return relative4(root, absolutePath).split(sep3).join("/");
+  return relative5(root, absolutePath).split(sep4).join("/");
 }
 function isWithinOrEqual(parent, candidate) {
-  const pathFromParent = relative4(parent, candidate);
-  return pathFromParent === "" || pathFromParent !== ".." && !pathFromParent.startsWith(`..${sep3}`) && !isAbsolute4(pathFromParent);
+  const pathFromParent = relative5(parent, candidate);
+  return pathFromParent === "" || pathFromParent !== ".." && !pathFromParent.startsWith(`..${sep4}`) && !isAbsolute4(pathFromParent);
 }
 async function emitDevelopmentDocumentStyles(rendered, bundle) {
   const generationUrl = bundle.generationUrl;
@@ -3096,7 +3208,7 @@ async function emitDevelopmentDocumentStyles(rendered, bundle) {
   }
   return result.html;
 }
-function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts) {
+function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts, config) {
   let queue = Promise.resolve();
   let disposed = false;
   let disposal;
@@ -3123,7 +3235,7 @@ function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts) {
     const result = queue.then(async () => {
       if (disposed)
         return buildFailureResponse();
-      const bundle = await buildProjectBundle(entry, sessionId, sessionOutDir);
+      const bundle = await buildProjectBundle(entry, sessionId, sessionOutDir, config);
       if (!(bundle instanceof Response)) {
         const previous = latestBundles.get(entry);
         latestBundles.set(entry, bundle);
@@ -3146,7 +3258,7 @@ function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts) {
     retirementTimers.forEach((timer) => clearTimeout(timer));
     retirementTimers.clear();
     disposal = queue.then(async () => {
-      await rm5(sessionOutDir, { recursive: true, force: true });
+      await rm2(sessionOutDir, { recursive: true, force: true });
       latestBundles.clear();
       artifacts.clear();
     });
@@ -3159,14 +3271,14 @@ function releaseDevelopmentBundle(bundle) {
   bundle.retire?.();
 }
 async function removeDevelopmentBundle(bundle, artifacts) {
-  await rm5(bundle.outDir, { recursive: true, force: true });
+  await rm2(bundle.outDir, { recursive: true, force: true });
   for (const pathname of bundle.artifacts.keys()) {
     artifacts.delete(pathname);
   }
 }
-async function buildProjectBundle(entry, sessionId, sessionOutDir) {
+async function buildProjectBundle(entry, sessionId, sessionOutDir, config) {
   const generationId = createGenerationId();
-  const generationOutDir = resolve8(sessionOutDir, generationId);
+  const generationOutDir = resolve7(sessionOutDir, generationId);
   const generationUrl = `${DEVELOPMENT_URL_PREFIX}/${sessionId}/${generationId}`;
   const buildOptions = {
     entrypoints: [entry],
@@ -3184,7 +3296,8 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
   };
   let success = false;
   try {
-    const { result, styles } = await buildWebBundle(buildOptions);
+    const components = createWebComponentContext(config, entry);
+    const { result, styles } = await buildWebBundle(buildOptions, components);
     const entryArtifact = result.outputs.find(isEntryJavaScriptOutput);
     if (!result.success || !entryArtifact) {
       result.logs.forEach((log) => console.error(log));
@@ -3203,8 +3316,8 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
       pendingArtifacts.set(developmentOutput.pathname, developmentOutput);
       outputs.set(output, developmentOutput);
     }
-    const entry2 = outputs.get(entryArtifact);
-    if (!entry2) {
+    const entryOutput = outputs.get(entryArtifact);
+    if (!entryOutput) {
       throw new Error("Development entry output was not indexed");
     }
     const componentStylesheets = (await emitComponentStyles(styles, generationOutDir)).map((filePath) => ({
@@ -3217,9 +3330,10 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
     success = true;
     return {
       outDir: generationOutDir,
+      components,
       generationUrl,
       activeRequests: 0,
-      entry: entry2,
+      entry: entryOutput,
       componentStylesheets,
       stylesheets: result.outputs.filter(isStylesheetOutput).map((output) => outputs.get(output)).filter((output) => output !== undefined),
       artifacts: pendingArtifacts
@@ -3229,7 +3343,7 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
     return buildFailureResponse();
   } finally {
     if (!success) {
-      await rm5(generationOutDir, { recursive: true, force: true });
+      await rm2(generationOutDir, { recursive: true, force: true });
     }
   }
 }
@@ -3246,12 +3360,12 @@ function publishDevelopmentBundle(bundle, artifacts) {
   }
 }
 function createDevelopmentOutput(generationOutDir, generationUrl, output) {
-  const filePath = resolve8(output.path);
-  const pathFromGeneration = relative4(generationOutDir, filePath);
-  if (pathFromGeneration === "" || pathFromGeneration === ".." || pathFromGeneration.startsWith(`..${sep3}`) || isAbsolute4(pathFromGeneration)) {
+  const filePath = resolve7(output.path);
+  const pathFromGeneration = relative5(generationOutDir, filePath);
+  if (pathFromGeneration === "" || pathFromGeneration === ".." || pathFromGeneration.startsWith(`..${sep4}`) || isAbsolute4(pathFromGeneration)) {
     throw new Error(`Development output must not escape outside its generation directory: ${output.path}`);
   }
-  const urlPath = pathFromGeneration.split(sep3).map((segment) => encodeURIComponent(segment)).join("/");
+  const urlPath = pathFromGeneration.split(sep4).map((segment) => encodeURIComponent(segment)).join("/");
   return {
     filePath,
     pathname: `${generationUrl}/${urlPath}`,
@@ -3268,7 +3382,7 @@ function buildFailureResponse() {
   });
 }
 
-export { TARGET_TYPES, isTargetType, MP_TARGET_TYPES, isMpTargetType, defineConfig, resolveConfig, WebTarget, MpTarget, mpWeixinTarget, mpAlipayTarget, mpBytedanceTarget, mpXiaohongshuTarget, TargetRegistry, targetRegistry, build, createProject, startDevServer };
+export { TARGET_TYPES, isTargetType, MP_TARGET_TYPES, isMpTargetType, defineConfig, resolveConfig, WebTarget, MpTarget, mpWeixinTarget, mpAlipayTarget, mpBytedanceTarget, mpXiaohongshuTarget, TargetRegistry, targetRegistry, build, buildConfigured, reportComponents, reportConfiguredComponents, formatComponentSelectionReport, createProject, startDevServer };
 
-//# debugId=E2D8EB9E7C04701664756E2164756E21
-//# sourceMappingURL=index-x5rrsfyb.js.map
+//# debugId=2077B6EF8001292264756E2164756E21
+//# sourceMappingURL=index-2g3e5sjt.js.map