@codecanvas-ide/engine 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,101 @@
 // src/parse.ts
+import ts3 from "typescript";
+
+// src/react.ts
+import ts2 from "typescript";
+
+// src/syntax.ts
 import ts from "typescript";
+function unwrap(e) {
+  while (ts.isParenthesizedExpression(e) || ts.isAsExpression(e) || ts.isSatisfiesExpression(e) || ts.isTypeAssertionExpression(e)) e = e.expression;
+  return e;
+}
+
+// src/react.ts
+var REACT_MODULE = /^(react|react-dom|react-native)(\/|$)/;
+function fileLanguageOf(path, sf) {
+  const script = /\.[cm]?jsx?$/.test(path) ? "js" : "ts";
+  const hasJsxExtension = /\.[jt]sx$/.test(path);
+  const mayHaveJsx = script === "js" && /<[A-Za-z>]/.test(sf.text);
+  const hasJsx = hasJsxExtension || mayHaveJsx && containsJsx(sf);
+  const isReact = hasJsx || importsReact(sf);
+  return { script, hasJsx, isReact, label: languageLabel(script, hasJsx, isReact) };
+}
+function languageLabel(script, hasJsx, isReact) {
+  if (hasJsx) return script === "js" ? "React JSX" : "React TSX";
+  if (isReact) return script === "js" ? "React JS" : "React TS";
+  return script === "js" ? "JS" : "TS";
+}
+function isJsx(node) {
+  return ts2.isJsxElement(node) || ts2.isJsxSelfClosingElement(node) || ts2.isJsxFragment(node);
+}
+function containsJsx(node) {
+  return isJsx(node) || !!ts2.forEachChild(node, (child) => containsJsx(child) || void 0);
+}
+function importsReact(sf) {
+  return sf.statements.some((statement) => {
+    const isImportOrReExport = ts2.isImportDeclaration(statement) || ts2.isExportDeclaration(statement);
+    if (isImportOrReExport) return !!statement.moduleSpecifier && ts2.isStringLiteral(statement.moduleSpecifier) && REACT_MODULE.test(statement.moduleSpecifier.text);
+    if (ts2.isImportEqualsDeclaration(statement)) return ts2.isExternalModuleReference(statement.moduleReference) && isReactModuleName(statement.moduleReference.expression);
+    if (ts2.isVariableStatement(statement)) return statement.declarationList.declarations.some((declaration) => !!declaration.initializer && isRequireOfReact(declaration.initializer));
+    return false;
+  });
+}
+function isRequireOfReact(expression) {
+  if (ts2.isPropertyAccessExpression(expression)) return isRequireOfReact(expression.expression);
+  const isRequireCall = ts2.isCallExpression(expression) && ts2.isIdentifier(expression.expression) && expression.expression.text === "require";
+  return isRequireCall && expression.arguments.length === 1 && isReactModuleName(expression.arguments[0]);
+}
+function isReactModuleName(expression) {
+  return ts2.isStringLiteral(expression) && REACT_MODULE.test(expression.text);
+}
+var COMPONENT_WRAPPERS = /* @__PURE__ */ new Set(["memo", "forwardRef", "React.memo", "React.forwardRef"]);
+var COMPONENT_BASE_CLASSES = /* @__PURE__ */ new Set(["Component", "PureComponent", "React.Component", "React.PureComponent"]);
+var isComponentName = (name) => /^[A-Z]/.test(name);
+function returnsJsx(fn) {
+  if (!fn.body) return false;
+  if (!ts2.isBlock(fn.body)) return isJsxValue(fn.body);
+  const hasJsxReturn = (node) => {
+    if (ts2.isReturnStatement(node)) return !!node.expression && isJsxValue(node.expression);
+    if (ts2.isFunctionLike(node) || ts2.isClassLike(node)) return false;
+    return !!ts2.forEachChild(node, (child) => hasJsxReturn(child) || void 0);
+  };
+  return hasJsxReturn(fn.body);
+}
+function isJsxValue(expression) {
+  const value = unwrap(expression);
+  if (isJsx(value)) return true;
+  if (ts2.isConditionalExpression(value)) return isJsxValue(value.whenTrue) || isJsxValue(value.whenFalse);
+  if (ts2.isBinaryExpression(value)) return isJsxValue(value.left) || isJsxValue(value.right);
+  return false;
+}
+function componentFunctionOf(initializer) {
+  const value = unwrap(initializer);
+  if (ts2.isArrowFunction(value) || ts2.isFunctionExpression(value)) return returnsJsx(value) ? value : void 0;
+  const isWrapperCall = ts2.isCallExpression(value) && value.arguments.length > 0 && COMPONENT_WRAPPERS.has(value.expression.getText());
+  if (!isWrapperCall) return void 0;
+  const wrapped = unwrap(value.arguments[0]);
+  if (ts2.isArrowFunction(wrapped) || ts2.isFunctionExpression(wrapped)) return wrapped;
+  return componentFunctionOf(wrapped);
+}
+function isComponentClass(cls) {
+  const extendsClause = cls.heritageClauses?.find((clause) => clause.token === ts2.SyntaxKind.ExtendsKeyword);
+  const baseClass = extendsClause?.types[0]?.expression.getText();
+  return !!baseClass && COMPONENT_BASE_CLASSES.has(baseClass);
+}
+var STATE_HOOKS = /* @__PURE__ */ new Set(["useState", "useReducer", "React.useState", "React.useReducer"]);
+function stateHookOf(declaration) {
+  const call = declaration.initializer && unwrap(declaration.initializer);
+  const isStateHookCall = !!call && ts2.isCallExpression(call) && STATE_HOOKS.has(call.expression.getText());
+  if (!isStateHookCall) return void 0;
+  if (ts2.isIdentifier(declaration.name)) return { call, value: declaration };
+  if (!ts2.isArrayBindingPattern(declaration.name)) return void 0;
+  const [value, setter] = declaration.name.elements.map((element) => ts2.isBindingElement(element) && ts2.isIdentifier(element.name) ? element : void 0);
+  return value || setter ? { call, value, setter } : void 0;
+}
+var isHookName = (name) => /^use[A-Z0-9]/.test(name);
+
+// src/parse.ts
 var PREVIEW_LINES = 6;
 var CONTAINER_PREVIEW_LINES = 3;
 var PREVIEW_WIDTH = 64;
@@ -10,16 +106,17 @@ function parseFile(path, text) {
   return m;
 }
 function parseStructure(path, text, prev) {
-  const kind = /\.[jt]sx$/.test(path) ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  const kind = scriptKindOf(path);
   const old = prev && prev.path === path ? internals.get(prev) : void 0;
   let sf;
   if (old && !old.reused) {
     old.reused = true;
-    sf = ts.updateSourceFile(old.sf, text, changeRange(prev.text, text));
+    sf = ts3.updateSourceFile(old.sf, text, changeRange(prev.text, text));
   } else {
-    sf = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true, kind);
+    sf = ts3.createSourceFile(path, text, ts3.ScriptTarget.Latest, true, kind);
   }
-  const b = new Builder(sf, text);
+  const language = fileLanguageOf(path, sf);
+  const b = new Builder(sf, text, language.isReact);
   b.collectStatements(sf.statements, null, 0);
   const syntax = sf.parseDiagnostics ?? [];
   const model = {
@@ -31,7 +128,8 @@ function parseStructure(path, text, prev) {
     syntaxErrors: syntax.length,
     firstErrorLine: -1,
     diagnostics: [],
-    indentUnit: detectIndentUnit(text)
+    indentUnit: detectIndentUnit(text),
+    language
   };
   model.diagnostics = syntax.map((d) => toCodeDiagnostic(model, sf, d, "syntax"));
   model.firstErrorLine = model.diagnostics[0]?.line ?? -1;
@@ -54,9 +152,9 @@ function toCodeDiagnostic(model, sf, d, source) {
     start,
     length: d.length ?? 0,
     line: sf.getLineAndCharacterOfPosition(Math.min(start, sf.text.length)).line + 1,
-    message: ts.flattenDiagnosticMessageText(d.messageText, "\n"),
+    message: ts3.flattenDiagnosticMessageText(d.messageText, "\n"),
     source,
-    severity: d.category === ts.DiagnosticCategory.Error ? "error" : "warning",
+    severity: d.category === ts3.DiagnosticCategory.Error ? "error" : "warning",
     blockId: blockAt(model, start)?.id ?? null
   };
 }
@@ -77,15 +175,29 @@ function changeRange(a, b) {
   while (s < n && a.charCodeAt(s) === b.charCodeAt(s)) s++;
   let e = 0;
   while (e < n - s && a.charCodeAt(a.length - 1 - e) === b.charCodeAt(b.length - 1 - e)) e++;
-  return ts.createTextChangeRange(ts.createTextSpan(s, a.length - e - s), b.length - e - s);
+  return ts3.createTextChangeRange(ts3.createTextSpan(s, a.length - e - s), b.length - e - s);
+}
+function commonJsExportedFunction(s) {
+  if (!ts3.isExpressionStatement(s) || !ts3.isBinaryExpression(s.expression) || s.expression.operatorToken.kind !== ts3.SyntaxKind.EqualsToken) return null;
+  const { left, right } = s.expression;
+  const fn = unwrap(right);
+  const isFunction = ts3.isFunctionExpression(fn) || ts3.isArrowFunction(fn);
+  if (!isFunction || !ts3.isPropertyAccessExpression(left) || !ts3.isIdentifier(left.name)) return null;
+  const target = left.expression.getText();
+  const isExportsObject = target === "exports" || target === "module.exports";
+  return isExportsObject ? { assignment: s.expression, exportedName: left.name, fn } : null;
+}
+function scriptKindOf(path) {
+  if (/\.[cm]?jsx?$/.test(path)) return path.endsWith("x") ? ts3.ScriptKind.JSX : ts3.ScriptKind.JS;
+  return path.endsWith("x") ? ts3.ScriptKind.TSX : ts3.ScriptKind.TS;
 }
 function createProgram(sf) {
   const options = {
     noLib: true,
     noResolve: true,
     allowJs: true,
-    target: ts.ScriptTarget.Latest,
-    jsx: ts.JsxEmit.Preserve,
+    target: ts3.ScriptTarget.Latest,
+    jsx: ts3.JsxEmit.Preserve,
     types: []
   };
   const host = {
@@ -101,7 +213,7 @@ function createProgram(sf) {
     readFile: () => void 0,
     getDirectories: () => []
   };
-  return ts.createProgram({ rootNames: [sf.fileName], options, host });
+  return ts3.createProgram({ rootNames: [sf.fileName], options, host });
 }
 function detectIndentUnit(text) {
   const m = /\n(\t+|[ ]{2,8})\S/.exec(text);
@@ -109,12 +221,14 @@ function detectIndentUnit(text) {
   return m[1].startsWith("	") ? "	" : m[1].length >= 4 && m[1].length % 4 === 0 ? "    " : "  ";
 }
 var Builder = class {
-  constructor(sf, text) {
+  constructor(sf, text, isReact) {
     this.sf = sf;
     this.text = text;
+    this.isReact = isReact;
   }
   sf;
   text;
+  isReact;
   roots = [];
   byId = /* @__PURE__ */ new Map();
   /**
@@ -126,6 +240,8 @@ var Builder = class {
   rangeToBlock = /* @__PURE__ */ new Map();
   /** Every name a usage could resolve to. Other identifiers skip the (slow) checker. */
   names = /* @__PURE__ */ new Set();
+  /** Setters of React state (`setCount`), keyed like `declToBlock`: using one writes the state. */
+  stateSetters = /* @__PURE__ */ new Set();
   // ---------- structure ----------
   collectStatements(stmts, parent, depth, declarationsOnly = false) {
     let group = [];
@@ -154,33 +270,40 @@ var Builder = class {
     };
     for (let i = 0; i < stmts.length; i++) {
       const s = stmts[i];
-      if (ts.isFunctionDeclaration(s)) {
+      if (ts3.isFunctionDeclaration(s)) {
         flushGroup();
         const overloads = [s];
         while (!overloads[overloads.length - 1].body) {
           const next = stmts[i + 1];
-          if (next && ts.isFunctionDeclaration(next) && next.name?.text === s.name?.text) {
+          if (next && ts3.isFunctionDeclaration(next) && next.name?.text === s.name?.text) {
             overloads.push(next);
             i++;
           } else break;
         }
-        this.addFunctionLike(overloads, s.name?.text ?? "default", parent, depth);
-      } else if (ts.isClassDeclaration(s)) {
+        const name = s.name?.text ?? "default";
+        const isComponent = this.isReact && isComponentName(name) && returnsJsx(overloads[overloads.length - 1]);
+        this.addFunctionLike(overloads, name, parent, depth, { kind: isComponent ? "component" : "function" });
+      } else if (ts3.isClassDeclaration(s)) {
         flushGroup();
         this.addClass(s, s, s.name?.text ?? "default", parent, depth);
-      } else if (ts.isVariableStatement(s)) {
+      } else if (ts3.isVariableStatement(s)) {
         flushGroup();
         this.addVariableStatement(s, parent, depth, declarationsOnly);
+      } else if (commonJsExportedFunction(s)) {
+        flushGroup();
+        const { assignment, exportedName, fn } = commonJsExportedFunction(s);
+        const declNodes = [s, assignment, assignment.left];
+        this.addFunctionLike([fn], exportedName.text, parent, depth, { rangeNodes: [s], declNodes, extraTags: ["export"], nameNode: exportedName });
       } else if (declarationsOnly) {
         continue;
-      } else if (ts.isImportDeclaration(s) || ts.isImportEqualsDeclaration(s)) {
+      } else if (ts3.isImportDeclaration(s) || ts3.isImportEqualsDeclaration(s)) {
         flushGroup();
         this.addImport(s, parent, depth);
-      } else if (ts.isInterfaceDeclaration(s) || ts.isTypeAliasDeclaration(s) || ts.isEnumDeclaration(s)) {
+      } else if (ts3.isInterfaceDeclaration(s) || ts3.isTypeAliasDeclaration(s) || ts3.isEnumDeclaration(s)) {
         flushGroup();
-        const keyword = ts.isInterfaceDeclaration(s) ? "interface" : ts.isEnumDeclaration(s) ? "enum" : "type";
+        const keyword = ts3.isInterfaceDeclaration(s) ? "interface" : ts3.isEnumDeclaration(s) ? "enum" : "type";
         const typeParams = "typeParameters" in s && s.typeParameters ? `<${s.typeParameters.map((t) => t.getText()).join(", ")}>` : "";
-        const bodyStart = ts.isTypeAliasDeclaration(s) ? s.type.getStart(this.sf) : this.text.indexOf("{", s.name.end);
+        const bodyStart = ts3.isTypeAliasDeclaration(s) ? s.type.getStart(this.sf) : this.text.indexOf("{", s.name.end);
         this.add(
           {
             kind: "type",
@@ -198,7 +321,7 @@ var Builder = class {
           parent,
           depth
         );
-      } else if (ts.isModuleDeclaration(s) && s.body && ts.isModuleBlock(s.body)) {
+      } else if (ts3.isModuleDeclaration(s) && s.body && ts3.isModuleBlock(s.body)) {
         flushGroup();
         const body = s.body;
         this.add(
@@ -228,13 +351,13 @@ var Builder = class {
   addImport(s, parent, depth) {
     let spec;
     let names = [];
-    if (ts.isImportDeclaration(s)) {
+    if (ts3.isImportDeclaration(s)) {
       spec = s.moduleSpecifier.text;
       const clause = s.importClause;
       if (clause?.name) names.push(clause.name.text);
       const nb = clause?.namedBindings;
-      if (nb && ts.isNamespaceImport(nb)) names.push("* as " + nb.name.text);
-      if (nb && ts.isNamedImports(nb)) names.push(...nb.elements.map((e) => e.name.text));
+      if (nb && ts3.isNamespaceImport(nb)) names.push("* as " + nb.name.text);
+      if (nb && ts3.isNamedImports(nb)) names.push(...nb.elements.map((e) => e.name.text));
       if (!clause) names = ["(side effect)"];
     } else {
       spec = s.name.text;
@@ -248,7 +371,7 @@ var Builder = class {
         key: "import:" + spec,
         name: spec,
         detail: "",
-        tags: ts.isImportDeclaration(s) && s.importClause?.isTypeOnly ? ["type"] : [],
+        tags: ts3.isImportDeclaration(s) && s.importClause?.isTypeOnly ? ["type"] : [],
         rangeNodes: [s],
         declNodes: [s],
         previewRange: null,
@@ -267,11 +390,11 @@ var Builder = class {
     let previewRange = null;
     let insert = null;
     let insertAt = -1;
-    if (body && ts.isBlock(body)) {
+    if (body && ts3.isBlock(body)) {
       previewRange = [body.getStart(this.sf) + 1, body.end - 1];
       insert = "body";
       const last = body.statements[body.statements.length - 1];
-      insertAt = last && ts.isReturnStatement(last) ? this.lineStartOf(last.getStart(this.sf)) : body.end - 1;
+      insertAt = last && ts3.isReturnStatement(last) ? this.lineStartOf(last.getStart(this.sf)) : body.end - 1;
     } else if (body) {
       previewRange = [body.getStart(this.sf), body.end];
     }
@@ -279,22 +402,23 @@ var Builder = class {
     const ret = sig.type ? ": " + sig.type.getText() : "";
     const detail = squash(`${typeParams}(${sig.parameters.map((p) => p.getText()).join(", ")})${ret}`);
     const tags = [...opts.extraTags ?? [], ...modifierTags(nodes[0])];
+    if (this.isReact && isHookName(name)) tags.push("hook");
     if (nodes.length > 1) tags.push(`${nodes.length - 1} overload${nodes.length > 2 ? "s" : ""}`);
     if (impl.asteriskToken) tags.push("generator");
     this.add(
       {
-        kind: "function",
+        kind: opts.kind ?? "function",
         key: opts.key ?? name,
         name,
         detail,
         tags,
         rangeNodes: opts.rangeNodes ?? nodes,
         declNodes: opts.declNodes ?? nodes,
-        nameNode: impl.name,
+        nameNode: opts.nameNode ?? impl.name,
         previewRange,
         insert,
         insertAt,
-        children: body && ts.isBlock(body) ? (blk) => this.collectStatements(body.statements, blk, depth + 1, true) : void 0
+        children: body && ts3.isBlock(body) ? (blk) => this.collectStatements(body.statements, blk, depth + 1, true) : void 0
       },
       parent,
       depth
@@ -306,7 +430,7 @@ var Builder = class {
     const typeParams = cls.typeParameters?.length ? `<${cls.typeParameters.map((t) => t.getText()).join(", ")}>` : "";
     this.add(
       {
-        kind: "class",
+        kind: this.isReact && isComponentClass(cls) ? "component" : "class",
         key: name,
         name,
         detail: squash(typeParams + (heritage ? " " + heritage : "")),
@@ -326,27 +450,27 @@ var Builder = class {
   collectMembers(members, parent, depth) {
     for (let i = 0; i < members.length; i++) {
       const m = members[i];
-      if (ts.isMethodDeclaration(m) || ts.isConstructorDeclaration(m)) {
-        const name = ts.isConstructorDeclaration(m) ? "constructor" : m.name.getText();
+      if (ts3.isMethodDeclaration(m) || ts3.isConstructorDeclaration(m)) {
+        const name = ts3.isConstructorDeclaration(m) ? "constructor" : m.name.getText();
         const overloads = [m];
         while (!overloads[overloads.length - 1].body) {
           const next = members[i + 1];
-          const nextName = next && (ts.isConstructorDeclaration(next) ? "constructor" : ts.isMethodDeclaration(next) ? next.name.getText() : null);
+          const nextName = next && (ts3.isConstructorDeclaration(next) ? "constructor" : ts3.isMethodDeclaration(next) ? next.name.getText() : null);
           if (nextName === name) {
             overloads.push(next);
             i++;
           } else break;
         }
         this.addFunctionLike(overloads, name, parent, depth);
-      } else if (ts.isGetAccessor(m) || ts.isSetAccessor(m)) {
+      } else if (ts3.isGetAccessor(m) || ts3.isSetAccessor(m)) {
         const name = m.name.getText();
-        const word = ts.isGetAccessor(m) ? "get" : "set";
+        const word = ts3.isGetAccessor(m) ? "get" : "set";
         this.addFunctionLike([m], name, parent, depth, { key: `${word} ${name}`, extraTags: [word] });
-      } else if (ts.isPropertyDeclaration(m)) {
+      } else if (ts3.isPropertyDeclaration(m)) {
         const name = m.name.getText();
         const init = m.initializer && unwrap(m.initializer);
-        if (init && (ts.isArrowFunction(init) || ts.isFunctionExpression(init))) {
-          this.addFunctionLike([init], name, parent, depth, { rangeNodes: [m], declNodes: [m], extraTags: modifierTags(m) });
+        if (init && (ts3.isArrowFunction(init) || ts3.isFunctionExpression(init))) {
+          this.addFunctionLike([init], name, parent, depth, { rangeNodes: [m], declNodes: [m], extraTags: modifierTags(m), nameNode: m.name });
         } else {
           this.addVariable(m, m, name, m.type ? ": " + m.type.getText() : "", modifierTags(m), parent, depth, m.initializer);
         }
@@ -355,25 +479,61 @@ var Builder = class {
   }
   addVariableStatement(s, parent, depth, functionsOnly) {
     const decls = s.declarationList.declarations;
-    const keyword = s.declarationList.flags & ts.NodeFlags.Const ? "const" : s.declarationList.flags & ts.NodeFlags.Let ? "let" : "var";
+    const keyword = s.declarationList.flags & ts3.NodeFlags.Const ? "const" : s.declarationList.flags & ts3.NodeFlags.Let ? "let" : "var";
     for (const d of decls) {
       const rangeNode = decls.length === 1 ? s : d;
       const name = d.name.getText();
       const tags = [...modifierTags(s), keyword];
+      const stateHook = this.isReact ? stateHookOf(d) : void 0;
+      if (stateHook) {
+        this.addState(stateHook, rangeNode, tags, parent, depth);
+        continue;
+      }
       const init = d.initializer && unwrap(d.initializer);
-      if (init && (ts.isArrowFunction(init) || ts.isFunctionExpression(init))) {
-        this.addFunctionLike([init], name, parent, depth, { rangeNodes: [rangeNode], declNodes: [d], extraTags: tags });
-      } else if (init && ts.isClassExpression(init)) {
+      const componentFunction = this.isReact && init && isComponentName(name) ? componentFunctionOf(init) : void 0;
+      if (componentFunction) {
+        this.addFunctionLike([componentFunction], name, parent, depth, { kind: "component", rangeNodes: [rangeNode], declNodes: [d], extraTags: tags, nameNode: d.name });
+      } else if (init && (ts3.isArrowFunction(init) || ts3.isFunctionExpression(init))) {
+        this.addFunctionLike([init], name, parent, depth, { rangeNodes: [rangeNode], declNodes: [d], extraTags: tags, nameNode: d.name });
+      } else if (init && ts3.isClassExpression(init)) {
         this.addClass(init, rangeNode, name, parent, depth, [d, init], tags);
       } else if (!functionsOnly) {
         this.addVariable(d, rangeNode, name, d.type ? ": " + d.type.getText() : "", tags, parent, depth, d.initializer);
       }
     }
   }
+  /** `const [count, setCount] = useState(0)`: a state block named `count`; using `setCount` writes it. */
+  addState(hook, rangeNode, tags, parent, depth) {
+    const named = hook.value ?? hook.setter;
+    const setterName = hook.setter?.name.getText();
+    const [firstArg, ...otherArgs] = hook.call.arguments;
+    const args = firstArg ? truncate(squash(firstArg.getText()), 24) + (otherArgs.length ? ", \u2026" : "") : "";
+    if (hook.setter && setterName) {
+      this.stateSetters.add(nodeKey(hook.setter));
+      this.names.add(setterName);
+    }
+    this.add(
+      {
+        kind: "state",
+        key: named.name.getText(),
+        name: named.name.getText(),
+        detail: `${hook.call.expression.getText()}(${args})`,
+        tags: setterName && hook.value ? [...tags, setterName] : tags,
+        rangeNodes: [rangeNode],
+        declNodes: [hook.value, hook.setter].filter((declaration) => !!declaration),
+        nameNode: named.name,
+        previewRange: [hook.call.getStart(this.sf), hook.call.end],
+        insert: null,
+        insertAt: -1
+      },
+      parent,
+      depth
+    );
+  }
   addVariable(decl, rangeNode, name, type, tags, parent, depth, initializer) {
     const init = initializer && unwrap(initializer);
-    const objectChildren = init && ts.isObjectLiteralExpression(init) ? init.properties.filter(
-      (p) => ts.isMethodDeclaration(p) || ts.isPropertyAssignment(p) && (ts.isArrowFunction(unwrap(p.initializer)) || ts.isFunctionExpression(unwrap(p.initializer)))
+    const objectChildren = init && ts3.isObjectLiteralExpression(init) ? init.properties.filter(
+      (p) => ts3.isMethodDeclaration(p) || ts3.isPropertyAssignment(p) && (ts3.isArrowFunction(unwrap(p.initializer)) || ts3.isFunctionExpression(unwrap(p.initializer)))
     ) : [];
     this.add(
       {
@@ -391,10 +551,10 @@ var Builder = class {
         children: objectChildren.length ? (blk) => {
           for (const p of objectChildren) {
             const pname = p.name.getText();
-            if (ts.isMethodDeclaration(p)) this.addFunctionLike([p], pname, blk, depth + 1);
+            if (ts3.isMethodDeclaration(p)) this.addFunctionLike([p], pname, blk, depth + 1);
             else {
               const fn = unwrap(p.initializer);
-              this.addFunctionLike([fn], pname, blk, depth + 1, { rangeNodes: [p], declNodes: [p] });
+              this.addFunctionLike([fn], pname, blk, depth + 1, { rangeNodes: [p], declNodes: [p], nameNode: p.name });
             }
           }
         } : void 0
@@ -453,7 +613,7 @@ var Builder = class {
   /** Include doc comments directly above the node (no blank line in between). */
   startWithComments(node) {
     let start = node.getStart(this.sf);
-    const comments = ts.getLeadingCommentRanges(this.text, node.pos) ?? [];
+    const comments = ts3.getLeadingCommentRanges(this.text, node.pos) ?? [];
     for (let i = comments.length - 1; i >= 0; i--) {
       const gap = this.text.slice(comments[i].end, start);
       if (/\S/.test(gap) || (gap.match(/\n/g)?.length ?? 0) > 1) break;
@@ -481,8 +641,8 @@ var Builder = class {
     const visit = (node, current) => {
       const blk = this.rangeToBlock.get(nodeKey(node));
       if (blk) current = blk;
-      if (ts.isIdentifier(node) && current) this.recordUsage(node, current, checker, byPair, otherFiles);
-      ts.forEachChild(node, (c) => visit(c, current));
+      if (ts3.isIdentifier(node) && current) this.recordUsage(node, current, checker, byPair, otherFiles);
+      ts3.forEachChild(node, (c) => visit(c, current));
     };
     visit(sf, null);
     return [...byPair.values()];
@@ -491,29 +651,30 @@ var Builder = class {
     const isKnownName = this.names.has(id.text) || !!otherFiles?.projectNames.has(id.text);
     if (!isKnownName) return;
     const parent = id.parent;
-    const isDeclarationName = !!parent && parent.name === id && !ts.isPropertyAccessExpression(parent) && !ts.isShorthandPropertyAssignment(parent);
+    const isDeclarationName = !!parent && parent.name === id && !ts3.isPropertyAccessExpression(parent) && !ts3.isShorthandPropertyAssignment(parent);
     if (isDeclarationName) return;
     let sym;
     try {
-      sym = parent && ts.isShorthandPropertyAssignment(parent) ? checker.getShorthandAssignmentValueSymbol(parent) : checker.getSymbolAtLocation(id);
+      sym = parent && ts3.isShorthandPropertyAssignment(parent) ? checker.getShorthandAssignmentValueSymbol(parent) : checker.getSymbolAtLocation(id);
     } catch {
       return;
     }
     if (!sym?.declarations) return;
-    const kind = usageKind(id);
+    let kind = usageKind(id);
     let to;
     let importBlockId;
     for (const d of sym.declarations) {
       to = this.declToBlock.get(nodeKey(d));
+      if (this.stateSetters.has(nodeKey(d))) kind = "write";
       if (!to) {
         let n = d;
-        while (n && !ts.isImportDeclaration(n) && !ts.isImportEqualsDeclaration(n) && !ts.isSourceFile(n)) n = n.parent;
-        if (n && !ts.isSourceFile(n)) importBlockId = to = this.declToBlock.get(nodeKey(n));
+        while (n && !ts3.isImportDeclaration(n) && !ts3.isImportEqualsDeclaration(n) && !ts3.isSourceFile(n)) n = n.parent;
+        if (n && !ts3.isSourceFile(n)) importBlockId = to = this.declToBlock.get(nodeKey(n));
       }
       if (to) break;
     }
     if (otherFiles) {
-      const isImportedName = !!importBlockId && (sym.flags & ts.SymbolFlags.Alias) !== 0;
+      const isImportedName = !!importBlockId && (sym.flags & ts3.SymbolFlags.Alias) !== 0;
       const target = isImportedName ? safeAliasedSymbol(checker, sym) : to ? void 0 : sym;
       const declaredElsewhere = target?.declarations?.find((d) => d.getSourceFile() !== id.getSourceFile());
       const external = declaredElsewhere && otherFiles.blockInOtherFile(declaredElsewhere);
@@ -530,6 +691,7 @@ function addUsage(out, usage) {
   if (!existing) return void out.set(pairKey, usage);
   existing.count++;
   if (usage.kind === "call") existing.kind = "call";
+  else if (usage.kind === "write" && existing.kind === "read") existing.kind = "write";
 }
 function safeAliasedSymbol(checker, symbol) {
   try {
@@ -542,23 +704,26 @@ function nodeKey(node) {
   return `${node.kind}:${node.pos}:${node.end}`;
 }
 function usageKind(id) {
+  if (isJsxTagName(id)) return "render";
   let n = id;
-  if (ts.isPropertyAccessExpression(n.parent) && n.parent.name === n) n = n.parent;
+  if (ts3.isPropertyAccessExpression(n.parent) && n.parent.name === n) n = n.parent;
   const p = n.parent;
-  if ((ts.isCallExpression(p) || ts.isNewExpression(p)) && p.expression === n) return "call";
-  if (ts.isTaggedTemplateExpression(p) && p.tag === n) return "call";
-  if (ts.isJsxOpeningLikeElement(p) && p.tagName === n) return "call";
-  if (ts.isBinaryExpression(p) && p.left === n && p.operatorToken.kind >= ts.SyntaxKind.FirstAssignment && p.operatorToken.kind <= ts.SyntaxKind.LastAssignment) return "write";
-  if ((ts.isPrefixUnaryExpression(p) || ts.isPostfixUnaryExpression(p)) && (p.operator === ts.SyntaxKind.PlusPlusToken || p.operator === ts.SyntaxKind.MinusMinusToken)) return "write";
-  if (ts.isTypeReferenceNode(p) || ts.isExpressionWithTypeArguments(p) || ts.isTypeQueryNode(p) || ts.isQualifiedName(p)) return "type";
+  if ((ts3.isCallExpression(p) || ts3.isNewExpression(p)) && p.expression === n) return "call";
+  if (ts3.isTaggedTemplateExpression(p) && p.tag === n) return "call";
+  if (ts3.isJsxOpeningLikeElement(p) && p.tagName === n) return "render";
+  if (ts3.isBinaryExpression(p) && p.left === n && p.operatorToken.kind >= ts3.SyntaxKind.FirstAssignment && p.operatorToken.kind <= ts3.SyntaxKind.LastAssignment) return "write";
+  if ((ts3.isPrefixUnaryExpression(p) || ts3.isPostfixUnaryExpression(p)) && (p.operator === ts3.SyntaxKind.PlusPlusToken || p.operator === ts3.SyntaxKind.MinusMinusToken)) return "write";
+  if (ts3.isTypeReferenceNode(p) || ts3.isExpressionWithTypeArguments(p) || ts3.isTypeQueryNode(p) || ts3.isQualifiedName(p)) return "type";
   return "read";
 }
-function unwrap(e) {
-  while (ts.isParenthesizedExpression(e) || ts.isAsExpression(e) || ts.isSatisfiesExpression(e) || ts.isTypeAssertionExpression(e)) e = e.expression;
-  return e;
+function isJsxTagName(id) {
+  let tag = id;
+  while (ts3.isPropertyAccessExpression(tag.parent) && tag.parent.expression === tag) tag = tag.parent;
+  const element = tag.parent;
+  return (ts3.isJsxOpeningLikeElement(element) || ts3.isJsxClosingElement(element)) && element.tagName === tag;
 }
 function modifierTags(n) {
-  const mods = ts.canHaveModifiers(n) ? ts.getModifiers(n) ?? [] : [];
+  const mods = ts3.canHaveModifiers(n) ? ts3.getModifiers(n) ?? [] : [];
   return mods.map((m) => m.getText());
 }
 function squash(s) {
@@ -606,9 +771,106 @@ function makePreview(text, range, children, max) {
 }
 
 // src/project.ts
-import ts2 from "typescript";
+import ts5 from "typescript";
+
+// src/workspace.ts
+import ts4 from "typescript";
+function parseConfig(config, projectPaths) {
+  const configFileName = "/" + config.path;
+  const json = ts4.parseConfigFileTextToJson(configFileName, config.text);
+  if (json.error || !json.config) return null;
+  const readConfig = (name) => name === configFileName ? config.text : config.extendedFiles?.[name.slice(1)];
+  const host = {
+    useCaseSensitiveFileNames: true,
+    readDirectory: (rootDir, extensions, excludes, includes) => matchingPaths(projectPaths, rootDir, extensions, excludes ?? [], includes ?? ["**/*"]),
+    fileExists: (name) => readConfig(name) !== void 0,
+    readFile: readConfig
+  };
+  const folder = config.path.slice(0, config.path.lastIndexOf("/") + 1);
+  const parsed = ts4.parseJsonConfigFileContent(json.config, host, "/" + folder, void 0, configFileName);
+  const included = new Set(parsed.fileNames.map((name) => name.slice(1)));
+  return { path: config.path, folder, options: parsed.options, includes: (projectPath) => included.has(projectPath) };
+}
+function configForFile(projectPath, configs) {
+  const above = configs.filter((config) => projectPath.startsWith(config.folder));
+  const nearestFirst = [...above].sort((a, b) => b.folder.length - a.folder.length);
+  return nearestFirst.find((config) => config.includes(projectPath)) ?? nearestFirst[0] ?? null;
+}
+function workspacePackagePaths(packageFiles, hasFile) {
+  const paths = {};
+  for (const [packagePath, text] of Object.entries(packageFiles)) {
+    const manifest = parsePackageJson(text);
+    if (!manifest?.name) continue;
+    const folder = packagePath.slice(0, packagePath.lastIndexOf("/") + 1);
+    const entry = packageEntries(manifest).flatMap((named) => [named, ...sourceOfBuildOutput(named)]).concat(["src/index.ts", "src/index.tsx", "index.ts", "index.tsx"]).map((relative) => folder + relative.replace(/^\.\//, "")).find(hasFile);
+    if (entry) paths[manifest.name] = ["/" + entry];
+    paths[manifest.name + "/*"] = ["/" + folder + "src/*", "/" + folder + "*"];
+  }
+  return paths;
+}
+function parsePackageJson(text) {
+  try {
+    const value = JSON.parse(text);
+    return value && typeof value === "object" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function packageEntries(manifest) {
+  const rootExport = manifest.exports && typeof manifest.exports === "object" && "." in manifest.exports ? manifest.exports["."] : manifest.exports;
+  return [manifest.types, manifest.typings, ...exportTargets(rootExport), manifest.module, manifest.main].filter((entry) => typeof entry === "string");
+}
+function exportTargets(target) {
+  if (typeof target === "string") return [target];
+  if (Array.isArray(target)) return target.flatMap(exportTargets);
+  if (target && typeof target === "object") return Object.values(target).flatMap(exportTargets);
+  return [];
+}
+function sourceOfBuildOutput(entry) {
+  const isBuildOutput = /\.(d\.ts|d\.mts|js|mjs|cjs|jsx)$/.test(entry);
+  if (!isBuildOutput) return [];
+  const withoutExtension = entry.replace(/\.(d\.ts|d\.mts|js|mjs|cjs|jsx)$/, "");
+  const inSourceFolder = withoutExtension.replace(/(^|\/)(dist|lib|build|out|esm|cjs)\//, "$1src/");
+  return [inSourceFolder, withoutExtension].flatMap((base) => [base + ".ts", base + ".tsx"]);
+}
+function matchingPaths(projectPaths, rootDir, extensions, excludes, includes) {
+  const base = rootDir.replace(/^\//, "").replace(/\/?$/, "/").replace(/^\/$/, "");
+  const includePatterns = includes.map((spec) => configPattern(base, spec, "files"));
+  const excludePatterns = excludes.map((spec) => configPattern(base, spec, "filesAndFolders"));
+  return projectPaths.filter((path) => path.startsWith(base) && extensions.some((extension) => path.endsWith(extension))).filter((path) => includePatterns.some((pattern) => pattern.test(path)) && !excludePatterns.some((pattern) => pattern.test(path))).map((path) => "/" + path);
+}
+function configPattern(base, spec, matching) {
+  const absolute = spec.startsWith("/") ? spec.slice(1) : normalizePath(base + spec.replace(/^\.\//, ""));
+  const lastPart = absolute.slice(absolute.lastIndexOf("/") + 1);
+  const isFolder = !/[*?]/.test(lastPart) && !/\.[^.]+$/.test(lastPart);
+  const pattern = isFolder ? absolute.replace(/\/?$/, "/**/*") : absolute;
+  let source = "";
+  for (let index = 0; index < pattern.length; index++) {
+    const char = pattern[index];
+    if (pattern.startsWith("**/", index)) {
+      source += "(?:[^/]+/)*";
+      index += 2;
+    } else if (char === "*") source += "[^/]*";
+    else if (char === "?") source += "[^/]";
+    else source += char.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+  }
+  return new RegExp(`^${source}${matching === "filesAndFolders" ? "(?:/.*)?" : ""}$`);
+}
+function normalizePath(path) {
+  const parts = [];
+  for (const part of path.split("/")) {
+    if (part === "..") parts.pop();
+    else if (part !== "." && part !== "") parts.push(part);
+  }
+  return parts.join("/");
+}
+
+// src/project.ts
 var LIB_DIR = "/__lib__/";
 var DEFAULT_LIB = ["lib.es2022.d.ts", "lib.dom.d.ts"];
+var NO_CONFIG = "";
+var REQUIRE_CALL = /\brequire\s*\(\s*(['"])([^'"]+)\1\s*\)/;
+var RE_EXPORT = /^export\s+(?:type\s+)?(?:\*(?:\s+as\s+[\w$]+)?|\{[^}]*\})\s*from\s*(['"])([^'"]+)\1/;
 var Project = class {
   constructor(files = {}, projectOptions = {}) {
     this.projectOptions = projectOptions;
@@ -620,11 +882,14 @@ var Project = class {
   projectVersion = 0;
   libFiles = {};
   hasLib = false;
-  options = {};
-  service;
+  libOptions = {};
   projectNamesCache = null;
-  /** Options from the folder's tsconfig.json, between the defaults and `ProjectOptions.compilerOptions`. */
-  configFileOptions = {};
+  workspace = null;
+  configPrograms = null;
+  /** Language services by config path, created when a file of that config is first resolved. */
+  services = /* @__PURE__ */ new Map();
+  /** Shared by the services, so a file several programs include is parsed once. */
+  documentRegistry = ts5.createDocumentRegistry(true, "/");
   /** Changes when files are added or removed, or the settings change: where imports point may change then. */
   fileSetVersion = 0;
   /** Load the standard library later, e.g. once it has been downloaded. Type errors show from then on. */
@@ -634,11 +899,16 @@ var Project = class {
   }
   /** Use the folder's tsconfig.json (or none, with null). */
   setConfigFile(config) {
-    this.configFileOptions = config ? compilerOptionsOf(config) : {};
+    this.setWorkspace(config ? { configFiles: [config] } : null);
+  }
+  /** Use the folder's config files and workspace packages (or none, with null). */
+  setWorkspace(workspace) {
+    this.workspace = workspace;
     this.reconfigure();
   }
   reconfigure() {
-    this.service.dispose();
+    for (const service of this.services.values()) service.dispose();
+    this.services.clear();
     this.configure(this.projectOptions);
     this.projectVersion++;
     this.fileSetVersion++;
@@ -647,23 +917,66 @@ var Project = class {
     this.libFiles = options.libFiles ?? {};
     const libEntries = (options.lib ?? DEFAULT_LIB).filter((name) => name in this.libFiles);
     this.hasLib = libEntries.length > 0;
-    this.options = {
-      target: ts2.ScriptTarget.ES2022,
-      module: ts2.ModuleKind.ESNext,
-      moduleResolution: ts2.ModuleResolutionKind.Bundler,
+    this.libOptions = this.hasLib ? { lib: libEntries, noLib: false } : { noLib: true };
+  }
+  /** Options for a program: the defaults, then the config's, then `ProjectOptions.compilerOptions`. */
+  compilerOptions(configOptions, packagePaths) {
+    const paths = { ...packagePaths, ...configOptions.paths };
+    return {
+      target: ts5.ScriptTarget.ES2022,
+      module: ts5.ModuleKind.ESNext,
+      moduleResolution: ts5.ModuleResolutionKind.Bundler,
       strict: true,
-      allowJs: true,
-      jsx: ts2.JsxEmit.Preserve,
+      jsx: ts5.JsxEmit.Preserve,
       skipLibCheck: true,
       allowImportingTsExtensions: true,
-      ...this.configFileOptions,
-      ...options.compilerOptions,
+      ...configOptions,
+      ...Object.keys(paths).length ? { paths } : {},
+      ...this.projectOptions.compilerOptions,
+      // JavaScript files are part of the project even where a tsconfig.json leaves `allowJs` off.
+      allowJs: true,
       // The project loads no @types packages, its standard library is the one given here, and it never emits.
       types: [],
       noEmit: true,
-      ...this.hasLib ? { lib: libEntries, noLib: false } : { noLib: true }
+      ...this.libOptions
     };
-    this.service = ts2.createLanguageService(this.createHost(), ts2.createDocumentRegistry(true, "/"));
+  }
+  /** Which config each file uses, and the options of each. Worked out again when files are added or removed. */
+  programs() {
+    if (this.configPrograms?.fileSetVersion === this.fileSetVersion) return this.configPrograms;
+    const projectPaths = [...this.files.keys()];
+    const packagePaths = workspacePackagePaths(this.workspace?.packageFiles ?? {}, (path) => this.files.has(path));
+    const configs = (this.workspace?.configFiles ?? []).map((config) => parseConfig(config, projectPaths)).filter((config) => !!config);
+    const optionsByConfig = /* @__PURE__ */ new Map([[NO_CONFIG, this.compilerOptions({}, packagePaths)]]);
+    for (const config of configs) optionsByConfig.set(config.path, this.compilerOptions(config.options, packagePaths));
+    const pathsByConfig = /* @__PURE__ */ new Map();
+    const configOfPath = /* @__PURE__ */ new Map();
+    for (const path of projectPaths) {
+      const configPath = configForFile(path, configs)?.path ?? NO_CONFIG;
+      configOfPath.set(path, configPath);
+      pathsByConfig.set(configPath, [...pathsByConfig.get(configPath) ?? [], path]);
+    }
+    this.configPrograms = { fileSetVersion: this.fileSetVersion, optionsByConfig, pathsByConfig, configOfPath };
+    return this.configPrograms;
+  }
+  configOf(path) {
+    return this.programs().configOfPath.get(path) ?? NO_CONFIG;
+  }
+  /** The options a file's imports resolve with: its own config's, whichever program includes it. */
+  optionsOfFile(path) {
+    const { optionsByConfig } = this.programs();
+    return optionsByConfig.get(path ? this.configOf(path) : NO_CONFIG) ?? optionsByConfig.get(NO_CONFIG);
+  }
+  serviceOf(path) {
+    return this.serviceOfConfig(this.configOf(path));
+  }
+  serviceOfConfig(configPath) {
+    let service = this.services.get(configPath);
+    if (!service) {
+      service = ts5.createLanguageService(this.createHost(configPath), this.documentRegistry);
+      this.services.set(configPath, service);
+    }
+    return service;
   }
   // ---------------------------------------------------------------- files (fast path)
   /** Add or update a file. Parses only this file, incrementally from its previous version. */
@@ -702,7 +1015,7 @@ var Project = class {
     const file = this.files.get(path);
     if (!file) return [];
     if (file.usages && file.usagesProjectVersion === this.projectVersion) return file.usages;
-    const program = this.service.getProgram();
+    const program = this.serviceOf(path).getProgram();
     const sf = program?.getSourceFile(toFileName(path));
     const builder = builderOf(file.model);
     if (!program || !sf || !builder || sf.text !== file.text) return [];
@@ -713,7 +1026,7 @@ var Project = class {
   /** Usages in other files that point at blocks in this file. */
   usagesInto(path) {
     const incoming = [];
-    for (const otherPath of this.importersOf(path)) {
+    for (const otherPath of this.importersThroughReExports(path)) {
       for (const usage of this.usages(otherPath)) {
         if (usage.toPath === path) incoming.push({ ...usage, fromPath: otherPath });
       }
@@ -726,9 +1039,10 @@ var Project = class {
     if (!file) return [];
     const hasSyntaxErrors = file.model.diagnostics.length > 0;
     if (hasSyntaxErrors || !this.hasLib) return file.model.diagnostics;
-    const sf = this.service.getProgram()?.getSourceFile(toFileName(path));
+    const service = this.serviceOf(path);
+    const sf = service.getProgram()?.getSourceFile(toFileName(path));
     if (!sf || sf.text !== file.text) return [];
-    return this.service.getSemanticDiagnostics(toFileName(path)).map((d) => toCodeDiagnostic(file.model, sf, d, "type"));
+    return service.getSemanticDiagnostics(toFileName(path)).map((d) => toCodeDiagnostic(file.model, sf, d, "type"));
   }
   /**
    * Text edits that rename a block and every usage of it, in every file of the project.
@@ -745,29 +1059,54 @@ var Project = class {
     if (namesVisibleFrom(file.model, block).has(newName)) return { ok: false, error: `${newName} already exists here` };
     if (file.model.diagnostics.length) return { ok: false, error: `Fix the syntax error on line ${file.model.firstErrorLine} first` };
     const fileName2 = toFileName(path);
-    const info = this.service.getRenameInfo(fileName2, block.nameStart, { allowRenameOfImportPath: false });
+    const info = this.serviceOf(path).getRenameInfo(fileName2, block.nameStart, { allowRenameOfImportPath: false });
     if (!info.canRename) return { ok: false, error: info.localizedErrorMessage };
-    const locations = this.service.findRenameLocations(fileName2, block.nameStart, false, false, { providePrefixAndSuffixTextForRename: true }) ?? [];
     const edits = {};
-    for (const location of locations) {
-      const locationPath = fromFileName(location.fileName);
-      if (!locationPath) continue;
-      const text = this.withoutImportAlias(location, newName);
-      (edits[locationPath] ??= []).push({ start: location.textSpan.start, end: location.textSpan.start + location.textSpan.length, text });
+    const renamedLocations = /* @__PURE__ */ new Set();
+    for (const configPath of this.configsUsing(path)) {
+      const service = this.serviceOfConfig(configPath);
+      if (!service.getProgram()?.getSourceFile(fileName2)) continue;
+      const renameStarts = [{ fileName: fileName2, position: block.nameStart }];
+      const visitedStarts = /* @__PURE__ */ new Set();
+      for (let start = renameStarts.pop(); start; start = renameStarts.pop()) {
+        const startKey = `${start.fileName}:${start.position}`;
+        if (visitedStarts.has(startKey)) continue;
+        visitedStarts.add(startKey);
+        const locations = service.findRenameLocations(start.fileName, start.position, false, false, { providePrefixAndSuffixTextForRename: true }) ?? [];
+        for (const location of locations) {
+          const locationPath = fromFileName(location.fileName);
+          if (!locationPath) continue;
+          if (isAliasInSpecifier(location)) renameStarts.push({ fileName: location.fileName, position: location.textSpan.start });
+          const locationKey = `${location.fileName}:${location.textSpan.start}`;
+          if (renamedLocations.has(locationKey)) continue;
+          renamedLocations.add(locationKey);
+          const text = isAliasInSpecifier(location) ? newName : (location.prefixText ?? "") + newName + (location.suffixText ?? "");
+          (edits[locationPath] ??= []).push({ start: location.textSpan.start, end: location.textSpan.start + location.textSpan.length, text });
+        }
+      }
     }
+    for (const fileEdits of Object.values(edits)) fileEdits.sort((a, b) => a.start - b.start);
     return { ok: true, edits };
   }
   // ---------------------------------------------------------------- internals
-  /**
-   * TypeScript keeps local names stable when renaming an export (`import { newName as old }`).
-   * Here a rename should update every usage, so import/export specifiers get the plain new name.
-   */
-  withoutImportAlias(location, newName) {
-    const prefix = location.prefixText ?? "";
-    const suffix = location.suffixText ?? "";
-    const isAliasInSpecifier = /\bas\s*$/.test(prefix) || /^\s*as\b/.test(suffix);
-    if (isAliasInSpecifier) return newName;
-    return prefix + newName + suffix;
+  /** The configs of a file and of the files that can use its blocks: its importers, also through re-exports. */
+  configsUsing(path) {
+    const owner = this.configOf(path);
+    const importerConfigs = this.importersThroughReExports(path).map((importer) => this.configOf(importer));
+    return [owner, ...new Set(importerConfigs.filter((configPath) => configPath !== owner))];
+  }
+  /** Files that import `path`, or import a file that re-exports from it (an `index.ts` of a folder or package). */
+  importersThroughReExports(path) {
+    const importers = /* @__PURE__ */ new Set();
+    const reExporters = [path];
+    for (let reExported = reExporters.pop(); reExported !== void 0; reExported = reExporters.pop()) {
+      for (const importer of this.importersOf(reExported)) {
+        if (importers.has(importer) || importer === path) continue;
+        importers.add(importer);
+        if (this.importsOf(importer).reExportedPaths.has(reExported)) reExporters.push(importer);
+      }
+    }
+    return [...importers];
   }
   otherFileResolver() {
     return {
@@ -793,29 +1132,38 @@ var Project = class {
   importersOf(path) {
     const importers = [];
     for (const [otherPath, file] of this.files) {
-      if (otherPath !== path && this.importedPaths(otherPath, file).has(path)) importers.push(otherPath);
+      if (otherPath !== path && this.importsOf(otherPath, file).importedPaths.has(path)) importers.push(otherPath);
     }
     return importers;
   }
-  importedPaths(path, file) {
-    if (file.importedPaths?.fileSetVersion === this.fileSetVersion) return file.importedPaths.paths;
-    const resolved = /* @__PURE__ */ new Set();
+  importsOf(path, file = this.files.get(path)) {
+    if (file.imports?.fileSetVersion === this.fileSetVersion && file.imports.fileVersion === file.version) return file.imports;
+    const importedPaths = /* @__PURE__ */ new Set();
+    const reExportedPaths = /* @__PURE__ */ new Set();
     const host = this.moduleResolutionHost();
+    const resolve = (specifier) => {
+      const result = ts5.resolveModuleName(specifier, toFileName(path), this.optionsOfFile(path), host).resolvedModule;
+      return result ? fromFileName(result.resolvedFileName) : null;
+    };
     for (const block of file.model.roots) {
-      if (block.kind !== "import") continue;
-      const specifier = block.name;
-      const result = ts2.resolveModuleName(specifier, toFileName(path), this.options, host).resolvedModule;
-      const target = result && fromFileName(result.resolvedFileName);
-      if (target) resolved.add(target);
-    }
-    file.importedPaths = { paths: resolved, fileSetVersion: this.fileSetVersion };
-    return resolved;
+      const code = block.kind === "statement" || block.kind === "variable" ? file.text.slice(block.start, block.end) : "";
+      const reExportSpecifier = block.kind === "statement" ? RE_EXPORT.exec(code)?.[2] : void 0;
+      const requiredSpecifier = block.kind === "variable" ? REQUIRE_CALL.exec(code)?.[2] : void 0;
+      const specifier = block.kind === "import" ? block.name : reExportSpecifier ?? requiredSpecifier;
+      const target = specifier ? resolve(specifier) : null;
+      if (!target) continue;
+      importedPaths.add(target);
+      if (reExportSpecifier) reExportedPaths.add(target);
+    }
+    file.imports = { importedPaths, reExportedPaths, fileSetVersion: this.fileSetVersion, fileVersion: file.version };
+    return file.imports;
   }
   moduleResolutionHost() {
     return {
       fileExists: (name) => this.fileExists(name),
       readFile: (name) => this.readFile(name),
-      directoryExists: (dir) => this.directoryExists(dir)
+      directoryExists: (dir) => this.directoryExists(dir),
+      getCurrentDirectory: () => "/"
     };
   }
   fileExists(name) {
@@ -834,11 +1182,12 @@ var Project = class {
     for (const path of this.files.keys()) if (path.startsWith(prefix)) return true;
     return false;
   }
-  createHost() {
+  /** The host of one config's program. Its files are those that use the config; their imports come in from the rest. */
+  createHost(configPath) {
     return {
-      getCompilationSettings: () => this.options,
+      getCompilationSettings: () => this.programs().optionsByConfig.get(configPath) ?? this.programs().optionsByConfig.get(NO_CONFIG),
       getProjectVersion: () => String(this.projectVersion),
-      getScriptFileNames: () => [...this.files.keys()].map(toFileName),
+      getScriptFileNames: () => (this.programs().pathsByConfig.get(configPath) ?? []).map(toFileName),
       getScriptVersion: (name) => {
         if (name.startsWith(LIB_DIR)) return "0";
         const path = fromFileName(name);
@@ -847,7 +1196,7 @@ var Project = class {
       getScriptSnapshot: (name) => {
         if (name.startsWith(LIB_DIR)) {
           const text = this.libFiles[name.slice(LIB_DIR.length)];
-          return text === void 0 ? void 0 : ts2.ScriptSnapshot.fromString(text);
+          return text === void 0 ? void 0 : ts5.ScriptSnapshot.fromString(text);
         }
         const path = fromFileName(name);
         const file = path ? this.files.get(path) : void 0;
@@ -856,6 +1205,13 @@ var Project = class {
         return file.snapshot;
       },
       getCurrentDirectory: () => "/",
+      // A file another package's program pulls in keeps its own package's aliases.
+      resolveModuleNameLiterals: (moduleLiterals, containingFile) => {
+        const containingPath = fromFileName(containingFile);
+        const options = this.optionsOfFile(containingPath);
+        const host = this.moduleResolutionHost();
+        return moduleLiterals.map((literal) => ts5.resolveModuleName(literal.text, containingFile, options, host));
+      },
       getDefaultLibFileName: () => LIB_DIR + "lib.d.ts",
       fileExists: (name) => this.fileExists(name),
       readFile: (name) => this.readFile(name),
@@ -865,6 +1221,9 @@ var Project = class {
     };
   }
 };
+function isAliasInSpecifier(location) {
+  return /\bas\s*$/.test(location.prefixText ?? "") || /^\s*as\b/.test(location.suffixText ?? "");
+}
 var TextSnapshot = class _TextSnapshot {
   constructor(text) {
     this.text = text;
@@ -887,7 +1246,7 @@ function changedRegion(before, after) {
   while (start < shorter && before.charCodeAt(start) === after.charCodeAt(start)) start++;
   let fromEnd = 0;
   while (fromEnd < shorter - start && before.charCodeAt(before.length - 1 - fromEnd) === after.charCodeAt(after.length - 1 - fromEnd)) fromEnd++;
-  return ts2.createTextChangeRange(ts2.createTextSpan(start, before.length - fromEnd - start), after.length - fromEnd - start);
+  return ts5.createTextChangeRange(ts5.createTextSpan(start, before.length - fromEnd - start), after.length - fromEnd - start);
 }
 function toFileName(path) {
   return "/" + path;
@@ -911,26 +1270,12 @@ function namesVisibleFrom(model, block) {
   return names;
 }
 function isValidIdentifier(name) {
-  const scanner = ts2.createScanner(ts2.ScriptTarget.Latest, true, ts2.LanguageVariant.Standard, name);
+  const scanner = ts5.createScanner(ts5.ScriptTarget.Latest, true, ts5.LanguageVariant.Standard, name);
   const token = scanner.scan();
   const isWholeText = scanner.getTokenEnd() === name.length && name.length > 0;
-  const isNameToken = token === ts2.SyntaxKind.Identifier || token > ts2.SyntaxKind.LastReservedWord && token <= ts2.SyntaxKind.LastKeyword;
+  const isNameToken = token === ts5.SyntaxKind.Identifier || token > ts5.SyntaxKind.LastReservedWord && token <= ts5.SyntaxKind.LastKeyword;
   return isWholeText && isNameToken;
 }
-function compilerOptionsOf(config) {
-  const configFileName = toFileName(config.path);
-  const json = ts2.parseConfigFileTextToJson(configFileName, config.text);
-  if (json.error || !json.config) return {};
-  const readConfig = (name) => name === configFileName ? config.text : config.extendedFiles?.[fromFileName(name) ?? ""];
-  const host = {
-    useCaseSensitiveFileNames: true,
-    readDirectory: () => [],
-    fileExists: (name) => readConfig(name) !== void 0,
-    readFile: readConfig
-  };
-  const configFolder = configFileName.slice(0, configFileName.lastIndexOf("/") + 1);
-  return ts2.parseJsonConfigFileContent(json.config, host, configFolder, void 0, configFileName).options;
-}
 
 // src/remoteProject.ts
 var RemoteProject = class {
@@ -966,6 +1311,10 @@ var RemoteProject = class {
   setConfigFile(config) {
     void this.callServer("setConfigFile", [config]);
   }
+  /** The folder's config files (one per package in a monorepo) and package.json files (or none, with null). */
+  setWorkspace(workspace) {
+    void this.callServer("setWorkspace", [workspace]);
+  }
   getModel(path) {
     const file = this.files.get(path);
     if (!file) return void 0;
@@ -988,7 +1337,7 @@ var RemoteProject = class {
 };
 
 // src/projectServer.ts
-var SERVER_METHODS = ["setLibFiles", "setConfigFile", "setFiles", "setFile", "removeFile", "resolve", "renameBlock"];
+var SERVER_METHODS = ["setLibFiles", "setConfigFile", "setWorkspace", "setFiles", "setFile", "removeFile", "resolve", "renameBlock"];
 var ProjectServer = class {
   project = new Project();
   setLibFiles(libFiles) {
@@ -997,6 +1346,9 @@ var ProjectServer = class {
   setConfigFile(config) {
     this.project.setConfigFile(config);
   }
+  setWorkspace(workspace) {
+    this.project.setWorkspace(workspace);
+  }
   setFiles(files) {
     for (const [path, text] of Object.entries(files)) this.project.setFile(path, text);
   }
@@ -1051,7 +1403,7 @@ function connectProjectWorker(port) {
 }
 
 // src/edits.ts
-import ts3 from "typescript";
+import ts6 from "typescript";
 function applyEdit(text, e) {
   return text.slice(0, e.start) + e.text + text.slice(e.end);
 }
@@ -1178,13 +1530,13 @@ function toTopLevel(code) {
 function renameDeclaration(code, inClass, name) {
   const prefix = inClass ? "class __cc__ {\n" : "";
   const src = prefix + code + (inClass ? "\n}" : "");
-  const sf = ts3.createSourceFile("snippet.ts", src, ts3.ScriptTarget.Latest, true);
+  const sf = ts6.createSourceFile("snippet.ts", src, ts6.ScriptTarget.Latest, true);
   let target;
   const first = sf.statements[0];
-  if (inClass && first && ts3.isClassDeclaration(first)) target = first.members[0]?.name;
-  else if (first && (ts3.isFunctionDeclaration(first) || ts3.isClassDeclaration(first) || ts3.isInterfaceDeclaration(first) || ts3.isTypeAliasDeclaration(first) || ts3.isEnumDeclaration(first)))
+  if (inClass && first && ts6.isClassDeclaration(first)) target = first.members[0]?.name;
+  else if (first && (ts6.isFunctionDeclaration(first) || ts6.isClassDeclaration(first) || ts6.isInterfaceDeclaration(first) || ts6.isTypeAliasDeclaration(first) || ts6.isEnumDeclaration(first)))
     target = first.name;
-  else if (first && ts3.isVariableStatement(first)) target = first.declarationList.declarations[0]?.name;
+  else if (first && ts6.isVariableStatement(first)) target = first.declarationList.declarations[0]?.name;
   if (!target) return code;
   const s = target.getStart(sf) - prefix.length;
   return code.slice(0, s) + name + code.slice(target.end - prefix.length);
@@ -1196,26 +1548,26 @@ function must(model, id) {
 }
 function clipFromText(code) {
   const text = code.replace(/\s+$/, "");
-  const sf = ts3.createSourceFile("clip.ts", text, ts3.ScriptTarget.Latest, true);
+  const sf = ts6.createSourceFile("clip.ts", text, ts6.ScriptTarget.Latest, true);
   const first = sf.statements[0];
   const diags = sf.parseDiagnostics ?? [];
   if (first && !diags.length) {
     let name;
     let kind = "statement";
-    if (ts3.isFunctionDeclaration(first)) name = first.name?.text, kind = "function";
-    else if (ts3.isClassDeclaration(first)) name = first.name?.text, kind = "class";
-    else if (ts3.isVariableStatement(first)) name = first.declarationList.declarations[0]?.name.getText(), kind = "variable";
-    else if (ts3.isInterfaceDeclaration(first) || ts3.isTypeAliasDeclaration(first) || ts3.isEnumDeclaration(first)) name = first.name.text, kind = "type";
+    if (ts6.isFunctionDeclaration(first)) name = first.name?.text, kind = "function";
+    else if (ts6.isClassDeclaration(first)) name = first.name?.text, kind = "class";
+    else if (ts6.isVariableStatement(first)) name = first.declarationList.declarations[0]?.name.getText(), kind = "variable";
+    else if (ts6.isInterfaceDeclaration(first) || ts6.isTypeAliasDeclaration(first) || ts6.isEnumDeclaration(first)) name = first.name.text, kind = "type";
     if (name) return { code: text, name, kind, fromClass: false };
   }
-  const wrapped = ts3.createSourceFile("clip.ts", `class __cc__ {
+  const wrapped = ts6.createSourceFile("clip.ts", `class __cc__ {
 ${text}
-}`, ts3.ScriptTarget.Latest, true);
+}`, ts6.ScriptTarget.Latest, true);
   const cls = wrapped.statements[0];
   const wd = wrapped.parseDiagnostics ?? [];
-  if (cls && ts3.isClassDeclaration(cls) && !wd.length && cls.members[0]?.name) {
+  if (cls && ts6.isClassDeclaration(cls) && !wd.length && cls.members[0]?.name) {
     const m = cls.members[0];
-    return { code: text, name: m.name.getText(wrapped), kind: ts3.isPropertyDeclaration(m) ? "variable" : "function", fromClass: true };
+    return { code: text, name: m.name.getText(wrapped), kind: ts6.isPropertyDeclaration(m) ? "variable" : "function", fromClass: true };
   }
   return { code: text, name: "", kind: "statement", fromClass: false };
 }
@@ -1373,7 +1725,7 @@ function resolveConflict(text, hunk, choice) {
 var BAND_ORDER = ["data", "types", "main", "bottom"];
 var ZONE_RULES = [
   { zone: "left", description: "Imports on the left", matches: (block) => block.kind === "import" },
-  { zone: "data", description: "Constants and other data at the top", matches: (block) => block.kind === "variable" },
+  { zone: "data", description: "Constants, other data and React state at the top", matches: (block) => block.kind === "variable" || block.kind === "state" },
   { zone: "types", description: "Then interfaces, types and enums", matches: (block) => block.kind === "type" },
   { zone: "bottom", description: "Code that runs when the file loads, at the bottom", matches: (block) => block.kind === "statement" },
   { zone: "main", description: "Functions, classes and the rest in between", matches: () => true }
@@ -1406,8 +1758,64 @@ var RELATEDNESS_RULES = [
     score: (a, b) => firstWord(a.name) && firstWord(a.name) === firstWord(b.name) ? 1 : 0
   }
 ];
+var PLACEMENT_RULES = [
+  {
+    description: "A getter right above its setter, a setter right below its getter",
+    spot(block, placed) {
+      const siblings = [block, ...placed.map((sibling) => sibling.block)];
+      for (const rule of STACK_RULES) {
+        for (const [top, bottom] of rule.pairs(siblings)) {
+          const placedBottom = top === block && placed.find((sibling) => sibling.block === bottom);
+          if (placedBottom) return { sibling: placedBottom, side: "above" };
+          const placedTop = bottom === block && placed.find((sibling) => sibling.block === top);
+          if (placedTop) return { sibling: placedTop, side: "below" };
+        }
+      }
+      return void 0;
+    }
+  },
+  {
+    description: "Like a newspaper: a function goes in the column right of its caller, after the function called before it",
+    spot(block, placed, factsOf) {
+      if (!isFunctionLike(block)) return void 0;
+      const caller = placed.find((sibling) => isFunctionLike(sibling.block) && factsOf(sibling.block).calls.includes(block.id));
+      if (!caller) return void 0;
+      const calls = factsOf(caller.block).calls;
+      const isInCallerColumn = (sibling) => sibling !== caller && sibling.x >= caller.x + caller.w;
+      const calledBefore = calls.slice(0, calls.indexOf(block.id)).reverse();
+      const previousInColumn = calledBefore.map((id) => placed.find((sibling) => sibling.block.id === id && isInCallerColumn(sibling))).find(Boolean);
+      return previousInColumn ? { sibling: previousInColumn, side: "below" } : { sibling: caller, side: "right" };
+    }
+  },
+  {
+    description: "An import, constant or type below the last one of its kind before it in the file",
+    spot(block, placed) {
+      const zone = zoneOf(block);
+      if (zone === "main") return void 0;
+      const sameZone = placed.filter((sibling) => zoneOf(sibling.block) === zone);
+      const lastBefore = sameZone.filter((sibling) => sibling.block.start < block.start).at(-1) ?? sameZone[0];
+      return lastBefore ? { sibling: lastBefore, side: "below" } : void 0;
+    }
+  },
+  {
+    description: "Below the block it is most related to",
+    spot(block, placed, factsOf) {
+      let best;
+      let bestScore = 0;
+      for (const sibling of placed) {
+        const score = RELATEDNESS_RULES.reduce((total, rule) => total + rule.score(block, sibling.block, factsOf), 0);
+        if (score > bestScore) {
+          best = sibling;
+          bestScore = score;
+        }
+      }
+      return best ? { sibling: best, side: "below" } : void 0;
+    }
+  }
+];
+var zoneOf = (block) => ZONE_RULES.find((rule) => rule.matches(block)).zone;
 var NEWSPAPER_DEPTH = 3;
-var isFunctionLike = (block) => block.kind === "function";
+var isFunctionLike = (block) => block.kind === "function" || block.kind === "component";
 function accessedName(block, accessor) {
   if (block.kind !== "function") return void 0;
   if (block.tags.includes(accessor)) return block.name;
@@ -1467,8 +1875,19 @@ function arrangeSiblings(blocks, sizeOf, text, gap, isFile) {
   }
   return positions;
 }
+function newBlockSpots(siblings, text) {
+  let factsById;
+  const factsOf = (sibling) => factsById.get(sibling.id);
+  return (block, placed) => {
+    factsById ??= siblingFacts(siblings, text);
+    for (const rule of PLACEMENT_RULES) {
+      const spot = rule.spot(block, placed, factsOf);
+      if (spot) return spot;
+    }
+    return void 0;
+  };
+}
 function stackedUnits(blocks) {
-  const zoneOf = (block) => ZONE_RULES.find((rule) => rule.matches(block)).zone;
   const unitOf = /* @__PURE__ */ new Map();
   const units = blocks.map((block, order) => {
     const unit = { members: [block], arrangement: { block: block.id }, zone: zoneOf(block), order };
@@ -1550,6 +1969,7 @@ function orderByRelatedness(units, factsOf) {
 function siblingFacts(blocks, text) {
   const idsByName = /* @__PURE__ */ new Map();
   for (const block of blocks) idsByName.set(block.name, [...idsByName.get(block.name) ?? [], block.id]);
+  const componentIds = new Set(blocks.filter((block) => block.kind === "component").map((block) => block.id));
   const facts = /* @__PURE__ */ new Map();
   for (const block of blocks) {
     const code = codeWithoutChildren(text, [block.start, block.end], block.children);
@@ -1559,9 +1979,11 @@ function siblingFacts(blocks, text) {
       const ids = idsByName.get(match[0])?.filter((id) => id !== block.id);
       if (!ids?.length) continue;
       const isCall = /^\s*\(/.test(code.slice(match.index + match[0].length, match.index + match[0].length + 40));
+      const isJsxTag = /<\/?$/.test(code.slice(Math.max(0, match.index - 2), match.index));
       for (const id of ids) {
         uses.add(id);
-        if (isCall && !calls.includes(id)) calls.push(id);
+        const isRender = isJsxTag && componentIds.has(id);
+        if ((isCall || isRender) && !calls.includes(id)) calls.push(id);
       }
     }
     facts.set(block.id, { calls, uses });
@@ -1672,11 +2094,18 @@ function computeGeometry(model, layout, hints = {}, opts = {}) {
         placed.push(g);
       } else unplaced.push(g);
     }
+    const spotByRules = newBlockSpots(sibs.map((sibling) => sibling.block), model.text);
     for (const g of unplaced) {
-      const idx = sibs.indexOf(g);
-      const prev = sibs.slice(0, idx).reverse().find((s) => placed.includes(s));
       const hint = hints[g.id];
-      const p = hint ? freeSpotNear(hint, g, placed, !isFile) : findFreeSpot(g, placed, prev, !isFile);
+      const ruleSpot = hint || !placed.length ? void 0 : spotByRules(g.block, placed);
+      let p;
+      if (hint) p = freeSpotNear(hint, g, placed, !isFile);
+      else if (ruleSpot?.side === "below") p = freeSpotDown(pointBeside(ruleSpot, g), g, placed, !isFile);
+      else if (ruleSpot) p = freeSpotNear(pointBeside(ruleSpot, g), g, placed, !isFile);
+      else {
+        const previousPlacedInFile = sibs.slice(0, sibs.indexOf(g)).reverse().find((sibling) => placed.includes(sibling));
+        p = findFreeSpot(g, placed, previousPlacedInFile, !isFile);
+      }
       g.x = p.x;
       g.y = p.y;
       assigned[g.id] = p;
@@ -1709,6 +2138,26 @@ function computeGeometry(model, layout, hints = {}, opts = {}) {
   };
   return { geo, order, frame, assigned };
 }
+function placeGhostBlocks(ghosts, ghostGeometry, currentModel, current) {
+  const positions = /* @__PURE__ */ new Map();
+  const placedGhostsByParent = /* @__PURE__ */ new Map();
+  for (const ghost of ghosts) {
+    const ghostGeo = ghostGeometry.geo.get(ghost.id);
+    if (!ghostGeo) continue;
+    const parentId = ghost.parentId ?? null;
+    const parentGeo = parentId ? current.geo.get(parentId) : void 0;
+    if (parentId && !parentGeo) continue;
+    if (parentGeo && (parentGeo.hidden || parentGeo.collapsed)) continue;
+    const currentSiblings = parentId ? currentModel.blocks.get(parentId).children : currentModel.roots;
+    const placedGhosts = placedGhostsByParent.get(parentId) ?? [];
+    const taken = [...currentSiblings.map((sibling) => current.geo.get(sibling.id)), ...placedGhosts];
+    const spot = freeSpotNear({ x: ghostGeo.x, y: ghostGeo.y }, ghostGeo, taken, !!parentGeo);
+    placedGhosts.push({ ...spot, w: ghostGeo.w, h: ghostGeo.h });
+    placedGhostsByParent.set(parentId, placedGhosts);
+    positions.set(ghost.id, parentGeo ? { x: parentGeo.ax + M.pad + spot.x, y: parentGeo.ay + parentGeo.contentTop + spot.y } : spot);
+  }
+  return positions;
+}
 function pushApart(sibs, assigned) {
   for (let iter = 0; iter < 100; iter++) {
     let moved = false;
@@ -1729,6 +2178,12 @@ function pushApart(sibs, assigned) {
     if (!moved) break;
   }
 }
+function pointBeside(spot, size) {
+  const { sibling, side } = spot;
+  if (side === "right") return { x: sibling.x + sibling.w + M.gap, y: sibling.y };
+  if (side === "below") return { x: sibling.x, y: sibling.y + sibling.h + M.gap };
+  return { x: sibling.x, y: sibling.y - size.h - M.gap };
+}
 function headerChars(b) {
   const tags = b.tags.filter((t) => t !== "export").join(" ");
   return 4 + b.name.length + Math.min(b.detail.length, 40) + (tags ? tags.length + 2 : 0) + 3;
@@ -1771,6 +2226,12 @@ function freeSpotNear(at, g, placed, clampPositive) {
   const bottom = Math.max(...others.map((p) => p.y + p.h));
   return round({ x: start.x, y: bottom + M.gap });
 }
+function freeSpotDown(at, g, placed, clampPositive) {
+  const spot = clampPositive ? { x: Math.max(0, at.x), y: Math.max(0, at.y) } : { ...at };
+  const blockCoveringSpot = () => placed.find((p) => overlaps({ x: spot.x, y: spot.y, w: g.w, h: g.h }, p));
+  for (let covering = blockCoveringSpot(); covering; covering = blockCoveringSpot()) spot.y = covering.y + covering.h + M.gap;
+  return round(spot);
+}
 function dist(a, b) {
   return Math.hypot(a.x - b.x, a.y - b.y);
 }
@@ -1859,6 +2320,8 @@ var CSS = (
   --k-import: #6b7280;   --k-import-head: #3b3f46;  --k-import-bg: #25272c;
   --k-class: #34b27a;    --k-class-head: #1d6b4a;   --k-class-bg: rgba(52,178,122,.08);
   --k-function: #ec5fa5; --k-function-head: #8f2f62; --k-function-bg: rgba(236,95,165,.09);
+  --k-component: #22b8cf; --k-component-head: #146c7a; --k-component-bg: rgba(34,184,207,.09);
+  --k-state: #f0883e;    --k-state-head: #8a4614;   --k-state-bg: rgba(240,136,62,.09);
   --k-variable: #4b8ef7; --k-variable-head: #23508f; --k-variable-bg: rgba(75,142,247,.09);
   --k-type: #d4a92a;     --k-type-head: #6e5714;    --k-type-bg: rgba(212,169,42,.08);
   --k-namespace: #9b8cf8; --k-namespace-head: #4d4291; --k-namespace-bg: rgba(155,140,248,.08);
@@ -1881,6 +2344,8 @@ var CSS = (
   --k-import: #6b7280;   --k-import-head: #4b5058;  --k-import-bg: #eceef1;
   --k-class: #1f9963;    --k-class-head: #1f9963;   --k-class-bg: rgba(31,153,99,.07);
   --k-function: #d63e8c; --k-function-head: #d63e8c; --k-function-bg: rgba(214,62,140,.07);
+  --k-component: #0f8fa3; --k-component-head: #0f8fa3; --k-component-bg: rgba(15,143,163,.07);
+  --k-state: #d4691c;    --k-state-head: #d4691c;   --k-state-bg: rgba(212,105,28,.07);
   --k-variable: #2f6fe0; --k-variable-head: #2f6fe0; --k-variable-bg: rgba(47,111,224,.07);
   --k-type: #b58a0c;     --k-type-head: #a87f08;    --k-type-bg: rgba(181,138,12,.08);
   --k-namespace: #6f5ce6; --k-namespace-head: #6f5ce6; --k-namespace-bg: rgba(111,92,230,.07);
@@ -1900,6 +2365,8 @@ var CSS = (
 .cc-block.k-import { --k: var(--k-import); --kh: var(--k-import-head); --kbg: var(--k-import-bg); }
 .cc-block.k-class { --k: var(--k-class); --kh: var(--k-class-head); --kbg: var(--k-class-bg); }
 .cc-block.k-function { --k: var(--k-function); --kh: var(--k-function-head); --kbg: var(--k-function-bg); }
+.cc-block.k-component { --k: var(--k-component); --kh: var(--k-component-head); --kbg: var(--k-component-bg); }
+.cc-block.k-state { --k: var(--k-state); --kh: var(--k-state-head); --kbg: var(--k-state-bg); }
 .cc-block.k-variable { --k: var(--k-variable); --kh: var(--k-variable-head); --kbg: var(--k-variable-bg); }
 .cc-block.k-type { --k: var(--k-type); --kh: var(--k-type-head); --kbg: var(--k-type-bg); }
 .cc-block.k-namespace { --k: var(--k-namespace); --kh: var(--k-namespace-head); --kbg: var(--k-namespace-bg); }
@@ -1929,6 +2396,7 @@ var CSS = (
 .cc-mini { position: relative; margin: 6px 12px 0; height: 34px; opacity: .45; }
 .cc-mini > i { position: absolute; border-radius: 2px; border: 1px solid var(--cc-faint); background: rgba(255,255,255,.06); }
 .cc-mini > i.k-class { border-color: var(--k-class); } .cc-mini > i.k-function { border-color: var(--k-function); }
+.cc-mini > i.k-component { border-color: var(--k-component); } .cc-mini > i.k-state { border-color: var(--k-state); }
 .cc-mini > i.k-variable { border-color: var(--k-variable); } .cc-mini > i.k-type { border-color: var(--k-type); }
 
 .cc-err {
@@ -2024,6 +2492,7 @@ var CSS = (
 .cc-btn:hover { background: rgba(127,127,127,.16); }
 .cc-btn.danger { color: var(--cc-danger); }
 .cc-btn.primary { background: var(--cc-accent); color: #fff; }
+.cc-language { padding: 0 8px; font: 600 11px/30px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace); color: var(--cc-muted); white-space: nowrap; }
 .cc-sep { width: 1px; height: 20px; background: var(--cc-panel-border); margin: 0 2px; flex: none; }
 .cc-refs {
   position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 21; width: min(360px, calc(100% - 24px)); max-height: 45%;
@@ -2073,6 +2542,8 @@ var KIND_LABEL = {
   import: "import",
   class: "class",
   function: "fn",
+  component: "component",
+  state: "state",
   variable: "var",
   type: "type",
   namespace: "ns",
@@ -2102,7 +2573,7 @@ var CodeCanvas = class {
     this.blocksEl = el("div", "cc-blocks");
     this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     this.svg.classList.add("cc-edges");
-    setHTML(this.svg, `<defs>${["import", "class", "function", "variable", "type", "namespace", "statement"].map(
+    setHTML(this.svg, `<defs>${["import", "class", "function", "component", "state", "variable", "type", "namespace", "statement"].map(
       (k) => `<marker id="cc-arrow-${k}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="var(--k-${k})"/></marker>`
     ).join("")}</defs>`);
     this.world.append(this.frameEl, this.blocksEl, this.svg);
@@ -2166,8 +2637,7 @@ var CodeCanvas = class {
   diffCache = null;
   /** Merge conflicts in the text. The canvas then shows its current side, marking the blocks they touch. */
   conflicts = null;
-  incomingBlockEls = [];
-  removedBlockEls = [];
+  ghostBlockEls = { removed: [], incoming: [] };
   /** Errors from the host (`setDiagnostics`), shown instead of the project's type errors. */
   hostDiagnostics = null;
   renaming = null;
@@ -2549,25 +3019,10 @@ var CodeCanvas = class {
   }
   /** Blocks only the incoming side of a conflict has, drawn dashed where they would go. */
   renderIncomingBlocks() {
-    for (const incomingEl of this.incomingBlockEls) incomingEl.remove();
-    this.incomingBlockEls = [];
     const conflicts = this.conflicts;
-    const geometry = this.geom;
-    if (!conflicts?.incomingOnly.length || !geometry) return;
+    if (!conflicts?.incomingOnly.length || !this.geom) return this.drawGhostBlocks("incoming", [], null);
     conflicts.geometry ??= computeGeometry(conflicts.incomingModel, this.layout, {}, { resolveOverlaps: false });
-    for (const block of conflicts.incomingOnly) {
-      const incomingGeo = conflicts.geometry.geo.get(block.id);
-      const parentGeo = block.parentId ? geometry.geo.get(block.parentId) : void 0;
-      if (!incomingGeo || parentGeo && (parentGeo.hidden || parentGeo.collapsed)) continue;
-      const x = parentGeo ? parentGeo.ax + M.pad + incomingGeo.x : incomingGeo.ax;
-      const y = parentGeo ? parentGeo.ay + parentGeo.contentTop + incomingGeo.y : incomingGeo.ay;
-      const incomingEl = el("div", `cc-block k-${block.kind} cc-conflict-incoming`);
-      setHTML(incomingEl, this.blockHTML(block, { ...incomingGeo, collapsed: true }, "", "incoming"));
-      Object.assign(incomingEl.style, { transform: `translate(${x}px,${y}px)`, width: incomingGeo.w + "px", height: incomingGeo.h + "px", zIndex: String(block.depth + 1) });
-      incomingEl.title = `${block.name}: only in the incoming side of a merge conflict`;
-      this.blocksEl.appendChild(incomingEl);
-      this.incomingBlockEls.push(incomingEl);
-    }
+    this.drawGhostBlocks("incoming", conflicts.incomingOnly, conflicts.geometry);
   }
   /** A changed block's preview: its changed lines with a line of context, as many as fit. */
   changedLinesPreview(diff, block) {
@@ -2582,24 +3037,26 @@ var CodeCanvas = class {
   }
   /** Removed blocks stay visible, in red, where they were in the base version. They can't be selected. */
   renderRemovedBlocks(diff) {
-    for (const removedEl of this.removedBlockEls) removedEl.remove();
-    this.removedBlockEls = [];
-    const geometry = this.geom;
-    if (!diff?.removed.length || !this.diffBase || !geometry) return;
+    if (!diff?.removed.length || !this.diffBase || !this.geom) return this.drawGhostBlocks("removed", [], null);
     this.diffBase.geometry ??= computeGeometry(diff.base, this.diffBase.layout ?? this.layout, {}, { resolveOverlaps: false });
-    for (const block of diff.removed) {
-      const baseGeo = this.diffBase.geometry.geo.get(block.id);
-      const parentGeo = block.parentId ? geometry.geo.get(block.parentId) : void 0;
-      const isInsideHiddenParent = !!parentGeo && (parentGeo.hidden || parentGeo.collapsed);
-      if (!baseGeo || isInsideHiddenParent) continue;
-      const x = parentGeo ? parentGeo.ax + M.pad + baseGeo.x : baseGeo.ax;
-      const y = parentGeo ? parentGeo.ay + parentGeo.contentTop + baseGeo.y : baseGeo.ay;
-      const removedEl = el("div", `cc-block k-${block.kind} cc-diff-removed`);
-      setHTML(removedEl, this.blockHTML(block, { ...baseGeo, collapsed: true }, "", "removed"));
-      Object.assign(removedEl.style, { transform: `translate(${x}px,${y}px)`, width: baseGeo.w + "px", height: baseGeo.h + "px", zIndex: String(block.depth + 1) });
-      removedEl.title = `${block.name}: removed`;
-      this.blocksEl.appendChild(removedEl);
-      this.removedBlockEls.push(removedEl);
+    this.drawGhostBlocks("removed", diff.removed, this.diffBase.geometry);
+  }
+  /** Blocks of another version (removed, or incoming in a conflict): drawn, but not part of this file. */
+  drawGhostBlocks(kind, ghosts, ghostGeometry) {
+    for (const ghostEl of this.ghostBlockEls[kind]) ghostEl.remove();
+    this.ghostBlockEls[kind] = [];
+    if (!ghostGeometry || !this.geom || !this.view) return;
+    const positions = placeGhostBlocks(ghosts, ghostGeometry, this.view, this.geom);
+    for (const block of ghosts) {
+      const position = positions.get(block.id);
+      const ghostGeo = ghostGeometry.geo.get(block.id);
+      if (!position || !ghostGeo) continue;
+      const ghostEl = el("div", `cc-block k-${block.kind} ${kind === "removed" ? "cc-diff-removed" : "cc-conflict-incoming"}`);
+      setHTML(ghostEl, this.blockHTML(block, { ...ghostGeo, collapsed: true }, "", kind));
+      Object.assign(ghostEl.style, { transform: `translate(${position.x}px,${position.y}px)`, width: ghostGeo.w + "px", height: ghostGeo.h + "px", zIndex: String(block.depth + 1) });
+      ghostEl.title = kind === "removed" ? `${block.name}: removed` : `${block.name}: only in the incoming side of a merge conflict`;
+      this.blocksEl.appendChild(ghostEl);
+      this.ghostBlockEls[kind].push(ghostEl);
     }
   }
   /** Diagnostics grouped by the block that shows them: the innermost visible block containing each error. */
@@ -3378,7 +3835,8 @@ var CodeCanvas = class {
           el("div", "cc-sep"),
           ...firstHunk ? [keep("Keep current", "current", firstHunk.currentLabel), keep("Keep incoming", "incoming", firstHunk.incomingLabel), keep("Keep both", "both"), el("div", "cc-sep")] : [],
           button("Edit", () => this.openEditor(b.id)),
-          button("Copy", () => this.copy(b.id))
+          button("Copy", () => this.copy(b.id)),
+          ...this.languageLabelParts()
         );
         return this.renderRefs();
       }
@@ -3409,8 +3867,15 @@ var CodeCanvas = class {
         button("+", () => this.zoomBy(1.25))
       );
     }
+    bar.append(...this.languageLabelParts());
     this.renderRefs();
   }
+  languageLabelParts() {
+    if (!this.view) return [];
+    const label = el("span", "cc-language");
+    label.textContent = this.view.language.label;
+    return [el("div", "cc-sep"), label];
+  }
   toggleRefs() {
     this.refsOpen = !this.refsOpen;
     this.renderBar();
@@ -3450,7 +3915,7 @@ var CodeCanvas = class {
       btn.style.setProperty("--k", `var(--k-${block?.kind ?? "statement"})`);
       const name = block && model ? displayName(model, block) : blockId;
       const label = isOtherFile ? `<span class="cc-file">${esc(fileName(path))} \u203A</span> ${esc(name)}` : esc(name);
-      setHTML(btn, `<i></i><span>${label}</span><span>${usage.kind}${usage.count > 1 ? " \xD7" + usage.count : ""}</span>`);
+      setHTML(btn, `<i></i><span>${label}</span><span>${usage.kind === "render" ? "renders" : usage.kind}${usage.count > 1 ? " \xD7" + usage.count : ""}</span>`);
       btn.onclick = () => isOtherFile ? this.opts.onOpenBlock?.(path, blockId) : this.reveal(blockId);
       btn.disabled = isOtherFile && !this.opts.onOpenBlock;
       return btn;