fix(studio): render complete interactive gallery previews

packages/compiler/test/function-defaults.test.ts

@@ -11,6 +11,42 @@ const source = `component FunctionDefaults {
  }
  view { <button @click="choose()">Choose</button> }
 }`;
+
+test("browser state named pending or values does not collide with commit bookkeeping", () => {
+  const source = `component CommitNames {
+    state pending = "ready"
+    state values = 1
+    state committed = false
+    state __v = 3
+    state __p = false
+    state __c = "safe"
+    functions {
+      shared function status() { return pending + values + __c + __v }
+      client function advance() { pending = "done"; values += 1; committed = true }
+    }
+    view { <button @click="advance()">Advance</button> }
+  }`;
+  const module = generateBrowserModule(parse(source));
+  const functions = new Function(
+    module.replace(/\bexport\s+(?=const|function)/g, "") + ";return __wrnexusClientFunctions;",
+  )();
+  const context = {
+    state: { pending: "ready", values: 1, committed: false, __v: 3, __p: false, __c: "safe" },
+    props: {},
+    batch: (apply: () => void) => apply(),
+  };
+  expect(functions.status(context)).toBe("ready1safe3");
+  functions.advance(context);
+  expect(context.state).toEqual({
+    pending: "done",
+    values: 2,
+    committed: true,
+    __v: 3,
+    __p: false,
+    __c: "safe",
+  });
+  expect(functions.status(context)).toBe("done2safe3");
+});
 test("browser functions retain defaults, prior-argument references and prop references", () => {
   const module = generateBrowserModule(parse(source));
   const functions = new Function(