@vesk/vesk-cli 0.2.50-canary.10 → 0.2.50-canary.12

package/dist/cli.js

@@ -147,7 +147,10 @@ var init_errors = __esm({
       suggestions;
       nextSteps;
       tip;
+      /** The V-diagnostic code, e.g. `V0501`. */
       code;
+      /** The rendered code frame. Used to be written into `code`, which silently replaced the V-code. */
+      frame;
       constructor(message, opts = {}) {
         super(message);
         this.name = "VeskError";
@@ -157,7 +160,8 @@ var init_errors = __esm({
         this.suggestions = opts.suggestions || [];
         this.nextSteps = opts.nextSteps || [];
         this.tip = opts.tip || "";
-        if (opts.code !== void 0) this.code = opts.code;
+        if (opts.code !== void 0 && !opts.code.includes("\n")) this.code = opts.code;
+        if (opts.frame !== void 0) this.frame = opts.frame;
       }
       static notFound(name, candidates = [], context = {}) {
         const allCandidates = [.../* @__PURE__ */ new Set([...candidates, ...VESK_BUILTINS])];
@@ -236,6 +240,84 @@ var init_errors = __esm({
           }
         );
       }
+      /**
+       * A browser-only global used in code the SERVER evaluates.
+       *
+       * On the server these are either absent (`window is not defined`) or, worse,
+       * silently present-but-wrong (`navigator` exists in modern Node, so
+       * `navigator.onLine` is `undefined` and a page renders as if it were offline).
+       * A raw `ReferenceError` at request time is the worst possible report: it
+       * names neither the component nor the fix. This points at the line.
+       */
+      static ssrUnsafeGlobal(name, context = {}) {
+        return new _VeskError(
+          `\`${name}\` is browser-only, and this component body runs during SSR.`,
+          {
+            ...context,
+            code: context.code || "V0501",
+            suggestions: [
+              `Wrap the part that needs the DOM in a {#client} block.`,
+              `Move the code into an event handler \u2014 handlers never run on the server.`,
+              `Do the setup in on_destroy(), which the compiler only emits on the client.`
+            ],
+            nextSteps: [
+              `component ${context.inComponent ?? "this component"}: wrap the \`${name}\` access in {#client}...{/client}.`,
+              `Or guard it: if (typeof ${name} !== 'undefined') { ... }`
+            ],
+            tip: "SSR renders this component before the client exists. Reading a browser global here either throws during the request or (for `navigator`) silently returns undefined."
+          }
+        );
+      }
+      /**
+       * The second name from `track()` called as a function.
+       *
+       * `const &[count, setCount] = track(0)` returns a CELL, not a setter function, so
+       * `setCount(1)` throws `setCount is not a function` from generated code with
+       * no line of user code in the message. The cell is the writer: `.set(v)`.
+       */
+      static cellCalledAsFunction(name, context = {}) {
+        return new _VeskError(
+          `\`${name}\` is a cell, not a function \u2014 cells are written with \`.set()\`.`,
+          {
+            ...context,
+            code: context.code || "V0502",
+            suggestions: [
+              `Use \`${name}.set(...)\` instead of \`${name}(...)\`.`,
+              `Or use the tracked spelling inside an event handler: set(${context.value ?? "value"}, ...)`
+            ],
+            nextSteps: [
+              `const &[${context.value ?? "value"}, ${name}] = track(0) \u2192 \`${name}.set(v)\``,
+              "The value read in markup is the first name; the second is the cell object."
+            ],
+            tip: `\`track()\` returns [value, cell]. \`${name}\` is the cell half.`
+          }
+        );
+      }
+      /**
+       * `set(value, …)` used outside a rewritten expression.
+       *
+       * The compiler rewrites `set(count, v)` to `countCell.set(v)` inside JSX and
+       * event handlers — but a bare statement in the component body is NOT
+       * rewritten, so the runtime `set` receives the value and throws
+       * "Cannot read properties of undefined". Pass the CELL, not the value.
+       */
+      static setWithValueName(name, context = {}) {
+        return new _VeskError(
+          `\`set(${name}, \u2026)\` needs the CELL, and \`${name}\` is the value half of track().`,
+          {
+            ...context,
+            code: context.code || "V0503",
+            suggestions: [
+              `Use \`set(${context.cell ?? "cell"}, \u2026)\` or \`${context.cell ?? "cell"}.set(\u2026)\`.`,
+              `Or move the set() into an event handler, where the compiler rewrites it for you.`
+            ],
+            nextSteps: [
+              `const &[${name}, ${context.cell ?? "cell"}] = track(0) \u2192 \`${context.cell ?? "cell"}.set(v)\``
+            ],
+            tip: "set(cell, value) is only rewritten inside JSX and handlers; in a body statement it reaches the runtime untouched."
+          }
+        );
+      }
       static serverBlockInClient(compName, context = {}) {
         return new _VeskError(
           `{#server} block found in client island "${compName}". Client islands render on both server and client, so {#server} blocks have no effect.`,
@@ -21282,7 +21364,7 @@ function validateBlocks(compName, isClient, body, file, source) {
           const { line, column } = offsetToLineCol2(source, pos);
           opts.line = line;
           opts.column = column;
-          opts.code = codeFrame(source, line, column);
+          opts.frame = codeFrame(source, line, column);
         }
         throw VeskError.serverBlockInClient(compName, opts);
       }
@@ -21294,7 +21376,7 @@ function validateBlocks(compName, isClient, body, file, source) {
           const { line, column } = offsetToLineCol2(source, pos);
           opts.line = line;
           opts.column = column;
-          opts.code = codeFrame(source, line, column);
+          opts.frame = codeFrame(source, line, column);
         }
         throw VeskError.clientBlockInServer(compName, opts);
       }
@@ -25890,8 +25972,8 @@ function isPublicMarkdownPath(v) {
     const c = s.charCodeAt(i);
     if (c === 63 || c === 35 || c === 92) return false;
   }
-  const lower = s.toLowerCase();
-  return stringEndsWith(lower, ".md") || stringEndsWith(lower, ".markdown");
+  const lower2 = s.toLowerCase();
+  return stringEndsWith(lower2, ".md") || stringEndsWith(lower2, ".markdown");
 }
 function getMdPathCell(path) {
   let cell = mdPathCells.get(path);
@@ -26563,9 +26645,9 @@ function toDomNode(value) {
   }
   if (typeof value !== "string") return value;
   if (value === "") return document.createDocumentFragment();
-  const template = document.createElement("template");
-  template.innerHTML = value;
-  const { content } = template;
+  const template2 = document.createElement("template");
+  template2.innerHTML = value;
+  const { content } = template2;
   if (content.childNodes.length === 1) {
     const only = content.firstChild;
     content.removeChild(only);
@@ -26758,7 +26840,7 @@ function resolveTitle(meta, child) {
 }
 function mergeMetadata(...sources) {
   const out = {};
-  let template;
+  let template2;
   let sawTemplate = false;
   for (const source of sources) {
     if (!source) continue;
@@ -26771,7 +26853,7 @@ function mergeMetadata(...sources) {
       if (key === "title") {
         if (value && typeof value === "object" && value.template) {
           sawTemplate = true;
-          template = value.template || template;
+          template2 = value.template || template2;
         }
         out.title = value;
         continue;
@@ -26783,9 +26865,9 @@ function mergeMetadata(...sources) {
     const own = out.title;
     if (typeof own === "string") out.title = { absolute: own };
     else if (own && typeof own === "object" && own.template) {
-      out.title = { default: own.default, template: own.template || template };
+      out.title = { default: own.default, template: own.template || template2 };
     } else if (own && typeof own === "object") {
-      out.title = { ...own, template };
+      out.title = { ...own, template: template2 };
     }
   }
   return out;
@@ -29289,8 +29371,8 @@ function looksLikeMarkdownPath(value) {
   const v = value.trim();
   if (v.length === 0 || v.length > 4096) return false;
   if (v.includes("\n") || v.includes("\r")) return false;
-  const lower = v.toLowerCase();
-  return lower.endsWith(MD_EXT_MARKER) || lower.endsWith(".markdown");
+  const lower2 = v.toLowerCase();
+  return lower2.endsWith(MD_EXT_MARKER) || lower2.endsWith(".markdown");
 }
 function isRelativeSpecifier(v) {
   return v.startsWith("./") || v.startsWith("../");
@@ -31863,7 +31945,202 @@ var init_server_head = __esm({
   }
 });
 
+// ../compiler/src/server-jsx-lowering.ts
+function containsJsx2(node, depth = 0) {
+  if (!node || typeof node !== "object" || depth > 40) return false;
+  if (Array.isArray(node)) {
+    for (const item of node) if (containsJsx2(item, depth + 1)) return true;
+    return false;
+  }
+  const type = node.type;
+  if (type === "JSXElement" || type === "JSXFragment") return true;
+  for (const key of Object.keys(node)) {
+    const value = node[key];
+    if (value && typeof value === "object" && containsJsx2(value, depth + 1)) return true;
+  }
+  return false;
+}
+function normalizeJsxText(value) {
+  const lines = value.split(/\r\n|\n|\r/);
+  let lastNonEmpty = -1;
+  for (let i = 0; i < lines.length; i++) {
+    if (/[^ \t]/.test(lines[i])) lastNonEmpty = i;
+  }
+  let out = "";
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i].replace(/\t/g, " ");
+    if (i !== 0) line = line.replace(/^ +/, "");
+    if (i !== lines.length - 1) line = line.replace(/ +$/, "");
+    if (line) {
+      if (i !== lastNonEmpty) line += " ";
+      out += line;
+    }
+  }
+  return out;
+}
+function lower(node, ctx2) {
+  if (Array.isArray(node)) return node.map((n2) => lower(n2, ctx2));
+  if (!node || typeof node !== "object") return node;
+  const n = node;
+  if (n.type === "JSXElement") {
+    const opening = n.openingElement;
+    const name = jsxTagName(opening.name);
+    const attrs = lowerAttributes(opening.attributes, ctx2);
+    const children = lowerChildren(n.children, ctx2);
+    const statics = [`<${name}`, ...attrs.statics.slice(1)];
+    statics[statics.length - 1] += ">";
+    const quasis = [...statics, `</${name}>`];
+    const expressions = [...attrs.exprs, ...children];
+    return template(quasis, expressions);
+  }
+  if (n.type === "JSXFragment") {
+    return template(["", ""], lowerChildren(n.children, ctx2));
+  }
+  const out = {};
+  for (const key of Object.keys(n)) {
+    if (key === "type" || key === "start" || key === "end" || key === "loc" || key === "range") {
+      out[key] = n[key];
+      continue;
+    }
+    const value = n[key];
+    out[key] = value && typeof value === "object" ? lower(value, ctx2) : value;
+  }
+  return out;
+}
+function jsxTagName(nameNode) {
+  const n = nameNode;
+  if (!n) return "div";
+  if (n.type === "JSXIdentifier") return String(n.name);
+  if (n.type === "JSXMemberExpression") {
+    const object = jsxTagName(n.object);
+    const property = n.property;
+    return `${object}.${String(property?.name)}`;
+  }
+  if (n.type === "JSXNamespacedName") {
+    const ns = n.namespace;
+    const name = n.name;
+    return `${String(ns?.name)}:${String(name?.name)}`;
+  }
+  return "div";
+}
+function lowerAttributes(attrs, ctx2) {
+  const statics = [""];
+  const exprs = [];
+  const push = (text, expr) => {
+    if (expr === void 0) {
+      statics[statics.length - 1] += text;
+      return;
+    }
+    statics[statics.length - 1] += text;
+    statics.push("");
+    exprs.push(expr);
+  };
+  for (const attr of attrs || []) {
+    const a = attr;
+    if (a.type === "JSXSpreadAttribute") {
+      console.error("[vesk] a spread attribute in a JSX expression is not supported yet (dropped):", String(a.argument ?? "").slice(0, 60));
+      continue;
+    }
+    const name = jsxAttrName(a.name);
+    const value = a.value;
+    if (value === null || value === void 0) {
+      push(` ${name}`);
+      continue;
+    }
+    if (value.type === "StringLiteral") {
+      push(` ${name}="${escapeAttrText(String(value.value))}"`);
+      continue;
+    }
+    if (value.type === "JSXExpressionContainer") {
+      const inner = value.expression;
+      if (!inner || inner.type === "JSXEmptyExpression") {
+        push(` ${name}="true"`);
+        continue;
+      }
+      push(` ${name}="`, callNode(ATTR, [literal3(name), coerceString(lower(inner, ctx2))]));
+      push('"');
+      continue;
+    }
+    push(` ${name}="`, callNode(ATTR, [literal3(name), coerceString(lower(value, ctx2))]));
+    push('"');
+  }
+  return { statics, exprs };
+}
+function jsxAttrName(nameNode) {
+  const n = nameNode;
+  if (!n) return "data";
+  if (n.type === "JSXIdentifier") return String(n.name);
+  return jsxTagName(n);
+}
+function lowerChildren(children, ctx2) {
+  const out = [];
+  for (const child of children || []) {
+    const c = child;
+    if (c.type === "JSXText") {
+      const text = normalizeJsxText(String(c.value ?? ""));
+      if (text) out.push(literal3(text));
+      continue;
+    }
+    if (c.type === "JSXExpressionContainer") {
+      const inner = c.expression;
+      if (!inner || inner.type === "JSXEmptyExpression") continue;
+      const lowered2 = lower(inner, ctx2);
+      out.push(coerceString(lowered2));
+      continue;
+    }
+    const lowered = lower(c, ctx2);
+    out.push(coerceString(lowered));
+  }
+  return out;
+}
+function coerceString(node) {
+  if (!node || typeof node !== "object") return callNode(ESCAPE, [literal3(String(node))]);
+  const n = node;
+  if (n.type === "TemplateLiteral") return n;
+  if (n.type === "Literal" || n.type === "StringLiteral") return callNode(ESCAPE, [node]);
+  return callNode(ESCAPE, [callNode("String", [node])]);
+}
+function template(statics, expressions) {
+  const quasis = statics.map((raw2, i) => ({
+    type: "TemplateElement",
+    value: { raw: raw2 },
+    tail: i === statics.length - 1
+  }));
+  return { type: "TemplateLiteral", quasis, expressions };
+}
+function literal3(value) {
+  return { type: "Literal", value };
+}
+function callNode(callee, args2) {
+  return {
+    type: "CallExpression",
+    callee: { type: "Identifier", name: callee },
+    arguments: args2,
+    optional: false
+  };
+}
+function escapeAttrText(value) {
+  return value.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;");
+}
+function lowerJsxInExpression(ast) {
+  if (!containsJsx2(ast)) return ast;
+  return lower(ast, { track: false });
+}
+var ESCAPE, ATTR;
+var init_server_jsx_lowering = __esm({
+  "../compiler/src/server-jsx-lowering.ts"() {
+    "use strict";
+    ESCAPE = "__escape";
+    ATTR = "__attr";
+  }
+});
+
 // ../compiler/src/server-jsgen.ts
+import { print as print6 } from "esrap";
+import tsPrinter from "esrap/languages/ts";
+function printLoweredTs(ast) {
+  return print6(ast, tsPrinter()).code;
+}
 function sanitizeMarkerName(name) {
   return String(name).split("--").join("-").split("<").join("").split(">").join("");
 }
@@ -31914,7 +32191,19 @@ function irNodeToJS(node, importedNames, isAsync = false, tracked2) {
       `})();`
     ].join("\n");
   }
-  if (node instanceof RuntimeStatement) return semicolonizeStatement(transformTracked(node, tracked2 || /* @__PURE__ */ new Map()));
+  if (node instanceof RuntimeStatement) {
+    const stmt = node;
+    const lowered = stmt.ast ? lowerJsxInExpression(stmt.ast) : null;
+    if (lowered && lowered !== stmt.ast && (tracked2?.size ?? 0) === 0) {
+      return semicolonizeStatement(printLoweredTs(lowered));
+    }
+    if (lowered && lowered !== stmt.ast) {
+      return semicolonizeStatement(
+        transformTracked({ ...node, ast: lowered }, tracked2 || /* @__PURE__ */ new Map())
+      );
+    }
+    return semicolonizeStatement(transformTracked(node, tracked2 || /* @__PURE__ */ new Map()));
+  }
   if (node instanceof SlotNode) {
     if (__vskMarkerless) return `__out.push(props.children || '');`;
     const sid = `s${nextVskId()}`;
@@ -31931,7 +32220,12 @@ function isEvent(target) {
   return !!target && target.startsWith("on") && target.length > 2;
 }
 function exprJSX(node, tracked2) {
-  return exprJS(transformTracked(node, tracked2 || /* @__PURE__ */ new Map()));
+  const lowered = node.ast ? lowerJsxInExpression(node.ast) : null;
+  const didLower = lowered !== node.ast;
+  if (didLower && (tracked2?.size ?? 0) === 0) {
+    return exprJS(printLoweredTs(lowered));
+  }
+  return exprJS(transformTracked({ ...node, ast: lowered }, tracked2 || /* @__PURE__ */ new Map()));
 }
 function staticNodeToJS(node, isAsync = false, tracked2) {
   const lines = [];
@@ -32079,13 +32373,13 @@ function mapRegionToJS(node, isAsync = false, tracked2) {
 }
 function keyedItemTemplate(node) {
   if (!node.keyExpr) return node.bodyTemplate;
-  const template = node.bodyTemplate;
-  const idx = template.findIndex((n) => n instanceof StaticNode);
-  if (idx === -1) return template;
-  const root3 = template[idx];
+  const template2 = node.bodyTemplate;
+  const idx = template2.findIndex((n) => n instanceof StaticNode);
+  if (idx === -1) return template2;
+  const root3 = template2[idx];
   const copy = new StaticNode(root3.tag, root3.attributes, [...root3.children, new DynamicBinding(node.keyExpr, "attribute", "data-vsk-key")], root3.keyExpr);
   copy.selfClosing = root3.selfClosing;
-  const out = template.slice();
+  const out = template2.slice();
   out[idx] = copy;
   return out;
 }
@@ -32197,18 +32491,24 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked2) {
     }
   }
   if (regularChildren.length > 0) {
-    const childLines = [];
-    for (const child of regularChildren) {
-      const code = irNodeToJS(child, importedNames, isAsync, tracked2);
-      if (code) childLines.push(code);
-    }
-    if (childLines.length > 0) {
-      const childrenVar = `__ch${nextVskId()}`;
-      propsEntries.push(`children: ${childrenVar}`);
-      lines.push(`const ${childrenVar} = ${isAsync ? "await (async " : "("}() => {`);
-      lines.push(`const __out = [];`);
-      lines.push(indent(childLines.join("\n")));
-      lines.push(`return __out.join(''); })();`);
+    const fnType = regularChildren.length === 1 && regularChildren[0] instanceof DynamicBinding && regularChildren[0].kind === "text" ? regularChildren[0].expression.ast?.type : null;
+    const isFnChild = fnType === "ArrowFunctionExpression" || fnType === "FunctionExpression" || fnType === "Identifier" || fnType === "MemberExpression";
+    if (isFnChild) {
+      propsEntries.push(`children: ${exprJSX(regularChildren[0].expression, tracked2)}`);
+    } else {
+      const childLines = [];
+      for (const child of regularChildren) {
+        const code = irNodeToJS(child, importedNames, isAsync, tracked2);
+        if (code) childLines.push(code);
+      }
+      if (childLines.length > 0) {
+        const childrenVar = `__ch${nextVskId()}`;
+        propsEntries.push(`children: ${childrenVar}`);
+        lines.push(`const ${childrenVar} = ${isAsync ? "await (async " : "("}() => {`);
+        lines.push(`const __out = [];`);
+        lines.push(indent(childLines.join("\n")));
+        lines.push(`return __out.join(''); })();`);
+      }
     }
   }
   const propsObj = `{ ${propsEntries.join(", ")} }`;
@@ -32225,9 +32525,9 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked2) {
   }
   const callExpr3 = `${awaitKw}${calleeVar}(${propsObj}, __registry, (${calleeVar}.__veskScope || __vesk))`;
   if (__vskHydrate && !__vskMarkerless) {
-    lines.push(`__out.push(${JSON.stringify(componentMarker(compName))} + (${callExpr3} || ''));`);
+    lines.push(`__out.push(${JSON.stringify(componentMarker(compName))} + __flat(${callExpr3}));`);
   } else {
-    lines.push(`__out.push(${callExpr3} || '');`);
+    lines.push(`__out.push(__flat(${callExpr3}));`);
   }
   return lines.join("\n");
 }
@@ -32245,6 +32545,7 @@ function generateFunctionBody(comp, importedNames) {
   lines.push(`const __styleText = (v) => { if (typeof v === 'string') return v; if (v && typeof v === 'object') { let s = ''; for (const k in v) { const x = v[k]; if (x == null || x === false) continue; s += k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()) + ':' + x + ';'; } return s; } return String(v); };`);
   lines.push(`const __attr = (n, v) => (v == null || v === false) ? '' : ' ' + n + '="' + __escape(n === 'style' ? __styleText(v) : String(v)) + '"';`);
   lines.push(`const raw = (s) => s == null ? '' : String(s);`);
+  lines.push(`const __flat = (v) => Array.isArray(v) ? v.join('') : (v == null ? '' : String(v));`);
   lines.push(`const __tk = globalThis.__vsk_ssr_token || '';`);
   if (asyncMode) {
     lines.push(`const __pk = __tk ? '__vsk_ssr_promises_' + __tk : '__vsk_ssr_promises';`);
@@ -32390,6 +32691,7 @@ var init_server_jsgen = __esm({
     init_scan();
     init_server_utils();
     init_module_imports();
+    init_server_jsx_lowering();
     init_vsk_imports();
     __currentCompName = "";
   }
@@ -33154,8 +33456,8 @@ function installMdReadHook(publicDirs) {
         while (rel.length > 0 && rel.charCodeAt(0) === 47) rel = rel.slice(1);
         const abs = resolveWithin(dir, rel);
         if (!abs) continue;
-        const lower = abs.toLowerCase();
-        if (!lower.endsWith(".md") && !lower.endsWith(".markdown")) continue;
+        const lower2 = abs.toLowerCase();
+        if (!lower2.endsWith(".md") && !lower2.endsWith(".markdown")) continue;
         if (existsSync12(abs) && statSync4(abs).isFile()) return readFileSync12(abs, "utf8");
       } catch {
       }
@@ -37582,8 +37884,8 @@ function isPublicMarkdownPath2(v) {
     if (c === 63 || c === 35 || c === 92)
       return false;
   }
-  const lower = s.toLowerCase();
-  return stringEndsWith2(lower, ".md") || stringEndsWith2(lower, ".markdown");
+  const lower2 = s.toLowerCase();
+  return stringEndsWith2(lower2, ".md") || stringEndsWith2(lower2, ".markdown");
 }
 function getMdPathCell2(path) {
   let cell = mdPathCells2.get(path);
@@ -38323,7 +38625,10 @@ var init_errors2 = __esm({
       suggestions;
       nextSteps;
       tip;
+      /** The V-diagnostic code, e.g. `V0501`. */
       code;
+      /** The rendered code frame. Used to be written into `code`, which silently replaced the V-code. */
+      frame;
       constructor(message, opts = {}) {
         super(message);
         this.name = "VeskError";
@@ -38333,8 +38638,10 @@ var init_errors2 = __esm({
         this.suggestions = opts.suggestions || [];
         this.nextSteps = opts.nextSteps || [];
         this.tip = opts.tip || "";
-        if (opts.code !== void 0)
+        if (opts.code !== void 0 && !opts.code.includes("\n"))
           this.code = opts.code;
+        if (opts.frame !== void 0)
+          this.frame = opts.frame;
       }
       static notFound(name, candidates = [], context = {}) {
         const allCandidates = [.../* @__PURE__ */ new Set([...candidates, ...VESK_BUILTINS2])];
@@ -38407,6 +38714,75 @@ var init_errors2 = __esm({
           tip: "Use plain objects for data and factory functions for constructors inside .vsk files."
         });
       }
+      /**
+       * A browser-only global used in code the SERVER evaluates.
+       *
+       * On the server these are either absent (`window is not defined`) or, worse,
+       * silently present-but-wrong (`navigator` exists in modern Node, so
+       * `navigator.onLine` is `undefined` and a page renders as if it were offline).
+       * A raw `ReferenceError` at request time is the worst possible report: it
+       * names neither the component nor the fix. This points at the line.
+       */
+      static ssrUnsafeGlobal(name, context = {}) {
+        return new _VeskError(`\`${name}\` is browser-only, and this component body runs during SSR.`, {
+          ...context,
+          code: context.code || "V0501",
+          suggestions: [
+            `Wrap the part that needs the DOM in a {#client} block.`,
+            `Move the code into an event handler \u2014 handlers never run on the server.`,
+            `Do the setup in on_destroy(), which the compiler only emits on the client.`
+          ],
+          nextSteps: [
+            `component ${context.inComponent ?? "this component"}: wrap the \`${name}\` access in {#client}...{/client}.`,
+            `Or guard it: if (typeof ${name} !== 'undefined') { ... }`
+          ],
+          tip: "SSR renders this component before the client exists. Reading a browser global here either throws during the request or (for `navigator`) silently returns undefined."
+        });
+      }
+      /**
+       * The second name from `track()` called as a function.
+       *
+       * `const &[count, setCount] = track(0)` returns a CELL, not a setter function, so
+       * `setCount(1)` throws `setCount is not a function` from generated code with
+       * no line of user code in the message. The cell is the writer: `.set(v)`.
+       */
+      static cellCalledAsFunction(name, context = {}) {
+        return new _VeskError(`\`${name}\` is a cell, not a function \u2014 cells are written with \`.set()\`.`, {
+          ...context,
+          code: context.code || "V0502",
+          suggestions: [
+            `Use \`${name}.set(...)\` instead of \`${name}(...)\`.`,
+            `Or use the tracked spelling inside an event handler: set(${context.value ?? "value"}, ...)`
+          ],
+          nextSteps: [
+            `const &[${context.value ?? "value"}, ${name}] = track(0) \u2192 \`${name}.set(v)\``,
+            "The value read in markup is the first name; the second is the cell object."
+          ],
+          tip: `\`track()\` returns [value, cell]. \`${name}\` is the cell half.`
+        });
+      }
+      /**
+       * `set(value, …)` used outside a rewritten expression.
+       *
+       * The compiler rewrites `set(count, v)` to `countCell.set(v)` inside JSX and
+       * event handlers — but a bare statement in the component body is NOT
+       * rewritten, so the runtime `set` receives the value and throws
+       * "Cannot read properties of undefined". Pass the CELL, not the value.
+       */
+      static setWithValueName(name, context = {}) {
+        return new _VeskError(`\`set(${name}, \u2026)\` needs the CELL, and \`${name}\` is the value half of track().`, {
+          ...context,
+          code: context.code || "V0503",
+          suggestions: [
+            `Use \`set(${context.cell ?? "cell"}, \u2026)\` or \`${context.cell ?? "cell"}.set(\u2026)\`.`,
+            `Or move the set() into an event handler, where the compiler rewrites it for you.`
+          ],
+          nextSteps: [
+            `const &[${name}, ${context.cell ?? "cell"}] = track(0) \u2192 \`${context.cell ?? "cell"}.set(v)\``
+          ],
+          tip: "set(cell, value) is only rewritten inside JSX and handlers; in a body statement it reaches the runtime untouched."
+        });
+      }
       static serverBlockInClient(compName, context = {}) {
         return new _VeskError(`{#server} block found in client island "${compName}". Client islands render on both server and client, so {#server} blocks have no effect.`, {
           ...context,
@@ -50155,7 +50531,7 @@ import { WebSocketServer as WebSocketServer2 } from "ws";
 // ../compiler/dist/strip-ts.js
 init_parser();
 import { walk as walk6 } from "zimmerframe";
-import { print as print6 } from "esrap";
+import { print as print7 } from "esrap";
 import ts6 from "esrap/languages/ts";
 var TS_NODE_TYPES2 = /* @__PURE__ */ new Set([
   "TSAsExpression",
@@ -50352,7 +50728,7 @@ function stripCodeTypes2(code) {
     stripped.body = stripped.body.filter((n) => !isTypeOnlyStatement2(n));
   }
   try {
-    return print6(stripped, ts6()).code;
+    return print7(stripped, ts6()).code;
   } catch {
     return code;
   }
@@ -50491,7 +50867,7 @@ init_vsk_imports();
 init_md_inline();
 init_strip_ts();
 import { walk as walk7 } from "zimmerframe";
-import { print as print7 } from "esrap";
+import { print as print8 } from "esrap";
 import ts7 from "esrap/languages/ts";
 import tsx2 from "esrap/languages/tsx";
 function callExpr2(callee, args2 = []) {
@@ -50558,12 +50934,12 @@ function semicolonizeStatement2(code) {
     return code;
   return code + ";";
 }
-function containsJsx2(node, depth = 0) {
+function containsJsx3(node, depth = 0) {
   if (!node || typeof node !== "object" || depth > 40)
     return false;
   if (Array.isArray(node)) {
     for (const item of node) {
-      if (containsJsx2(item, depth + 1))
+      if (containsJsx3(item, depth + 1))
         return true;
     }
     return false;
@@ -50572,13 +50948,13 @@ function containsJsx2(node, depth = 0) {
     return true;
   for (const key of Object.keys(node)) {
     const v = node[key];
-    if (v && typeof v === "object" && containsJsx2(v, depth + 1))
+    if (v && typeof v === "object" && containsJsx3(v, depth + 1))
       return true;
   }
   return false;
 }
 function printAst2(ast) {
-  return print7(ast, containsJsx2(ast) ? tsx2() : ts7()).code;
+  return print8(ast, containsJsx3(ast) ? tsx2() : ts7()).code;
 }
 function effectBlockToHandlerExpr2(eff) {
   try {
@@ -50699,7 +51075,7 @@ function transformTracked2(irNode, tracked2) {
       return context.next();
     }
   });
-  return print7(transformed, containsJsx2(transformed) ? tsx2() : ts7()).code;
+  return print8(transformed, containsJsx3(transformed) ? tsx2() : ts7()).code;
 }
 function collectTrackedNames2(body) {
   const names = /* @__PURE__ */ new Map();
@@ -53834,8 +54210,8 @@ function looksLikeMarkdownPath2(value) {
     return false;
   if (v.includes("\n") || v.includes("\r"))
     return false;
-  const lower = v.toLowerCase();
-  return lower.endsWith(MD_EXT_MARKER2) || lower.endsWith(".markdown");
+  const lower2 = v.toLowerCase();
+  return lower2.endsWith(MD_EXT_MARKER2) || lower2.endsWith(".markdown");
 }
 function isRelativeSpecifier2(v) {
   return v.startsWith("./") || v.startsWith("../");
@@ -55041,8 +55417,8 @@ function installMdReadHook2(publicDirs) {
         const abs = resolveWithin2(dir, rel);
         if (!abs)
           continue;
-        const lower = abs.toLowerCase();
-        if (!lower.endsWith(".md") && !lower.endsWith(".markdown"))
+        const lower2 = abs.toLowerCase();
+        if (!lower2.endsWith(".md") && !lower2.endsWith(".markdown"))
           continue;
         if (existsSync29(abs) && statSync15(abs).isFile())
           return readFileSync25(abs, "utf8");
@@ -63160,12 +63536,14 @@ if (cmd === "build") {
       const l = err.line;
       const c = err.column;
       const code = err.code;
+      const frame = err.frame;
       let out = `vesk build: error \u2014 ${err.message}`;
+      if (code) out = `vesk build: [${code}] ${err.message}`;
       if (f) out += `
   File: ${f}${l ? `:${l}${c ? `:${c}` : ""}` : ""}`;
-      if (code) out += `
+      if (frame) out += `
 
-${code}`;
+${frame}`;
       console.error(out);
       if (err.stack && !String(err.stack).includes(err.message)) console.error(err.stack);
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/vesk-cli",
-  "version": "0.2.50-canary.10",
+  "version": "0.2.50-canary.12",
   "type": "module",
   "description": "Vesk — compiler-first framework for the post-VDOM web. vesk dev, vesk build.",
   "bin": {
@@ -8,10 +8,10 @@
   },
   "main": "./dist/cli.js",
   "dependencies": {
-    "@vesk/adapter": "^0.2.50-canary.10",
-    "@vesk/compiler": "^0.2.50-canary.10",
-    "@vesk/plugin-tailwind": "^0.2.50-canary.10",
-    "@vesk/runtime": "^0.2.50-canary.10",
+    "@vesk/adapter": "^0.2.50-canary.12",
+    "@vesk/compiler": "^0.2.50-canary.12",
+    "@vesk/plugin-tailwind": "^0.2.50-canary.12",
+    "@vesk/runtime": "^0.2.50-canary.12",
     "esrap": "^2.3.0",
     "typescript": "^5.8.0",
     "ws": "^8.18.0",