@vertz/ui-server 0.2.15 → 0.2.16

package/dist/bun-plugin/index.js

@@ -1,21 +1,28 @@
 // @bun
+import {
+  computeImageOutputPaths,
+  resolveImageSrc
+} from "../shared/chunk-gggnhyqj.js";
 import {
   __require
 } from "../shared/chunk-eb80r8e8.js";
 
 // src/bun-plugin/plugin.ts
-import { mkdirSync, writeFileSync } from "fs";
-import { dirname, relative, resolve } from "path";
+import { mkdirSync as mkdirSync2, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "fs";
+import { dirname, relative, resolve as resolve2 } from "path";
 import remapping from "@ampproject/remapping";
 import {
   ComponentAnalyzer,
   CSSExtractor,
   compile,
   generateAllManifests,
-  HydrationTransformer
+  HydrationTransformer,
+  regenerateFileManifest,
+  resolveModuleSpecifier,
+  transformRouteSplitting
 } from "@vertz/ui-compiler";
-import MagicString from "magic-string";
-import { Project, ts as ts2 } from "ts-morph";
+import MagicString3 from "magic-string";
+import { Project as Project2, ts as ts4 } from "ts-morph";
 
 // src/bun-plugin/context-stable-ids.ts
 import { ts } from "ts-morph";
@@ -48,6 +55,22 @@ function injectContextStableIds(source, sourceFile, relFilePath) {
   }
 }
 
+// src/bun-plugin/entity-schema-loader.ts
+import { readFileSync } from "fs";
+function loadEntitySchema(schemaPath) {
+  if (!schemaPath)
+    return;
+  try {
+    const content = readFileSync(schemaPath, "utf-8");
+    const parsed = JSON.parse(content);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+      return;
+    return parsed;
+  } catch {
+    return;
+  }
+}
+
 // src/bun-plugin/fast-refresh-codegen.ts
 function generateRefreshPreamble(moduleId, contentHash) {
   const escapedId = moduleId.replace(/['\\]/g, "\\$&");
@@ -95,6 +118,276 @@ function generateRefreshCode(moduleId, components, contentHash) {
   return { preamble, epilogue };
 }
 
+// src/bun-plugin/field-selection-inject.ts
+import { analyzeFieldSelection } from "@vertz/ui-compiler";
+import MagicString from "magic-string";
+function injectFieldSelection(filePath, source, options) {
+  const selections = analyzeFieldSelection(filePath, source);
+  if (selections.length === 0) {
+    return { code: source, injected: false, diagnostics: [] };
+  }
+  const s = new MagicString(source);
+  let injected = false;
+  const diagnostics = [];
+  for (const selection of selections) {
+    if (hasUserSelect(source, selection.descriptorCallStart, selection.descriptorCallEnd)) {
+      diagnostics.push({
+        queryVar: selection.queryVar,
+        singleFileFields: [...selection.fields],
+        crossFileFields: [],
+        combinedFields: [...selection.fields],
+        hasOpaqueAccess: selection.hasOpaqueAccess,
+        injected: false
+      });
+      continue;
+    }
+    const entityName = selection.inferredEntityName ?? options?.entityType;
+    const schema = entityName ? options?.entitySchema?.[entityName] : undefined;
+    const crossFileResult = resolveCrossFileFields(filePath, selection.propFlows, options);
+    const combinedFields = [...selection.fields, ...crossFileResult.fields];
+    const combinedOpaque = selection.hasOpaqueAccess || crossFileResult.hasOpaqueAccess;
+    let queryInjected = false;
+    if (!combinedOpaque && combinedFields.length > 0) {
+      const injectionStr = schema ? buildManifestAwareInjection(combinedFields, selection.nestedAccess, schema) : buildSimpleSelectInjection(combinedFields);
+      if (injectionStr) {
+        switch (selection.injectionKind) {
+          case "insert-arg":
+            s.appendLeft(selection.injectionPos, `{ ${injectionStr} }`);
+            break;
+          case "merge-into-object":
+            s.appendLeft(selection.injectionPos, `, ${injectionStr} `);
+            break;
+          case "append-arg":
+            s.appendLeft(selection.injectionPos, `, { ${injectionStr} }`);
+            break;
+        }
+        queryInjected = true;
+        injected = true;
+      }
+    }
+    diagnostics.push({
+      queryVar: selection.queryVar,
+      singleFileFields: [...selection.fields],
+      crossFileFields: [...crossFileResult.fields],
+      combinedFields: [...new Set(combinedFields)],
+      hasOpaqueAccess: combinedOpaque,
+      injected: queryInjected
+    });
+  }
+  return {
+    code: s.toString(),
+    injected,
+    diagnostics
+  };
+}
+function buildSimpleSelectInjection(fields) {
+  const allFields = new Set(["id", ...fields]);
+  const sortedFields = [...allFields].sort();
+  const selectEntries = sortedFields.map((f) => `${f}: true`).join(", ");
+  return `select: { ${selectEntries} }`;
+}
+function buildManifestAwareInjection(fields, nestedAccess, schema) {
+  const relationNames = new Set(Object.keys(schema.relations));
+  const hiddenFieldSet = new Set(schema.hiddenFields);
+  const primaryKey = schema.primaryKey ?? "id";
+  const scalarFields = new Set([primaryKey]);
+  const relationIncludes = new Map;
+  for (const field of new Set(fields)) {
+    if (relationNames.has(field)) {
+      const nestedForField = nestedAccess.filter((n) => n.field === field);
+      if (nestedForField.length > 0) {
+        if (!relationIncludes.has(field)) {
+          relationIncludes.set(field, new Set);
+        }
+        for (const nested of nestedForField) {
+          const firstSegment = nested.nestedPath[0];
+          if (firstSegment !== undefined) {
+            relationIncludes.get(field)?.add(firstSegment);
+          }
+        }
+      } else {
+        scalarFields.add(field);
+      }
+    } else {
+      scalarFields.add(field);
+    }
+  }
+  for (const hidden of hiddenFieldSet) {
+    scalarFields.delete(hidden);
+  }
+  const sortedScalars = [...scalarFields].sort();
+  const selectEntries = sortedScalars.map((f) => `${f}: true`).join(", ");
+  const parts = [`select: { ${selectEntries} }`];
+  if (relationIncludes.size > 0) {
+    const includeEntries = [];
+    const sortedRelations = [...relationIncludes.keys()].sort();
+    for (const relName of sortedRelations) {
+      const relSchema = schema.relations[relName];
+      const relFieldSet = relationIncludes.get(relName);
+      if (!relFieldSet)
+        continue;
+      let relFields = [...relFieldSet];
+      if (relSchema && Array.isArray(relSchema.selection)) {
+        const allowed = new Set(relSchema.selection);
+        relFields = relFields.filter((f) => allowed.has(f));
+      }
+      if (relFields.length > 0) {
+        const sortedRelFields = relFields.sort();
+        const relSelectEntries = sortedRelFields.map((f) => `${f}: true`).join(", ");
+        includeEntries.push(`${relName}: { select: { ${relSelectEntries} } }`);
+      }
+    }
+    if (includeEntries.length > 0) {
+      parts.push(`include: { ${includeEntries.join(", ")} }`);
+    }
+  }
+  return parts.join(", ");
+}
+function hasUserSelect(source, callStart, callEnd) {
+  const region = source.slice(callStart, callEnd);
+  return /\bselect\s*:/.test(region);
+}
+function resolveCrossFileFields(filePath, propFlows, options) {
+  if (!options?.manifest || !options.resolveImport || propFlows.length === 0) {
+    return { fields: [], hasOpaqueAccess: false };
+  }
+  const fields = [];
+  let hasOpaqueAccess = false;
+  for (const flow of propFlows) {
+    if (!flow.importSource)
+      continue;
+    const resolvedPath = options.resolveImport(flow.importSource, filePath);
+    if (!resolvedPath) {
+      hasOpaqueAccess = true;
+      continue;
+    }
+    const childFields = options.manifest.getResolvedPropFields(resolvedPath, flow.componentName, flow.propName);
+    if (childFields) {
+      fields.push(...childFields.fields);
+      if (childFields.hasOpaqueAccess) {
+        hasOpaqueAccess = true;
+      }
+    }
+  }
+  return { fields, hasOpaqueAccess };
+}
+
+// src/bun-plugin/field-selection-manifest.ts
+import { analyzeComponentPropFields } from "@vertz/ui-compiler";
+
+class FieldSelectionManifest {
+  fileComponents = new Map;
+  importResolver = () => {
+    return;
+  };
+  resolvedCache = new Map;
+  setImportResolver(resolver) {
+    this.importResolver = resolver;
+  }
+  registerFile(filePath, sourceText) {
+    const components = analyzeComponentPropFields(filePath, sourceText);
+    this.fileComponents.set(filePath, components);
+    this.resolvedCache.clear();
+  }
+  updateFile(filePath, sourceText) {
+    const oldComponents = this.fileComponents.get(filePath);
+    const newComponents = analyzeComponentPropFields(filePath, sourceText);
+    const changed = !componentsEqual(oldComponents, newComponents);
+    if (changed) {
+      this.fileComponents.set(filePath, newComponents);
+      this.resolvedCache.clear();
+    }
+    return { changed };
+  }
+  deleteFile(filePath) {
+    this.fileComponents.delete(filePath);
+    this.resolvedCache.clear();
+  }
+  getComponentPropFields(filePath, componentName, propName) {
+    const components = this.fileComponents.get(filePath);
+    if (!components)
+      return;
+    const component = components.find((c) => c.componentName === componentName);
+    if (!component)
+      return;
+    return component.props[propName];
+  }
+  getResolvedPropFields(filePath, componentName, propName) {
+    const cacheKey = `${filePath}::${componentName}::${propName}`;
+    if (this.resolvedCache.has(cacheKey)) {
+      return this.resolvedCache.get(cacheKey);
+    }
+    const result = this.resolveFields(filePath, componentName, propName, new Set);
+    if (result) {
+      this.resolvedCache.set(cacheKey, result);
+    }
+    return result;
+  }
+  resolveFields(filePath, componentName, propName, visited) {
+    const visitKey = `${filePath}::${componentName}::${propName}`;
+    if (visited.has(visitKey))
+      return;
+    visited.add(visitKey);
+    const access = this.getComponentPropFields(filePath, componentName, propName);
+    if (!access)
+      return;
+    const allFields = new Set(access.fields);
+    let hasOpaqueAccess = access.hasOpaqueAccess;
+    for (const forward of access.forwarded) {
+      const targetPath = forward.importSource ? this.importResolver(forward.importSource, filePath) : undefined;
+      if (!targetPath) {
+        hasOpaqueAccess = true;
+        continue;
+      }
+      const childFields = this.resolveFields(targetPath, forward.componentName, forward.propName, visited);
+      if (childFields) {
+        for (const field of childFields.fields) {
+          allFields.add(field);
+        }
+        if (childFields.hasOpaqueAccess) {
+          hasOpaqueAccess = true;
+        }
+      }
+    }
+    return { fields: [...allFields], hasOpaqueAccess };
+  }
+}
+function componentsEqual(a, b) {
+  if (!a)
+    return b.length === 0;
+  if (a.length !== b.length)
+    return false;
+  for (let i = 0;i < a.length; i++) {
+    const ac = a[i];
+    const bc = b[i];
+    if (ac.componentName !== bc.componentName)
+      return false;
+    const aProps = Object.keys(ac.props).sort();
+    const bProps = Object.keys(bc.props).sort();
+    if (aProps.length !== bProps.length)
+      return false;
+    for (let j = 0;j < aProps.length; j++) {
+      const aKey = aProps[j];
+      const bKey = bProps[j];
+      if (aKey !== bKey)
+        return false;
+      const aProp = ac.props[aKey];
+      const bProp = bc.props[bKey];
+      if (aProp.hasOpaqueAccess !== bProp.hasOpaqueAccess)
+        return false;
+      if (aProp.fields.length !== bProp.fields.length)
+        return false;
+      const aFieldsSorted = [...aProp.fields].sort();
+      const bFieldsSorted = [...bProp.fields].sort();
+      for (let k = 0;k < aFieldsSorted.length; k++) {
+        if (aFieldsSorted[k] !== bFieldsSorted[k])
+          return false;
+      }
+    }
+  }
+  return true;
+}
+
 // src/bun-plugin/file-path-hash.ts
 function filePathHash(filePath) {
   let hash = 5381;
@@ -104,20 +397,459 @@ function filePathHash(filePath) {
   return hash.toString(36);
 }
 
+// src/bun-plugin/image-processor.ts
+import { createHash } from "crypto";
+import { existsSync, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "fs";
+import { basename, extname, resolve } from "path";
+import sharp from "sharp";
+var FORMAT_MAP = {
+  jpeg: { ext: ".jpg", mime: "image/jpeg" },
+  jpg: { ext: ".jpg", mime: "image/jpeg" },
+  png: { ext: ".png", mime: "image/png" },
+  webp: { ext: ".webp", mime: "image/webp" },
+  gif: { ext: ".gif", mime: "image/gif" },
+  tiff: { ext: ".tiff", mime: "image/tiff" },
+  avif: { ext: ".avif", mime: "image/avif" }
+};
+async function processImage(opts) {
+  const { sourcePath, width, height, quality, fit, outputDir } = opts;
+  if (!existsSync(sourcePath)) {
+    return { ok: false, error: `Image not found: ${sourcePath}` };
+  }
+  const sourceBuffer = readFileSync2(sourcePath);
+  const hash = createHash("sha256").update(sourceBuffer).update(`${width}x${height}q${quality}f${fit}`).digest("hex").slice(0, 12);
+  const name = basename(sourcePath, extname(sourcePath));
+  const meta = await sharp(sourceBuffer).metadata();
+  const sourceFormat = meta.format ?? "jpeg";
+  const defaultFormat = { ext: ".jpg", mime: "image/jpeg" };
+  const formatInfo = FORMAT_MAP[sourceFormat] ?? defaultFormat;
+  const webp1xName = `${name}-${hash}-${width}w.webp`;
+  const webp2xName = `${name}-${hash}-${width * 2}w.webp`;
+  const fallbackName = `${name}-${hash}-${width * 2}w${formatInfo.ext}`;
+  const webp1xPath = resolve(outputDir, webp1xName);
+  const webp2xPath = resolve(outputDir, webp2xName);
+  const fallbackPath = resolve(outputDir, fallbackName);
+  if (existsSync(webp1xPath) && existsSync(webp2xPath) && existsSync(fallbackPath)) {
+    return {
+      ok: true,
+      webp1x: { path: webp1xPath, url: `/__vertz_img/${webp1xName}` },
+      webp2x: { path: webp2xPath, url: `/__vertz_img/${webp2xName}` },
+      fallback: {
+        path: fallbackPath,
+        url: `/__vertz_img/${fallbackName}`,
+        format: formatInfo.mime
+      }
+    };
+  }
+  mkdirSync(outputDir, { recursive: true });
+  const sharpFit = fit;
+  const [webp1xBuf, webp2xBuf, fallbackBuf] = await Promise.all([
+    sharp(sourceBuffer).resize(width, height, { fit: sharpFit }).webp({ quality }).toBuffer(),
+    sharp(sourceBuffer).resize(width * 2, height * 2, { fit: sharpFit }).webp({ quality }).toBuffer(),
+    sharp(sourceBuffer).resize(width * 2, height * 2, { fit: sharpFit }).toFormat(sourceFormat, { quality }).toBuffer()
+  ]);
+  writeFileSync(webp1xPath, webp1xBuf);
+  writeFileSync(webp2xPath, webp2xBuf);
+  writeFileSync(fallbackPath, fallbackBuf);
+  return {
+    ok: true,
+    webp1x: { path: webp1xPath, url: `/__vertz_img/${webp1xName}` },
+    webp2x: { path: webp2xPath, url: `/__vertz_img/${webp2xName}` },
+    fallback: { path: fallbackPath, url: `/__vertz_img/${fallbackName}`, format: formatInfo.mime }
+  };
+}
+
+// src/bun-plugin/image-transform.ts
+import MagicString2 from "magic-string";
+import { Project, ts as ts2 } from "ts-morph";
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function transformImages(source, filePath, options) {
+  if (!source.includes("<Image") && !source.includes("Image")) {
+    return { code: source, map: null, transformed: false };
+  }
+  const localName = findImageImportName(source);
+  if (!localName) {
+    return { code: source, map: null, transformed: false };
+  }
+  const project = new Project({ useInMemoryFileSystem: true });
+  const sourceFile = project.createSourceFile(filePath, source, { overwrite: true });
+  const jsxElements = findImageJsxElements(sourceFile, localName);
+  if (jsxElements.length === 0) {
+    return { code: source, map: null, transformed: false };
+  }
+  const s = new MagicString2(source);
+  let transformed = false;
+  const sorted = [...jsxElements].sort((a, b) => b.getStart() - a.getStart());
+  for (const element of sorted) {
+    const props = extractStaticProps(element, sourceFile);
+    if (!props)
+      continue;
+    const paths = options.getImageOutputPaths(options.resolveImagePath(props.src, filePath), props.width, props.height, props.quality ?? 80, props.fit ?? "cover");
+    const resolvedLoading = props.priority ? "eager" : props.loading ?? "lazy";
+    const resolvedDecoding = props.priority ? "sync" : props.decoding ?? "async";
+    const resolvedFetchpriority = props.priority ? "high" : props.fetchpriority;
+    const imgAttrs = [
+      `src="${escapeAttr(paths.fallback)}"`,
+      `width="${props.width}"`,
+      `height="${props.height}"`,
+      `alt="${escapeAttr(props.alt)}"`,
+      `loading="${escapeAttr(resolvedLoading)}"`,
+      `decoding="${escapeAttr(resolvedDecoding)}"`
+    ];
+    if (resolvedFetchpriority)
+      imgAttrs.push(`fetchpriority="${escapeAttr(resolvedFetchpriority)}"`);
+    if (props.class)
+      imgAttrs.push(`class="${escapeAttr(props.class)}"`);
+    if (props.style)
+      imgAttrs.push(`style="${escapeAttr(props.style)}"`);
+    for (const attr of props.extraAttrs) {
+      imgAttrs.push(attr);
+    }
+    const pictureOpen = props.pictureClass ? `<picture class="${escapeAttr(props.pictureClass)}">` : "<picture>";
+    const replacement = [
+      pictureOpen,
+      `<source srcset="${escapeAttr(paths.webp1x)} 1x, ${escapeAttr(paths.webp2x)} 2x" type="image/webp" />`,
+      `<img ${imgAttrs.join(" ")} />`,
+      "</picture>"
+    ].join("");
+    s.overwrite(element.getStart(), element.getEnd(), replacement);
+    transformed = true;
+  }
+  if (!transformed) {
+    return { code: source, map: null, transformed: false };
+  }
+  return {
+    code: s.toString(),
+    map: s.generateMap({ source: filePath, hires: true }),
+    transformed: true
+  };
+}
+function findImageImportName(source) {
+  const importMatch = source.match(/import\s*\{[^}]*\bImage\b(?:\s+as\s+(\w+))?[^}]*\}\s*from\s*['"]@vertz\/ui['"]/);
+  if (!importMatch)
+    return null;
+  return importMatch[1] ?? "Image";
+}
+function findImageJsxElements(sourceFile, localName) {
+  const results = [];
+  function visit(node) {
+    if (ts2.isJsxSelfClosingElement(node)) {
+      const tagName = node.tagName.getText(sourceFile.compilerNode);
+      if (tagName === localName) {
+        results.push(node);
+      }
+    }
+    ts2.forEachChild(node, visit);
+  }
+  visit(sourceFile.compilerNode);
+  return results;
+}
+function extractStaticProps(element, sourceFile) {
+  const attrs = element.attributes;
+  for (const attr of attrs.properties) {
+    if (ts2.isJsxSpreadAttribute(attr))
+      return null;
+  }
+  let src = null;
+  let width = null;
+  let height = null;
+  let alt = null;
+  let className;
+  let pictureClass;
+  let style;
+  let loading;
+  let decoding;
+  let fetchpriority;
+  let priority = false;
+  let quality;
+  let fit;
+  const extraAttrs = [];
+  const KNOWN_PROPS = new Set([
+    "src",
+    "width",
+    "height",
+    "alt",
+    "class",
+    "pictureClass",
+    "style",
+    "loading",
+    "decoding",
+    "fetchpriority",
+    "priority",
+    "quality",
+    "fit"
+  ]);
+  for (const attr of attrs.properties) {
+    if (!ts2.isJsxAttribute(attr))
+      continue;
+    const name = attr.name.getText(sourceFile.compilerNode);
+    const value = attr.initializer;
+    switch (name) {
+      case "src":
+        src = extractStaticString(value, sourceFile);
+        if (src === null)
+          return null;
+        break;
+      case "width":
+        width = extractStaticNumber(value, sourceFile);
+        if (width === null)
+          return null;
+        break;
+      case "height":
+        height = extractStaticNumber(value, sourceFile);
+        if (height === null)
+          return null;
+        break;
+      case "alt":
+        alt = extractStaticString(value, sourceFile);
+        if (alt === null)
+          return null;
+        break;
+      case "class":
+        if (value) {
+          className = extractStaticString(value, sourceFile) ?? undefined;
+          if (!className)
+            return null;
+        }
+        break;
+      case "pictureClass":
+        if (value) {
+          pictureClass = extractStaticString(value, sourceFile) ?? undefined;
+          if (!pictureClass)
+            return null;
+        }
+        break;
+      case "style":
+        if (value) {
+          style = extractStaticString(value, sourceFile) ?? undefined;
+          if (!style)
+            return null;
+        }
+        break;
+      case "loading":
+        loading = extractStaticString(value, sourceFile) ?? undefined;
+        break;
+      case "decoding":
+        decoding = extractStaticString(value, sourceFile) ?? undefined;
+        break;
+      case "fetchpriority":
+        fetchpriority = extractStaticString(value, sourceFile) ?? undefined;
+        break;
+      case "priority":
+        if (!value) {
+          priority = true;
+        } else {
+          const boolVal = extractStaticBoolean(value, sourceFile);
+          if (boolVal !== null)
+            priority = boolVal;
+        }
+        break;
+      case "quality":
+        quality = extractStaticNumber(value, sourceFile) ?? undefined;
+        break;
+      case "fit":
+        fit = extractStaticString(value, sourceFile) ?? undefined;
+        break;
+      default:
+        if (!KNOWN_PROPS.has(name)) {
+          const strVal = extractStaticString(value, sourceFile);
+          if (strVal !== null) {
+            extraAttrs.push(`${name}="${escapeAttr(strVal)}"`);
+          }
+        }
+        break;
+    }
+  }
+  if (!src || width === null || height === null || alt === null) {
+    return null;
+  }
+  return {
+    src,
+    width,
+    height,
+    alt,
+    class: className,
+    pictureClass,
+    style,
+    loading,
+    decoding,
+    fetchpriority,
+    priority,
+    quality,
+    fit,
+    extraAttrs
+  };
+}
+function extractStaticString(value, _sourceFile) {
+  if (!value)
+    return null;
+  if (ts2.isStringLiteral(value)) {
+    return value.text;
+  }
+  if (ts2.isJsxExpression(value) && value.expression) {
+    const expr = value.expression;
+    if (ts2.isStringLiteral(expr)) {
+      return expr.text;
+    }
+    if (ts2.isNoSubstitutionTemplateLiteral(expr)) {
+      return expr.text;
+    }
+  }
+  return null;
+}
+function extractStaticNumber(value, _sourceFile) {
+  if (!value)
+    return null;
+  if (ts2.isJsxExpression(value) && value.expression) {
+    const expr = value.expression;
+    if (ts2.isNumericLiteral(expr)) {
+      return Number(expr.text);
+    }
+  }
+  return null;
+}
+function extractStaticBoolean(value, _sourceFile) {
+  if (!value)
+    return null;
+  if (ts2.isJsxExpression(value) && value.expression) {
+    const expr = value.expression;
+    if (expr.kind === ts2.SyntaxKind.TrueKeyword)
+      return true;
+    if (expr.kind === ts2.SyntaxKind.FalseKeyword)
+      return false;
+  }
+  return null;
+}
+
+// src/bun-plugin/island-id-inject.ts
+import { ts as ts3 } from "ts-morph";
+function injectIslandIds(source, sourceFile, relFilePath) {
+  const originalSource = source.original;
+  if (!originalSource.includes("<Island") && !originalSource.includes("Island")) {
+    return;
+  }
+  const localName = findIslandImportName(originalSource);
+  if (!localName)
+    return;
+  const jsxElements = findIslandJsxElements(sourceFile, localName);
+  if (jsxElements.length === 0)
+    return;
+  const escapedPath = relFilePath.replace(/['\\]/g, "\\$&");
+  for (const element of jsxElements) {
+    if (hasIdProp(element, sourceFile))
+      continue;
+    const componentName = extractComponentName(element, sourceFile);
+    if (!componentName)
+      continue;
+    const stableId = `${escapedPath}::${componentName}`;
+    const tagName = element.tagName;
+    const tagEnd = tagName.end;
+    source.appendLeft(tagEnd, ` id="${stableId}"`);
+  }
+}
+function findIslandImportName(source) {
+  const importMatch = source.match(/import\s*\{[^}]*\bIsland\b(?:\s+as\s+(\w+))?[^}]*\}\s*from\s*['"]@vertz\/ui['"]/);
+  if (!importMatch)
+    return null;
+  return importMatch[1] ?? "Island";
+}
+function findIslandJsxElements(sourceFile, localName) {
+  const results = [];
+  function visit(node) {
+    if (ts3.isJsxSelfClosingElement(node)) {
+      const tagName = node.tagName.getText(sourceFile.compilerNode);
+      if (tagName === localName) {
+        results.push(node);
+      }
+    }
+    ts3.forEachChild(node, visit);
+  }
+  visit(sourceFile.compilerNode);
+  return results;
+}
+function hasIdProp(element, sourceFile) {
+  for (const attr of element.attributes.properties) {
+    if (ts3.isJsxAttribute(attr)) {
+      const name = attr.name.getText(sourceFile.compilerNode);
+      if (name === "id")
+        return true;
+    }
+  }
+  return false;
+}
+function extractComponentName(element, sourceFile) {
+  for (const attr of element.attributes.properties) {
+    if (!ts3.isJsxAttribute(attr))
+      continue;
+    const name = attr.name.getText(sourceFile.compilerNode);
+    if (name !== "component")
+      continue;
+    const value = attr.initializer;
+    if (!value)
+      return null;
+    if (ts3.isJsxExpression(value) && value.expression) {
+      if (ts3.isIdentifier(value.expression)) {
+        return value.expression.text;
+      }
+    }
+    return null;
+  }
+  return null;
+}
+
 // src/bun-plugin/plugin.ts
+function manifestsEqual(a, b) {
+  if (!a)
+    return false;
+  const aKeys = Object.keys(a.exports);
+  const bKeys = Object.keys(b.exports);
+  if (aKeys.length !== bKeys.length)
+    return false;
+  for (const key of aKeys) {
+    const aExport = a.exports[key];
+    const bExport = b.exports[key];
+    if (!aExport || !bExport)
+      return false;
+    if (aExport.kind !== bExport.kind)
+      return false;
+    if (aExport.reactivity.type !== bExport.reactivity.type)
+      return false;
+    if (aExport.reactivity.type === "signal-api" && bExport.reactivity.type === "signal-api") {
+      if (!setsEqual(aExport.reactivity.signalProperties, bExport.reactivity.signalProperties)) {
+        return false;
+      }
+      if (!setsEqual(aExport.reactivity.plainProperties, bExport.reactivity.plainProperties)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function setsEqual(a, b) {
+  if (a.size !== b.size)
+    return false;
+  for (const item of a) {
+    if (!b.has(item))
+      return false;
+  }
+  return true;
+}
 function createVertzBunPlugin(options) {
   const filter = options?.filter ?? /\.tsx$/;
   const hmr = options?.hmr ?? true;
   const fastRefresh = options?.fastRefresh ?? hmr;
+  const routeSplitting = options?.routeSplitting ?? false;
   const projectRoot = options?.projectRoot ?? process.cwd();
-  const cssOutDir = options?.cssOutDir ?? resolve(projectRoot, ".vertz", "css");
+  const cssOutDir = options?.cssOutDir ?? resolve2(projectRoot, ".vertz", "css");
   const cssExtractor = new CSSExtractor;
   const componentAnalyzer = new ComponentAnalyzer;
   const logger = options?.logger;
   const diagnostics = options?.diagnostics;
   const fileExtractions = new Map;
   const cssSidecarMap = new Map;
-  const srcDir = options?.srcDir ?? resolve(projectRoot, "src");
+  const srcDir = options?.srcDir ?? resolve2(projectRoot, "src");
   const frameworkManifestJson = __require(__require.resolve("@vertz/ui/reactivity.json"));
   const manifestResult = generateAllManifests({
     srcDir,
@@ -156,7 +888,31 @@ function createVertzBunPlugin(options) {
     }
   }
   diagnostics?.recordManifestPrepass(manifests.size, Math.round(manifestResult.durationMs), manifestResult.warnings.map((w) => ({ type: w.type, message: w.message })));
-  mkdirSync(cssOutDir, { recursive: true });
+  const fieldSelectionManifest = new FieldSelectionManifest;
+  const fieldSelectionResolveImport = (specifier, fromFile) => {
+    return resolveModuleSpecifier(specifier, fromFile, {}, srcDir);
+  };
+  fieldSelectionManifest.setImportResolver(fieldSelectionResolveImport);
+  let fieldSelectionFileCount = 0;
+  for (const [filePath] of manifests) {
+    if (filePath.endsWith(".tsx")) {
+      try {
+        const sourceText = readFileSync3(filePath, "utf-8");
+        fieldSelectionManifest.registerFile(filePath, sourceText);
+        fieldSelectionFileCount++;
+      } catch {}
+    }
+  }
+  diagnostics?.recordFieldSelectionManifest(fieldSelectionFileCount);
+  const entitySchemaPath = options?.entitySchemaPath ?? resolve2(projectRoot, ".vertz", "generated", "entity-schema.json");
+  let entitySchema = loadEntitySchema(entitySchemaPath);
+  if (logger?.isEnabled("fields") && entitySchema) {
+    logger.log("fields", "entity-schema-loaded", {
+      path: entitySchemaPath,
+      entities: Object.keys(entitySchema).length
+    });
+  }
+  mkdirSync2(cssOutDir, { recursive: true });
   const plugin = {
     name: "vertz-bun-plugin",
     setup(build) {
@@ -166,32 +922,129 @@ function createVertzBunPlugin(options) {
           const source = await Bun.file(args.path).text();
           const relPath = relative(projectRoot, args.path);
           logger?.log("plugin", "onLoad", { file: relPath, bytes: source.length });
-          const hydrationS = new MagicString(source);
-          const hydrationProject = new Project({
+          let sourceAfterRouteSplit = source;
+          let routeSplitMap = null;
+          if (routeSplitting) {
+            const splitResult = transformRouteSplitting(source, args.path);
+            if (splitResult.transformed) {
+              sourceAfterRouteSplit = splitResult.code;
+              routeSplitMap = splitResult.map;
+              if (logger?.isEnabled("plugin")) {
+                for (const d of splitResult.diagnostics) {
+                  logger.log("plugin", "route-split", {
+                    file: relPath,
+                    route: d.routePath,
+                    import: d.importSource,
+                    symbol: d.symbolName
+                  });
+                }
+                for (const s of splitResult.skipped) {
+                  logger.log("plugin", "route-split-skip", {
+                    file: relPath,
+                    route: s.routePath,
+                    reason: s.reason
+                  });
+                }
+              }
+            }
+          }
+          const hydrationS = new MagicString3(sourceAfterRouteSplit);
+          const hydrationProject = new Project2({
             useInMemoryFileSystem: true,
             compilerOptions: {
-              jsx: ts2.JsxEmit.Preserve,
+              jsx: ts4.JsxEmit.Preserve,
               strict: true
             }
           });
-          const hydrationSourceFile = hydrationProject.createSourceFile(args.path, source);
+          const hydrationSourceFile = hydrationProject.createSourceFile(args.path, sourceAfterRouteSplit);
           const hydrationTransformer = new HydrationTransformer;
           hydrationTransformer.transform(hydrationS, hydrationSourceFile);
           if (fastRefresh) {
             const relFilePath = relative(projectRoot, args.path);
             injectContextStableIds(hydrationS, hydrationSourceFile, relFilePath);
           }
+          {
+            const relFilePath = relative(projectRoot, args.path);
+            injectIslandIds(hydrationS, hydrationSourceFile, relFilePath);
+          }
           const hydratedCode = hydrationS.toString();
           const hydrationMap = hydrationS.generateMap({
             source: args.path,
             includeContent: true
           });
-          const compileResult = compile(hydratedCode, {
+          const fieldSelectionResult = injectFieldSelection(args.path, hydratedCode, {
+            manifest: fieldSelectionManifest,
+            resolveImport: fieldSelectionResolveImport,
+            entitySchema
+          });
+          const codeForCompile = fieldSelectionResult.code;
+          if (logger?.isEnabled("fields") && fieldSelectionResult.diagnostics.length > 0) {
+            for (const diag of fieldSelectionResult.diagnostics) {
+              logger.log("fields", "query", {
+                file: relPath,
+                queryVar: diag.queryVar,
+                fields: diag.combinedFields,
+                opaque: diag.hasOpaqueAccess,
+                injected: diag.injected,
+                crossFile: diag.crossFileFields.length
+              });
+            }
+          }
+          if (diagnostics && fieldSelectionResult.diagnostics.length > 0) {
+            diagnostics.recordFieldSelection(relPath, {
+              queries: fieldSelectionResult.diagnostics.map((d) => ({
+                queryVar: d.queryVar,
+                fields: d.combinedFields,
+                hasOpaqueAccess: d.hasOpaqueAccess,
+                crossFileFields: d.crossFileFields,
+                injected: d.injected
+              }))
+            });
+          }
+          const imageOutputDir = resolve2(projectRoot, ".vertz", "images");
+          const imageQueue = [];
+          const imageResult = transformImages(codeForCompile, args.path, {
+            projectRoot,
+            resolveImagePath: (src) => resolveImageSrc(src, args.path, projectRoot),
+            getImageOutputPaths: (sourcePath, w, h, q, f) => {
+              const paths = computeImageOutputPaths(sourcePath, w, h, q, f);
+              if (!paths) {
+                return {
+                  webp1x: sourcePath,
+                  webp2x: sourcePath,
+                  fallback: sourcePath,
+                  fallbackType: "image/jpeg"
+                };
+              }
+              imageQueue.push({
+                sourcePath,
+                width: w,
+                height: h,
+                quality: q,
+                fit: f,
+                outputDir: imageOutputDir
+              });
+              return paths;
+            }
+          });
+          const codeAfterImageTransform = imageResult.code;
+          if (imageQueue.length > 0) {
+            await Promise.all(imageQueue.map((opts) => processImage({ ...opts, fit: opts.fit })));
+          }
+          const compileResult = compile(codeAfterImageTransform, {
             filename: args.path,
             target: options?.target,
             manifests: getManifestsRecord()
           });
-          const remapped = remapping([compileResult.map, hydrationMap], () => null);
+          const mapsToChain = [compileResult.map];
+          if (imageResult.map) {
+            mapsToChain.push(imageResult.map);
+          }
+          mapsToChain.push(hydrationMap);
+          if (routeSplitMap) {
+            mapsToChain.push(routeSplitMap);
+          }
+          const remapped = remapping(mapsToChain, () => null);
           const extraction = cssExtractor.extract(source, args.path);
           let cssImportLine = "";
           if (extraction.css.length > 0) {
@@ -199,8 +1052,8 @@ function createVertzBunPlugin(options) {
             if (hmr) {
               const hash = filePathHash(args.path);
               const cssFileName = `${hash}.css`;
-              const cssFilePath = resolve(cssOutDir, cssFileName);
-              writeFileSync(cssFilePath, extraction.css);
+              const cssFilePath = resolve2(cssOutDir, cssFileName);
+              writeFileSync2(cssFilePath, extraction.css);
               cssSidecarMap.set(args.path, cssFilePath);
               const relPath2 = relative(dirname(args.path), cssFilePath);
               const importPath = relPath2.startsWith(".") ? relPath2 : `./${relPath2}`;
@@ -247,6 +1100,7 @@ import.meta.hot.accept();
           if (logger?.isEnabled("plugin")) {
             const durationMs = Math.round(performance.now() - startMs);
             const stages = [
+              routeSplitting && sourceAfterRouteSplit !== source ? "routeSplit" : null,
               "hydration",
               fastRefresh ? "stableIds" : null,
               "compile",
@@ -266,9 +1120,102 @@ import.meta.hot.accept();
           throw err;
         }
       });
+      if (routeSplitting) {
+        build.onLoad({ filter: /\.ts$/ }, async (args) => {
+          const source = await Bun.file(args.path).text();
+          if (!source.includes("defineRoutes(") || !source.includes("@vertz/ui")) {
+            return { contents: source, loader: "ts" };
+          }
+          const splitResult = transformRouteSplitting(source, args.path);
+          if (splitResult.transformed && logger?.isEnabled("plugin")) {
+            const relPath = relative(projectRoot, args.path);
+            for (const d of splitResult.diagnostics) {
+              logger.log("plugin", "route-split", {
+                file: relPath,
+                route: d.routePath,
+                import: d.importSource,
+                symbol: d.symbolName
+              });
+            }
+            for (const s of splitResult.skipped) {
+              logger.log("plugin", "route-split-skip", {
+                file: relPath,
+                route: s.routePath,
+                reason: s.reason
+              });
+            }
+          }
+          let contents = splitResult.code;
+          if (splitResult.transformed && splitResult.map) {
+            const mapBase64 = Buffer.from(splitResult.map.toString()).toString("base64");
+            contents += `
+//# sourceMappingURL=data:application/json;base64,${mapBase64}`;
+          }
+          return { contents, loader: "ts" };
+        });
+      }
+    }
+  };
+  function updateManifest(filePath, sourceText) {
+    const oldManifest = manifests.get(filePath);
+    const { manifest: newManifest, warnings } = regenerateFileManifest(filePath, sourceText, manifests, { srcDir });
+    const changed = !manifestsEqual(oldManifest, newManifest);
+    if (changed) {
+      manifestsRecord = null;
+    }
+    if (filePath.endsWith(".tsx")) {
+      fieldSelectionManifest.updateFile(filePath, sourceText);
+    }
+    if (logger?.isEnabled("manifest")) {
+      const exportShapes = {};
+      for (const [name, info] of Object.entries(newManifest.exports)) {
+        exportShapes[name] = info.reactivity.type;
+      }
+      logger.log("manifest", "hmr-update", {
+        file: relative(projectRoot, filePath),
+        changed,
+        exports: exportShapes
+      });
+      for (const warning of warnings) {
+        logger.log("manifest", "warning", { type: warning.type, message: warning.message });
+      }
+    }
+    return { changed };
+  }
+  function deleteManifest(filePath) {
+    const existed = manifests.delete(filePath);
+    if (existed) {
+      manifestsRecord = null;
+      if (logger?.isEnabled("manifest")) {
+        logger.log("manifest", "hmr-delete", {
+          file: relative(projectRoot, filePath)
+        });
+      }
+    }
+    fieldSelectionManifest.deleteFile(filePath);
+    return existed;
+  }
+  function reloadEntitySchema() {
+    const newSchema = loadEntitySchema(entitySchemaPath);
+    const changed = JSON.stringify(newSchema) !== JSON.stringify(entitySchema);
+    entitySchema = newSchema;
+    if (logger?.isEnabled("fields")) {
+      logger.log("fields", "entity-schema-reload", {
+        path: entitySchemaPath,
+        entities: newSchema ? Object.keys(newSchema).length : 0,
+        changed
+      });
     }
+    return changed;
+  }
+  return {
+    plugin,
+    fileExtractions,
+    cssSidecarMap,
+    updateManifest,
+    deleteManifest,
+    reloadEntitySchema
   };
-  return { plugin, fileExtractions, cssSidecarMap };
 }
 export {
   createVertzBunPlugin