@adriansteffan/reactive 0.0.43 → 0.1.0

package/dist/{web-B1hJOwit.js → web-DUIQX1PV.js}

@@ -1,4 +1,4 @@
-import { W as P, b as x, E } from "./mod-D6W3wq3h.js";
+import { W as P, b as x, E } from "./mod-D9lwPIrH.js";
 function m(w) {
   const e = w.split("/").filter((t) => t !== "."), r = [];
   return e.forEach((t) => {

package/dist/{web-BYSmfdtR.js → web-DXP3LAJm.js}

@@ -1,4 +1,4 @@
-import { W as e } from "./mod-D6W3wq3h.js";
+import { W as e } from "./mod-D9lwPIrH.js";
 class s extends e {
   async enable() {
     console.log("Immersive mode is only available on Android");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adriansteffan/reactive",
-  "version": "0.0.43",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/canvasblock.tsx

@@ -4,14 +4,37 @@ import { useRef, useEffect, useMemo, useCallback } from 'react';
 
 import {
   compileTimeline,
+  advanceToNextContent,
+  applyMetadata,
   TimelineItem,
   UnifiedBytecodeInstruction,
   ExecuteContentInstruction,
   Store,
-  RefinedTrialData,
+  TrialResult,
   CanvasResultData,
 } from '../utils/bytecode';
 import { BaseComponentProps, isFullscreen, now } from '../utils/common';
+import { registerSimulation, ParticipantState } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('CanvasBlock', 'canvas', (item) => {
+  const responseData = item.responseData;
+  if (Array.isArray(responseData)) {
+    return responseData.map((i) => ({ block: item.name, ...i }));
+  }
+  return [];
+});
+
+export type SlideSimulatorResult = {
+  key: string | null;
+  reactionTime: number | null;
+  participantState: ParticipantState;
+};
+
+export type SlideSimulator = (
+  slide: Record<string, any>,
+  participant: ParticipantState,
+) => SlideSimulatorResult;
 
 interface CanvasSlide {
   draw: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
@@ -23,11 +46,12 @@ interface CanvasSlide {
   allowedKeys?: string[] | boolean;
   metadata?:
     | Record<string, any>
-    | ((data?: RefinedTrialData[], store?: Store) => Record<string, any>);
+    | ((data?: TrialResult[], store?: Store) => Record<string, any>);
   nestMetadata?: boolean;
+  simulate?: SlideSimulator;
 }
 
-type DynamicCanvasSlideGenerator = (data: RefinedTrialData[], store: Store) => CanvasSlide;
+type DynamicCanvasSlideGenerator = (data: TrialResult[], store: Store) => CanvasSlide;
 
 function isDynamicCanvasSlideGenerator(content: any): content is DynamicCanvasSlideGenerator {
   return typeof content === 'function';
@@ -62,7 +86,7 @@ export default function CanvasBlock({
   const isDrawingVisibleRef = useRef<boolean>(true);
   const responseRegisteredRef = useRef<null | Record<string, any>>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const dataRef = useRef<RefinedTrialData[]>([]);
+  const dataRef = useRef<TrialResult[]>([]);
   const storeRef = useRef<Store>(store ?? {});
   const animationFrameRef = useRef<number | null>(null);
   const contentInstructionsCompletedRef = useRef(0);
@@ -227,74 +251,41 @@ export default function CanvasBlock({
   }, [instructions, resolveSlideContent, clearCanvas]);
 
   const processControlFlow = useCallback(() => {
-    let foundContentToExecute = false;
     if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
     animationFrameRef.current = null;
 
-    while (!foundContentToExecute && instructionPointerRef.current < instructions.length) {
-      const currentInstruction = instructions[instructionPointerRef.current];
-
-      switch (currentInstruction.type) {
-        case 'IfGoto':
-          if (currentInstruction.cond(storeRef.current, dataRef.current)) {
-            const markerIndex = markers[currentInstruction.marker];
-            if (markerIndex !== undefined) {
-              instructionPointerRef.current = markerIndex;
-            } else {
-              console.error(`Marker ${currentInstruction.marker} not found`);
-              instructionPointerRef.current++;
-            }
-          } else {
-            instructionPointerRef.current++;
-          }
-          continue;
-
-        case 'UpdateStore': {
-          storeRef.current = {
-            ...storeRef.current,
-            ...currentInstruction.fun(storeRef.current, dataRef.current),
-          };
-          instructionPointerRef.current++;
-          continue;
-        }
-        case 'ExecuteContent': {
-          foundContentToExecute = true;
-          if (canvasRef.current) {
-            const currentSlide = resolveSlideContent(currentInstruction);
-            if (currentSlide) {
-              drawSlideInternal(currentSlide);
-              const displayDuration = currentSlide.displayDuration ?? Infinity;
-              const responseTimeLimit = currentSlide.responseTimeLimit ?? Infinity;
-              if (displayDuration !== Infinity || responseTimeLimit !== Infinity) {
-                animationFrameRef.current = requestAnimationFrame(tick);
-              }
-            } else {
-              console.error(
-                'Failed to resolve slide content during control flow:',
-                currentInstruction,
-              );
-              instructionPointerRef.current++;
-              foundContentToExecute = false;
-              continue;
-            }
-          } else {
-            console.error('Canvas element not found during control flow.');
-            return;
-          }
-          break;
-        }
-        default:
-          console.warn('Unknown instruction type during control flow:', currentInstruction);
-          instructionPointerRef.current++;
-          continue;
-      }
-    }
+    const pointer = advanceToNextContent(
+      { instructions, markers },
+      instructionPointerRef.current,
+      () => storeRef.current,
+      () => dataRef.current,
+      (s) => { storeRef.current = s; },
+    );
+    instructionPointerRef.current = pointer;
 
-    if (!foundContentToExecute && instructionPointerRef.current >= instructions.length) {
-      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
+    if (pointer >= instructions.length) {
       updateStore(storeRef.current);
       next(dataRef.current);
+      return;
+    }
+
+    if (!canvasRef.current) {
+      console.error('Canvas element not found during control flow.');
+      return;
+    }
+
+    const currentSlide = resolveSlideContent(instructions[pointer]);
+    if (currentSlide) {
+      drawSlideInternal(currentSlide);
+      const displayDuration = currentSlide.displayDuration ?? Infinity;
+      const responseTimeLimit = currentSlide.responseTimeLimit ?? Infinity;
+      if (displayDuration !== Infinity || responseTimeLimit !== Infinity) {
+        animationFrameRef.current = requestAnimationFrame(tick);
+      }
+    } else {
+      console.error('Failed to resolve slide content during control flow:', instructions[pointer]);
+      instructionPointerRef.current++;
+      processControlFlow();
     }
   }, [instructions, markers, resolveSlideContent, drawSlideInternal, tick, next]);
 
@@ -326,14 +317,7 @@ export default function CanvasBlock({
         reactionTime: responseData ? responseData.reactionTime : null,
       } as CanvasResultData;
 
-      const metadata =
-        typeof slide.metadata === 'function'
-          ? slide.metadata(dataRef.current, storeRef.current)
-          : slide.metadata;
-
-      if (slide.nestMetadata) {
-        trialData = { ...trialData, metadata: metadata };
-      } else trialData = { ...metadata, ...trialData };
+      trialData = applyMetadata(trialData, slide, dataRef.current, storeRef.current);
 
       dataRef.current.push(trialData);
     }
@@ -524,3 +508,70 @@ export default function CanvasBlock({
     </div>
   );
 }
+
+// --- Default simulator ---
+
+registerSimulation('CanvasBlock', (trialProps, experimentState, simulators, participant) => {
+  const timeline = trialProps.timeline;
+  if (!timeline) return { responseData: [], participantState: participant };
+
+  const bytecode = compileTimeline(timeline);
+  const innerData: CanvasResultData[] = [];
+  let innerStore: Store = { ...(experimentState.store || {}) };
+  let currentTime = 0;
+  let slideNumber = 0;
+
+  const getStore = () => innerStore;
+  const getData = () => innerData as TrialResult[];
+  const onUpdateStore = (s: Store) => { innerStore = s; };
+
+  let pointer = advanceToNextContent(bytecode, 0, getStore, getData, onUpdateStore);
+
+  while (pointer < bytecode.instructions.length) {
+    let slide = (bytecode.instructions[pointer] as ExecuteContentInstruction).content;
+    if (typeof slide === 'function') slide = slide(innerData, innerStore);
+
+    const sim = slide.simulate || simulators.respondToSlide;
+    const result = sim(slide, participant);
+    participant = result.participantState;
+
+    if (!slide.ignoreData) {
+      const duration = slide.displayDuration || result.reactionTime || 1000;
+
+      let td: CanvasResultData = {
+        index: pointer,
+        trialNumber: slideNumber,
+        start: currentTime,
+        end: currentTime + duration,
+        duration,
+        key: result.key,
+        reactionTime: result.reactionTime,
+      };
+
+      td = applyMetadata(td, slide, innerData, innerStore);
+
+      innerData.push(td);
+      currentTime += duration;
+    }
+
+    slideNumber++;
+    pointer = advanceToNextContent(bytecode, pointer + 1, getStore, getData, onUpdateStore);
+  }
+
+  return { responseData: innerData, participantState: participant, storeUpdates: innerStore, duration: currentTime };
+}, {
+  respondToSlide: (slide: any, participant: any) => {
+    const keys = slide.allowedKeys;
+    if (keys === true) {
+      return { key: ' ', reactionTime: 200 + Math.random() * 600, participantState: participant };
+    }
+    if (Array.isArray(keys) && keys.length > 0) {
+      return {
+        key: keys[Math.floor(Math.random() * keys.length)],
+        reactionTime: 200 + Math.random() * 600,
+        participantState: participant,
+      };
+    }
+    return { key: null, reactionTime: null, participantState: participant };
+  },
+});

package/src/components/checkdevice.tsx

@@ -1,5 +1,23 @@
 import { BaseComponentProps } from '../mod';
 import { useEffect, useRef, useState } from 'react';
+import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('CheckDevice', 'session');
+
+registerSimulation('CheckDevice', (_trialProps, _experimentState, _simulators, participant) => {
+  const deviceInfo = {
+    windowWidth: 1920, windowHeight: 1080, screenWidth: 1920, screenHeight: 1080,
+    browser: 'Simulated', browserVersion: '1.0', isMobile: false,
+    operatingSystem: 'Simulated', hasWebAudio: true, hasFullscreen: true,
+    hasWebcam: true, hasMicrophone: true,
+  };
+  return {
+    responseData: deviceInfo,
+    participantState: participant,
+    storeUpdates: { _reactiveDeviceInfo: deviceInfo },
+  };
+}, {});
 
 interface DeviceInfo {
   windowWidth: number;

package/src/components/enterfullscreen.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react'; // Import useState
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 import Text from '../components/text';
-
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerFlattener('EnterFullscreen', 'session');
+registerSimulation('EnterFullscreen', noopSimulate, {});
+
 export default function EnterFullscreen({
   content,
   buttonText,
@@ -28,7 +32,7 @@ export default function EnterFullscreen({
 
   const [isWaiting, setIsWaiting] = useState(false);
   const listenerFallbackActive = useRef(false);
-  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const cancelPendingTimeout = useCallback(() => {
       if (timeoutId.current) {

package/src/components/exitfullscreen.tsx

@@ -1,9 +1,14 @@
 import { useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerFlattener('ExitFullscreen', 'session');
+registerSimulation('ExitFullscreen', noopSimulate, {});
+
 export default function ExitFullscreen({
   next,
   delayMs = 0,
@@ -12,7 +17,7 @@ export default function ExitFullscreen({
 } & BaseComponentProps) {
   
   const listenerFallbackActive = useRef(false);
-  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const cancelPendingTimeout = useCallback(() => {
     if (timeoutId.current) {

package/src/components/experimentprovider.tsx

@@ -3,11 +3,14 @@ import { ToastContainer } from 'react-toastify';
 
 const queryClient = new QueryClient();
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactNode } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 import { SettingsScreen } from './settingsscreen';
 import { Param } from '../utils/common';
 
-export default function ExperimentProvider({ children, disableSettings }: { children: ReactNode, disableSettings?: boolean }) {
+const HybridSimulationContext = createContext(false);
+export const useHybridSimulationDisabled = () => useContext(HybridSimulationContext);
+
+export default function ExperimentProvider({ children, disableSettings, disableHybridSimulation }: { children: ReactNode, disableSettings?: boolean, disableHybridSimulation?: boolean }) {
  
   if (window.location.pathname.endsWith('/settings') && !disableSettings) {
     return (
@@ -20,7 +23,9 @@ export default function ExperimentProvider({ children, disableSettings }: { chil
 
   return (
     <QueryClientProvider client={queryClient}>
+      <HybridSimulationContext.Provider value={!!disableHybridSimulation}>
       {children}
+      </HybridSimulationContext.Provider>
       <ToastContainer
         position='top-center'
         autoClose={3000}

package/src/components/experimentrunner.tsx

@@ -1,14 +1,22 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import '../index.css';
-import { ExperimentConfig, Store, Param, now } from '../utils/common';
+import { ExperimentConfig, Store, Param, now, getParam } from '../utils/common';
 import { useCallback, useEffect, useMemo, useRef, useState, ComponentType } from 'react';
 import {
   compileTimeline,
+  advanceToNextContent,
+  applyMetadata,
   TimelineItem,
-  RefinedTrialData,
+  TrialResult,
   ComponentResultData,
 } from '../utils/bytecode';
+import {
+  ParticipantState,
+  SimulateFunction,
+  resolveSimulation,
+} from '../utils/simulation';
+import { useHybridSimulationDisabled } from './experimentprovider';
 
 import Upload from './upload';
 import Text from './text';
@@ -52,13 +60,16 @@ const defaultCustomQuestions: ComponentsMap = {
 interface RuntimeComponentContent {
   name?: string;
   type: string;
+  csv?: string | string[];
   collectRefreshRate?: boolean;
   hideSettings?: string[] | boolean;
   metadata?:
     | Record<string, any>
-    | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
+    | ((data: TrialResult[], store: Store) => Record<string, any>);
   nestMetadata?: boolean;
-  props?: Record<string, any> | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
+  props?: Record<string, any> | ((data: TrialResult[], store: Store) => Record<string, any>);
+  simulate?: SimulateFunction | boolean;
+  simulators?: Record<string, any>;
 }
 
 function isRuntimeComponentContent(content: any): content is RuntimeComponentContent {
@@ -72,18 +83,20 @@ export default function ExperimentRunner({
   },
   components = {},
   questions = {},
+  hybridParticipant,
 }: {
   timeline: TimelineItem[];
   config?: ExperimentConfig;
   components?: ComponentsMap;
   questions?: ComponentsMap;
+  hybridParticipant?: ParticipantState;
 }) {
+  const disableHybridSimulation = useHybridSimulationDisabled();
   const trialByteCode = useMemo(() => {
     return compileTimeline(timeline);
   }, [timeline]);
 
-  const [instructionPointer, setInstructionPointer] = useState(0);
-  const dataRef = useRef<RefinedTrialData[]>((() => {
+  const dataRef = useRef<TrialResult[]>((() => {
     const urlParams: Record<string, any> = {};
     const searchParams = new URLSearchParams(window.location.search);
     for (const [key, value] of searchParams.entries()) {
@@ -137,6 +150,25 @@ export default function ExperimentRunner({
   const lastTrialEndTimeRef = useRef(now());
   const experimentStoreRef = useRef<Store>({});
 
+  const [instructionPointer, setInstructionPointer] = useState(() =>
+    advanceToNextContent(
+      trialByteCode,
+      0,
+      () => experimentStoreRef.current,
+      () => dataRef.current,
+      (s) => { experimentStoreRef.current = { ...experimentStoreRef.current, ...s }; },
+    )
+  );
+
+  const simulationMode =
+    (!disableHybridSimulation && getParam('hybridSimulation', false, 'boolean'))
+      ? 'hybrid' as const
+      : 'none' as const;
+
+  const participantRef = useRef<ParticipantState>(hybridParticipant || {});
+  // Guards against duplicate simulation in React strict mode
+  const lastSimulatedPointerRef = useRef(-1);
+
   const componentsMap = { ...defaultComponents, ...components };
   const customQuestionsMap: ComponentsMap = { ...defaultCustomQuestions, ...questions };
 
@@ -177,17 +209,11 @@ export default function ExperimentRunner({
           duration: endTime - startTime,
           type: content.type,
           name: content.name ?? '',
+          ...(content.csv !== undefined ? { csv: content.csv } : {}),
           responseData: componentResponseData,
         };
 
-        const metadata =
-          typeof content.metadata === 'function'
-            ? content.metadata(dataRef.current, experimentStoreRef.current)
-            : content.metadata;
-
-        if (content.nestMetadata) {
-          trialData = { ...trialData, metadata: metadata };
-        } else trialData = { ...metadata, ...trialData };
+        trialData = applyMetadata(trialData, content, dataRef.current, experimentStoreRef.current);
         
         dataRef.current = [...dataRef.current, trialData];
         setTotalTrialsCompleted((prevCount) => prevCount + 1);
@@ -199,49 +225,17 @@ export default function ExperimentRunner({
       }
     }
 
-    let nextPointer = instructionPointer + 1;
-    let foundNextContent = false;
-
-    while (nextPointer < trialByteCode.instructions.length) {
-      const nextInstruction = trialByteCode.instructions[nextPointer];
-
-      switch (nextInstruction.type) {
-        case 'IfGoto':
-          if (nextInstruction.cond(experimentStoreRef.current, dataRef.current)) {
-            const markerIndex = trialByteCode.markers[nextInstruction.marker];
-            if (markerIndex !== undefined) {
-              nextPointer = markerIndex;
-              continue;
-            } else {
-              console.error(`Marker ${nextInstruction.marker} not found`);
-              nextPointer++;
-            }
-          } else {
-            nextPointer++;
-          }
-          break;
-
-        case 'UpdateStore':
-          updateStore(nextInstruction.fun(experimentStoreRef.current, dataRef.current));
-          nextPointer++;
-          break;
-
-        case 'ExecuteContent':
-          foundNextContent = true;
-          lastTrialEndTimeRef.current = now();
-          setInstructionPointer(nextPointer);
-          return;
-
-        default:
-          console.error('Unknown instruction type encountered:', nextInstruction);
-          nextPointer++;
-          break;
-      }
-    }
-
-    if (!foundNextContent) {
-      setInstructionPointer(nextPointer);
+    const nextPointer = advanceToNextContent(
+      trialByteCode,
+      instructionPointer + 1,
+      () => experimentStoreRef.current,
+      () => dataRef.current,
+      (s) => updateStore(s),
+    );
+    if (nextPointer < trialByteCode.instructions.length) {
+      lastTrialEndTimeRef.current = now();
     }
+    setInstructionPointer(nextPointer);
   }
 
   const collectRefreshRate = useCallback((callback: (refreshRate: number | null) => void) => {
@@ -341,8 +335,39 @@ export default function ExperimentRunner({
 
   const currentInstruction = trialByteCode.instructions[instructionPointer];
 
+  const shouldSimulate = useMemo(() => {
+    if (simulationMode === 'none') return false;
+    if (currentInstruction?.type !== 'ExecuteContent') return false;
+    const content = currentInstruction.content;
+    if (!isRuntimeComponentContent(content)) return false;
+    if (content.simulate === false) return false;
+    return !!content.simulate || !!content.simulators;
+  }, [instructionPointer, simulationMode, currentInstruction]);
+
+  useEffect(() => {
+    if (!shouldSimulate) return;
+    if (lastSimulatedPointerRef.current === instructionPointer) return;
+    lastSimulatedPointerRef.current = instructionPointer;
+
+    (async () => {
+      const content = (currentInstruction as any).content;
+      const { trialProps, simulateFn, simulators } = resolveSimulation(content, dataRef.current, experimentStoreRef.current);
+
+      const result = await simulateFn(
+        trialProps,
+        { data: dataRef.current, store: experimentStoreRef.current },
+        simulators,
+        participantRef.current,
+      );
+
+      participantRef.current = result.participantState;
+      if (result.storeUpdates) updateStore(result.storeUpdates);
+      next(result.responseData);
+    })();
+  }, [shouldSimulate, instructionPointer]);
+
   let componentToRender = null;
-  if (currentInstruction?.type === 'ExecuteContent') {
+  if (currentInstruction?.type === 'ExecuteContent' && !shouldSimulate) {
     const content = currentInstruction.content;
     if (isRuntimeComponentContent(content)) {
       const Component = componentsMap[content.type];
@@ -382,8 +407,9 @@ export default function ExperimentRunner({
       <div
         className={` ${
           config.showProgressBar ? '' : 'hidden '
-        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
+        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto`}
       >
+        <div className='flex-1 h-6 bg-gray-200 rounded-full overflow-hidden'>
         <div
           className={`h-full bg-gray-200 rounded-full duration-300 ${
             progress > 0 ? ' border-black border-2' : ''
@@ -396,6 +422,7 @@ export default function ExperimentRunner({
             transition: 'width 300ms ease-in-out',
           }}
         />
+        </div>
       </div>
       {componentToRender}
     </div>

package/src/components/microphonecheck.tsx

@@ -1,5 +1,10 @@
 import { useState, useEffect } from 'react';
 import { VoiceRecorder } from './voicerecorder';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('MicrophoneCheck', 'session');
+registerSimulation('MicrophoneCheck', noopSimulate, {});
 
 interface MicrophoneDevice {
   deviceId: string;
@@ -153,7 +158,7 @@ const MicrophoneCheck = ({ next }: { next: (data: object) => void }) => {
           <div className='mt-16 flex justify-center'>
             <button
               onClick={() => next({})}
-              className='bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+              className='bg-white cursor-pointer px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
             >
               Next
             </button>

package/src/components/mobilefilepermission.tsx

@@ -1,8 +1,11 @@
 import { BaseComponentProps, getPlatform } from '../utils/common';
 import { useEffect, useState } from 'react';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { Capacitor } from '@capacitor/core';
 
+registerSimulation('RequestFilePermission', noopSimulate, {});
+
 export default function RequestFilePermission({ next }: BaseComponentProps) {
   const [permissionStatus, setPermissionStatus] = useState('checking');
   

package/src/components/plaininput.tsx

@@ -1,5 +1,25 @@
 import { BaseComponentProps } from '../mod';
 import { useState } from 'react';
+import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('PlainInput', 'session');
+
+registerSimulation('PlainInput', (trialProps, _experimentState, simulators, participant) => {
+  const result = simulators.respond(trialProps, participant);
+  const typingDuration = String(result.value).length * (50 + Math.random() * 100);
+  return {
+    responseData: { value: result.value },
+    participantState: result.participantState,
+    storeUpdates: trialProps.storeupdate ? trialProps.storeupdate(result.value) : undefined,
+    duration: typingDuration,
+  };
+}, {
+  respond: (_input: any, participant: any) => ({
+    value: 'simulated_input',
+    participantState: participant,
+  }),
+});
 
 function PlainInput({
   content,