chore(release): added angular-examples for recording apps, migrated resources from Dyte to RealtimeKit

AGENTS.md

@@ -5,7 +5,7 @@
 
 ## OVERVIEW
 
-Example gallery for **Cloudflare RealtimeKit** — a real-time video/audio SDK. Contains 17 React, 3 Angular, 5 HTML, and 4 recording SDK examples, plus a gallery portal. Live at `examples.realtime.cloudflare.com`. Docs: `developers.cloudflare.com/realtime/realtimekit/`.
+Example gallery for **Cloudflare RealtimeKit** — a real-time video/audio SDK. Contains 17 React, 3 Angular, 5 HTML, and 8 recording SDK examples (4 React + 4 Angular), plus a gallery portal. Live at `examples.realtime.cloudflare.com`. Docs: `developers.cloudflare.com/realtime/realtimekit/`.
 
 ## STRUCTURE
 
@@ -15,7 +15,7 @@ realtimekit-web-examples/
 ├── angular-examples/          # 3 Angular CLI examples → deployed as Cloudflare Worker
 ├── html-examples/             # 5 vanilla HTML/JS examples → deployed as Cloudflare Worker
 ├── demo-app/                  # Gallery portal (React Router 7 SSR) → examples.realtime.cloudflare.com
-├── recording-sdk-app-samples/ # 4 recording SDK examples → Vercel (NOT Cloudflare Workers)
+├── recording-sdk-app-examples/ # 8 recording SDK examples (4 React + 4 Angular) → deployed as individual Cloudflare Workers
 ├── pnpm-workspace.yaml        # Workspace definitions
 └── .github/workflows/         # 9 CI/CD workflows (staging + prod per framework)
 ```
@@ -27,7 +27,8 @@ realtimekit-web-examples/
 | Add React example | `react-examples/examples/<name>/` | Also add to `demo-app/app/utils/react.ts` |
 | Add Angular example | `angular-examples/examples/<name>/` | Also add to `demo-app/app/utils/angular.ts` |
 | Add HTML example | `html-examples/examples/<name>/` | Also add to `demo-app/app/utils/vanilla.ts` |
-| Add recording example | `recording-sdk-app-samples/react-examples/<name>/` | Vercel deploy; no wrangler config |
+| Add recording example (React) | `recording-sdk-app-examples/react-examples/<name>/` | Each example has own `wrangler.jsonc`; deploy via `pnpm deploy:staging` / `pnpm deploy:production` |
+| Add recording example (Angular) | `recording-sdk-app-examples/angular-examples/<name>/` | Same deploy pattern; uses Angular CLI (`ng build`), not Vite |
 | Update SDK versions | `<workspace>/update-cloudflare-realtime-deps.sh` | Fetches from npm; pass `--env staging\|prod` |
 | Gallery example catalog | `demo-app/app/utils/react.ts`, `angular.ts`, `vanilla.ts` | Hardcoded; new examples won't appear without editing |
 | CI / deploy config | `.github/workflows/` | Per-framework staging + prod deploy workflows |
@@ -63,14 +64,12 @@ cd demo-app && pnpm dev
 ## ANTI-PATTERNS
 
 - Do NOT use npm or yarn — preinstall hook will abort
-- Do NOT add wrangler deploy config to `recording-sdk-app-samples` — it deploys to Vercel
+- `recording-sdk-app-examples` examples each have their own `wrangler.jsonc` — deploy individually via `pnpm deploy:staging` / `pnpm deploy:production`
 - Do NOT add shared packages or libs — every example is intentionally isolated
 - Do NOT forget to register new examples in `demo-app/app/utils/` — they won't appear in the gallery
 
 ## NOTES
 
-- `pnpm-workspace.yaml` has a stale path: `recording-sdk-app-examples/react-examples/*` (actual dir: `recording-sdk-app-samples`) — this workspace glob is broken
 - `demo-app/README.md` contains only "TODO" — consult root `README.md`
 - `REALTIMEKIT_BASE_URL=realtime.cloudflare.com` is the server-side API base hostname for production; public SDK example builds use `VITE_BASE_URL` with staging using `staging.realtime.cloudflare.com`
 - Node version unspecified in the repo; CI uses Node 20 — match locally
-- `@dyteinternals/utils` in `recording-sdk-app-samples/react-examples/recording-with-watermark/package.json` is a vestigial upstream dependency

angular-examples/examples/create-your-own-ui/package.json

@@ -34,6 +34,7 @@
     "@angular/cli": "~15.0.4",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
+    "@types/node": "^18.0.0",
     "autoprefixer": "^10.4.16",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",

angular-examples/examples/create-your-own-ui/src/app/components/audio-preview.component.ts

@@ -15,7 +15,7 @@ interface CurrentDevices {
       <audio
         #testAudioEl
         preload="auto"
-        src="https://assets.dyte.io/ui-kit/speaker-test.mp3">
+        src="https://rtk-assets.realtime.cloudflare.com/ui-kit/speaker-test.mp3">
       </audio>
       <div *ngIf="meeting?.self?.permissions?.canProduceAudio === 'ALLOWED'">
         <label>Microphone</label>

angular-examples/examples/create-your-own-ui/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Default Meeting UI - Dyte UI Kit</title>
+    <title>Default Meeting UI - RealtimeKit UI Kit</title>
     <base href="./" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

angular-examples/examples/default-meeting-ui/package.json

@@ -34,6 +34,7 @@
     "@angular/cli": "~15.0.4",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
+    "@types/node": "^18.0.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

angular-examples/examples/default-meeting-ui/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Default Meeting UI - Dyte UI Kit</title>
+    <title>Default Meeting UI - RealtimeKit UI Kit</title>
     <base href="./" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

angular-examples/examples/with-video-transformer/package.json

@@ -34,6 +34,7 @@
     "@angular/cli": "~15.0.4",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
+    "@types/node": "^18.0.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

angular-examples/examples/with-video-transformer/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>With Video Transformer - Dyte UI Kit</title>
+    <title>With Video Transformer - RealtimeKit UI Kit</title>
     <base href="./" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

html-examples/examples/background-transformer-ui/index.html

@@ -35,18 +35,18 @@
       }
 
       #app {
-        font-family: var(--dyte-font-family);
+        font-family: var(--rtk-font-family);
         display: flex;
         flex-direction: column;
         width: 100%;
         height: 100%;
 
         color: var(--color-text);
 
-        --color-background: rgb(var(--dyte-colors-background-1000, 8 8 8));
-        --color-text: rgb(var(--dyte-colors-text-1000, 255 255 255));
+        --color-background: rgb(var(--rtk-colors-background-1000, 8 8 8));
+        --color-text: rgb(var(--rtk-colors-text-1000, 255 255 255));
 
-        --color-border: rgb(var(--dyte-colors-background-800, 24 24 24));
+        --color-border: rgb(var(--rtk-colors-background-800, 24 24 24));
       }
 
       header {
@@ -250,15 +250,13 @@ <h3>Backgrounds</h3>
 
       function loadBackgroundChangerUI() {
         const backgroundImages = [
-          'https://assets.dyte.io/backgrounds/bg-dyte-office.jpg',
-          'https://assets.dyte.io/backgrounds/bg_0.jpg',
-          'https://assets.dyte.io/backgrounds/bg_1.jpg',
-          'https://assets.dyte.io/backgrounds/bg_2.jpg',
-          'https://assets.dyte.io/backgrounds/bg_3.jpg',
-          'https://assets.dyte.io/backgrounds/bg_4.jpg',
-          'https://assets.dyte.io/backgrounds/bg_5.jpg',
-          'https://assets.dyte.io/backgrounds/bg_6.jpg',
-          'https://assets.dyte.io/backgrounds/bg_7.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_1.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_2.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_3.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_4.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_5.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_6.jpg',
+          'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_7.jpg',
         ];
 
         for (const image of backgroundImages) {

html-examples/examples/create-your-own-ui/components/audio-preview.js

@@ -18,7 +18,7 @@ window.AudioPreview = (function() {
           <audio
             id="test-audio"
             preload="auto"
-            src="https://assets.dyte.io/ui-kit/speaker-test.mp3">
+            src="https://rtk-assets.realtime.cloudflare.com/ui-kit/speaker-test.mp3">
           </audio>
           ${canProduceAudio ? `
             <div class="mb-4">

html-examples/examples/with-background-transformer/index.html

@@ -69,20 +69,18 @@
         // 2. To add a background image
         await meeting.self.addVideoMiddleware(
           await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
-            'https://assets.dyte.io/backgrounds/bg-dyte-office.jpg'
+            'https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_1.jpg'
           )
         );
 
         // We have the following set of images for your immediate use:
-        // https://assets.dyte.io/backgrounds/bg-dyte-office.jpg
-        // https://assets.dyte.io/backgrounds/bg_0.jpg
-        // https://assets.dyte.io/backgrounds/bg_1.jpg
-        // https://assets.dyte.io/backgrounds/bg_2.jpg
-        // https://assets.dyte.io/backgrounds/bg_3.jpg
-        // https://assets.dyte.io/backgrounds/bg_4.jpg
-        // https://assets.dyte.io/backgrounds/bg_5.jpg
-        // https://assets.dyte.io/backgrounds/bg_6.jpg
-        // https://assets.dyte.io/backgrounds/bg_7.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_1.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_2.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_3.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_4.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_5.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_6.jpg
+        // https://rtk-assets.realtime.cloudflare.com/backgrounds/bg_7.jpg
       });
     </script>
   </body>

html-examples/examples/with-ui-addons/index.html

@@ -26,7 +26,7 @@
     <div id="rtk-meeting-container">
       <rtk-meeting
         id="my-meeting"
-        class="dyte"
+        class="rtk"
         show-setup-screen="true"
       ></rtk-meeting>
     </div>