refactor: optimize reactive variable updates and parsing

- Replace `scanDeclareBlocks` with `parseDeclareCsv` in block processor
- Add error handling for declare block parsing
- Optimize `ReactiveVariableManager` by pre-computing variable keys
- Store template text and keys in data attributes for faster updates
- Adjust `VariableView` popup width via CSS class

src/cli/completions/block-processor.ts

@@ -7,7 +7,7 @@
 
 import { posix } from "path";
 import { createHash } from "crypto";
-import { scanDeclareBlocks, type VarDeclaration, type TagModifier } from "./declare-parser.js";
+import { parseDeclareCsv, type VarDeclaration, type TagModifier } from "./declare-parser.js";
 import {
   FENCED_BLOCK_RE,
   parseBlockAttrs,
@@ -86,9 +86,13 @@ export function processBlocks(
       // ---- Dispatch by role ----
 
       if (attrs.role === "declare") {
-        const result = scanDeclareBlocks(_match, fileRelativePath);
+        try {
+          const result = parseDeclareCsv(body, fileRelativePath);
           blocks.declarations.push(...result.variables);
           blocks.tagModifiers.push(...result.tagModifiers);
+        } catch (e) {
+          console.warn(`[block-processor] ${fileRelativePath}: ${e}`);
+        }
       }
 
       if (attrs.role === "file") {

src/components/journal/ReactiveVariableManager.tsx

@@ -15,8 +15,11 @@ import { useJournalStream } from "../stores/journalStream";
 
 const TEMPLATE_RE = /\{\{(\$[a-zA-Z_][a-zA-Z0-9_]*)\}\}/g;
 
-/** Tag name used for marker spans — must stay in sync with the scan pass. */
-const MARKER = "data-reactive-var";
+/** Attribute storing the original template text on marker spans. */
+const ATTR_TEMPLATE = "data-reactive-var";
+
+/** Attribute storing pre-computed key list (comma-separated) for fast updates. */
+const ATTR_KEYS = "data-reactive-keys";
 
 export const ReactiveVariableManager: Component = () => {
   const contentDom = useArticleDom();
@@ -32,7 +35,7 @@ export const ReactiveVariableManager: Component = () => {
 
     // Only scan once — after the first scan, the spans exist and we
     // switch to the reactive update effect below.
-    if (dom.querySelector(`[${MARKER}]`)) return;
+    if (dom.querySelector(`[${ATTR_TEMPLATE}]`)) return;
 
     scanAndWrap(dom);
   });
@@ -49,17 +52,14 @@ export const ReactiveVariableManager: Component = () => {
     if (!dom) return;
 
     const v = values();
-    const spans = dom.querySelectorAll<HTMLElement>(`[${MARKER}]`);
+    const spans = dom.querySelectorAll<HTMLElement>(`[${ATTR_TEMPLATE}]`);
 
     for (const span of spans) {
-      const template = span.getAttribute(MARKER) ?? "";
+      const template = span.getAttribute(ATTR_TEMPLATE) ?? "";
+      const keys = span.getAttribute(ATTR_KEYS)?.split(",") ?? [];
       let result = template;
-      TEMPLATE_RE.lastIndex = 0;
-      let m: RegExpExecArray | null;
-      while ((m = TEMPLATE_RE.exec(template)) !== null) {
-        const key = m[1]; // includes $ prefix
-        const resolved = v[key] ?? "";
-        result = result.replace(`{{${key}}}`, resolved);
+      for (const key of keys) {
+        result = result.replaceAll(`{{${key}}}`, v[key] ?? "");
       }
       if (span.textContent !== result) {
         span.textContent = result;
@@ -90,7 +90,8 @@ function scanAndWrap(root: Element): void {
     TEMPLATE_RE.lastIndex = 0;
     if (!TEMPLATE_RE.test(text)) continue;
 
-    // Build replacement HTML: split on {{$key}} and wrap each key span
+    // Build replacement HTML: split on {{$key}}, wrap each match in a span
+    // with pre-computed key for fast updates.
     TEMPLATE_RE.lastIndex = 0;
     const parts: string[] = [];
     let lastIndex = 0;
@@ -99,8 +100,9 @@ function scanAndWrap(root: Element): void {
       if (m.index > lastIndex) {
         parts.push(escapeHtml(text.slice(lastIndex, m.index)));
       }
+      const key = m[1]; // includes $ prefix
       parts.push(
-        `<span ${MARKER}="${escapeAttr(m[0])}">${escapeHtml(m[0])}</span>`,
+        `<span ${ATTR_TEMPLATE}="${escapeAttr(m[0])}" ${ATTR_KEYS}="${escapeAttr(key)}">${escapeHtml(m[0])}</span>`,
       );
       lastIndex = TEMPLATE_RE.lastIndex;
     }
@@ -123,13 +125,13 @@ function scanAndWrap(root: Element): void {
  * Called on cleanup so subsequent remounts get a clean slate.
  */
 function unwrapAll(root: Element): void {
-  const spans = root.querySelectorAll<HTMLElement>(`[${MARKER}]`);
+  const spans = root.querySelectorAll<HTMLElement>(`[${ATTR_TEMPLATE}]`);
   // Process in reverse to avoid DOM mutation issues
   for (let i = spans.length - 1; i >= 0; i--) {
     const span = spans[i];
     const parent = span.parentNode;
     if (!parent) continue;
-    const text = span.getAttribute(MARKER) ?? span.textContent ?? "";
+    const text = span.getAttribute(ATTR_TEMPLATE) ?? span.textContent ?? "";
     span.replaceWith(document.createTextNode(text));
   }
   // Normalize to merge adjacent text nodes

src/components/journal/VariableView.tsx

@@ -90,7 +90,7 @@ const VariableRow: Component<{
 
       {/* Hover popup */}
       <Show when={hasPopup() && hovered()}>
-        <div class="absolute right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-md shadow-lg p-2 min-w-[180px] text-xs">
+        <div class="absolute right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-md shadow-lg p-2 min-w-45 text-xs">
           {/* Declaration expression */}
           <Show when={declExpr()}>
             <div class="mb-1">