Merge branch 'main' into jquery-to-vue-listeners#433

Author: tachyons

.github/workflows/eslint.yml

@@ -31,15 +31,16 @@ jobs:
 
       - name: Install ESLint
         run: |
-          npm install eslint@8.10.0
+          npm install eslint@8.57.0
           npm install @microsoft/eslint-formatter-sarif@2.1.7
 
       - name: Run ESLint
-        run: npx eslint .
-          --config .eslintrc.js
-          --ext .js,.jsx,.ts,.tsx
-          --format @microsoft/eslint-formatter-sarif
-          --output-file eslint-results.sarif
+        run: |
+          npx eslint . \
+            --config .eslintrc.js \
+            --ext .js,.jsx,.ts,.tsx \
+            --format @microsoft/eslint-formatter-sarif \
+            --output-file eslint-results.sarif
         continue-on-error: true
 
       - name: Upload analysis results to GitHub

.github/workflows/tauri-build.yml

@@ -20,6 +20,8 @@ jobs:
             args: '--target x86_64-apple-darwin'  # Intel Mac
           - platform: 'ubuntu-22.04'
             args: ''
+          - platform: 'windows-latest'
+            args: ''
 
 
     runs-on: ${{ matrix.platform }}
@@ -64,12 +66,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          projectPath: ./src-tauri 
-          tagName: app-v__VERSION__ 
-          releaseName: "CircuitVerse Desktop v__VERSION__"
-          releaseBody: "See the assets below to download this release."
-          releaseDraft: true
-          prerelease: false
+          projectPath: ./src-tauri
           args: ${{ matrix.args }}
 
       - name: Upload Artifacts

README.md

@@ -10,52 +10,88 @@ We would love to hear from you! We communicate on Slack:
 
 [![Slack](https://img.shields.io/badge/chat-on_slack-purple.svg?style=for-the-badge&logo=slack)](https://circuitverse.org/slack)
 
-## Installation
-To set up the project on your local machine, follow these steps:
-
-  1. Clone the repository to your local machine using the following command:
-  ```
-  git clone https://github.com/CircuitVerse/cv-frontend-vue.git
-  ```
-  2. Navigate to the project directory:
-  ```
-  cd cv-frontend-vue
-  ```
-  3. Install the project dependencies:
-  ```
-  npm install
-  ```
-  4. Start the development server:
-  ```
-  npm run dev
-  ```
-
-## Setting up on cloud with Stackblitz
-[StackBlitz](https://developer.stackblitz.com/guides/user-guide/what-is-stackblitz) is an instant fullstack web IDE for the JavaScript ecosystem.
-
-  1. Initiate the setup process by clicking on the following button:
-
-  [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/CircuitVerse/cv-frontend-vue)
-
-  2. Once the setup is complete, a Preview URL will be displayed in the browser window. Append `/simulatorvue/` to your URL to access the simulator.
-  ```
-  https://<preview_url>/simulatorvue/
-  ```
+## Development & Versions
+This repository supports multiple versions of the simulator.
+- **v0**: Stable production version.
+- **v1**: Experimental version for new features.
+
+To start the development server:
+```bash
+# Start v0 (Default)
+npm run dev
+
+# Start v1 (Windows/Unix)
+# Set VITE_SIM_VERSION=v1 in your environment and run npm run dev
+```
+
+## Build System
+We use a unified build system to generate assets for all versions.
+
+To build all supported versions:
+```bash
+npm run build
+```
+
+To build a specific version:
+```bash
+npm run build -- v1
+```
+Built assets will be available in `dist/simulatorvue/`. Each version will have a predictable entry point:
+- `dist/simulatorvue/v0/simulator-v0.js`
+- `dist/simulatorvue/v1/simulator-v1.js`
+
+## Route-Agnostic Support
+The simulator is designed to be **route-agnostic**. It can be mounted on any path (e.g., within a Rails view) by including the appropriate script and setting global variables:
+
+```html
+<div id="app"></div>
+<script>
+  window.logixProjectId = "0"; // Project ID or "0" for new
+  window.isUserLoggedIn = true;
+</script>
+<script type="module" src="/simulatorvue/v0/simulator-v0.js"></script>
+```
+
+## Embed Mode
+The simulator can be embedded in two ways:
+
+### 1. Via Iframe (Recommended for external sites)
+Use the dedicated embed route in your iframe `src`.
+```html
+<iframe 
+  src="/simulatorvue/v0/embed/:projectId" 
+  width="100%" 
+  height="600px"
+></iframe>
+```
+
+### 2. Direct Integration (Recommended for main Rails app)
+Include the simulator script on any page and set the `window.embed` flag. This renders the minimal embed UI instead of the full simulator UI.
+```html
+<div id="app"></div>
+<script>
+  window.embed = true;
+  window.logixProjectId = "123";
+</script>
+<script type="module" src="/simulatorvue/v0/simulator-v0.js"></script>
+```
+
+The embed mode supports query parameters for customization (e.g., `?theme=dark&fullscreen=false`):
+- `theme`: `light` (default) or `dark`
+- `display_title`: `true` or `false`
+- `clock_time`: `true` or `false`
+- `fullscreen`: `true` or `false`
+- `zoom_in_out`: `true` or `false`
 
 ## How to Use Vue Simulator with CircuitVerse Main Repo
-To access the Vue Simulator from the [CircuitVerse main repo](https://github.com/CircuitVerse/CircuitVerse) dev server, you can follow one of the following methods:
-
-### Accessing Vue Simulator
-  1. Start the CircuitVerse Main Repo dev server.
-  2. go to the `/simulatorvue` path in the dev server.
-  3. You would be accessing the Vue Simulator.
-
-### Setting Vue Simulator as Default
-  1. Log in to the CircuitVerse dev server using the admin account:
-      - **Email:** `admin@circuitverse.org`
-      - **Password:** `password`
-  2. Once logged in, go to `/flipper` path and turn on vuesim feature flag site wide or for your user.
-  3. After activation, you will be able to access the Vue Simulator site-wide in your dev server, also in `/simulator` path the Vue Simulator will be opening instead of the old simulator.
+The Vue Simulator can be integrated into the [CircuitVerse main repo](https://github.com/CircuitVerse/CircuitVerse) as a replacement for the legacy jQuery-based simulator.
+
+### Activation via Flipper
+1. Log in to the CircuitVerse dev server using an admin account.
+2. Navigate to `/flipper`.
+3. Enable the `vuesim` feature flag.
+
+Once enabled, the Rails app will handle routing and data synchronization between the backend and the Vue frontend.
 
 ## Code of Conduct
 We follow the [Code of Conduct](https://github.com/CircuitVerse/CircuitVerse/blob/master/code-of-conduct.md) of the [CircuitVerse](https://circuitverse.org) Community.

build.sh

@@ -10,6 +10,6 @@
 
     <body>
         <div id="app"></div>
-        <%- injectScript %>
+        <!-- inject-script -->
     </body>
 </html>

index-cv.html

@@ -1,23 +1,24 @@
 [build]
-  command = "npm run build && mkdir -p ./dist && cp -r ../public/* ./dist/"
+  command = "npm run build"
+  publish = "dist"
 
 [[redirects]]
   from = "/"
-  to = "/simulatorvue"
+  to = "/simulatorvue/v0/"
   status = 301
   force = true
 
 [[redirects]]
   from = "/simulatorvue/v0/*"
-  to = "/simulatorvue/v0/index-cv.html"
+  to = "/simulatorvue/v0/index.html"
   status = 200
 
 [[redirects]]
   from = "/simulatorvue/v1/*"
-  to = "/simulatorvue/v1/index-cv.html"
+  to = "/simulatorvue/v1/index.html"
   status = 200
 
 [[redirects]]
   from = "/simulatorvue/*"
-  to = "/simulatorvue/v0/index-cv.html"
+  to = "/simulatorvue/v0/index.html"
   status = 200