react-pebble 0.1.0 → 0.2.0

package/scripts/compile-to-piu.ts

@@ -36,18 +36,31 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 // Dynamic example import
 // ---------------------------------------------------------------------------
 
-const exampleName = process.env.EXAMPLE ?? 'watchface';
+const exampleInput = process.env.EXAMPLE ?? 'watchface';
 const settleMs = Number(process.env.SETTLE_MS ?? '0');
 const platform = process.env.PEBBLE_PLATFORM ?? 'emery';
 const settle = () =>
   settleMs > 0 ? new Promise<void>((r) => setTimeout(r, settleMs)) : Promise.resolve();
 
 // Set platform screen dimensions before importing the example
-// (so SCREEN.width/height are correct when the component renders)
 import { _setPlatform, SCREEN } from '../src/platform.js';
 _setPlatform(platform);
 
-const exampleMod = await import(`../examples/${exampleName}.js`);
+// Resolve the entry: could be a bare name (e.g., "watchface") for internal examples,
+// or an absolute/relative path (e.g., "/tmp/my-app/src/App.tsx") for external projects.
+let entryPath: string;
+let exampleName: string;
+if (exampleInput.includes('/') || exampleInput.includes('\\')) {
+  // Absolute or relative path — resolve from cwd
+  entryPath = resolve(exampleInput);
+  exampleName = entryPath.replace(/\.[jt]sx?$/, '').split('/').pop()!;
+} else {
+  // Bare name — look in ../examples/
+  entryPath = resolve(__dirname, '..', 'examples', `${exampleInput}.tsx`);
+  exampleName = exampleInput;
+}
+
+const exampleMod = await import(entryPath);
 const exampleMain: (...args: unknown[]) => ReturnType<typeof render> =
   exampleMod.main ?? exampleMod.default;
 
@@ -65,6 +78,7 @@ function colorToHex(name: string): string {
 }
 
 const FONT_TO_PIU: Record<string, string> = {
+  // Gothic family
   gothic14: '14px Gothic',
   gothic14Bold: 'bold 14px Gothic',
   gothic18: '18px Gothic',
@@ -73,9 +87,25 @@ const FONT_TO_PIU: Record<string, string> = {
   gothic24Bold: 'bold 24px Gothic',
   gothic28: '28px Gothic',
   gothic28Bold: 'bold 28px Gothic',
+  // Bitham family
   bitham30Black: 'black 30px Bitham',
   bitham42Bold: 'bold 42px Bitham',
   bitham42Light: 'light 42px Bitham',
+  bitham34MediumNumbers: '34px Bitham',
+  bitham42MediumNumbers: '42px Bitham',
+  // Roboto family
+  robotoCondensed21: '21px Roboto Condensed',
+  roboto21: '21px Roboto',
+  // Droid Serif
+  droid28: '28px Droid Serif',
+  // LECO family
+  leco20: '20px LECO',
+  leco26: '26px LECO',
+  leco28: '28px LECO',
+  leco32: '32px LECO',
+  leco36: '36px LECO',
+  leco38: '38px LECO',
+  leco42: '42px LECO',
 };
 
 function fontToPiu(name: string | undefined): string {
@@ -165,8 +195,17 @@ const buttonBindings: ButtonBinding[] = [];
  * Parse an example source file into a TypeScript AST SourceFile.
  */
 function parseExampleSource(exName: string): ts.SourceFile | null {
-  for (const ext of ['.tsx', '.ts', '.jsx']) {
-    const srcPath = resolve(__dirname, '..', 'examples', `${exName}${ext}`);
+  // If exName is an absolute path, try it directly
+  if (exName.startsWith('/')) {
+    try {
+      const source = readFileSync(exName, 'utf-8');
+      return ts.createSourceFile(exName, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    } catch { /* fall through to extension search */ }
+  }
+  for (const ext of ['.tsx', '.ts', '.jsx', '']) {
+    const srcPath = exName.startsWith('/')
+      ? `${exName}${ext}`
+      : resolve(__dirname, '..', 'examples', `${exName}${ext}`);
     try {
       const source = readFileSync(srcPath, 'utf-8');
       return ts.createSourceFile(srcPath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
@@ -248,8 +287,8 @@ function buildSetterSlotMap(exName: string): Map<string, number> {
   return map;
 }
 
-const setterSlotMap = buildSetterSlotMap(exampleName);
-const listInfo = detectListPatterns(exampleName);
+const setterSlotMap = buildSetterSlotMap(entryPath);
+const listInfo = detectListPatterns(entryPath);
 if (listInfo) {
   process.stderr.write(`List detected: array="${listInfo.dataArrayName}" visible=${listInfo.visibleCount} labelsPerItem=${listInfo.labelsPerItem}\n`);
   if (listInfo.dataArrayValues) process.stderr.write(`  values: ${JSON.stringify(listInfo.dataArrayValues)}\n`);
@@ -298,9 +337,27 @@ function detectUseMessage(exName: string): MessageInfo | null {
   return { key, mockDataArrayName };
 }
 
-const messageInfo = detectUseMessage(exampleName);
+const messageInfo = detectUseMessage(entryPath);
 if (messageInfo) {
   process.stderr.write(`useMessage detected: key="${messageInfo.key}"${messageInfo.mockDataArrayName ? ` mockData=${messageInfo.mockDataArrayName}` : ''}\n`);
+
+  // Extract the mock data value from the source so the plugin can generate phone-side JS
+  if (messageInfo.mockDataArrayName) {
+    const sf = parseExampleSource(entryPath);
+    if (sf) {
+      walkAST(sf, (node) => {
+        if (
+          ts.isVariableDeclaration(node) &&
+          ts.isIdentifier(node.name) &&
+          node.name.text === messageInfo.mockDataArrayName &&
+          node.initializer
+        ) {
+          const mockDataSource = node.initializer.getText(sf);
+          process.stderr.write(`mockDataValue=${mockDataSource}\n`);
+        }
+      });
+    }
+  }
 }
 
 /** Module-level map collecting string enum values per slot from handler analysis */
@@ -385,6 +442,32 @@ function analyzeSetterCall(call: ts.CallExpression, sf: ts.SourceFile): HandlerA
     if (ts.isPrefixUnaryExpression(body) && body.operator === ts.SyntaxKind.ExclamationToken) {
       return { type: 'toggle', slotIndex, value: 0 };
     }
+    // param => Math.min(param + N, max)  (clamped increment)
+    // param => Math.max(param - N, min)  (clamped decrement)
+    if (ts.isCallExpression(body) && ts.isPropertyAccessExpression(body.expression)) {
+      const obj = body.expression.expression;
+      const method = body.expression.name.text;
+      if (ts.isIdentifier(obj) && obj.text === 'Math' && body.arguments.length === 2) {
+        const [a0, a1] = [body.arguments[0]!, body.arguments[1]!];
+        if (method === 'min' && ts.isBinaryExpression(a0)) {
+          if (a0.operatorToken.kind === ts.SyntaxKind.PlusToken && ts.isNumericLiteral(a0.right)) {
+            return { type: 'increment', slotIndex, value: Number(a0.right.text) };
+          }
+        }
+        if (method === 'max' && ts.isBinaryExpression(a0)) {
+          if (a0.operatorToken.kind === ts.SyntaxKind.MinusToken && ts.isNumericLiteral(a0.right)) {
+            return { type: 'decrement', slotIndex, value: Number(a0.right.text) };
+          }
+        }
+      }
+    }
+    // param => (param + N) % M  (modular increment)
+    if (ts.isBinaryExpression(body) && body.operatorToken.kind === ts.SyntaxKind.PercentToken) {
+      const left = ts.isParenthesizedExpression(body.left) ? body.left.expression : body.left;
+      if (ts.isBinaryExpression(left) && left.operatorToken.kind === ts.SyntaxKind.PlusToken && ts.isNumericLiteral(left.right)) {
+        return { type: 'increment', slotIndex, value: Number(left.right.text) };
+      }
+    }
   }
 
   return null;
@@ -564,6 +647,15 @@ function detectListPatterns(exName: string): ListInfo | null {
 // Emit context
 // ---------------------------------------------------------------------------
 
+interface ElementPos {
+  type: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  radius?: number;
+}
+
 interface EmitContext {
   skins: Map<string, string>;
   styles: Map<string, string>;
@@ -576,6 +668,10 @@ interface EmitContext {
   labelTexts: Map<number, string>;
   /** Map from rect sequential index → its fill color name */
   rectFills: Map<number, string>;
+  /** Sequential index for all positioned elements (circles, rects) */
+  elemIdx: number;
+  /** Map from element sequential index → its position at this render */
+  elementPositions: Map<number, ElementPos>;
 }
 
 function ensureSkin(ctx: EmitContext, fill: string): string {
@@ -610,6 +706,7 @@ interface ConditionalChild {
 }
 const conditionalChildren: ConditionalChild[] = [];
 let emitConditionals = false; // Only wrap conditionals during final emit
+const animatedElemNames = new Set<number>(); // Element indices that need names for animation
 let conditionalDepth = 0; // Track nesting — only wrap at depth 1 (root Group's children)
 
 // Emit piu tree
@@ -692,10 +789,14 @@ function emitNode(
       // Track rect fill for skin reactivity detection
       const rectIdx = ctx.rectIdx++;
       ctx.rectFills.set(rectIdx, fill);
+      // Track rect position for animation keyframing
+      const rEIdx = ctx.elemIdx++;
+      ctx.elementPositions.set(rEIdx, { type: 'rect', left: x, top: y, width: w, height: h });
 
-      // If this rect has a dynamic skin, give it a name
+      // If this rect has a dynamic skin or animated position, give it a name
       const isSkinDynamic = skinDeps?.has(rectIdx) ?? false;
-      const nameProp = isSkinDynamic ? `, name: "sr${rectIdx}"` : '';
+      const isAnimated = animatedElemNames.has(rEIdx);
+      const nameProp = isSkinDynamic ? `, name: "sr${rectIdx}"` : isAnimated ? `, name: "ae${rEIdx}"` : '';
 
       // Use constraint-based layout when dimensions match screen size
       // (so the output adapts to any screen at runtime)
@@ -779,7 +880,10 @@ function emitNode(
       const skinVar = ensureSkin(ctx, fill);
       // piu RoundRect with radius = r draws a circle when width = height = 2*r
       const size = r * 2;
-      return `${indent}new RoundRect(null, { left: ${cx}, top: ${cy}, width: ${size}, height: ${size}, radius: ${r}, skin: ${skinVar} })`;
+      const eIdx = ctx.elemIdx++;
+      ctx.elementPositions.set(eIdx, { type: 'circle', left: cx, top: cy, width: size, height: size, radius: r });
+      const animName = animatedElemNames.has(eIdx) ? `, name: "ae${eIdx}"` : '';
+      return `${indent}new RoundRect(null, { left: ${cx}, top: ${cy}, width: ${size}, height: ${size}, radius: ${r}, skin: ${skinVar}${animName} })`;
     }
 
     default:
@@ -827,7 +931,7 @@ function buildSizeProps(x: number, y: number, w: number, h: number): string {
 // Time format inference
 // ---------------------------------------------------------------------------
 
-type TimeFormat = 'HHMM' | 'SS' | 'DATE';
+type TimeFormat = 'HHMM' | 'MMSS' | 'SS' | 'DATE';
 
 function inferTimeFormat(textAtT1: string, t1: Date): TimeFormat | null {
   const hh = pad2(t1.getHours());
@@ -840,6 +944,7 @@ function inferTimeFormat(textAtT1: string, t1: Date): TimeFormat | null {
   ];
 
   if (textAtT1 === `${hh}:${mm}`) return 'HHMM';
+  if (textAtT1 === `${mm}:${ss}`) return 'MMSS';
   if (textAtT1 === ss) return 'SS';
   if (
     textAtT1.includes(days[t1.getDay()]!) &&
@@ -854,6 +959,8 @@ function emitTimeExpr(fmt: TimeFormat): string {
   switch (fmt) {
     case 'HHMM':
       return 'pad(d.getHours()) + ":" + pad(d.getMinutes())';
+    case 'MMSS':
+      return 'pad(d.getMinutes()) + ":" + pad(d.getSeconds())';
     case 'SS':
       return 'pad(d.getSeconds())';
     case 'DATE':
@@ -879,7 +986,7 @@ let listScrollSlotIndex = -1;
 
 // Install interceptors BEFORE any rendering
 installUseStateInterceptor();
-extractButtonBindingsFromSource(exampleName);
+extractButtonBindingsFromSource(entryPath);
 
 // Create BOTH test dates with the REAL Date before any mocking.
 const OrigDate = globalThis.Date;
@@ -918,6 +1025,8 @@ const ctx1: EmitContext = {
   labelTexts: new Map(),
   rectIdx: 0,
   rectFills: new Map(),
+  elemIdx: 0,
+  elementPositions: new Map(),
 };
 emitNode(app1._root, ctx1, '', null, null);
 const t1Texts = new Map(ctx1.labelTexts);
@@ -933,7 +1042,7 @@ for (const b of buttonBindings) {
 // Perturbation pipeline — discover state-dependent labels
 // ---------------------------------------------------------------------------
 
-const stateDeps = new Map<number, { slotIndex: number; formatExpr: string }>();
+const stateDeps = new Map<number, { slotIndex: number; formatExpr: string; needsTime?: boolean }>();
 const skinDeps = new Map<number, { slotIndex: number; skins: [string, string] }>();
 
 // Branch info: when tree structure changes between baseline and perturbed,
@@ -1059,6 +1168,8 @@ for (const slot of stateSlots) {
       labelTexts: new Map(),
       rectIdx: 0,
       rectFills: new Map(),
+      elemIdx: 0,
+      elementPositions: new Map(),
     };
     emitNode(appP._root, ctxP, '', null, null);
 
@@ -1077,8 +1188,23 @@ for (const slot of stateSlots) {
           if (String(perturbedValue) === pertText) {
             formatExpr = `"" + this.s${slot.index}`;
           } else if (typeof slot.initialValue === 'boolean') {
-            // Boolean state produced different text — emit a ternary
-            formatExpr = `this.s${slot.index} ? "${pertText.replace(/"/g, '\\"')}" : "${baseText.replace(/"/g, '\\"')}"`;
+            // Boolean state produced different text — emit a ternary.
+            // If the perturbed text looks like a time format, emit a live
+            // time expression instead of a frozen compile-time snapshot.
+            const pertTimeFmt = inferTimeFormat(pertText, T1);
+            if (pertTimeFmt && (pertTimeFmt === 'MMSS' || pertTimeFmt === 'HHMM')) {
+              // State toggles between static text and live time.
+              // Emit elapsed-time tracking: capture start time when toggled on,
+              // compute elapsed seconds in refresh().
+              formatExpr = `this.s${slot.index} ? (function(e) { return pad(Math.floor(e / 60)) + ":" + pad(e % 60); })(Math.floor((Date.now() - this._startTime_s${slot.index}) / 1000)) : "${baseText.replace(/"/g, '\\"')}"`;
+              stateDeps.set(idx, { slotIndex: slot.index, formatExpr, needsTime: true });
+              process.stderr.write(
+                `  Label ${idx} depends on state slot ${slot.index} (base="${baseText}", perturbed=ELAPSED:${pertTimeFmt})\n`,
+              );
+              continue; // skip the default stateDeps.set below
+            } else {
+              formatExpr = `this.s${slot.index} ? "${pertText.replace(/"/g, '\\"')}" : "${baseText.replace(/"/g, '\\"')}"`;
+            }
           } else {
             formatExpr = `"" + this.s${slot.index}`;
           }
@@ -1220,6 +1346,7 @@ if (listInfo) {
         skins: new Map(), styles: new Map(), declarations: [],
         skinIdx: 0, styleIdx: 0, labelIdx: 0, labelTexts: new Map(),
         rectIdx: 0, rectFills: new Map(),
+        elemIdx: 0, elementPositions: new Map(),
       };
       emitNode(appScroll._root, ctxScroll, '', null, null);
 
@@ -1245,6 +1372,20 @@ if (listInfo) {
     for (const idx of keep) listSlotLabels.add(idx);
   }
 
+  // For message-driven lists without scroll buttons, identify list labels
+  // from the template by matching the expected label count. The last
+  // (visibleCount × labelsPerItem) labels in the T1 render are the list items.
+  if (listSlotLabels.size === 0 && messageInfo && listInfo) {
+    const expectedSlots = listInfo.visibleCount * listInfo.labelsPerItem;
+    const allLabels = [...t1Texts.keys()].sort((a, b) => a - b);
+    // Take the last expectedSlots labels (list items come after headers)
+    const listLabels = allLabels.slice(-expectedSlots);
+    for (const idx of listLabels) {
+      listSlotLabels.add(idx);
+    }
+    process.stderr.write(`Message-driven list labels (inferred): [${[...listSlotLabels].join(', ')}]\n`);
+  }
+
   if (listSlotLabels.size > 0) {
     process.stderr.write(`List slot labels: [${[...listSlotLabels].join(', ')}]\n`);
   }
@@ -1283,6 +1424,8 @@ const ctx2: EmitContext = {
   labelTexts: new Map(),
   rectIdx: 0,
   rectFills: new Map(),
+  elemIdx: 0,
+  elementPositions: new Map(),
 };
 emitNode(app2._root, ctx2, '', null, null);
 const t2Texts = new Map(ctx2.labelTexts);
@@ -1316,6 +1459,105 @@ process.stderr.write(
     .join(', ')}\n`,
 );
 
+// --- Keyframe pass: detect animated positions/sizes ---
+// Compare element positions between T1 and T2 to find elements that move.
+// For those elements, render at 60 time points (one per second over 1 minute)
+// and build keyframe arrays for position updates in onTimeChanged.
+
+interface AnimatedElement {
+  elemIdx: number;
+  prop: 'top' | 'width' | 'height' | 'radius';
+  keyframes: number[]; // 60 values (one per second)
+}
+
+const animatedElements: AnimatedElement[] = [];
+const t1Positions = ctx1.elementPositions;
+const t2Positions = ctx2.elementPositions;
+
+// Find elements with changed positions between T1 and T2
+const changedElems = new Set<number>();
+for (const [idx, pos1] of t1Positions) {
+  const pos2 = t2Positions.get(idx);
+  if (!pos2) continue;
+  if (pos1.top !== pos2.top || pos1.width !== pos2.width ||
+      pos1.height !== pos2.height || (pos1.radius !== undefined && pos1.radius !== pos2.radius)) {
+    changedElems.add(idx);
+  }
+}
+
+if (changedElems.size > 0) {
+  process.stderr.write(`Found ${changedElems.size} animated element(s), sampling keyframes...\n`);
+
+  // Sample 60 keyframes (one per second)
+  const keyframeData = new Map<number, Map<string, number[]>>(); // elemIdx → prop → values[]
+
+  for (let s = 0; s < 60; s++) {
+    const mockTime = new OrigDate(T1.getFullYear(), T1.getMonth(), T1.getDate(),
+      T1.getHours(), s, s, 0); // vary both minutes and seconds
+    // Actually set minute = T1.minute, second = s
+    const kfTime = new OrigDate(T1.getFullYear(), T1.getMonth(), T1.getDate(),
+      T1.getHours(), T1.getMinutes(), s, 0);
+
+    (globalThis as unknown as { Date: unknown }).Date = class MockDateKF extends OrigDate {
+      constructor() { super(); return kfTime; }
+      static now() { return kfTime.getTime(); }
+    };
+
+    forcedStateValues.clear();
+    resetStateTracking();
+    silence();
+    const appKF = exampleMain();
+    restore();
+
+    if (appKF) {
+      const ctxKF: EmitContext = {
+        skins: new Map(), styles: new Map(), declarations: [],
+        skinIdx: 0, styleIdx: 0, labelIdx: 0, labelTexts: new Map(),
+        rectIdx: 0, rectFills: new Map(),
+        elemIdx: 0, elementPositions: new Map(),
+      };
+      emitNode(appKF._root, ctxKF, '', null, null);
+
+      for (const eIdx of changedElems) {
+        const pos = ctxKF.elementPositions.get(eIdx);
+        if (!pos) continue;
+        if (!keyframeData.has(eIdx)) keyframeData.set(eIdx, new Map());
+        const props = keyframeData.get(eIdx)!;
+        for (const prop of ['top', 'width', 'height', 'radius'] as const) {
+          const val = pos[prop];
+          if (val === undefined) continue;
+          if (!props.has(prop)) props.set(prop, []);
+          props.get(prop)!.push(val);
+        }
+      }
+      appKF.unmount();
+    }
+  }
+
+  (globalThis as unknown as { Date: typeof Date }).Date = OrigDate;
+
+  // Build AnimatedElement entries for props that actually change
+  for (const [eIdx, props] of keyframeData) {
+    for (const [prop, values] of props) {
+      const allSame = values.every(v => v === values[0]);
+      if (!allSame) {
+        animatedElements.push({
+          elemIdx: eIdx,
+          prop: prop as AnimatedElement['prop'],
+          keyframes: values,
+        });
+      }
+    }
+  }
+
+  process.stderr.write(`  Animated properties: ${animatedElements.map(a => `e${a.elemIdx}.${a.prop}`).join(', ')}\n`);
+
+  // Mark elements for naming in the final emit pass
+  for (const ae of animatedElements) {
+    animatedElemNames.add(ae.elemIdx);
+  }
+}
+
 // --- Final render at T1 for the emitted static snapshot ---
 (globalThis as unknown as { Date: unknown }).Date = class MockDate3 extends OrigDate {
   constructor() {
@@ -1351,6 +1593,8 @@ const ctx: EmitContext = {
   labelTexts: new Map(),
   rectIdx: 0,
   rectFills: new Map(),
+  elemIdx: 0,
+  elementPositions: new Map(),
 };
 
 let contents: string | null;
@@ -1417,8 +1661,10 @@ if (branchInfos.length > 0) {
   }
   contents = branchLines.join(',\n');
 } else {
-  // No structural branches — emit the single tree as before
-  emitConditionals = true;
+  // No structural branches — emit the single tree as before.
+  // For message-driven apps, skip conditionals since the UI starts with
+  // mock data visible and labels get updated in-place by the Message handler.
+  emitConditionals = !messageInfo;
   contents = emitNode(appFinal._root, ctx, '    ', dynamicLabels, stateDeps, skinDeps);
 }
 appFinal.unmount();
@@ -1445,11 +1691,13 @@ for (const binding of buttonBindings) {
 }
 
 // --- Emit piu output ---
-const hasTimeDeps = dynamicLabels.size > 0;
+const stateNeedsTime = [...stateDeps.values()].some(d => d.needsTime);
+const hasAnimatedElements = animatedElements.length > 0;
+const hasTimeDeps = dynamicLabels.size > 0 || stateNeedsTime || hasAnimatedElements;
 const hasStateDeps = stateDeps.size > 0;
 const hasButtons = buttonActions.length > 0;
 const hasBranches = branchInfos.length > 0;
-const hasConditionals = conditionalChildren.length > 0;
+const hasConditionals = conditionalChildren.length > 0 && !messageInfo;
 const hasSkinDeps = skinDeps.size > 0;
 const hasList = listInfo !== null && listSlotLabels.size > 0;
 const hasBehavior = hasTimeDeps || hasStateDeps || hasButtons || hasBranches || hasSkinDeps || hasList || hasConditionals;
@@ -1479,6 +1727,14 @@ lines.push(
   '',
 );
 
+// Emit keyframe arrays for animated elements
+if (hasAnimatedElements) {
+  for (const ae of animatedElements) {
+    lines.push(`const _kf_e${ae.elemIdx}_${ae.prop} = [${ae.keyframes.join(',')}];`);
+  }
+  lines.push('');
+}
+
 if (hasTimeDeps) {
   lines.push('function pad(n) { return n < 10 ? "0" + n : "" + n; }');
   lines.push(
@@ -1528,6 +1784,13 @@ if (hasBehavior) {
     lines.push(`    this.s${slot.index} = ${JSON.stringify(v)};`);
   }
 
+  // Elapsed-time start markers for state+time hybrid labels
+  for (const [, dep] of stateDeps) {
+    if (dep.needsTime) {
+      lines.push(`    this._startTime_s${dep.slotIndex} = Date.now();`);
+    }
+  }
+
   // Time-dependent label refs
   for (const [idx] of labelFormats) {
     lines.push(`    this.tl${idx} = c.content("tl${idx}");`);
@@ -1543,6 +1806,12 @@ if (hasBehavior) {
     lines.push(`    this.sr${rIdx} = c.content("sr${rIdx}");`);
   }
 
+  // Animated element refs
+  const animElemIndices = [...new Set(animatedElements.map(a => a.elemIdx))];
+  for (const eIdx of animElemIndices) {
+    lines.push(`    this.ae${eIdx} = c.content("ae${eIdx}");`);
+  }
+
   // Branch container refs (for structural conditional rendering)
   for (const [si, branches] of branchesBySlot ?? []) {
     for (let bi = 0; bi < branches.length; bi++) {
@@ -1550,8 +1819,8 @@ if (hasBehavior) {
     }
   }
 
-  // Per-subtree conditional refs
-  for (const cc of conditionalChildren) {
+  // Per-subtree conditional refs (skipped for message-driven apps)
+  if (hasConditionals) for (const cc of conditionalChildren) {
     if (cc.type === 'removed') {
       const name = `cv_s${cc.stateSlot}_${cc.childIndex}`;
       lines.push(`    this.${name} = c.content("${name}");`);
@@ -1606,30 +1875,52 @@ if (hasBehavior) {
     lines.push(`        if (json) {`);
     lines.push(`          try {`);
     lines.push(`            _data = JSON.parse(json);`);
-    // Toggle: show loaded branches (v0 = baseline = loaded), hide loading (v1)
-    for (const [si, branches] of branchesBySlot ?? []) {
-      for (let bi = 0; bi < branches.length; bi++) {
-        lines.push(`            self.br_s${si}_v${bi}.visible = ${bi === 0 ? 'true' : 'false'};`);
+    // Toggle visibility: show loaded content, hide loading state
+    if (branchesBySlot && branchesBySlot.size > 0) {
+      // Structural branches: toggle br_s*_v* containers
+      for (const [si, branches] of branchesBySlot) {
+        for (let bi = 0; bi < branches.length; bi++) {
+          lines.push(`            self.br_s${si}_v${bi}.visible = ${bi === 0 ? 'true' : 'false'};`);
+        }
       }
     }
+    // Determine the content root for finding list labels
+    const contentRoot = (branchesBySlot && branchesBySlot.size > 0)
+      ? `self.br_s${[...branchesBySlot.keys()][0]}_v0.first`
+      : 'app.first';
     // Update list labels from parsed data
-    if (listInfo && listInfo.labelsPerItem > 1 && listInfo.propertyOrder) {
+    if (listInfo && listInfo.labelsPerItem > 1) {
       const lpi = listInfo.labelsPerItem;
       const vc = listInfo.visibleCount;
-      lines.push(`            const c = self.br_s${[...branchesBySlot.keys()][0]}_v0.first;`);
+      const props = listInfo.propertyOrder;
+      lines.push(`            const c = ${contentRoot};`);
       for (let i = 0; i < vc; i++) {
         lines.push(`            const g${i} = c.content("lg${i}");`);
         for (let j = 0; j < lpi; j++) {
-          const prop = listInfo.propertyOrder[j]!;
-          lines.push(`            if (g${i}) { const l = g${i}.content("ls${i}_${j}"); if (l) l.string = _data[${i}] ? _data[${i}].${prop} : ""; }`);
+          // Use property name if known, otherwise access by Object.values
+          const accessor = props ? `_data[${i}].${props[j]}` : `Object.values(_data[${i}] || {})[${j}]`;
+          lines.push(`            if (g${i}) { const l = g${i}.content("ls${i}_${j}"); if (l) l.string = _data[${i}] ? ${accessor} || "" : ""; }`);
         }
       }
     } else if (listInfo) {
       const vc = listInfo.visibleCount;
-      lines.push(`            const c = self.br_s${[...branchesBySlot.keys()][0]}_v0.first;`);
+      lines.push(`            const c = ${contentRoot};`);
       for (let i = 0; i < vc; i++) {
         lines.push(`            const l${i} = c.content("ls${i}"); if (l${i}) l${i}.string = _data[${i}] || "";`);
       }
+    } else {
+      // Non-list message data: update state-dependent labels
+      // The received data replaces the loading state — toggle conditionals
+      for (const cc of conditionalChildren) {
+        if (cc.type === 'removed') {
+          const name = `cv_s${cc.stateSlot}_${cc.childIndex}`;
+          lines.push(`            if (self.${name}) self.${name}.visible = true;`);
+        }
+      }
+      // Update any state-dependent labels with data values
+      for (const [idx, dep] of stateDeps) {
+        lines.push(`            if (self.sl${idx}) self.sl${idx}.string = JSON.stringify(_data);`);
+      }
     }
     lines.push(`          } catch (e) { console.log("Parse error: " + e.message); }`);
     lines.push(`        }`);
@@ -1673,9 +1964,16 @@ if (hasBehavior) {
         case 'reset':
           stmt = `this.s${action.slotIndex} = ${action.value}; this.refresh();`;
           break;
-        case 'toggle':
-          stmt = `this.s${action.slotIndex} = !this.s${action.slotIndex}; this.refresh();`;
+        case 'toggle': {
+          // Check if any state-dependent label needs elapsed time tracking for this slot
+          const needsElapsed = [...stateDeps.values()].some(d => d.slotIndex === action.slotIndex && d.needsTime);
+          if (needsElapsed) {
+            stmt = `this.s${action.slotIndex} = !this.s${action.slotIndex}; if (this.s${action.slotIndex}) this._startTime_s${action.slotIndex} = Date.now(); this.refresh();`;
+          } else {
+            stmt = `this.s${action.slotIndex} = !this.s${action.slotIndex}; this.refresh();`;
+          }
           break;
+        }
         case 'set_string':
           stmt = `this.s${action.slotIndex} = "${action.stringValue}"; this.refresh();`;
           break;
@@ -1707,8 +2005,8 @@ if (hasBehavior) {
       lines.push(`    this.sr${rIdx}.skin = (this.s${dep.slotIndex} !== ${JSON.stringify(slot?.initialValue)}) ? ${pertSkinVar} : ${baseSkinVar};`);
     }
   }
-  // Per-subtree conditional visibility
-  for (const cc of conditionalChildren) {
+  // Per-subtree conditional visibility (skipped for message-driven apps)
+  if (hasConditionals) for (const cc of conditionalChildren) {
     if (cc.type === 'removed') {
       const name = `cv_s${cc.stateSlot}_${cc.childIndex}`;
       lines.push(`    this.${name}.visible = !!this.s${cc.stateSlot};`);
@@ -1747,6 +2045,19 @@ if (hasBehavior) {
     }
     lines.push(`    }`);
   }
+  // Animated element position/size updates from keyframe tables
+  if (hasAnimatedElements) {
+    lines.push('    const _s = d.getSeconds();');
+    for (const ae of animatedElements) {
+      const propMap: Record<string, string> = {
+        top: 'y', width: 'width', height: 'height', radius: 'radius',
+      };
+      // piu Content uses .moveBy() or direct property access
+      // For top: use .y property; for width/height: .width/.height
+      const piuProp = propMap[ae.prop] ?? ae.prop;
+      lines.push(`    this.ae${ae.elemIdx}.${piuProp} = _kf_e${ae.elemIdx}_${ae.prop}[_s];`);
+    }
+  }
   lines.push('  }');
 
   // refreshList — separate from refresh() for Message-driven data updates