From 33450cd308fa6219e05ec49b8fc7e8e8e53d24fe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 18:07:47 +0000
Subject: [PATCH 1/3] Initial plan


From a384f432a43ec1e4557302e98c8c1e71eecf2d17 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 18:10:07 +0000
Subject: [PATCH 2/3] Remove aria-pressed attribute from play/pause button for
 better iOS accessibility

Co-authored-by: weotch <77567+weotch@users.noreply.github.com>
---
 packages/react/src/LazyVideo/AccessibilityControls.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/LazyVideo/AccessibilityControls.tsx b/packages/react/src/LazyVideo/AccessibilityControls.tsx
index 193885f..ad22a4a 100644
--- a/packages/react/src/LazyVideo/AccessibilityControls.tsx
+++ b/packages/react/src/LazyVideo/AccessibilityControls.tsx
@@ -40,7 +40,6 @@ export default function AccessibilityControls({
   return (
     <button
       onClick={isVideoPaused ? play : pause}
-      aria-pressed={!isVideoPaused}
       aria-label={isVideoPaused ? "Play" : "Pause"}
       style={{
         // Clear default sizes

From ce7386eb51c056650b4b911d07666dd07ff6fe92 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@goodness.inc>
Date: Tue, 24 Feb 2026 11:12:35 -0800
Subject: [PATCH 3/3] Create a simple demo page

---
 packages/react/demo/App.tsx        | 177 +++++++++++++++++++++++++++++
 packages/react/demo/README.md      |  47 ++++++++
 packages/react/demo/index.html     |  89 +++++++++++++++
 packages/react/package.json        |   3 +-
 packages/react/vite.demo.config.ts |  12 ++
 5 files changed, 327 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/demo/App.tsx
 create mode 100644 packages/react/demo/README.md
 create mode 100644 packages/react/demo/index.html
 create mode 100644 packages/react/vite.demo.config.ts

diff --git a/packages/react/demo/App.tsx b/packages/react/demo/App.tsx
new file mode 100644
index 0000000..5ce1897
--- /dev/null
+++ b/packages/react/demo/App.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import ReactVisual from "../src/ReactVisual";
+import LazyVideo from "../src/LazyVideo";
+import VisualWrapper from "../src/VisualWrapper";
+
+function App() {
+  return (
+    <div className="container">
+      <h1>@react-visual/react Demo</h1>
+      <p className="subtitle">
+        Interactive examples of the ReactVisual component library
+      </p>
+
+      {/* ReactVisual with Image */}
+      <div className="demo-section">
+        <h2>ReactVisual - Image Examples</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>
+              Basic Image with <code>aspect</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
+                aspect={16 / 9}
+                alt="Mountain landscape"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>
+              Image with <code>fit="contain"</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=800"
+                aspect={1}
+                fit="contain"
+                alt="Dog portrait"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>Image with explicit dimensions</h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800"
+                width={400}
+                height={300}
+                alt="Forest"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ReactVisual with Video */}
+      <div className="demo-section">
+        <h2>ReactVisual - Video with Poster</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>Video with Image Poster</h3>
+            <div className="visual-container">
+              <ReactVisual
+                video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
+                image="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=800"
+                aspect={16 / 9}
+                alt="Video with poster"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>Video without Poster</h3>
+            <div className="visual-container">
+              <ReactVisual
+                video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
+                aspect={16 / 9}
+                noPoster
+                alt="Video without poster"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* VisualWrapper */}
+      <div className="demo-section">
+        <h2>VisualWrapper - Layout Container</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>Custom Content in Wrapper</h3>
+            <VisualWrapper aspect={16 / 9}>
+              <div
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background:
+                    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "white",
+                  fontSize: "24px",
+                  fontWeight: "bold",
+                }}
+              >
+                Custom Content
+              </div>
+            </VisualWrapper>
+          </div>
+
+          <div className="demo-item">
+            <h3>Square Aspect Ratio</h3>
+            <VisualWrapper aspect={1}>
+              <div
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background:
+                    "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "white",
+                  fontSize: "20px",
+                }}
+              >
+                1:1
+              </div>
+            </VisualWrapper>
+          </div>
+        </div>
+      </div>
+
+      {/* Props Examples */}
+      <div className="demo-section">
+        <h2>Advanced Props Examples</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>
+              With <code>expand</code> prop
+            </h3>
+            <div style={{ position: "relative", height: "200px" }}>
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800"
+                expand
+                alt="Stars"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>
+              With <code>className</code> and <code>style</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800"
+                aspect={16 / 9}
+                className="custom-class"
+                style={{ border: "4px solid #667eea", borderRadius: "8px" }}
+                alt="Nature"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);
diff --git a/packages/react/demo/README.md b/packages/react/demo/README.md
new file mode 100644
index 0000000..70a2374
--- /dev/null
+++ b/packages/react/demo/README.md
@@ -0,0 +1,47 @@
+# React Visual Demo
+
+This demo app showcases the `@react-visual/react` components in action.
+
+## Running Locally
+
+From the `packages/react` directory, run:
+
+```bash
+yarn demo
+```
+
+This will start a development server at `http://localhost:3000` with hot module reloading.
+
+## Testing with iOS Simulator
+
+1. Start the demo server: `yarn demo`
+2. Open your iOS Simulator
+3. Navigate to `http://localhost:3000` in Safari
+4. You can also use your computer's local IP address (e.g., `http://192.168.1.x:3000`) to test on a physical device
+
+## Using in CodeSandbox
+
+This demo is designed to work seamlessly in CodeSandbox. Simply:
+
+1. Open the package in CodeSandbox
+2. Run `yarn demo` in the terminal
+3. View the preview in the browser pane
+
+## What's Included
+
+The demo showcases:
+
+- **ReactVisual** - Image rendering with various props
+- **LazyVideo** - Video component with lazy loading
+- **VisualWrapper** - Layout wrapper for custom content
+- Various prop combinations (aspect ratios, fit modes, etc.)
+
+## Building for Production
+
+To build the demo for static deployment:
+
+```bash
+yarn demo:build
+```
+
+The output will be in the `demo-dist` directory.
diff --git a/packages/react/demo/index.html b/packages/react/demo/index.html
new file mode 100644
index 0000000..49ce528
--- /dev/null
+++ b/packages/react/demo/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Visual Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 40px;
+      }
+
+      .demo-section {
+        background: white;
+        padding: 30px;
+        margin-bottom: 30px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .demo-section h2 {
+        color: #333;
+        margin-bottom: 20px;
+        font-size: 20px;
+      }
+
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+      }
+
+      .demo-item {
+        background: #fafafa;
+        padding: 15px;
+        border-radius: 4px;
+      }
+
+      .demo-item h3 {
+        color: #555;
+        font-size: 14px;
+        margin-bottom: 10px;
+        font-weight: 600;
+      }
+
+      .demo-item .visual-container {
+        background: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      code {
+        background: #f0f0f0;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 13px;
+        color: #d73a49;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./App.tsx"></script>
+  </body>
+</html>
diff --git a/packages/react/package.json b/packages/react/package.json
index dfaf6e6..52d52c3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -13,7 +13,8 @@
   "scripts": {
     "build": "vite build",
     "test": "cypress run --component",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "demo": "vite --config vite.demo.config.ts"
   },
   "dependencies": {
     "@react-hook/media-query": "^1.1.1",
diff --git a/packages/react/vite.demo.config.ts b/packages/react/vite.demo.config.ts
new file mode 100644
index 0000000..09bb705
--- /dev/null
+++ b/packages/react/vite.demo.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// Vite config for the demo app
+export default defineConfig({
+  plugins: [react()],
+  root: "demo",
+  server: {
+    port: 3000,
+    open: true,
+  },
+});