@codecanvas-ide/engine 0.2.0 → 0.4.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;
@@ -15,11 +111,12 @@ function parseStructure(path, text, prev) {
   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,29 +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 (!ts.isExpressionStatement(s) || !ts.isBinaryExpression(s.expression) || s.expression.operatorToken.kind !== ts.SyntaxKind.EqualsToken) return null;
+  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 = ts.isFunctionExpression(fn) || ts.isArrowFunction(fn);
-  if (!isFunction || !ts.isPropertyAccessExpression(left) || !ts.isIdentifier(left.name)) return null;
+  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") ? ts.ScriptKind.JSX : ts.ScriptKind.JS;
-  return path.endsWith("x") ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  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 = {
@@ -115,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);
@@ -123,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();
   /**
@@ -140,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 = [];
@@ -168,21 +270,23 @@ 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)) {
@@ -192,14 +296,14 @@ var Builder = class {
         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",
@@ -217,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(
@@ -247,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;
@@ -267,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,
@@ -286,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];
     }
@@ -298,11 +402,12 @@ 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,
@@ -313,7 +418,7 @@ var Builder = class {
         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
@@ -325,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 : "")),
@@ -345,26 +450,26 @@ 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))) {
+        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);
@@ -374,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))) {
+      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 && ts.isClassExpression(init)) {
+      } 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(
       {
@@ -410,7 +551,7 @@ 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], nameNode: p.name });
@@ -472,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;
@@ -500,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()];
@@ -510,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);
@@ -549,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 {
@@ -561,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) {
@@ -625,13 +771,13 @@ function makePreview(text, range, children, max) {
 }
 
 // src/project.ts
-import ts3 from "typescript";
+import ts5 from "typescript";
 
 // src/workspace.ts
-import ts2 from "typescript";
+import ts4 from "typescript";
 function parseConfig(config, projectPaths) {
   const configFileName = "/" + config.path;
-  const json = ts2.parseConfigFileTextToJson(configFileName, config.text);
+  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 = {
@@ -641,7 +787,7 @@ function parseConfig(config, projectPaths) {
     readFile: readConfig
   };
   const folder = config.path.slice(0, config.path.lastIndexOf("/") + 1);
-  const parsed = ts2.parseJsonConfigFileContent(json.config, host, "/" + folder, void 0, configFileName);
+  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) };
 }
@@ -743,7 +889,7 @@ var Project = class {
   /** 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 = ts3.createDocumentRegistry(true, "/");
+  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. */
@@ -777,11 +923,11 @@ var Project = class {
   compilerOptions(configOptions, packagePaths) {
     const paths = { ...packagePaths, ...configOptions.paths };
     return {
-      target: ts3.ScriptTarget.ES2022,
-      module: ts3.ModuleKind.ESNext,
-      moduleResolution: ts3.ModuleResolutionKind.Bundler,
+      target: ts5.ScriptTarget.ES2022,
+      module: ts5.ModuleKind.ESNext,
+      moduleResolution: ts5.ModuleResolutionKind.Bundler,
       strict: true,
-      jsx: ts3.JsxEmit.Preserve,
+      jsx: ts5.JsxEmit.Preserve,
       skipLibCheck: true,
       allowImportingTsExtensions: true,
       ...configOptions,
@@ -827,7 +973,7 @@ var Project = class {
   serviceOfConfig(configPath) {
     let service = this.services.get(configPath);
     if (!service) {
-      service = ts3.createLanguageService(this.createHost(configPath), this.documentRegistry);
+      service = ts5.createLanguageService(this.createHost(configPath), this.documentRegistry);
       this.services.set(configPath, service);
     }
     return service;
@@ -996,7 +1142,7 @@ var Project = class {
     const reExportedPaths = /* @__PURE__ */ new Set();
     const host = this.moduleResolutionHost();
     const resolve = (specifier) => {
-      const result = ts3.resolveModuleName(specifier, toFileName(path), this.optionsOfFile(path), host).resolvedModule;
+      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) {
@@ -1050,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 : ts3.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;
@@ -1064,7 +1210,7 @@ var Project = class {
         const containingPath = fromFileName(containingFile);
         const options = this.optionsOfFile(containingPath);
         const host = this.moduleResolutionHost();
-        return moduleLiterals.map((literal) => ts3.resolveModuleName(literal.text, containingFile, options, host));
+        return moduleLiterals.map((literal) => ts5.resolveModuleName(literal.text, containingFile, options, host));
       },
       getDefaultLibFileName: () => LIB_DIR + "lib.d.ts",
       fileExists: (name) => this.fileExists(name),
@@ -1100,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 ts3.createTextChangeRange(ts3.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;
@@ -1124,10 +1270,10 @@ function namesVisibleFrom(model, block) {
   return names;
 }
 function isValidIdentifier(name) {
-  const scanner = ts3.createScanner(ts3.ScriptTarget.Latest, true, ts3.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 === ts3.SyntaxKind.Identifier || token > ts3.SyntaxKind.LastReservedWord && token <= ts3.SyntaxKind.LastKeyword;
+  const isNameToken = token === ts5.SyntaxKind.Identifier || token > ts5.SyntaxKind.LastReservedWord && token <= ts5.SyntaxKind.LastKeyword;
   return isWholeText && isNameToken;
 }
 
@@ -1257,7 +1403,7 @@ function connectProjectWorker(port) {
 }
 
 // src/edits.ts
-import ts4 from "typescript";
+import ts6 from "typescript";
 function applyEdit(text, e) {
   return text.slice(0, e.start) + e.text + text.slice(e.end);
 }
@@ -1384,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 = ts4.createSourceFile("snippet.ts", src, ts4.ScriptTarget.Latest, true);
+  const sf = ts6.createSourceFile("snippet.ts", src, ts6.ScriptTarget.Latest, true);
   let target;
   const first = sf.statements[0];
-  if (inClass && first && ts4.isClassDeclaration(first)) target = first.members[0]?.name;
-  else if (first && (ts4.isFunctionDeclaration(first) || ts4.isClassDeclaration(first) || ts4.isInterfaceDeclaration(first) || ts4.isTypeAliasDeclaration(first) || ts4.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 && ts4.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);
@@ -1402,26 +1548,26 @@ function must(model, id) {
 }
 function clipFromText(code) {
   const text = code.replace(/\s+$/, "");
-  const sf = ts4.createSourceFile("clip.ts", text, ts4.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 (ts4.isFunctionDeclaration(first)) name = first.name?.text, kind = "function";
-    else if (ts4.isClassDeclaration(first)) name = first.name?.text, kind = "class";
-    else if (ts4.isVariableStatement(first)) name = first.declarationList.declarations[0]?.name.getText(), kind = "variable";
-    else if (ts4.isInterfaceDeclaration(first) || ts4.isTypeAliasDeclaration(first) || ts4.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 = ts4.createSourceFile("clip.ts", `class __cc__ {
+  const wrapped = ts6.createSourceFile("clip.ts", `class __cc__ {
 ${text}
-}`, ts4.ScriptTarget.Latest, true);
+}`, ts6.ScriptTarget.Latest, true);
   const cls = wrapped.statements[0];
   const wd = wrapped.parseDiagnostics ?? [];
-  if (cls && ts4.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: ts4.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 };
 }
@@ -1579,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 }
@@ -1669,7 +1815,7 @@ var PLACEMENT_RULES = [
 ];
 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;
@@ -1823,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);
@@ -1832,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 });
@@ -1875,13 +2024,13 @@ function contains(arrangement, unit) {
 
 // src/layout.ts
 var M = {
-  headerH: 32,
-  headerCharW: 7.9,
-  // 13px monospace
-  previewLineH: 15,
-  previewCharW: 6.7,
-  // 11px monospace
-  previewPad: 10,
+  headerH: 34,
+  headerCharW: 7.6,
+  // 12.5px monospace
+  previewLineH: 19,
+  previewCharW: 6.95,
+  // 11.5px monospace
+  previewPad: 16,
   pad: 14,
   // inner padding of containers
   gap: 28,
@@ -2149,98 +2298,222 @@ function setHTML(element, html) {
   const htmlPolicy = trustedHtmlPolicy();
   element.innerHTML = htmlPolicy ? htmlPolicy.createHTML(html) : html;
 }
+function esc(s) {
+  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+
+// src/highlight.ts
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "from",
+  "export",
+  "default",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "async",
+  "await",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "new",
+  "class",
+  "extends",
+  "implements",
+  "interface",
+  "type",
+  "enum",
+  "namespace",
+  "this",
+  "super",
+  "throw",
+  "try",
+  "catch",
+  "finally",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "yield",
+  "void",
+  "delete",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "static",
+  "public",
+  "private",
+  "protected",
+  "readonly",
+  "as",
+  "satisfies",
+  "get",
+  "set"
+]);
+var TOKEN = /(\/\*.*?\*\/|\/\/.*$|'(?:\\.|[^'\\])*'?|"(?:\\.|[^"\\])*"?|`(?:\\.|[^`\\])*`?|[A-Za-z_$][\w$]*|\d[\w.]*|\s+|.)/g;
+function highlightLine(line) {
+  let html = "";
+  for (const [token] of line.matchAll(TOKEN)) {
+    const syntaxClass = classOf(token);
+    html += syntaxClass ? `<span class="${syntaxClass}">${esc(token)}</span>` : esc(token);
+  }
+  return html;
+}
+function classOf(token) {
+  if (token.startsWith("//") || token.startsWith("/*")) return "s-com";
+  if (/^['"`]/.test(token)) return "s-str";
+  if (/^\d/.test(token)) return "s-con";
+  if (KEYWORDS.has(token)) return "s-kw";
+  if (/^[A-Z][A-Z0-9_]{2,}$/.test(token)) return "s-con";
+  if (/^[A-Z][a-z]\w*$/.test(token)) return "s-type";
+  return void 0;
+}
 
 // src/styles.ts
 var CSS = (
   /* css */
   `
 .cc-root {
-  --cc-bg: #15171c;
-  --cc-dot: rgba(255,255,255,.07);
-  --cc-frame-bg: rgba(255,255,255,.025);
-  --cc-frame-border: rgba(255,255,255,.10);
-  --cc-text: #e8eaee;
-  --cc-muted: #9aa1ad;
-  --cc-faint: #c4cad4;
-  --cc-panel: #1f2229;
-  --cc-panel-border: rgba(255,255,255,.12);
-  --cc-accent: #7aa2ff;
-  --cc-danger: #ff6b6b;
-  --cc-shadow: 0 10px 30px rgba(0,0,0,.45);
+  --cc-bg: #0c0d0f;
+  --cc-dot: #25272c;
+  --cc-frame-bg: rgba(255,255,255,.015);
+  --cc-frame-border: #2e3036;
+  --cc-node-bg: #16171a;
+  --cc-node-border: #2b2d33;
+  --cc-node-head-border: #24262b;
+  --cc-text: #e6e7ea;
+  --cc-strong: #f2f2f3;
+  --cc-muted: #a9adb6;
+  --cc-faint: #8b8f98;
+  --cc-faintest: #6e727b;
+  --cc-code: #c9ccd2;
+  --cc-panel: #16171a;
+  --cc-surface2: #1c1d21;
+  --cc-raised: #2a2c31;
+  --cc-panel-border: #26282d;
+  --cc-accent: #e8c27a;
+  --cc-ink: #e8c27a;
+  --cc-on-accent: #1a1408;
+  --cc-danger: #f2877d;
+  --cc-shadow: 0 10px 30px rgba(0,0,0,.35);
+  --cc-shadow-sm: 0 1px 0 rgba(0,0,0,.2);
+  --cc-shadow-lg: 0 24px 60px rgba(0,0,0,.55);
+  --cc-syn-kw: #c3a6f0;
+  --cc-syn-str: #9fd3ec;
+  --cc-syn-type: #b8c4ff;
+  --cc-syn-com: #7d828c;
+  --cc-syn-con: #7cc4e8;
+  --cc-ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
 
-  --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-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);
-  --k-statement: #7c8799; --k-statement-head: #39414f; --k-statement-bg: rgba(124,135,153,.08);
+  --k-import: #b4b9c2;
+  --k-variable: #7cc4e8;
+  --k-function: #e8c27a;
+  --k-class: #8fd0a5;
+  --k-type: #b8b0f0;
+  --k-component: #5fd1b5;
+  --k-state: #f0a36a;
+  --k-namespace: #9aa6bd;
+  --k-statement: #8b8f98;
 
   position: relative; overflow: hidden; width: 100%; height: 100%;
   background-color: var(--cc-bg);
-  background-image: radial-gradient(var(--cc-dot) 1.2px, transparent 1.3px);
+  background-image: radial-gradient(circle, var(--cc-dot) 1px, transparent 1.4px);
   color: var(--cc-text);
-  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font: 13px/1.3 var(--cc-ui-font);
   touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
   -webkit-tap-highlight-color: transparent;
 }
 .cc-root[data-theme="light"] {
-  --cc-bg: #f6f7f9; --cc-dot: rgba(0,0,0,.09);
-  --cc-frame-bg: rgba(255,255,255,.7); --cc-frame-border: rgba(0,0,0,.12);
-  --cc-text: #1d2129; --cc-muted: #5d6573; --cc-faint: #39404c;
-  --cc-panel: #ffffff; --cc-panel-border: rgba(0,0,0,.12); --cc-accent: #3366e6;
-  --cc-shadow: 0 10px 30px rgba(20,30,50,.18);
-  --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-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);
-  --k-statement: #64708a; --k-statement-head: #64708a; --k-statement-bg: rgba(100,112,138,.07);
+  --cc-bg: #f3f3f1; --cc-dot: #d4d4cf;
+  --cc-frame-bg: rgba(255,255,255,.5); --cc-frame-border: #cfcfc9;
+  --cc-node-bg: #ffffff; --cc-node-border: #dadad4; --cc-node-head-border: #edede9;
+  --cc-text: #1f2023; --cc-strong: #0f1012; --cc-muted: #4a4d55; --cc-faint: #5f626a; --cc-faintest: #8a8d94; --cc-code: #2e3036;
+  --cc-panel: #ffffff; --cc-surface2: #f5f5f3; --cc-raised: #ececE8; --cc-panel-border: #e1e1dc;
+  --cc-ink: #8a5d0e; --cc-danger: #b4362b;
+  --cc-shadow: 0 8px 24px rgba(20,20,10,.08); --cc-shadow-sm: 0 1px 2px rgba(20,20,10,.06); --cc-shadow-lg: 0 24px 60px rgba(20,20,10,.18);
+  --cc-syn-kw: #7a3fc0; --cc-syn-str: #1d6a92; --cc-syn-type: #3b4fb0; --cc-syn-com: #6f737b; --cc-syn-con: #1d6a92;
+  --k-import: #555a63; --k-variable: #1d6a92; --k-function: #8a5d0e; --k-class: #2f7a4a; --k-type: #5a4bb0;
+  --k-component: #11756a; --k-state: #a8521a; --k-namespace: #4f5b73; --k-statement: #5f626a;
 }
 .cc-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
 .cc-root.cc-moving .cc-world { will-change: transform; }
-.cc-frame { position: absolute; border: 1px solid var(--cc-frame-border); background: var(--cc-frame-bg); border-radius: 18px; }
-.cc-frame-title { position: absolute; left: 20px; top: 12px; font: 600 15px/20px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); color: var(--cc-muted); white-space: nowrap; }
+.cc-root.cc-tool-pan, .cc-root.cc-tool-pan .cc-block { cursor: grab; }
+.cc-mono { font-family: var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
+.cc-frame { position: absolute; border: 1px dashed var(--cc-frame-border); background: var(--cc-frame-bg); border-radius: 18px; }
+.cc-frame-title {
+  position: absolute; left: 20px; top: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
+  font: 12px/18px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+.cc-frame-folder { color: var(--cc-faint); }
+.cc-frame-file { color: var(--cc-text); font-weight: 500; }
+.cc-frame-count { padding: 2px 6px; border-radius: 5px; background: var(--cc-surface2); color: var(--cc-faint); font-size: 10.5px; line-height: 14px; }
+.cc-frame-count:empty { display: none; }
 .cc-empty { position: absolute; font-size: 15px; color: var(--cc-muted); white-space: nowrap; }
 
 .cc-block {
-  position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 10px;
-  border: 1.5px solid var(--k); background: var(--kbg); overflow: hidden; contain: layout style;
-  cursor: default;
-}
-.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-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); }
-.cc-block.k-statement { --k: var(--k-statement); --kh: var(--k-statement-head); --kbg: var(--k-statement-bg); }
-.cc-block.k-import, .cc-root:not([data-theme="light"]) .cc-block.k-import { border-color: #555a63; }
+  --kglyph: color-mix(in srgb, var(--k) 16%, transparent);
+  position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 12px;
+  border: 1px solid var(--cc-node-border); background: var(--cc-node-bg); overflow: hidden; contain: layout style;
+  box-shadow: var(--cc-shadow-sm); cursor: default; transition: opacity 160ms ease, box-shadow 160ms ease;
+}
+.cc-root[data-theme="light"] .cc-block { --kglyph: color-mix(in srgb, var(--k) 10%, transparent); }
+.cc-block.k-import { --k: var(--k-import); }
+.cc-block.k-class { --k: var(--k-class); }
+.cc-block.k-function { --k: var(--k-function); }
+.cc-block.k-component { --k: var(--k-component); }
+.cc-block.k-state { --k: var(--k-state); }
+.cc-block.k-variable { --k: var(--k-variable); }
+.cc-block.k-type { --k: var(--k-type); }
+.cc-block.k-namespace { --k: var(--k-namespace); }
+.cc-block.k-statement { --k: var(--k-statement); }
 
 .cc-head {
-  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; box-sizing: border-box;
-  background: var(--kh); color: #fff; white-space: nowrap; overflow: hidden;
-  font: 13px/32px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-}
-.cc-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; flex: none; }
-.cc-name { font-weight: 700; flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
-.cc-detail { opacity: .8; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
-.cc-tags { font-size: 10px; opacity: .7; flex: none; }
-.cc-exp { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .8; flex: none; }
+  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; box-sizing: border-box;
+  border-bottom: 1px solid var(--cc-node-head-border); color: var(--cc-strong); white-space: nowrap; overflow: hidden;
+  font: 12.5px/34px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+.cc-glyph {
+  flex: none; width: 18px; min-width: 18px; height: 18px; padding: 0 2px; box-sizing: border-box; border-radius: 5px;
+  background: var(--kglyph); color: var(--k); display: flex; align-items: center; justify-content: center;
+  font: 600 10.5px/18px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); letter-spacing: -.04em;
+}
+.k-component > .cc-head .cc-glyph, .k-namespace > .cc-head .cc-glyph { width: auto; }
+.cc-name { font-weight: 600; flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
+.cc-detail { font-size: 11.5px; color: var(--cc-faint); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
+.cc-tag {
+  flex: none; padding: 0 7px; border-radius: 6px; background: var(--kglyph); color: var(--k);
+  font: 500 10.5px/18px var(--cc-ui-font);
+}
+.cc-exp { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-faint); flex: none; }
 .cc-fold {
   flex: none; margin-left: auto; width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0;
-  background: rgba(255,255,255,.14); color: #fff; font-size: 12px; line-height: 22px; cursor: pointer;
+  background: transparent; color: var(--cc-faint); font-size: 12px; line-height: 22px; cursor: pointer;
 }
-.cc-fold:hover { background: rgba(255,255,255,.28); }
+.cc-fold:hover { background: var(--cc-raised); color: var(--cc-strong); }
 .cc-prev {
-  margin: 0; padding: 5px 12px 0; white-space: pre; overflow: hidden; color: var(--cc-faint); opacity: .5;
-  font: 11px/15px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-}
-.cc-more { opacity: .7; font-style: italic; }
-.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); }
+  margin: 0; padding: 7px 12px 9px; white-space: pre; overflow: hidden; color: var(--cc-code);
+  font: 11.5px/19px var(--cc-font, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+.cc-prev .s-kw { color: var(--cc-syn-kw); }
+.cc-prev .s-str { color: var(--cc-syn-str); }
+.cc-prev .s-type { color: var(--cc-syn-type); }
+.cc-prev .s-com { color: var(--cc-syn-com); }
+.cc-prev .s-con { color: var(--cc-syn-con); }
+.k-import > .cc-prev { color: var(--cc-muted); }
+.cc-more { color: var(--cc-faintest); font-style: italic; }
+.cc-mini { position: relative; margin: 6px 12px 0; height: 34px; opacity: .55; }
+.cc-mini > i { position: absolute; border-radius: 2px; border: 1px solid var(--cc-faint); background: transparent; }
 .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 {
@@ -2248,9 +2521,10 @@ var CSS = (
   background: var(--cc-danger); color: #fff; font: 700 11px/18px ui-sans-serif, system-ui, sans-serif; text-align: center;
 }
 .cc-block.cc-has-error { border-color: var(--cc-danger); }
+.cc-err { color: #1a0d0b; }
 .cc-root.lod-2 .cc-err { min-width: 34px; height: 34px; border-radius: 17px; font-size: 22px; line-height: 34px; }
 .cc-rename {
-  font: inherit; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); border: 1px solid var(--cc-accent);
+  font: inherit; font-weight: 600; color: var(--cc-strong); background: var(--cc-raised); border: 1px solid var(--cc-ink);
   border-radius: 4px; padding: 0 4px; height: 22px; outline: none; user-select: text; -webkit-user-select: text; max-width: 100%;
 }
 .cc-rename.invalid { border-color: var(--cc-danger); }
@@ -2263,10 +2537,7 @@ var CSS = (
   font: 900 13px/18px ui-sans-serif, system-ui, sans-serif; text-align: center;
 }
 .cc-root.lod-2 .cc-conflict-chip { min-width: 34px; height: 34px; border-radius: 17px; font-size: 24px; line-height: 34px; }
-.cc-block.cc-conflict-incoming {
-  --k: #f0883e; --kh: #8a4a17; --kbg: rgba(240, 136, 62, .08);
-  border-style: dashed; pointer-events: none; opacity: .9;
-}
+.cc-block.cc-conflict-incoming { --k: #f0883e; border: 1px dashed #f0883e; pointer-events: none; opacity: .9; }
 .cc-diff-chip.incoming { background: #f0883e; }
 .cc-banner.cc-banner-conflicts { border-color: #f0883e; }
 
@@ -2281,10 +2552,9 @@ var CSS = (
 .cc-diff-chip.removed { background: var(--cc-danger); }
 .cc-root.lod-2 .cc-diff-chip { min-width: 34px; height: 34px; border-radius: 8px; font-size: 24px; line-height: 34px; }
 .cc-block.cc-diff-removed {
-  --k: var(--cc-danger); --kh: #9c2f2f; --kbg: rgba(255, 107, 107, .10);
-  border-style: dashed; pointer-events: none; opacity: .9;
+  --k: var(--cc-danger); border: 1px dashed var(--cc-danger); background: color-mix(in srgb, var(--cc-danger) 8%, var(--cc-node-bg));
+  pointer-events: none; opacity: .9;
 }
-.cc-root[data-theme="light"] .cc-block.cc-diff-removed { --kh: #d64545; --kbg: rgba(214, 69, 69, .08); }
 .cc-prev.cc-diff-prev { opacity: .95; }
 .cc-diff-prev > span { display: block; margin: 0 -12px; padding: 0 12px; }
 .cc-diff-prev .cc-line-same { opacity: .5; }
@@ -2292,23 +2562,24 @@ var CSS = (
 .cc-diff-prev .cc-line-removed { background: rgba(248, 81, 73, .26); text-decoration: line-through; text-decoration-color: rgba(248, 81, 73, .7); }
 .cc-diff-summary { padding: 0 8px; font-size: 12px; color: var(--cc-muted); white-space: nowrap; }
 
-.cc-block.cc-sel { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--k); }
-.cc-block.cc-editing { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-accent); }
-.cc-block.cc-dragging { box-shadow: var(--cc-shadow); opacity: .92; z-index: 9999 !important; }
-.cc-root.has-hl .cc-block.cc-linked { box-shadow: 0 0 0 2px var(--k); }
+.cc-block.cc-sel { box-shadow: 0 0 0 2px var(--cc-ink), var(--cc-shadow-lg); }
+.cc-block.cc-editing { box-shadow: 0 0 0 2px var(--cc-ink), var(--cc-shadow-lg); }
+.cc-block.cc-dragging { box-shadow: var(--cc-shadow-lg); opacity: .92; z-index: 9999 !important; }
+.cc-root.has-sel .cc-block:not(.cc-related) { opacity: .38; }
 
 .cc-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
-.cc-edge { fill: none; stroke-width: 1.5; opacity: .22; }
-.cc-edge.u-type { stroke-dasharray: 4 4; }
-.cc-root.has-hl .cc-edge { opacity: .07; }
-.cc-root.has-hl .cc-edge.hl { opacity: .95; stroke-width: 2.5; }
+.cc-edge { fill: none; stroke: var(--edge); stroke-width: 1.5; opacity: .5; }
+.cc-edge.to-import, .cc-edge.u-type { stroke-dasharray: 3 4; }
+.cc-root.has-hl .cc-edge { opacity: .18; }
+.cc-root.has-hl .cc-edge.hl { stroke: var(--cc-ink); opacity: .95; stroke-width: 2; }
 
 /* level of detail when zoomed out */
-.cc-root.lod-1 .cc-tags { visibility: hidden; }
+.cc-root.lod-1 .cc-tag { visibility: hidden; }
 .cc-root.lod-2 .cc-prev, .cc-root.lod-2 .cc-detail, .cc-root.lod-2 .cc-mini { visibility: hidden; }
 .cc-root.lod-2 .cc-head { font-size: 26px; }
-.cc-root.lod-2 .cc-kind, .cc-root.lod-2 .cc-fold { display: none; }
+.cc-root.lod-2 .cc-glyph, .cc-root.lod-2 .cc-fold, .cc-root.lod-2 .cc-tag { display: none; }
 .cc-root.lod-2 .cc-frame-title { font-size: 40px; line-height: 44px; top: -8px; }
+.cc-root.lod-2 .cc-frame-count { font-size: 28px; line-height: 36px; padding: 2px 12px; border-radius: 10px; }
 
 /* overlays (screen space) */
 .cc-banner {
@@ -2316,37 +2587,66 @@ var CSS = (
   padding: 8px 12px; border-radius: 10px; background: var(--cc-panel); border: 1px solid var(--cc-danger); box-shadow: var(--cc-shadow);
   font-size: 13px; max-width: calc(100% - 32px);
 }
-.cc-banner[hidden], .cc-bar[hidden], .cc-refs[hidden] { display: none; }
+.cc-banner[hidden], .cc-bar[hidden], .cc-refs[hidden], .cc-selbar[hidden], .cc-menu[hidden] { display: none; }
 .cc-toast {
   position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 30; padding: 8px 14px; border-radius: 10px;
   background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow); font-size: 13px;
   transition: opacity .2s; pointer-events: none; max-width: calc(100% - 32px);
 }
 .cc-bar {
-  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 4px;
-  padding: 5px; border-radius: 12px; background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow);
+  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 2px;
+  padding: 4px; border-radius: 12px; background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow);
   width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; flex-wrap: wrap; justify-content: center;
 }
-.cc-bar .cc-chip { padding: 0 10px 0 6px; font: 600 12px/30px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace); white-space: nowrap; display: flex; align-items: center; gap: 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
-.cc-bar .cc-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); flex: none; }
 .cc-btn {
-  border: 0; background: transparent; color: var(--cc-text); font: 500 13px/30px inherit; font-family: inherit; padding: 0 10px; border-radius: 8px;
-  cursor: pointer; white-space: nowrap; min-height: 32px;
-}
-.cc-btn:hover { background: rgba(127,127,127,.16); }
+  display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--cc-muted);
+  font: 400 13px/32px var(--cc-ui-font); padding: 0 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; height: 32px; box-sizing: border-box;
+}
+.cc-btn:hover { background: var(--cc-raised); color: var(--cc-strong); }
+.cc-btn:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: -2px; }
+.cc-btn.strong { color: var(--cc-strong); font-weight: 500; }
+.cc-btn.square { padding: 0; min-width: 30px; }
+.cc-btn.on { background: var(--cc-raised); color: var(--cc-strong); }
 .cc-btn.danger { color: var(--cc-danger); }
-.cc-btn.primary { background: var(--cc-accent); color: #fff; }
-.cc-sep { width: 1px; height: 20px; background: var(--cc-panel-border); margin: 0 2px; flex: none; }
+.cc-btn.primary { background: var(--cc-accent); color: var(--cc-on-accent); font-weight: 600; }
+.cc-btn.primary:hover { filter: brightness(1.06); }
+.cc-zoom { min-width: 44px; text-align: center; font: 12px/32px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace); color: var(--cc-muted); }
+.cc-language { padding: 0 8px; font: 500 11px/32px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace); color: var(--cc-faint); white-space: nowrap; }
+.cc-sep { width: 1px; height: 20px; background: var(--cc-panel-border); margin: 0 4px; flex: none; }
+.cc-selbar {
+  position: absolute; z-index: 19; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; white-space: nowrap;
+  background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow);
+}
+.cc-selbar .cc-btn { height: 26px; line-height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; color: var(--cc-strong); }
+.cc-selbar .cc-btn.square { padding: 0; min-width: 26px; color: var(--cc-faint); }
+.cc-selbar .cc-btn.meta { color: var(--cc-faint); font-size: 11.5px; padding: 0 8px; }
+.cc-selbar .cc-btn.danger { color: var(--cc-danger); }
+.cc-selbar .cc-btn.primary { color: var(--cc-on-accent); }
+.cc-selbar .cc-sep { height: 16px; margin: 0 2px; }
+.cc-menu {
+  position: absolute; z-index: 40; display: flex; flex-direction: column; min-width: 168px; padding: 4px; border-radius: 10px;
+  background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow-lg);
+}
+.cc-menu .cc-btn { justify-content: flex-start; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; color: var(--cc-text); }
+.cc-menu .cc-btn.danger { color: var(--cc-danger); }
+.cc-minimap {
+  position: absolute; right: var(--cc-minimap-right, 12px); bottom: var(--cc-minimap-bottom, 12px); z-index: 18; width: 148px; height: 92px;
+  box-sizing: border-box; border-radius: 10px; overflow: hidden; background: var(--cc-panel); border: 1px solid var(--cc-panel-border); cursor: pointer;
+}
+.cc-minimap-blocks { position: absolute; left: 10px; top: 13px; width: 128px; height: 66px; }
+.cc-minimap-blocks > i { position: absolute; border-radius: 2px; background: var(--k); opacity: .55; }
+.cc-minimap-view { position: absolute; left: 10px; top: 13px; box-sizing: border-box; border: 1.5px solid var(--cc-ink); border-radius: 6px; margin: 13px 0 0 10px; pointer-events: none; }
+@media (max-width: 640px) { .cc-minimap { display: none; } }
 .cc-refs {
   position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 21; width: min(360px, calc(100% - 24px)); max-height: 45%;
   overflow: auto; border-radius: 12px; background: var(--cc-panel); border: 1px solid var(--cc-panel-border); box-shadow: var(--cc-shadow); padding: 6px;
 }
-.cc-refs h4 { margin: 8px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-muted); }
+.cc-refs h4 { margin: 8px 8px 4px; font: 600 11px/16px var(--cc-ui-font); text-transform: uppercase; letter-spacing: .06em; color: var(--cc-faint); }
 .cc-refs button {
   display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--cc-text); text-align: left;
   padding: 6px 8px; border-radius: 8px; cursor: pointer; font: 12px/18px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace);
 }
-.cc-refs button:hover { background: rgba(127,127,127,.16); }
+.cc-refs button:hover { background: var(--cc-raised); }
 .cc-refs button i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); flex: none; }
 .cc-refs button span:last-child { margin-left: auto; color: var(--cc-muted); }
 .cc-refs button:disabled { cursor: default; opacity: .7; }
@@ -2385,11 +2685,24 @@ var KIND_LABEL = {
   import: "import",
   class: "class",
   function: "fn",
+  component: "component",
+  state: "state",
   variable: "var",
   type: "type",
   namespace: "ns",
   statement: "code"
 };
+var KIND_GLYPH = {
+  import: "\u2193",
+  class: "C",
+  function: "\u0192",
+  component: "\u27E8\u27E9",
+  state: "\u25C6",
+  variable: "=",
+  type: "T",
+  namespace: "{}",
+  statement: "\u25B8"
+};
 var DIFF_CHIPS = {
   added: '<span class="cc-diff-chip added" title="Added">+</span>',
   changed: '<span class="cc-diff-chip changed" title="Changed">~</span>',
@@ -2398,6 +2711,9 @@ var DIFF_CHIPS = {
   containsChanges: "",
   unchanged: ""
 };
+var MINIMAP = { width: 128, height: 66 };
+var ICON_SELECT = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M2.5 1.5l9 4.5-4 1.2-1.4 4.3z"/></svg>';
+var ICON_PAN = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M7 1.5v11M1.5 7h11M7 1.5l-2 2M7 1.5l2 2M7 12.5l-2-2M7 12.5l2-2M1.5 7l2-2M1.5 7l2 2M12.5 7l-2-2M12.5 7l-2 2"/></svg>';
 var LABEL_TAGS = /* @__PURE__ */ new Set(["const", "let", "var", "interface", "type", "enum", "namespace", "get", "set"]);
 var MIN_SCALE = 0.04;
 var MAX_SCALE = 4;
@@ -2414,18 +2730,28 @@ 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(
-      (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>`);
+    const dotMarker = (id, color) => `<marker id="${id}" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="6" markerHeight="6" markerUnits="userSpaceOnUse"><circle cx="4" cy="4" r="3" fill="${color}"/></marker>`;
+    setHTML(this.svg, `<defs>${Object.keys(KIND_GLYPH).map((k) => dotMarker(`cc-dot-${k}`, `var(--k-${k})`)).join("")}${dotMarker("cc-dot-hl", "var(--cc-ink)")}</defs>`);
     this.world.append(this.frameEl, this.blocksEl, this.svg);
     this.banner = el("div", "cc-banner");
     this.banner.hidden = true;
     this.toastEl = el("div", "cc-toast");
     this.toastEl.style.opacity = "0";
-    this.bar = el("div", "cc-bar");
+    this.bar = el("div", "cc-bar cc-dock");
+    this.selectionBar = el("div", "cc-selbar");
+    this.selectionBar.hidden = true;
+    this.menuEl = el("div", "cc-menu");
+    this.menuEl.setAttribute("role", "menu");
+    this.menuEl.hidden = true;
+    this.zoomLabel = el("span", "cc-zoom");
     this.refsEl = el("div", "cc-refs");
     this.refsEl.hidden = true;
-    root.append(this.world, this.banner, this.refsEl, this.bar, this.toastEl);
+    root.append(this.world, this.banner, this.refsEl, this.bar, this.selectionBar, this.menuEl, this.toastEl);
+    if (opts.minimap ?? true) {
+      this.minimapEl = el("div", "cc-minimap");
+      this.minimapEl.setAttribute("aria-hidden", "true");
+      root.append(this.minimapEl);
+    }
     container.appendChild(root);
     this.bindEvents();
     this.ro = new ResizeObserver(() => this.fittedToView ? this.fit(false) : this.queueCamera());
@@ -2444,7 +2770,14 @@ var CodeCanvas = class {
   frameEl;
   blocksEl;
   svg;
+  /** The dock at the bottom. */
   bar;
+  selectionBar;
+  menuEl;
+  minimapEl = null;
+  minimapScale = 1;
+  zoomLabel;
+  tool = "select";
   refsEl;
   banner;
   toastEl;
@@ -2806,7 +3139,9 @@ var CodeCanvas = class {
     if (!g || !view) return;
     const f = g.frame;
     Object.assign(this.frameEl.style, { transform: `translate(${f.x}px,${f.y}px)`, width: f.w + "px", height: f.h + "px" });
-    setHTML(this.frameEl, `<div class="cc-frame-title">${esc(this.path)}</div>${view.roots.length ? "" : `<div class="cc-empty" style="left:${M.filePad}px;top:${M.filePad + M.fileHeader}px">Empty file. Double-click (or double-tap) to create a function.</div>`}`);
+    const folder = this.path.includes("/") ? this.path.slice(0, this.path.lastIndexOf("/")) + " /" : "";
+    const fileName2 = this.path.slice(this.path.lastIndexOf("/") + 1);
+    setHTML(this.frameEl, `<div class="cc-frame-title">${folder ? `<span class="cc-frame-folder">${esc(folder)}</span>` : ""}<span class="cc-frame-file">${esc(fileName2)}</span><span class="cc-frame-count"></span></div>${view.roots.length ? "" : `<div class="cc-empty" style="left:${M.filePad}px;top:${M.filePad + M.fileHeader}px">Empty file. Double-click (or double-tap) to create a function.</div>`}`);
     const seen = /* @__PURE__ */ new Set();
     const diff = this.currentDiff();
     for (const geo of g.order) {
@@ -2857,6 +3192,7 @@ var CodeCanvas = class {
     this.renderEdges();
     this.updateHighlight();
     this.updateErrorMarkers();
+    this.renderMinimap();
   }
   /** Blocks only the incoming side of a conflict has, drawn dashed where they would go. */
   renderIncomingBlocks() {
@@ -2937,16 +3273,18 @@ var CodeCanvas = class {
   }
   blockHTML(b, geo, mini, change, changedLines = "", isConflicted = false) {
     const label = blockLabel(b);
-    const tags = b.tags.filter((t) => t !== label && t !== "export" && (b.kind === "import" || !LABEL_TAGS.has(t))).join(" ");
+    const chips = b.tags.filter((t) => t !== label && t !== "export" && (b.kind === "import" || !LABEL_TAGS.has(t)));
     const exp = b.tags.includes("export") ? '<span class="cc-exp" title="exported"></span>' : "";
     const isRemoved = change === "removed" || change === "incoming";
     const fold = b.children.length && !isRemoved ? `<button class="cc-fold" title="${geo.collapsed ? "Expand" : "Collapse"}">${geo.collapsed ? "\u25B8" : "\u25BE"}</button>` : "";
-    const prev = changedLines ? `<pre class="cc-prev cc-diff-prev">${changedLines}</pre>` : b.preview.length ? `<pre class="cc-prev">${esc(b.preview.join("\n"))}${b.previewMore ? `
-<span class="cc-more">\u2026 ${b.previewMore} more line${b.previewMore > 1 ? "s" : ""}</span>` : ""}</pre>` : "";
+    const more = b.previewMore ? `
+<span class="cc-more">\u2026 ${b.previewMore} more line${b.previewMore > 1 ? "s" : ""}</span>` : "";
+    const prev = changedLines ? `<pre class="cc-prev cc-diff-prev">${changedLines}</pre>` : b.preview.length ? `<pre class="cc-prev">${b.preview.map(highlightLine).join("\n")}${more}</pre>` : "";
     const diffChip = (change ? DIFF_CHIPS[change] : "") + (isConflicted ? '<span class="cc-conflict-chip" title="Merge conflict">!</span>' : "");
-    return `<div class="cc-head"><span class="cc-kind">${esc(label)}</span>${exp}<span class="cc-name">${esc(b.name)}</span>${diffChip}<span class="cc-detail">${esc(
+    const chipsHTML = chips.map((chip) => `<span class="cc-tag">${esc(chip)}</span>`).join("");
+    return `<div class="cc-head"><span class="cc-glyph" title="${esc(label)}">${KIND_GLYPH[b.kind]}</span><span class="cc-name">${esc(b.name)}</span>${exp}${diffChip}<span class="cc-detail">${esc(
       b.detail
-    )}</span>${tags ? `<span class="cc-tags">${esc(tags)}</span>` : ""}${fold}</div>${prev}${mini ? `<div class="cc-mini">${mini}</div>` : ""}`;
+    )}</span>${chipsHTML}${fold}</div>${prev}${mini ? `<div class="cc-mini">${mini}</div>` : ""}`;
   }
   /** Faint miniature of a collapsed block's nested blocks. */
   miniMap(geo) {
@@ -2991,34 +3329,41 @@ var CodeCanvas = class {
         this.svg.appendChild(p);
         e = { key, from: w.from.id, to: w.to.id, el: p };
       }
-      e.el.setAttribute("class", `cc-edge u-${w.usage}`);
-      e.el.setAttribute("stroke", `var(--k-${w.kind})`);
-      e.el.setAttribute("marker-end", `url(#cc-arrow-${w.kind})`);
+      e.el.setAttribute("class", `cc-edge u-${w.usage}${w.kind === "import" ? " to-import" : ""}`);
+      e.el.style.setProperty("--edge", `var(--k-${w.kind})`);
+      e.el.dataset.kind = w.kind;
       e.el.setAttribute("d", edgePath(w.from, w.to));
       next.push(e);
     }
     for (const e of old.values()) e.el.remove();
     this.edges = next;
+    const counter = this.frameEl.querySelector(".cc-frame-count");
+    if (counter) counter.textContent = `${plural(view.blocks.size, "node")} \xB7 ${plural(next.length, "link")}`;
   }
   updateHighlight() {
     const h = this.selected ?? this.hovered;
     const inH = (id) => !!h && (id === h || id.startsWith(h + "/"));
+    const isAroundSelection = (id) => !!this.selected && (inH(id) || this.selected.startsWith(id + "/"));
     const linked = /* @__PURE__ */ new Set();
     for (const e of this.edges) {
       const on = inH(e.from) || inH(e.to);
       e.el.classList.toggle("hl", on);
+      e.el.setAttribute("marker-end", on ? "url(#cc-dot-hl)" : `url(#cc-dot-${e.el.dataset.kind})`);
       if (on) {
         linked.add(e.from);
         linked.add(e.to);
       }
     }
     this.root.classList.toggle("has-hl", !!h);
+    this.root.classList.toggle("has-sel", !!this.selected);
     for (const [id, { el: e }] of this.els) {
       e.classList.toggle("cc-sel", id === this.selected);
       e.classList.toggle("cc-linked", linked.has(id) && !inH(id));
+      e.classList.toggle("cc-related", isAroundSelection(id) || linked.has(id));
       e.classList.toggle("cc-editing", !!this.editing && id === this.editing.id);
     }
     if (this.refsOpen) this.renderRefs();
+    this.placeSelectionBar();
   }
   // ---------------------------------------------------------------- camera
   queueCamera() {
@@ -3032,7 +3377,7 @@ var CodeCanvas = class {
   applyCamera() {
     const { x, y, s } = this.cam;
     this.world.style.transform = `translate(${x}px,${y}px) scale(${s})`;
-    const grid = 24 * s;
+    const grid = 22 * s;
     this.root.style.backgroundSize = s < 0.25 ? "0 0" : `${grid}px ${grid}px`;
     this.root.style.backgroundPosition = `${x}px ${y}px`;
     const lod = s < 0.3 ? 2 : s < 0.55 ? 1 : 0;
@@ -3044,6 +3389,9 @@ var CodeCanvas = class {
     this.root.classList.add("cc-moving");
     clearTimeout(this.movingTimer);
     this.movingTimer = window.setTimeout(() => this.root.classList.remove("cc-moving"), 160);
+    this.zoomLabel.textContent = Math.round(s * 100) + "%";
+    this.placeSelectionBar();
+    this.placeMinimapView();
     this.opts.onCameraChange?.(s);
   }
   setCamera(c) {
@@ -3117,6 +3465,19 @@ var CodeCanvas = class {
     on(r, "pointercancel", (e) => this.onUp(e, true));
     on(r, "wheel", (e) => this.onWheel(e), { passive: false });
     on(r, "keydown", (e) => this.onKey(e));
+    on(r, "contextmenu", (e) => {
+      const id = e.target.closest?.(".cc-block")?.getAttribute("data-id");
+      if (!id || this.isOverlay(e.target) || this.stale) return;
+      e.preventDefault();
+      this.openBlockMenu(id, this.local(e));
+    });
+    on(this.menuEl, "keydown", (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        this.closeMenu();
+        this.root.focus({ preventScroll: true });
+      }
+    });
     on(r, "pointerover", (e) => {
       if (e.pointerType !== "mouse" || this.gesture) return;
       const id = e.target.closest?.(".cc-block")?.getAttribute("data-id") ?? null;
@@ -3138,9 +3499,11 @@ var CodeCanvas = class {
     on(doc, "paste", (e) => this.onClipboard(e, "paste"));
   }
   isOverlay(t) {
-    return !!t?.closest?.(".cc-editor, .cc-bar, .cc-refs, .cc-banner, .cc-rename");
+    return !!t?.closest?.(".cc-editor, .cc-bar, .cc-selbar, .cc-menu, .cc-minimap, .cc-refs, .cc-banner, .cc-rename");
   }
   onDown(e) {
+    if (!e.target?.closest?.(".cc-menu")) this.closeMenu();
+    if (e.target?.closest?.(".cc-minimap")) return this.moveToMinimapPoint(e);
     if (this.isOverlay(e.target)) return;
     if (e.pointerType === "mouse" && e.button !== 0 && e.button !== 1) return;
     this.root.focus({ preventScroll: true });
@@ -3154,7 +3517,7 @@ var CodeCanvas = class {
     }
     if (this.pointers.size > 2) return;
     const p = this.local(e);
-    if (e.button === 1) {
+    if (e.button === 1 || this.tool === "pan") {
       this.gesture = { t: "pan", id: e.pointerId, sx: p.x, sy: p.y, cam: { ...this.cam } };
       return;
     }
@@ -3653,61 +4016,186 @@ var CodeCanvas = class {
   }
   // ---------------------------------------------------------------- toolbar & references
   renderBar() {
-    const bar = this.bar;
+    this.renderDock();
+    this.renderSelectionBar();
+    this.renderRefs();
+  }
+  /** The dock at the bottom: tools, file actions, zoom and the language. */
+  renderDock() {
+    const dock = this.bar;
+    dock.replaceChildren();
+    dock.hidden = !!this.editing;
+    const toolButton = (tool, label, icon) => {
+      const toolBtn = iconButton(label, icon, () => this.setTool(tool));
+      toolBtn.classList.toggle("on", this.tool === tool);
+      toolBtn.setAttribute("aria-pressed", String(this.tool === tool));
+      return toolBtn;
+    };
+    dock.append(toolButton("select", "Select", ICON_SELECT), toolButton("pan", "Pan", ICON_PAN), el("div", "cc-sep"));
+    const firstErrorBlock = this.diagnostics.find((d) => d.blockId)?.blockId;
+    if (firstErrorBlock) dock.append(button(plural(this.diagnostics.length, "error"), () => this.showErrorsOf(firstErrorBlock), "danger"));
+    const diff = this.currentDiff();
+    if (diff) dock.append(changesSummary(diff), el("div", "cc-sep"));
+    dock.append(button("+ Function", () => this.createFunctionAtCenter(), "strong"));
+    if (this.clip) dock.append(button("Paste", () => (this.lastPointer = null, this.paste())));
+    dock.append(
+      this.layoutBeforeArrange ? button("Undo arrange", () => this.undoArrange()) : button("Arrange", () => this.arrange()),
+      button("Fit", () => this.fit()),
+      el("div", "cc-sep"),
+      button("\u2212", () => this.zoomBy(0.8), "square"),
+      this.zoomLabel,
+      button("+", () => this.zoomBy(1.25), "square"),
+      ...this.languageLabelParts()
+    );
+    this.zoomLabel.title = "Zoom";
+  }
+  /** The bar above the selected block: what it uses and what uses it, and actions on it. */
+  renderSelectionBar() {
+    const bar = this.selectionBar;
     bar.replaceChildren();
-    bar.hidden = !!this.editing;
     const b = this.selected ? this.view?.blocks.get(this.selected) : null;
-    if (b) {
-      const chip = el("div", "cc-chip");
-      chip.style.setProperty("--k", `var(--k-${b.kind})`);
-      setHTML(chip, `<i></i>${esc(b.name)}`);
-      const refs = this.refsFor(b.id);
+    bar.hidden = !b || !!this.editing;
+    if (!b) return;
+    const refs = this.refsFor(b.id);
+    const usedBy = `used by ${refs.incoming.length}`;
+    const refsToggle = button(refs.outgoing.length ? `${plural(refs.outgoing.length, "dep")} \xB7 ${usedBy}` : usedBy, () => this.toggleRefs(), "meta");
+    refsToggle.classList.add("cc-refs-toggle");
+    refsToggle.title = "References";
+    refsToggle.setAttribute("aria-expanded", String(this.refsOpen));
+    const close = button("\xD7", () => this.select(null), "square");
+    close.setAttribute("aria-label", "Clear selection");
+    if (this.conflicts) {
+      const isConflicted = this.conflicts.hunksByBlock.has(b.id);
+      const firstHunk = isConflicted ? this.conflicts.hunks[this.conflicts.hunksByBlock.get(b.id)[0]] : void 0;
+      const keep = (label, choice, side) => {
+        const keepButton = button(label, () => this.keepConflictSide(b.id, choice), choice === "current" ? "primary" : void 0);
+        if (side) keepButton.title = side;
+        return keepButton;
+      };
+      const keepButtons = firstHunk ? [keep("Keep current", "current", firstHunk.currentLabel), keep("Keep incoming", "incoming", firstHunk.incomingLabel), keep("Keep both", "both"), el("div", "cc-sep")] : [];
+      bar.append(refsToggle, el("div", "cc-sep"), ...keepButtons, button("Edit", () => this.openEditor(b.id)), this.moreButton(b), close);
+    } else {
       const errors = this.diagnosticsInside(b.id);
-      if (this.conflicts) {
-        const isConflicted = this.conflicts.hunksByBlock.has(b.id);
-        const firstHunk = isConflicted ? this.conflicts.hunks[this.conflicts.hunksByBlock.get(b.id)[0]] : void 0;
-        const keep = (label, choice, side) => {
-          const keepButton = button(label, () => this.keepConflictSide(b.id, choice), choice === "current" ? "primary" : void 0);
-          if (side) keepButton.title = side;
-          return keepButton;
-        };
-        bar.append(
-          chip,
-          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))
-        );
-        return this.renderRefs();
-      }
       bar.append(
-        chip,
+        refsToggle,
         el("div", "cc-sep"),
         ...errors.length ? [button(plural(errors.length, "error"), () => this.toggleRefs(), "danger")] : [],
-        button("Edit", () => this.openEditor(b.id)),
+        ...this.opts.onOpenCode ? [button("Open code", () => this.opts.onOpenCode(b))] : [],
+        ...this.opts.onAsk ? [button("Ask", () => this.opts.onAsk(b))] : [],
         ...isRenamable(b) ? [button("Rename", () => this.startRename(b.id))] : [],
-        button(`Refs ${refs.incoming.length + refs.outgoing.length}`, () => this.toggleRefs()),
-        button("Copy", () => this.copy(b.id)),
-        ...b.kind !== "import" && b.kind !== "statement" ? [button("Duplicate", () => this.duplicate(b.id))] : [],
-        ...b.insert ? [button("+ Inside", () => this.createFunctionAtCenter())] : [],
-        button("Delete", () => this.deleteBlock(b.id), "danger")
-      );
-    } else {
-      const firstErrorBlock = this.diagnostics.find((d) => d.blockId)?.blockId;
-      if (firstErrorBlock) bar.append(button(plural(this.diagnostics.length, "error"), () => this.showErrorsOf(firstErrorBlock), "danger"));
-      const diff = this.currentDiff();
-      if (diff) bar.append(changesSummary(diff), el("div", "cc-sep"));
-      bar.append(button("+ Function", () => this.createFunctionAtCenter()));
-      if (this.clip) bar.append(button("Paste", () => (this.lastPointer = null, this.paste())));
-      bar.append(
-        this.layoutBeforeArrange ? button("Undo arrange", () => this.undoArrange()) : button("Arrange", () => this.arrange()),
-        el("div", "cc-sep"),
-        button("Fit", () => this.fit()),
-        button("\u2212", () => this.zoomBy(0.8)),
-        button("+", () => this.zoomBy(1.25))
+        button("Delete", () => this.deleteBlock(b.id), "danger"),
+        this.moreButton(b),
+        close
       );
     }
-    this.renderRefs();
+    this.placeSelectionBar();
+  }
+  moreButton(b) {
+    const more = button("\u22EF", () => {
+      const box = more.getBoundingClientRect();
+      const rootBox = this.root.getBoundingClientRect();
+      this.openBlockMenu(b.id, { x: box.left - rootBox.left, y: box.bottom - rootBox.top + 4 });
+    }, "square");
+    more.setAttribute("aria-label", "More actions");
+    more.setAttribute("aria-haspopup", "menu");
+    return more;
+  }
+  /** The block's actions as a menu, from ⋯ or a right-click. */
+  openBlockMenu(id, at) {
+    const b = this.view?.blocks.get(id);
+    if (!b) return;
+    if (this.selected !== id) this.select(id);
+    const item = (label, action, variant) => button(label, () => (this.closeMenu(), action()), variant);
+    const items = [
+      item("Edit", () => this.openEditor(id)),
+      ...this.opts.onOpenCode ? [item("Open code", () => this.opts.onOpenCode(b))] : [],
+      ...this.opts.onAsk ? [item("Ask", () => this.opts.onAsk(b))] : [],
+      ...isRenamable(b) && !this.conflicts ? [item("Rename", () => this.startRename(id))] : [],
+      item("References", () => (this.refsOpen = true, this.renderBar())),
+      item("Copy", () => this.copy(id)),
+      ...b.kind !== "import" && b.kind !== "statement" && !this.conflicts ? [item("Duplicate", () => this.duplicate(id))] : [],
+      ...b.insert && !this.conflicts ? [item("+ Inside", () => this.createFunctionAtCenter())] : [],
+      ...!this.conflicts ? [item("Delete", () => this.deleteBlock(id), "danger")] : []
+    ];
+    const menu = this.menuEl;
+    menu.replaceChildren(...items);
+    menu.hidden = false;
+    const left = clamp2(at.x, 8, Math.max(8, this.root.clientWidth - menu.offsetWidth - 8));
+    const top = clamp2(at.y, 8, Math.max(8, this.root.clientHeight - menu.offsetHeight - 8));
+    Object.assign(menu.style, { left: left + "px", top: top + "px" });
+    items[0]?.focus({ preventScroll: true });
+  }
+  closeMenu() {
+    this.menuEl.hidden = true;
+  }
+  /** Keep the selection bar right above the selected block (below it when there is no room). */
+  placeSelectionBar() {
+    const bar = this.selectionBar;
+    const geo = this.selected ? this.geom?.geo.get(this.selected) : void 0;
+    if (bar.hidden || !geo || geo.hidden) {
+      bar.style.visibility = "hidden";
+      return;
+    }
+    bar.style.visibility = "";
+    const { x, y, s } = this.cam;
+    const blockTop = geo.ay * s + y;
+    const blockBottom = (geo.ay + geo.h) * s + y;
+    const barHeight = bar.offsetHeight || 34;
+    const fitsAbove = blockTop - barHeight - 8 >= 8;
+    const left = clamp2(geo.ax * s + x, 8, Math.max(8, this.root.clientWidth - bar.offsetWidth - 8));
+    bar.style.left = left + "px";
+    bar.style.top = (fitsAbove ? blockTop - barHeight - 8 : blockBottom + 8) + "px";
+  }
+  setTool(tool) {
+    this.tool = tool;
+    this.root.classList.toggle("cc-tool-pan", tool === "pan");
+    this.renderDock();
+  }
+  /** The whole file in small, in a corner; the visible part outlined. A click moves there. */
+  renderMinimap() {
+    const g = this.geom;
+    const minimap = this.minimapEl;
+    if (!minimap || !g) return;
+    const f = g.frame;
+    const scale = Math.min(MINIMAP.width / f.w, MINIMAP.height / f.h);
+    this.minimapScale = scale;
+    const bars = g.order.filter((geo) => !geo.hidden && geo.block.depth <= 1).map(
+      (geo) => `<i style="--k:var(--k-${geo.block.kind});left:${((geo.ax - f.x) * scale).toFixed(1)}px;top:${((geo.ay - f.y) * scale).toFixed(1)}px;width:${Math.max(2, geo.w * scale).toFixed(1)}px;height:${Math.max(
+        2,
+        geo.h * scale
+      ).toFixed(1)}px"></i>`
+    ).join("");
+    setHTML(minimap, `<div class="cc-minimap-blocks">${bars}</div><span class="cc-minimap-view"></span>`);
+    this.placeMinimapView();
+  }
+  placeMinimapView() {
+    const g = this.geom;
+    const view = this.minimapEl?.querySelector(".cc-minimap-view");
+    if (!g || !view) return;
+    const { x, y, s } = this.cam;
+    const f = g.frame;
+    const scale = this.minimapScale;
+    const left = clamp2((-x / s - f.x) * scale, -2, MINIMAP.width);
+    const top = clamp2((-y / s - f.y) * scale, -2, MINIMAP.height);
+    const right = clamp2(((this.root.clientWidth - x) / s - f.x) * scale, left, MINIMAP.width + 2);
+    const bottom = clamp2(((this.root.clientHeight - y) / s - f.y) * scale, top, MINIMAP.height + 2);
+    Object.assign(view.style, { left: left + "px", top: top + "px", width: right - left + "px", height: bottom - top + "px" });
+  }
+  moveToMinimapPoint(e) {
+    const g = this.geom;
+    const inner = this.minimapEl?.querySelector(".cc-minimap-blocks");
+    if (!g || !inner) return;
+    const box = inner.getBoundingClientRect();
+    const worldX = g.frame.x + (e.clientX - box.left) / this.minimapScale;
+    const worldY = g.frame.y + (e.clientY - box.top) / this.minimapScale;
+    const s = this.cam.s;
+    this.moveCamera({ x: this.root.clientWidth / 2 - worldX * s, y: this.root.clientHeight / 2 - worldY * s, s }, true);
+  }
+  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;
@@ -3748,7 +4236,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;
@@ -3863,6 +4351,13 @@ function el(tag, cls) {
   if (cls) e.className = cls;
   return e;
 }
+function iconButton(label, icon, onClick) {
+  const iconBtn = button("", onClick, "square");
+  setHTML(iconBtn, icon);
+  iconBtn.setAttribute("aria-label", label);
+  iconBtn.title = label;
+  return iconBtn;
+}
 function button(label, onClick, variant) {
   const b = keepsCanvasFocus(document.createElement("button"));
   b.className = "cc-btn" + (variant ? " " + variant : "");
@@ -3877,9 +4372,6 @@ function keepsCanvasFocus(element) {
   element.addEventListener("pointerdown", (e) => e.preventDefault());
   return element;
 }
-function esc(s) {
-  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
-}
 function clamp2(v, lo, hi) {
   return Math.min(hi, Math.max(lo, v));
 }