Migrate TagScript playground to Next.js and Fluid Functionalism

.github/workflows/pages.yml

@@ -0,0 +1,67 @@
+name: Build and deploy GitHub Pages
+
+on:
+    push:
+        branches: [master, feat/fluid-next-playground]
+    pull_request:
+        branches: [master]
+    workflow_dispatch:
+
+permissions:
+    contents: read
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            pages: read
+        steps:
+            - uses: actions/checkout@v7
+            - uses: actions/setup-node@v7
+              with:
+                  node-version: 24
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: 1.4.2
+            - run: bun install --frozen-lockfile
+            - run: bun run lint
+            - run: bun run typecheck
+            - run: bun run test
+            - name: Configure Pages
+              id: pages
+              if: github.ref == 'refs/heads/master'
+              uses: actions/configure-pages@v6
+            - name: Set the static export path
+              env:
+                  PAGES_BASE_PATH: ${{ steps.pages.outputs.base_path }}
+              run: |
+                  if [ "$GITHUB_REF" = "refs/heads/master" ]; then
+                    echo "NEXT_PUBLIC_BASE_PATH=$PAGES_BASE_PATH" >> "$GITHUB_ENV"
+                  else
+                    echo "NEXT_PUBLIC_BASE_PATH=/${GITHUB_REPOSITORY#*/}" >> "$GITHUB_ENV"
+                  fi
+            - run: bun run build
+            - run: bunx playwright install --with-deps chromium
+            - run: bun run test:e2e
+            - uses: actions/upload-pages-artifact@v5
+              with:
+                  path: out
+
+    deploy:
+        if: github.ref == 'refs/heads/master' && github.event_name != 'pull_request'
+        needs: build
+        runs-on: ubuntu-latest
+        permissions:
+            pages: write
+            id-token: write
+        concurrency:
+            group: pages
+            cancel-in-progress: false
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        steps:
+            - name: Deploy
+              id: deployment
+              uses: actions/deploy-pages@v5

.gitignore

@@ -1,6 +1,5 @@
 # Add any directories, files, or patterns you don't want to be tracked by version control
 node_modules/
-package-lock.json
 .DS_Store
 .vscode
 *documentation/
@@ -18,4 +17,11 @@ oldindex.html
 .vercel
 .output
 vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+vite.config.ts.timestamp-*
+
+# Next.js and test output
+.next/
+out/
+*.tsbuildinfo
+playwright-report/
+test-results/

README.md

@@ -1,63 +1,70 @@
 # bTagScript Playground
 
-![bTagScript Playground](https://i.imgur.com/Mth9WKC.png)
+A TagScript workspace rebuilt with Next.js App Router, TypeScript, Tailwind CSS, and [Fluid Functionalism](https://www.fluidfunctionalism.com/). The app exports as static HTML/CSS/JavaScript for GitHub Pages.
 
-Welcome to the bTagScript Playground! This is the ultimate online tool for testing and experimenting with TagScript before implementing it in your projects. Avoid the hassle of creating and running tags repeatedly by using our user-friendly platform designed for seamless TagScript testing.
+## Run locally
 
-## What is TagScript?
+Use **Bun 1.4.2** and **Node.js 24 LTS**. Bun manages dependencies and runs scripts; Next.js also requires Node.js.
 
-TagScript is a templating language primarily used in Discord bots to create dynamic responses based on user input and conditions. It allows you to define complex logic and handle various scenarios effortlessly within your bot's commands.
+```sh
+bun install --frozen-lockfile
+bun run dev
+```
 
-## Features
+Open http://localhost:3000.
 
-- **Real-Time Testing**: Instantly see the results of your TagScript as you type. No more waiting to run tags on your bot.
-- **Comprehensive Toolset**: Access a wide range of TagScript functions and operators to simulate different conditions and responses.
-- **User-Friendly Interface**: An intuitive and easy-to-navigate interface that makes TagScript testing simple and efficient.
-- **Save and Load Scripts**: Save your scripts for future use and load them whenever needed, ensuring you don't lose your work.
-- **Syntax Highlighting**: Clearly see different elements of your TagScript with our syntax highlighting feature, making it easier to debug and understand your code.
+## Build and preview GitHub Pages
 
-## Getting Started
+For this repository's project site:
 
-### Accessing the Playground
+```sh
+NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run build
+NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run preview
+```
 
-You can start using the bTagScript Playground by visiting the following link: [bTagScript Playground](https://benz206.github.io/bTagScriptPlayground)
+Open http://127.0.0.1:3000/bTagScriptPlayground/. The production files are in `out/`, including `.nojekyll`. The preview server serves these files directly, so missing assets and incorrect paths aren't hidden by an application fallback.
 
-### Using the Playground
+For a custom domain or an `owner.github.io` repository hosted at the domain root, omit `NEXT_PUBLIC_BASE_PATH` in both commands. Rebuild when changing the base path; Next.js embeds it into the client assets.
 
-1. **Input Area**: Write your TagScript code in the input area. This is where you define the logic and structure of your tags.
-2. **Process Script**: Click the "Process" button to execute your TagScript and see the output in real time.
-3. **Output Area**: View the results of your TagScript in the output area. This section displays the responses generated by your script based on the input and conditions you defined.
-4. **Import Script**: Use the "Import" button to load previously saved TagScript code from Carl Bot's tag system into the input area.
+### Deploy
 
-### Example Usage
+1. In GitHub **Settings → Pages → Build and deployment**, select **GitHub Actions** as the source.
+2. Merge the feature branch into `master` and push.
+3. The **Build and deploy GitHub Pages** workflow installs the frozen Bun lockfile, runs lint/type/unit checks, builds the static export, runs Chromium tests, and uploads `out/`.
+4. Only a successful build on `master` deploys. Pull requests and pushes to `feat/fluid-next-playground` validate the site without replacing the deployed site. After the workflow exists on `master`, it can also be run manually from Actions.
 
-Here’s a simple example to demonstrate how to use the bTagScript Playground:
+The deployment reads the real Pages base path from `actions/configure-pages`, supporting project sites and configured custom domains. The expected project URL is https://benz206.github.io/bTagScriptPlayground/. Environment protection rules may require a GitHub approval before the deployment job runs.
 
-1. **Write a Script**:
-   ```tagscript
-   {if(Hello=={args}):Hi there!|I don't understand.}
-   ```
-   This script checks if the user input is "Hello" and responds with "Hi there!". Otherwise, it responds with "I don't understand."
+## What's included
 
-2. **Run the Script**: Click "Run Script" to see the output.
-   - Input: `Hello`
-   - Output: `Hi there!`
+- CodeMirror 6 editor with TagScript highlighting, line numbers, and Command/Control + Enter to run.
+- Editable arguments, channel, user, and optional target seeds, with randomization and role color selection.
+- Response preview, action inspection, structured debug variables, execution duration, and copy controls.
+- Browser or session autosave, migration of the old `tagscript` storage key, local file import/export, and Carl tag imports.
+- Example tags, a quick guide, a header light/dark toggle with a saved preference, editor font-size settings, and a command palette.
+- Fluid Functionalism controls throughout the playground. See [component source notes](docs/fluid-components.md).
 
-   - Input: `Goodbye`
-   - Output: `I don't understand.`
+## External services
 
-## Contributing
+Processing uses the existing `https://leg3ndary.pythonanywhere.com/v2/process/` endpoint and its form/seed encoding. Clicking **Run tag** sends the script and seed context to that service. The playground displays Discord actions; it does not execute them.
 
-We welcome contributions from the community to improve the bTagScript Playground. If you have suggestions, bug reports, or want to contribute code, please visit our GitHub repository: [bTagScript Playground GitHub](https://github.com/benz206/bTagScriptPlayground)
+Carl imports use the project's existing Heroku proxy for `carl.gg`. Both services must be online and permit requests from the deployed origin. A static GitHub Pages site cannot provide a server-side CORS proxy. Failures display an error, preserve the editor text, and re-enable the controls. If Carl import is unavailable, paste the script or import a `.txt`/`.tagscript` file.
 
-## Support
+## Verification
 
-If you encounter any issues or have questions about using the bTagScript Playground, feel free to reach out for support. You can open an issue on our GitHub repository.
+```sh
+bun run lint
+bun run typecheck
+bun run test
+NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run build
+bunx playwright install chromium
+NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run test:e2e
+```
 
-## License
+Unit tests cover encoding, seed payloads, target selection, result validation, Carl URL parsing, and randomized seed consistency. Browser tests run against the static export and mock external APIs to verify successful runs, network failures, duplicate request prevention, saved scripts, imports/exports, theme persistence, and mobile layout without depending on external service uptime.
 
-The bTagScript Playground is open-source and available under the MIT License. Feel free to use, modify, and distribute it as per the terms of the license.
+The current stack is Next.js 16.3.7, React 19.3, Tailwind 4.3, and TypeScript 7.0.2. TypeScript 7's native compiler is installed as `@typescript/native`; the `typescript` alias provides Microsoft's TypeScript 6 compatibility API for Next.js/ESLint tooling. ESLint 10 uses its official compatibility adapter for the Next.js React plugin. Exact resolved dependencies are recorded in `bun.lock`.
 
----
+## License
 
-Thank you for using the bTagScript Playground! We hope it makes your TagScript development process easier and more efficient. Happy coding!
+The original project [MIT license](LICENSE) is retained. Fluid component provenance and update instructions are in [docs/fluid-components.md](docs/fluid-components.md).