@codecanvas-ide/engine 0.3.0 → 0.4.0

package/dist/index.js

@@ -2024,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,
@@ -2298,103 +2298,220 @@ 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-component: #22b8cf; --k-component-head: #146c7a; --k-component-bg: rgba(34,184,207,.09);
-  --k-state: #f0883e;    --k-state-head: #8a4614;   --k-state-bg: rgba(240,136,62,.09);
-  --k-variable: #4b8ef7; --k-variable-head: #23508f; --k-variable-bg: rgba(75,142,247,.09);
-  --k-type: #d4a92a;     --k-type-head: #6e5714;    --k-type-bg: rgba(212,169,42,.08);
-  --k-namespace: #9b8cf8; --k-namespace-head: #4d4291; --k-namespace-bg: rgba(155,140,248,.08);
-  --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-component: #0f8fa3; --k-component-head: #0f8fa3; --k-component-bg: rgba(15,143,163,.07);
-  --k-state: #d4691c;    --k-state-head: #d4691c;   --k-state-bg: rgba(212,105,28,.07);
-  --k-variable: #2f6fe0; --k-variable-head: #2f6fe0; --k-variable-bg: rgba(47,111,224,.07);
-  --k-type: #b58a0c;     --k-type-head: #a87f08;    --k-type-bg: rgba(181,138,12,.08);
-  --k-namespace: #6f5ce6; --k-namespace-head: #6f5ce6; --k-namespace-bg: rgba(111,92,230,.07);
-  --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-component { --k: var(--k-component); --kh: var(--k-component-head); --kbg: var(--k-component-bg); }
-.cc-block.k-state { --k: var(--k-state); --kh: var(--k-state-head); --kbg: var(--k-state-bg); }
-.cc-block.k-variable { --k: var(--k-variable); --kh: var(--k-variable-head); --kbg: var(--k-variable-bg); }
-.cc-block.k-type { --k: var(--k-type); --kh: var(--k-type-head); --kbg: var(--k-type-bg); }
-.cc-block.k-namespace { --k: var(--k-namespace); --kh: var(--k-namespace-head); --kbg: var(--k-namespace-bg); }
-.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); }
@@ -2404,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); }
@@ -2419,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; }
 
@@ -2437,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; }
@@ -2448,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 {
@@ -2472,38 +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-language { padding: 0 8px; font: 600 11px/30px var(--cc-font, "JetBrains Mono", ui-monospace, Menlo, monospace); color: var(--cc-muted); white-space: nowrap; }
-.cc-sep { width: 1px; height: 20px; background: var(--cc-panel-border); margin: 0 2px; flex: none; }
+.cc-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; }
@@ -2549,6 +2692,17 @@ var KIND_LABEL = {
   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>',
@@ -2557,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;
@@ -2573,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", "component", "state", "variable", "type", "namespace", "statement"].map(
-      (k) => `<marker id="cc-arrow-${k}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="var(--k-${k})"/></marker>`
-    ).join("")}</defs>`);
+    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());
@@ -2603,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;
@@ -2965,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) {
@@ -3016,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() {
@@ -3096,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) {
@@ -3150,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() {
@@ -3191,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;
@@ -3203,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) {
@@ -3276,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;
@@ -3297,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 });
@@ -3313,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;
     }
@@ -3812,63 +4016,180 @@ 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)),
-          ...this.languageLabelParts()
-        );
-        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
       );
     }
-    bar.append(...this.languageLabelParts());
-    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 [];
@@ -4030,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 : "");
@@ -4044,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));
 }