fix: wrap synthetic element access with opaque refs in derive

Fixes a bug where element access expressions like `tagCounts[element]`
inside map callbacks weren't being wrapped in derive() calls. The issue
occurred because these expressions are synthetic (created by the
ClosureTransformer) and the dataflow analyzer wasn't properly handling
synthetic element access with dynamic opaque indices.

Changes:
- Extract isStaticElementAccess() helper to share logic between synthetic
  and non-synthetic code paths
- Add proper handling for synthetic element access expressions:
  - Static indices (e.g., element[0]) preserve merged analysis
  - Dynamic indices with opaque refs (e.g., tagCounts[element]) set
    requiresRewrite=true to trigger derive wrapper
- Update test expectations to use original variable names instead of
  _v1, _v2 (matches pattern in other test fixtures)
- Fix HTML-encoded directive in test input file

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mathpirate

packages/ts-transformers/src/ast/dataflow.ts

@@ -199,6 +199,15 @@ export function createDataFlowAnalyzer(
     };
   };
 
+  // Helper: Check if an element access expression has a static (literal) index
+  const isStaticElementAccess = (expression: ts.ElementAccessExpression): boolean => {
+    const argumentExpression = expression.argumentExpression;
+    return argumentExpression !== undefined &&
+      ts.isExpression(argumentExpression) &&
+      (ts.isLiteralExpression(argumentExpression) ||
+        ts.isNoSubstitutionTemplateLiteral(argumentExpression));
+  };
+
   const analyzeExpression = (
     expression: ts.Expression,
     scope: DataFlowScopeInternal,
@@ -467,8 +476,25 @@ export function createDataFlowAnalyzer(
           };
         }
 
-        // For JSX elements, arrow functions, and other expression containers, preserve requiresRewrite from children
-        // This matches the non-synthetic code paths for these node types
+        // Element access expressions: static indices don't need derive wrapping,
+        // but dynamic indices with opaque refs do (e.g., tagCounts[element])
+        if (ts.isElementAccessExpression(expression)) {
+          const isStaticIndex = isStaticElementAccess(expression);
+
+          if (isStaticIndex) {
+            // Static index like element[0] - preserve merged analysis
+            return merged;
+          } else if (merged.containsOpaqueRef) {
+            // Dynamic index with opaque refs - requires derive wrapper
+            return {
+              ...merged,
+              requiresRewrite: true,
+            };
+          }
+          return merged;
+        }
+
+        // JSX elements, arrow functions, and other containers preserve requiresRewrite from children
         if (
           ts.isJsxElement(expression) ||
           ts.isJsxFragment(expression) ||
@@ -747,10 +773,7 @@ export function createDataFlowAnalyzer(
         ? analyzeExpression(argumentExpression, scope, context)
         : emptyAnalysis();
 
-      const isStaticIndex = argumentExpression &&
-        ts.isExpression(argumentExpression) &&
-        (ts.isLiteralExpression(argumentExpression) ||
-          ts.isNoSubstitutionTemplateLiteral(argumentExpression));
+      const isStaticIndex = isStaticElementAccess(expression);
 
       if (isStaticIndex) {
         const result = mergeAnalyses(target, argument);

packages/ts-transformers/test/fixtures/closures/map-element-access-opaque.expected.tsx

@@ -49,7 +49,7 @@ export default recipe({
                 },
                 required: ["element", "params"]
             } as const satisfies __ctHelpers.JSONSchema, ({ element, params: { tagCounts } }) => (<span>
-            {element}: {__ctHelpers.derive({ tagCounts, element }, ({ tagCounts: _v1, element: _v2 }) => _v1[_v2])}
+            {element}: {__ctHelpers.derive({ tagCounts, element }, ({ tagCounts: tagCounts, element: element }) => tagCounts[element])}
           </span>)), { tagCounts: state.tagCounts })}
       </div>),
     };

packages/ts-transformers/test/fixtures/jsx-expressions/element-access-both-opaque.expected.tsx

@@ -7,7 +7,7 @@ export default recipe("ElementAccessBothOpaque", (_state) => {
         [UI]: (<div>
         <h3>Element Access with Both OpaqueRefs</h3>
         {/* Both items and index are OpaqueRefs */}
-        <p>Selected item: {__ctHelpers.derive({ items, index }, ({ items: _v1, index: _v2 }) => _v1[_v2])}</p>
+        <p>Selected item: {__ctHelpers.derive({ items, index }, ({ items: items, index: index }) => items[index])}</p>
       </div>),
     };
 });

packages/ts-transformers/test/fixtures/jsx-expressions/element-access-both-opaque.input.tsx

@@ -1,4 +1,4 @@
-/// <cts-enable />
+/// <cts-enable />
 import { cell, recipe, UI } from "commontools";
 
 export default recipe("ElementAccessBothOpaque", (_state) => {