From 706936abe31e536af7db54de923719485645e659 Mon Sep 17 00:00:00 2001
From: Andrew Berezovskyi <andrew@berezovskyi.me>
Date: Thu, 10 Jul 2025 21:05:53 +0200
Subject: [PATCH 1/3] feat: React support

Signed-off-by: Andrew Berezovskyi <andrew@berezovskyi.me>
---
 package-lock.json                             | 740 +++++++++++++++++-
 package.json                                  |  31 +-
 src/oslc-selection-demo/demo.js               |  45 ++
 src/oslc-selection-demo/index.html            |  43 +-
 src/oslc-selection-demo/package.json          |  23 +
 src/oslc-selection-demo/vite.config.js        |  15 +
 src/oslc-selection-react-demo/README.md       | 151 ++++
 src/oslc-selection-react-demo/index.html      |  19 +
 src/oslc-selection-react-demo/package.json    |  25 +
 src/oslc-selection-react-demo/src/App.css     |  89 +++
 src/oslc-selection-react-demo/src/App.jsx     |  93 +++
 .../src/components/BuildInstructions.jsx      |  45 ++
 .../src/components/Footer.jsx                 |  23 +
 .../src/components/HeroSection.jsx            |  34 +
 .../src/components/IntegrationExamples.jsx    | 112 +++
 .../src/components/LiveDemo.jsx               | 130 +++
 .../src/components/OslcSelectorExample.jsx    |  51 ++
 .../src/components/ResultsSection.jsx         |  69 ++
 .../src/components/StylingExamples.jsx        | 126 +++
 .../src/hooks/useOslcSelection.js             |  65 ++
 src/oslc-selection-react-demo/src/index.css   | 109 +++
 src/oslc-selection-react-demo/src/main.jsx    |  10 +
 src/oslc-selection-react-demo/src/types.d.ts  |  20 +
 src/oslc-selection-react-demo/vite.config.js  |  14 +
 24 files changed, 2030 insertions(+), 52 deletions(-)
 create mode 100644 src/oslc-selection-demo/demo.js
 create mode 100644 src/oslc-selection-demo/package.json
 create mode 100644 src/oslc-selection-demo/vite.config.js
 create mode 100644 src/oslc-selection-react-demo/README.md
 create mode 100644 src/oslc-selection-react-demo/index.html
 create mode 100644 src/oslc-selection-react-demo/package.json
 create mode 100644 src/oslc-selection-react-demo/src/App.css
 create mode 100644 src/oslc-selection-react-demo/src/App.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/BuildInstructions.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/Footer.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/HeroSection.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/IntegrationExamples.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/LiveDemo.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/OslcSelectorExample.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/ResultsSection.jsx
 create mode 100644 src/oslc-selection-react-demo/src/components/StylingExamples.jsx
 create mode 100644 src/oslc-selection-react-demo/src/hooks/useOslcSelection.js
 create mode 100644 src/oslc-selection-react-demo/src/index.css
 create mode 100644 src/oslc-selection-react-demo/src/main.jsx
 create mode 100644 src/oslc-selection-react-demo/src/types.d.ts
 create mode 100644 src/oslc-selection-react-demo/vite.config.js

diff --git a/package-lock.json b/package-lock.json
index 166e898..7a53a04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
       "license": "EPL-1.0 OR EDL-1.0",
       "workspaces": [
         "src/oslc-postmessage-helper",
-        "src/oslc-selection-webcomponent"
+        "src/oslc-selection-webcomponent",
+        "src/oslc-selection-demo",
+        "src/oslc-selection-react-demo"
       ],
       "devDependencies": {
         "serve": "^14.0.0"
@@ -500,6 +502,38 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -580,6 +614,397 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1177,6 +1602,10 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@oslc/oslc-selection-webcomponent": {
+      "resolved": "src/oslc-selection-webcomponent",
+      "link": true
+    },
     "node_modules/@oslc/postmessage-helper": {
       "resolved": "src/oslc-postmessage-helper",
       "link": true
@@ -1196,6 +1625,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
+      "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.1.tgz",
@@ -1688,6 +2124,34 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1719,6 +2183,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
+      "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.19",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+      }
+    },
     "node_modules/@zeit/schemas": {
       "version": "2.36.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
@@ -2643,6 +3128,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2768,6 +3260,45 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -4560,7 +5091,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4664,6 +5194,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4847,6 +5389,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -4937,6 +5498,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oslc-selection-demo": {
+      "resolved": "src/oslc-selection-demo",
+      "link": true
+    },
+    "node_modules/oslc-selection-react-demo": {
+      "resolved": "src/oslc-selection-react-demo",
+      "link": true
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5136,6 +5705,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
@@ -5231,6 +5829,31 @@
         "rc": "cli.js"
       }
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -5238,6 +5861,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/registry-auth-token": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
@@ -5469,6 +6102,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5601,6 +6243,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -6071,6 +6723,66 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vite": {
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -6352,6 +7064,30 @@
         "typescript": "^5.3.2"
       }
     },
+    "src/oslc-selection-demo": {
+      "version": "1.0.0",
+      "dependencies": {
+        "@oslc/oslc-selection-webcomponent": "file:../oslc-selection-webcomponent"
+      },
+      "devDependencies": {
+        "serve": "^14.0.0",
+        "vite": "^5.0.8"
+      }
+    },
+    "src/oslc-selection-react-demo": {
+      "version": "1.0.0",
+      "dependencies": {
+        "@oslc/oslc-selection-webcomponent": "file:../oslc-selection-webcomponent",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      },
+      "devDependencies": {
+        "@types/react": "^18.2.43",
+        "@types/react-dom": "^18.2.17",
+        "@vitejs/plugin-react": "^4.2.1",
+        "vite": "^5.0.8"
+      }
+    },
     "src/oslc-selection-webcomponent": {
       "name": "@oslc/selection-webcomponent",
       "version": "1.0.0",
diff --git a/package.json b/package.json
index 8d9d07b..21d40bf 100644
--- a/package.json
+++ b/package.json
@@ -4,19 +4,34 @@
   "description": "OSLC Selection utilities including postMessage helper and web component",
   "private": true,
   "type": "module",
+  "workspaces": [
+    "src/oslc-postmessage-helper",
+    "src/oslc-selection-webcomponent",
+    "src/oslc-selection-demo",
+    "src/oslc-selection-react-demo"
+  ],
   "scripts": {
     "build": "pwsh ./scripts/build-components.ps1",
     "build:linux": "./scripts/build-components.sh",
     "test:ci": "pwsh ./scripts/test-ci-local.ps1",
     "test:ci:verbose": "pwsh ./scripts/test-ci-local.ps1 -Verbose",
-    "clean": "npm run clean:postmessage && npm run clean:webcomponent",
+    "clean": "npm run clean:postmessage && npm run clean:webcomponent && npm run clean:demo && npm run clean:react-demo",
     "clean:postmessage": "cd src/oslc-postmessage-helper && npm run clean",
     "clean:webcomponent": "cd src/oslc-selection-webcomponent && npm run clean",
-    "install:all": "npm run install:postmessage && npm run install:webcomponent",
+    "clean:demo": "cd src/oslc-selection-demo && npm run clean",
+    "clean:react-demo": "cd src/oslc-selection-react-demo && npm run clean",
+    "install:all": "npm run install:postmessage && npm run install:webcomponent && npm run install:demo && npm run install:react-demo",
     "install:postmessage": "cd src/oslc-postmessage-helper && npm install",
     "install:webcomponent": "cd src/oslc-selection-webcomponent && npm install",
-    "serve:demo": "cd src/oslc-selection-demo && python -m http.server 8080",
-    "serve:demo:npm": "cd src/oslc-selection-demo && npx serve .",
+    "install:demo": "cd src/oslc-selection-demo && npm install",
+    "install:react-demo": "cd src/oslc-selection-react-demo && npm install",
+    "demo:dev": "cd src/oslc-selection-demo && npm run dev",
+    "demo:build": "cd src/oslc-selection-demo && npm run build",
+    "demo:preview": "cd src/oslc-selection-demo && npm run preview",
+    "demo:serve": "cd src/oslc-selection-demo && npm run serve",
+    "react:demo:dev": "cd src/oslc-selection-react-demo && npm run dev",
+    "react:demo:build": "cd src/oslc-selection-react-demo && npm run build",
+    "react:demo:preview": "cd src/oslc-selection-react-demo && npm run preview",
     "lint": "echo 'Linting not configured'",
     "test": "echo 'Root level tests not configured'"
   },
@@ -29,7 +44,9 @@
     "selection",
     "webcomponent",
     "postmessage",
-    "delegated-ui"
+    "delegated-ui",
+    "react",
+    "demo"
   ],
   "author": "OSLC Community",
   "license": "EPL-1.0 OR EDL-1.0",
@@ -37,10 +54,6 @@
     "url": "https://github.com/OSLC/olsc-selection-utils/issues"
   },
   "homepage": "https://github.com/OSLC/olsc-selection-utils#readme",
-  "workspaces": [
-    "src/oslc-postmessage-helper",
-    "src/oslc-selection-webcomponent"
-  ],
   "engines": {
     "node": ">=16.0.0",
     "npm": ">=7.0.0"
diff --git a/src/oslc-selection-demo/demo.js b/src/oslc-selection-demo/demo.js
new file mode 100644
index 0000000..2b6adb6
--- /dev/null
+++ b/src/oslc-selection-demo/demo.js
@@ -0,0 +1,45 @@
+// Import the OSLC Selection WebComponent
+import '@oslc/oslc-selection-webcomponent'
+
+// Load OSLC components
+async function loadOslcComponents() {
+    try {
+        console.log('🔄 Loading OSLC Selection WebComponent...')
+        
+        // Check if the component is available
+        const checkComponent = () => {
+            if (customElements.get('oslc-selection-button')) {
+                console.log('✅ OSLC Selection WebComponent loaded successfully')
+                window.oslcProductionLoaded = true
+                updateBuildStatus()
+            } else {
+                console.log('⏳ Waiting for OSLC component to load...')
+                setTimeout(checkComponent, 100)
+            }
+        }
+        
+        checkComponent()
+        
+    } catch (error) {
+        console.error('❌ Failed to load OSLC component:', error)
+        window.oslcLoadError = error.message
+        updateBuildStatus()
+    }
+}
+
+// Make updateBuildStatus available globally
+window.updateBuildStatus = function() {
+    const statusElement = document.getElementById('build-status')
+    if (statusElement) {
+        if (window.oslcProductionLoaded) {
+            statusElement.innerHTML = '<span class="text-success">✅ Production components loaded successfully</span>'
+        } else if (window.oslcLoadError) {
+            statusElement.innerHTML = `<span class="text-danger">❌ Failed to load components: ${window.oslcLoadError}</span>`
+        } else {
+            statusElement.innerHTML = '<span class="text-warning">⚠️ Components not loaded yet</span>'
+        }
+    }
+}
+
+// Load components immediately
+loadOslcComponents() 
\ No newline at end of file
diff --git a/src/oslc-selection-demo/index.html b/src/oslc-selection-demo/index.html
index c72d176..5f1501c 100644
--- a/src/oslc-selection-demo/index.html
+++ b/src/oslc-selection-demo/index.html
@@ -12,47 +12,8 @@
     <!-- Bootstrap for styling -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     
-    <!-- OSLC Components - load from local build -->
-    <script type="module">
-        // Load OSLC components
-        async function loadOslcComponents() {
-            try {
-                console.log('🔄 Loading OSLC Selection WebComponent...');
-                
-                // Load the browser-optimized bundle
-                await import('./vendor/@oslc/oslc-selection-webcomponent/index.browser.js');
-                console.log('✅ OSLC Selection WebComponent loaded successfully');
-                
-                // Set flag for build status
-                window.oslcProductionLoaded = true;
-                
-                // Update build status immediately
-                updateBuildStatus();
-                
-            } catch (error) {
-                console.error('❌ Failed to load OSLC component:', error);
-                window.oslcLoadError = error.message;
-                updateBuildStatus();
-            }
-        }
-        
-        // Make updateBuildStatus available globally
-        window.updateBuildStatus = function() {
-            const statusElement = document.getElementById('build-status');
-            if (statusElement) {
-                if (window.oslcProductionLoaded) {
-                    statusElement.innerHTML = '<span class="text-success">✅ Production components loaded successfully</span>';
-                } else if (window.oslcLoadError) {
-                    statusElement.innerHTML = `<span class="text-danger">❌ Failed to load components: ${window.oslcLoadError}</span>`;
-                } else {
-                    statusElement.innerHTML = '<span class="text-warning">⚠️ Components not loaded yet</span>';
-                }
-            }
-        }
-        
-        // Load components immediately
-        loadOslcComponents();
-    </script>
+    <!-- OSLC Components - load from workspace dependency -->
+    <script type="module" src="./demo.js"></script>
     
     <style>
         body {
diff --git a/src/oslc-selection-demo/package.json b/src/oslc-selection-demo/package.json
new file mode 100644
index 0000000..5337c06
--- /dev/null
+++ b/src/oslc-selection-demo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "oslc-selection-demo",
+  "version": "1.0.0",
+  "description": "HTML demo for OSLC Selection WebComponent",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "vite preview --port 8080",
+    "serve:python": "python -m http.server 8080",
+    "serve:npm": "npx serve .",
+    "clean": "rm -rf dist node_modules"
+  },
+  "dependencies": {
+    "@oslc/oslc-selection-webcomponent": "file:../oslc-selection-webcomponent"
+  },
+  "devDependencies": {
+    "vite": "^5.0.8",
+    "serve": "^14.0.0"
+  }
+} 
\ No newline at end of file
diff --git a/src/oslc-selection-demo/vite.config.js b/src/oslc-selection-demo/vite.config.js
new file mode 100644
index 0000000..2513937
--- /dev/null
+++ b/src/oslc-selection-demo/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    port: 8080,
+    open: true
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true
+  },
+  optimizeDeps: {
+    include: ['@oslc/oslc-selection-webcomponent']
+  }
+}) 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/README.md b/src/oslc-selection-react-demo/README.md
new file mode 100644
index 0000000..7c8b505
--- /dev/null
+++ b/src/oslc-selection-react-demo/README.md
@@ -0,0 +1,151 @@
+# OSLC Selection WebComponent - React Demo
+
+This is a React-based demo showcasing the integration of the OSLC Selection WebComponent with modern React development practices.
+
+## Features
+
+- **React Integration**: Demonstrates how to use the OSLC Selection WebComponent in React applications
+- **State Management**: Uses React hooks for managing selection state
+- **Event Handling**: Proper cleanup of event listeners
+- **Styling Examples**: Showcases various CSS custom property themes
+- **Hot Reloading**: Vite development server with instant updates
+- **TypeScript Support**: Full TypeScript support for better development experience
+
+## Prerequisites
+
+Before running this demo, you need to build the OSLC components:
+
+```bash
+# From the root directory
+npm run build
+```
+
+## Installation
+
+```bash
+# Navigate to the React demo directory
+cd src/oslc-selection-react-demo
+
+# Install dependencies
+npm install
+```
+
+## Development
+
+```bash
+# Start the development server
+npm run dev
+```
+
+The demo will be available at `http://localhost:3000`
+
+## Production Build
+
+```bash
+# Build for production
+npm run build
+
+# Preview the production build
+npm run preview
+```
+
+## Key Integration Points
+
+### 1. Importing the Web Component
+
+```javascript
+import '@oslc/oslc-selection-webcomponent'
+```
+
+### 2. Using the Component in React
+
+```jsx
+import React, { useRef, useEffect } from 'react'
+
+function MyComponent() {
+  const buttonRef = useRef(null)
+  
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.setAttribute('dialog-url', 'your-oslc-url')
+    }
+  }, [])
+
+  return (
+    <oslc-selection-button 
+      ref={buttonRef}
+      dialog-title="Select Resources"
+      button-text="Browse Items">
+    </oslc-selection-button>
+  )
+}
+```
+
+### 3. Handling Selection Events
+
+```jsx
+useEffect(() => {
+  const handleSelection = (event) => {
+    const resources = event.detail.resources
+    console.log('Selected:', resources)
+  }
+
+  document.addEventListener('oslc-selection-made', handleSelection)
+  return () => {
+    document.removeEventListener('oslc-selection-made', handleSelection)
+  }
+}, [])
+```
+
+## Styling
+
+The demo includes various CSS custom property themes that can be applied to the OSLC Selection WebComponent:
+
+- Material Design
+- Bootstrap Style
+- Rounded Theme
+- Dark Theme
+- Outline Theme
+- Success Theme
+- Large Theme
+- Compact Theme
+- Animated Theme
+
+## Project Structure
+
+```
+src/oslc-selection-react-demo/
+├── src/
+│   ├── components/
+│   │   ├── HeroSection.jsx
+│   │   ├── LiveDemo.jsx
+│   │   ├── ResultsSection.jsx
+│   │   ├── StylingExamples.jsx
+│   │   ├── IntegrationExamples.jsx
+│   │   ├── BuildInstructions.jsx
+│   │   └── Footer.jsx
+│   ├── App.jsx
+│   ├── App.css
+│   ├── main.jsx
+│   └── index.css
+├── index.html
+├── package.json
+├── vite.config.js
+└── README.md
+```
+
+## Dependencies
+
+- React 18.2.0
+- React DOM 18.2.0
+- Vite 5.0.8
+- @oslc/oslc-selection-webcomponent (local dependency)
+- Bootstrap 5.3.3 (CDN)
+
+## Browser Support
+
+This demo requires modern browsers that support:
+- ES6 modules
+- Custom Elements
+- CSS Custom Properties
+- React 18 features 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/index.html b/src/oslc-selection-react-demo/index.html
new file mode 100644
index 0000000..2a23855
--- /dev/null
+++ b/src/oslc-selection-react-demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OSLC Selection WebComponent - React Demo</title>
+    
+    <!-- Bootstrap for styling -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Analytics -->
+    <script defer src="https://umami.open-services.net/script.js" data-website-id="53db8152-c0ba-44de-9ebd-f8f69ed28d75"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html> 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/package.json b/src/oslc-selection-react-demo/package.json
new file mode 100644
index 0000000..1067810
--- /dev/null
+++ b/src/oslc-selection-react-demo/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "oslc-selection-react-demo",
+  "version": "1.0.0",
+  "description": "React demo for OSLC Selection WebComponent",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "vite preview --port 3000",
+    "clean": "rm -rf dist node_modules"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@oslc/oslc-selection-webcomponent": "file:../oslc-selection-webcomponent"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.8"
+  }
+} 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/App.css b/src/oslc-selection-react-demo/src/App.css
new file mode 100644
index 0000000..a936ca0
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/App.css
@@ -0,0 +1,89 @@
+.App {
+  min-height: 100vh;
+}
+
+.hero-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 4rem 0;
+}
+
+.demo-card {
+  border: none;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.demo-section {
+  background: white;
+  padding: 30px;
+  margin: 20px 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin: 20px 0;
+}
+
+.demo-item {
+  padding: 20px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #f8f9fa;
+}
+
+.demo-item h4 {
+  margin-top: 0;
+  color: #495057;
+}
+
+.resource-item {
+  border-left: 4px solid #007bff;
+  background: #f8f9fa;
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0 4px 4px 0;
+}
+
+.resource-url {
+  font-family: monospace;
+  font-size: 0.85em;
+  color: #6c757d;
+  word-break: break-all;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: #6c757d;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 2px dashed #dee2e6;
+}
+
+.code-snippet {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 1rem;
+  font-family: monospace;
+  font-size: 0.9em;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.code-block {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 15px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 14px;
+  overflow-x: auto;
+  margin: 10px 0;
+  white-space: pre-wrap;
+} 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/App.jsx b/src/oslc-selection-react-demo/src/App.jsx
new file mode 100644
index 0000000..c993eeb
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/App.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import HeroSection from './components/HeroSection'
+import LiveDemo from './components/LiveDemo'
+import ResultsSection from './components/ResultsSection'
+import StylingExamples from './components/StylingExamples'
+import IntegrationExamples from './components/IntegrationExamples'
+import BuildInstructions from './components/BuildInstructions'
+import Footer from './components/Footer'
+import './App.css'
+
+// Import the OSLC web component
+import '@oslc/oslc-selection-webcomponent'
+
+function App() {
+  const [oslcLoaded, setOslcLoaded] = useState(false)
+  const [loadError, setLoadError] = useState(null)
+  const [selectedResources, setSelectedResources] = useState([])
+
+  useEffect(() => {
+    // Check if the OSLC component is available
+    const checkOslcComponent = () => {
+      if (customElements.get('oslc-selection-button')) {
+        console.log('✅ OSLC Selection WebComponent loaded successfully')
+        setOslcLoaded(true)
+      } else {
+        console.log('⏳ Waiting for OSLC component to load...')
+        setTimeout(checkOslcComponent, 100)
+      }
+    }
+
+    // Start checking for the component
+    checkOslcComponent()
+  }, [])
+
+  // Handle OSLC selection events
+  useEffect(() => {
+    const handleSelectionMade = (event) => {
+      console.log('OSLC Selection Made:', event.detail.resources)
+      setSelectedResources(event.detail.resources)
+    }
+
+    const handleSelectionCancelled = (event) => {
+      console.log('OSLC Selection Cancelled:', event.detail.reason)
+      // You could show a notification here
+    }
+
+    document.addEventListener('oslc-selection-made', handleSelectionMade)
+    document.addEventListener('oslc-selection-cancelled', handleSelectionCancelled)
+
+    return () => {
+      document.removeEventListener('oslc-selection-made', handleSelectionMade)
+      document.removeEventListener('oslc-selection-cancelled', handleSelectionCancelled)
+    }
+  }, [])
+
+  const clearSelection = () => {
+    setSelectedResources([])
+  }
+
+  const removeResource = (index) => {
+    setSelectedResources(prev => prev.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div className="App">
+      <HeroSection oslcLoaded={oslcLoaded} loadError={loadError} />
+      
+      <div className="container mt-5">
+        <LiveDemo 
+          oslcLoaded={oslcLoaded} 
+          selectedResources={selectedResources}
+          onSelectionUpdate={setSelectedResources}
+        />
+        
+        <ResultsSection 
+          selectedResources={selectedResources}
+          onClearSelection={clearSelection}
+          onRemoveResource={removeResource}
+        />
+        
+        <StylingExamples oslcLoaded={oslcLoaded} />
+        
+        <IntegrationExamples />
+        
+        <BuildInstructions />
+      </div>
+      
+      <Footer />
+    </div>
+  )
+}
+
+export default App 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/BuildInstructions.jsx b/src/oslc-selection-react-demo/src/components/BuildInstructions.jsx
new file mode 100644
index 0000000..284bf4d
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/BuildInstructions.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+const BuildInstructions = () => {
+  return (
+    <div className="demo-section">
+      <div className="card demo-card">
+        <div className="card-header bg-info text-white">
+          <h3 className="card-title mb-0">
+            <i className="bi bi-gear"></i> Build Instructions
+          </h3>
+        </div>
+        <div className="card-body">
+          <h5>To build and run the React demo:</h5>
+          <div className="code-snippet">{`# Install dependencies
+cd src/oslc-selection-react-demo
+npm install
+
+# Build the OSLC components first (from root directory)
+cd ../../..
+npm run build
+
+# Start the React development server
+cd src/oslc-selection-react-demo
+npm run dev
+
+# Or build for production
+npm run build
+npm run preview`}</div>
+          <p className="mt-3">The React demo will automatically load the OSLC components from the vendor directory and provide a modern development experience with hot reloading.</p>
+          
+          <h6 className="mt-4">Key Features:</h6>
+          <ul>
+            <li><strong>Hot Reloading:</strong> Changes to React components are reflected immediately</li>
+            <li><strong>TypeScript Support:</strong> Full TypeScript support for better development experience</li>
+            <li><strong>Component State Management:</strong> React hooks for managing selection state</li>
+            <li><strong>Event Handling:</strong> Proper cleanup of event listeners</li>
+            <li><strong>Responsive Design:</strong> Bootstrap integration for mobile-friendly UI</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BuildInstructions 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/Footer.jsx b/src/oslc-selection-react-demo/src/components/Footer.jsx
new file mode 100644
index 0000000..97f97e3
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/Footer.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer className="bg-dark text-light py-4 mt-5">
+      <div className="container">
+        <div className="row">
+          <div className="col-md-6">
+            <h5>OSLC Selection WebComponent - React Demo</h5>
+            <p className="mb-0">A modern React integration showcasing OSLC selection dialogs with comprehensive styling support.</p>
+          </div>
+          <div className="col-md-6 text-md-end">
+            <p className="mb-0">
+              Built with React • Web Standards • OSLC Core 3.0 • TypeScript • CSS Custom Properties
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/HeroSection.jsx b/src/oslc-selection-react-demo/src/components/HeroSection.jsx
new file mode 100644
index 0000000..37682dd
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/HeroSection.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+const HeroSection = ({ oslcLoaded, loadError }) => {
+  const getBuildStatus = () => {
+    if (oslcLoaded) {
+      return <span className="text-success">✅ Production components loaded successfully</span>
+    } else if (loadError) {
+      return <span className="text-danger">❌ Failed to load components: {loadError}</span>
+    } else {
+      return <span className="text-warning">⚠️ Components not loaded yet</span>
+    }
+  }
+
+  return (
+    <div className="hero-section">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mx-auto text-center">
+            <h1 className="display-4 fw-bold mb-4">OSLC Selection WebComponent - React Demo</h1>
+            <p className="lead">
+              Experience the OSLC Selection WebComponent integrated with React. This demo showcases 
+              both the functional OSLC integration and the comprehensive theming system using CSS custom properties.
+            </p>
+            <div className="alert alert-info mt-4" role="alert">
+              <strong>Build Status:</strong> {getBuildStatus()}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HeroSection 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/IntegrationExamples.jsx b/src/oslc-selection-react-demo/src/components/IntegrationExamples.jsx
new file mode 100644
index 0000000..65064cd
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/IntegrationExamples.jsx
@@ -0,0 +1,112 @@
+import React from 'react'
+
+const IntegrationExamples = () => {
+  return (
+    <div className="demo-section">
+      <div className="card demo-card">
+        <div className="card-header bg-warning text-dark">
+          <h3 className="card-title mb-0">
+            <i className="bi bi-code-square"></i> Integration Examples
+          </h3>
+        </div>
+        <div className="card-body">
+          <div className="row">
+            <div className="col-md-6">
+              <h5>Custom Hook (Recommended)</h5>
+              <div className="code-snippet">{`import React from 'react';
+import { useOslcSelection } from './hooks/useOslcSelection';
+
+function MyComponent() {
+  const { buttonRef, selectedResources, isLoaded, clearSelection } = useOslcSelection(
+    'https://your-oslc-url/selector',
+    (resources) => {
+      console.log('Selected:', resources);
+    },
+    (reason) => {
+      console.log('Cancelled:', reason);
+    }
+  );
+
+  if (!isLoaded) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <oslc-selection-button 
+        ref={buttonRef}
+        dialog-title="Select Resources"
+        button-text="Browse Items">
+      </oslc-selection-button>
+      
+      {selectedResources.length > 0 && (
+        <div>
+          <h6>Selected ({selectedResources.length}):</h6>
+          <button onClick={clearSelection}>Clear</button>
+          <ul>
+            {selectedResources.map((resource, index) => (
+              <li key={index}>{resource['oslc:label']}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}`}</div>
+            </div>
+            
+            <div className="col-md-6">
+              <h5>React Functional Component</h5>
+              <div className="code-snippet">{`import React, { useRef, useEffect, useState } from 'react';
+
+function OslcSelector({ dialogUrl, onSelection }) {
+  const buttonRef = useRef(null);
+  const [selectedResources, setSelectedResources] = useState([]);
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.setAttribute('dialog-url', dialogUrl);
+    }
+  }, [dialogUrl]);
+
+  useEffect(() => {
+    const handleSelection = (event) => {
+      const resources = event.detail.resources;
+      setSelectedResources(resources);
+      onSelection?.(resources);
+    };
+
+    document.addEventListener('oslc-selection-made', handleSelection);
+    return () => {
+      document.removeEventListener('oslc-selection-made', handleSelection);
+    };
+  }, [onSelection]);
+
+  return (
+    <div>
+      <oslc-selection-button 
+        ref={buttonRef}
+        dialog-title="Select Resources"
+        button-text="Browse Items">
+      </oslc-selection-button>
+      
+      {selectedResources.length > 0 && (
+        <div className="mt-3">
+          <h6>Selected ({selectedResources.length}):</h6>
+          <ul>
+            {selectedResources.map((resource, index) => (
+              <li key={index}>{resource['oslc:label']}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}`}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IntegrationExamples 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/LiveDemo.jsx b/src/oslc-selection-react-demo/src/components/LiveDemo.jsx
new file mode 100644
index 0000000..fa80d6d
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/LiveDemo.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect, useRef } from 'react'
+
+const LiveDemo = ({ oslcLoaded, selectedResources, onSelectionUpdate }) => {
+  const [dialogUrl, setDialogUrl] = useState('https://rm.refimpl.oslc.ldsw.eu/services/serviceProviders/sp_single/service1/requirements/selector')
+  const [protocol, setProtocol] = useState('#oslc-core-postMessage-1.0')
+  const buttonRef = useRef(null)
+
+  const fullUrl = dialogUrl + protocol
+
+  // Update button URL when URL or protocol changes
+  useEffect(() => {
+    if (buttonRef.current && oslcLoaded) {
+      buttonRef.current.setAttribute('dialog-url', fullUrl)
+    }
+  }, [fullUrl, oslcLoaded])
+
+  const parseUrlAndSetProtocol = (url) => {
+    if (url.includes('#oslc-core-windowName-1.0')) {
+      setProtocol('#oslc-core-windowName-1.0')
+      return url.replace('#oslc-core-windowName-1.0', '')
+    } else if (url.includes('#oslc-core-postMessage-1.0')) {
+      setProtocol('#oslc-core-postMessage-1.0')
+      return url.replace('#oslc-core-postMessage-1.0', '')
+    } else {
+      setProtocol('#oslc-core-postMessage-1.0')
+      return url
+    }
+  }
+
+  const handleUrlChange = (e) => {
+    const newUrl = e.target.value.trim()
+    const baseUrl = parseUrlAndSetProtocol(newUrl)
+    setDialogUrl(baseUrl)
+  }
+
+  const handleProtocolChange = (e) => {
+    setProtocol(e.target.value)
+  }
+
+  return (
+    <div className="demo-section">
+      <div className="card demo-card">
+        <div className="card-header bg-primary text-white">
+          <h2 className="card-title mb-0">
+            <i className="bi bi-play-circle"></i> Live Functional Demo
+          </h2>
+        </div>
+        <div className="card-body">
+          <div className="row">
+            <div className="col-md-6">
+              <h5>Try the Selection Component:</h5>
+              <p className="text-muted">
+                Click the button below to experience OSLC resource selection. This demo simulates 
+                the selection process and displays the results.
+              </p>
+              
+              {/* OSLC Selection Button */}
+              {oslcLoaded ? (
+                <oslc-selection-button 
+                  ref={buttonRef}
+                  dialog-title="Select OSLC Resources"
+                  button-text="Select OSLC Resources"
+                  button-class="btn btn-success btn-lg">
+                </oslc-selection-button>
+              ) : (
+                <button className="btn btn-secondary btn-lg" disabled>
+                  Loading OSLC Component...
+                </button>
+              )}
+              
+              <div className="mt-3">
+                <label htmlFor="dialog-url-input" className="form-label">
+                  <strong>OSLC Selector URL:</strong>
+                </label>
+                <div className="input-group">
+                  <input 
+                    type="url" 
+                    id="dialog-url-input" 
+                    className="form-control" 
+                    value={dialogUrl}
+                    onChange={handleUrlChange}
+                    placeholder="Enter OSLC selector base URL"
+                  />
+                  <select 
+                    id="protocol-selector" 
+                    className="form-select" 
+                    style={{ maxWidth: '250px' }}
+                    value={protocol}
+                    onChange={handleProtocolChange}
+                  >
+                    <option value="#oslc-core-postMessage-1.0">#oslc-core-postMessage-1.0</option>
+                    <option value="#oslc-core-windowName-1.0" disabled>#oslc-core-windowName-1.0</option>
+                  </select>
+                </div>
+                <small className="text-muted form-text">
+                  Change this URL to test with different OSLC providers. The protocol dropdown will be automatically selected based on the URL hash. Default connects to <a href="https://rm.refimpl.oslc.ldsw.eu/" target="_blank" rel="noopener noreferrer">https://rm.refimpl.oslc.ldsw.eu/</a> (credentials: admin/admin).
+                </small>
+              </div>
+            </div>
+            
+            <div className="col-md-6">
+              <h5>Usage in React:</h5>
+              <div className="code-snippet">{`import React, { useRef, useEffect } from 'react';
+
+function MyComponent() {
+  const buttonRef = useRef(null);
+  
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.setAttribute('dialog-url', '${fullUrl}');
+    }
+  }, []);
+
+  return (
+    <oslc-selection-button 
+      ref={buttonRef}
+      dialog-title="Select Resources"
+      button-text="Browse Items">
+    </oslc-selection-button>
+  );
+}`}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LiveDemo 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/OslcSelectorExample.jsx b/src/oslc-selection-react-demo/src/components/OslcSelectorExample.jsx
new file mode 100644
index 0000000..5196138
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/OslcSelectorExample.jsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { useOslcSelection } from '../hooks/useOslcSelection'
+
+const OslcSelectorExample = ({ dialogUrl, title = "Select Resources", buttonText = "Browse Items" }) => {
+  const { buttonRef, selectedResources, isLoaded, clearSelection } = useOslcSelection(
+    dialogUrl,
+    (resources) => {
+      console.log('Resources selected:', resources)
+    },
+    (reason) => {
+      console.log('Selection cancelled:', reason)
+    }
+  )
+
+  if (!isLoaded) {
+    return <div>Loading OSLC component...</div>
+  }
+
+  return (
+    <div className="oslc-selector-example">
+      <h5>{title}</h5>
+      <oslc-selection-button 
+        ref={buttonRef}
+        dialog-title={title}
+        button-text={buttonText}>
+      </oslc-selection-button>
+      
+      {selectedResources.length > 0 && (
+        <div className="mt-3">
+          <div className="d-flex justify-content-between align-items-center">
+            <h6>Selected ({selectedResources.length}):</h6>
+            <button className="btn btn-sm btn-outline-secondary" onClick={clearSelection}>
+              Clear
+            </button>
+          </div>
+          <ul className="list-group">
+            {selectedResources.map((resource, index) => (
+              <li key={index} className="list-group-item">
+                <strong>{resource['oslc:label']}</strong>
+                <br />
+                <small className="text-muted">{resource['rdf:resource']}</small>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OslcSelectorExample 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/ResultsSection.jsx b/src/oslc-selection-react-demo/src/components/ResultsSection.jsx
new file mode 100644
index 0000000..01b1f55
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/ResultsSection.jsx
@@ -0,0 +1,69 @@
+import React from 'react'
+
+const ResultsSection = ({ selectedResources, onClearSelection, onRemoveResource }) => {
+  const escapeHtml = (text) => {
+    const div = document.createElement('div')
+    div.textContent = text
+    return div.innerHTML
+  }
+
+  if (selectedResources.length === 0) {
+    return (
+      <div className="demo-section">
+        <div className="card demo-card">
+          <div className="card-header bg-success text-white">
+            <h3 className="card-title mb-0">
+              <i className="bi bi-check-circle"></i> Selected Resources
+            </h3>
+          </div>
+          <div className="card-body">
+            <div className="empty-state">
+              <h4>No resources selected yet</h4>
+              <p>Use the selection button above to choose OSLC resources. Selected items will appear here.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="demo-section">
+      <div className="card demo-card">
+        <div className="card-header bg-success text-white">
+          <h3 className="card-title mb-0">
+            <i className="bi bi-check-circle"></i> Selected Resources
+          </h3>
+        </div>
+        <div className="card-body">
+          <div className="d-flex justify-content-between align-items-center mb-3">
+            <h5 className="mb-0">Selected {selectedResources.length} resource{selectedResources.length === 1 ? '' : 's'}:</h5>
+            <button className="btn btn-sm btn-outline-secondary" onClick={onClearSelection}>
+              Clear All
+            </button>
+          </div>
+          <div className="resources-list">
+            {selectedResources.map((resource, index) => (
+              <div key={index} className="resource-item">
+                <div className="d-flex justify-content-between align-items-start">
+                  <div className="flex-grow-1">
+                    <h6 className="mb-1">{escapeHtml(resource['oslc:label'])}</h6>
+                    <div className="resource-url">{escapeHtml(resource['rdf:resource'])}</div>
+                  </div>
+                  <button 
+                    className="btn btn-sm btn-outline-danger ms-2" 
+                    onClick={() => onRemoveResource(index)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ResultsSection 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/components/StylingExamples.jsx b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
new file mode 100644
index 0000000..acea9e6
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
@@ -0,0 +1,126 @@
+import React from 'react'
+
+const StylingExamples = ({ oslcLoaded }) => {
+  const themes = [
+    {
+      name: 'Default Theme',
+      className: '',
+      code: '/* No custom properties needed for default styling */'
+    },
+    {
+      name: 'Material Design',
+      className: 'material-theme',
+      code: `.material-theme {
+  --oslc-button-background: #1976d2;
+  --oslc-button-color: white;
+  --oslc-button-font-weight: 500;
+  --oslc-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}`
+    },
+    {
+      name: 'Bootstrap Style',
+      className: 'bootstrap-theme',
+      code: `.bootstrap-theme {
+  --oslc-button-border: 1px solid #007bff;
+  --oslc-button-background: #007bff;
+  --oslc-button-color: #ffffff;
+  --oslc-button-border-radius: 0.375rem;
+}`
+    },
+    {
+      name: 'Rounded Theme',
+      className: 'rounded-theme',
+      code: `.rounded-theme {
+  --oslc-button-border-radius: 25px;
+  --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --oslc-button-hover-transform: translateY(-2px);
+}`
+    },
+    {
+      name: 'Dark Theme',
+      className: 'dark-theme',
+      code: `.dark-theme {
+  --oslc-button-background: #495057;
+  --oslc-button-color: #ffffff;
+  --oslc-button-border: 1px solid #6c757d;
+}`
+    },
+    {
+      name: 'Outline Theme',
+      className: 'outline-theme',
+      code: `.outline-theme {
+  --oslc-button-background: transparent;
+  --oslc-button-color: #007bff;
+  --oslc-button-border: 2px solid #007bff;
+  --oslc-button-hover-background: #007bff;
+  --oslc-button-hover-color: white;
+}`
+    },
+    {
+      name: 'Success Theme',
+      className: 'success-theme',
+      code: `.success-theme {
+  --oslc-button-background: #28a745;
+  --oslc-button-color: white;
+  --oslc-button-hover-background: #218838;
+}`
+    },
+    {
+      name: 'Large Theme',
+      className: 'large-theme',
+      code: `.large-theme {
+  --oslc-button-padding: 16px 32px;
+  --oslc-button-font-size: 1.2rem;
+  --oslc-button-font-weight: 600;
+  --oslc-button-min-width: 200px;
+}`
+    },
+    {
+      name: 'Compact Theme',
+      className: 'compact-theme',
+      code: `.compact-theme {
+  --oslc-button-padding: 4px 8px;
+  --oslc-button-font-size: 0.875rem;
+  --oslc-button-border-radius: 2px;
+}`
+    },
+    {
+      name: 'Animated Theme',
+      className: 'animated-theme',
+      code: `.animated-theme {
+  --oslc-button-background: #ff6b6b;
+  --oslc-button-hover-transform: scale(1.05);
+  --oslc-button-active-transform: scale(0.95);
+  --oslc-button-transition: all 0.3s ease;
+}`
+    }
+  ]
+
+  return (
+    <div className="demo-section">
+      <h2>Component Styling Examples</h2>
+      <p>The OSLC Selection WebComponent supports extensive styling through CSS custom properties. Here are various pre-built themes:</p>
+      
+      <div className="demo-grid">
+        {themes.map((theme, index) => (
+          <div key={index} className="demo-item">
+            <h4>{theme.name}</h4>
+            {oslcLoaded ? (
+              <oslc-selection-button 
+                className={theme.className}
+                button-text={`${theme.name} Button`}>
+              </oslc-selection-button>
+            ) : (
+              <button className="btn btn-secondary" disabled>
+                Loading...
+              </button>
+            )}
+            <div className="code-block">{theme.code}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default StylingExamples 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/hooks/useOslcSelection.js b/src/oslc-selection-react-demo/src/hooks/useOslcSelection.js
new file mode 100644
index 0000000..d0e82a7
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/hooks/useOslcSelection.js
@@ -0,0 +1,65 @@
+import { useState, useEffect, useRef } from 'react'
+
+/**
+ * Custom hook for integrating OSLC Selection WebComponent with React
+ * @param {string} dialogUrl - The OSLC selector URL
+ * @param {Function} onSelection - Callback when resources are selected
+ * @param {Function} onCancellation - Callback when selection is cancelled
+ * @returns {Object} - Object containing button ref and selected resources
+ */
+export function useOslcSelection(dialogUrl, onSelection, onCancellation) {
+  const [selectedResources, setSelectedResources] = useState([])
+  const [isLoaded, setIsLoaded] = useState(false)
+  const buttonRef = useRef(null)
+
+  // Check if OSLC component is available
+  useEffect(() => {
+    const checkComponent = () => {
+      if (customElements.get('oslc-selection-button')) {
+        setIsLoaded(true)
+      } else {
+        setTimeout(checkComponent, 100)
+      }
+    }
+    checkComponent()
+  }, [])
+
+  // Set dialog URL when component is loaded
+  useEffect(() => {
+    if (buttonRef.current && isLoaded && dialogUrl) {
+      buttonRef.current.setAttribute('dialog-url', dialogUrl)
+    }
+  }, [dialogUrl, isLoaded])
+
+  // Handle selection events
+  useEffect(() => {
+    const handleSelection = (event) => {
+      const resources = event.detail.resources
+      setSelectedResources(resources)
+      onSelection?.(resources)
+    }
+
+    const handleCancellation = (event) => {
+      onCancellation?.(event.detail.reason)
+    }
+
+    document.addEventListener('oslc-selection-made', handleSelection)
+    document.addEventListener('oslc-selection-cancelled', handleCancellation)
+
+    return () => {
+      document.removeEventListener('oslc-selection-made', handleSelection)
+      document.removeEventListener('oslc-selection-cancelled', handleCancellation)
+    }
+  }, [onSelection, onCancellation])
+
+  const clearSelection = () => {
+    setSelectedResources([])
+  }
+
+  return {
+    buttonRef,
+    selectedResources,
+    isLoaded,
+    clearSelection
+  }
+} 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/index.css b/src/oslc-selection-react-demo/src/index.css
new file mode 100644
index 0000000..49e9a5e
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/index.css
@@ -0,0 +1,109 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  background: #f8f9fa;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+/* Theme Examples - CSS Custom Properties for Styling */
+
+/* Material Design Theme */
+.material-theme {
+  --oslc-button-border-radius: 4px;
+  --oslc-button-background: #1976d2;
+  --oslc-button-color: white;
+  --oslc-button-padding: 8px 16px;
+  --oslc-button-font-weight: 500;
+  --oslc-button-hover-background: #1565c0;
+  --oslc-button-active-background: #0d47a1;
+  --oslc-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Bootstrap Theme */
+.bootstrap-theme {
+  --oslc-button-border-radius: 0.375rem;
+  --oslc-button-padding: 0.375rem 0.75rem;
+  --oslc-button-font-size: 1rem;
+  --oslc-button-border: 1px solid #007bff;
+  --oslc-button-background: #007bff;
+  --oslc-button-color: #ffffff;
+  --oslc-button-hover-background: #0056b3;
+  --oslc-button-hover-border-color: #0056b3;
+  --oslc-button-active-background: #004085;
+}
+
+/* Rounded Theme */
+.rounded-theme {
+  --oslc-button-border-radius: 25px;
+  --oslc-button-padding: 12px 24px;
+  --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --oslc-button-color: white;
+  --oslc-button-border: none;
+  --oslc-button-font-weight: 600;
+  --oslc-button-hover-transform: translateY(-2px);
+  --oslc-button-transition: all 0.3s ease;
+}
+
+/* Dark Theme */
+.dark-theme {
+  --oslc-button-background: #495057;
+  --oslc-button-color: #ffffff;
+  --oslc-button-border: 1px solid #6c757d;
+  --oslc-button-hover-background: #5a6268;
+  --oslc-button-hover-border-color: #545b62;
+  --oslc-button-active-background: #343a40;
+}
+
+/* Outline Theme */
+.outline-theme {
+  --oslc-button-background: transparent;
+  --oslc-button-color: #007bff;
+  --oslc-button-border: 2px solid #007bff;
+  --oslc-button-hover-background: #007bff;
+  --oslc-button-hover-color: white;
+  --oslc-button-active-background: #0056b3;
+}
+
+/* Success Theme */
+.success-theme {
+  --oslc-button-background: #28a745;
+  --oslc-button-color: white;
+  --oslc-button-border: 1px solid #28a745;
+  --oslc-button-hover-background: #218838;
+  --oslc-button-hover-border-color: #1e7e34;
+  --oslc-button-active-background: #1e7e34;
+}
+
+/* Large Button Theme */
+.large-theme {
+  --oslc-button-padding: 16px 32px;
+  --oslc-button-font-size: 1.2rem;
+  --oslc-button-font-weight: 600;
+  --oslc-button-min-width: 200px;
+  --oslc-button-border-radius: 8px;
+}
+
+/* Compact Theme */
+.compact-theme {
+  --oslc-button-padding: 4px 8px;
+  --oslc-button-font-size: 0.875rem;
+  --oslc-button-border-radius: 2px;
+}
+
+/* Custom Animation Theme */
+.animated-theme {
+  --oslc-button-background: #ff6b6b;
+  --oslc-button-color: white;
+  --oslc-button-border: none;
+  --oslc-button-border-radius: 6px;
+  --oslc-button-transition: all 0.3s ease;
+  --oslc-button-hover-background: #ff5252;
+  --oslc-button-hover-transform: scale(1.05);
+  --oslc-button-active-transform: scale(0.95);
+} 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/main.jsx b/src/oslc-selection-react-demo/src/main.jsx
new file mode 100644
index 0000000..79bc0ce
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+) 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/src/types.d.ts b/src/oslc-selection-react-demo/src/types.d.ts
new file mode 100644
index 0000000..ece45b9
--- /dev/null
+++ b/src/oslc-selection-react-demo/src/types.d.ts
@@ -0,0 +1,20 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'oslc-selection-button': {
+      'dialog-url'?: string
+      'dialog-title'?: string
+      'button-text'?: string
+      'button-class'?: string
+      className?: string
+      ref?: React.RefObject<HTMLElement>
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'oslc-selection-button': HTMLElement
+  }
+}
+
+export {} 
\ No newline at end of file
diff --git a/src/oslc-selection-react-demo/vite.config.js b/src/oslc-selection-react-demo/vite.config.js
new file mode 100644
index 0000000..b015e68
--- /dev/null
+++ b/src/oslc-selection-react-demo/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true
+  }
+}) 
\ No newline at end of file

From 4ab81e1f2939bbcd0a25f7220d96243389389677 Mon Sep 17 00:00:00 2001
From: Andrew Berezovskyi <andrew@berezovskyi.me>
Date: Thu, 10 Jul 2025 21:21:50 +0200
Subject: [PATCH 2/3] fix: styled buttons in React

Signed-off-by: Andrew Berezovskyi <andrew@berezovskyi.me>
---
 src/oslc-selection-demo/index.html            | 72 ++++++++++++-------
 .../src/components/StylingExamples.jsx        | 39 +++++-----
 src/oslc-selection-react-demo/src/index.css   | 18 ++---
 3 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/src/oslc-selection-demo/index.html b/src/oslc-selection-demo/index.html
index 5f1501c..b06e95d 100644
--- a/src/oslc-selection-demo/index.html
+++ b/src/oslc-selection-demo/index.html
@@ -110,7 +110,7 @@
         /* Theme Examples - CSS Custom Properties for Styling */
         
         /* Material Design Theme */
-        .material-theme {
+        .material-theme oslc-selection-button {
             --oslc-button-border-radius: 4px;
             --oslc-button-background: #1976d2;
             --oslc-button-color: white;
@@ -122,7 +122,7 @@
         }
         
         /* Bootstrap Theme */
-        .bootstrap-theme {
+        .bootstrap-theme oslc-selection-button {
             --oslc-button-border-radius: 0.375rem;
             --oslc-button-padding: 0.375rem 0.75rem;
             --oslc-button-font-size: 1rem;
@@ -135,7 +135,7 @@
         }
         
         /* Rounded Theme */
-        .rounded-theme {
+        .rounded-theme oslc-selection-button {
             --oslc-button-border-radius: 25px;
             --oslc-button-padding: 12px 24px;
             --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -147,7 +147,7 @@
         }
         
         /* Dark Theme */
-        .dark-theme {
+        .dark-theme oslc-selection-button {
             --oslc-button-background: #495057;
             --oslc-button-color: #ffffff;
             --oslc-button-border: 1px solid #6c757d;
@@ -157,7 +157,7 @@
         }
         
         /* Outline Theme */
-        .outline-theme {
+        .outline-theme oslc-selection-button {
             --oslc-button-background: transparent;
             --oslc-button-color: #007bff;
             --oslc-button-border: 2px solid #007bff;
@@ -167,7 +167,7 @@
         }
         
         /* Success Theme */
-        .success-theme {
+        .success-theme oslc-selection-button {
             --oslc-button-background: #28a745;
             --oslc-button-color: white;
             --oslc-button-border: 1px solid #28a745;
@@ -177,7 +177,7 @@
         }
         
         /* Large Button Theme */
-        .large-theme {
+        .large-theme oslc-selection-button {
             --oslc-button-padding: 16px 32px;
             --oslc-button-font-size: 1.2rem;
             --oslc-button-font-weight: 600;
@@ -186,14 +186,14 @@
         }
         
         /* Compact Theme */
-        .compact-theme {
+        .compact-theme oslc-selection-button {
             --oslc-button-padding: 4px 8px;
             --oslc-button-font-size: 0.875rem;
             --oslc-button-border-radius: 2px;
         }
         
         /* Custom Animation Theme */
-        .animated-theme {
+        .animated-theme oslc-selection-button {
             --oslc-button-background: #ff6b6b;
             --oslc-button-color: white;
             --oslc-button-border: none;
@@ -324,8 +324,10 @@ <h4>Default Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Material Design</h4>
-                    <oslc-selection-button class="material-theme" button-text="Material Button"></oslc-selection-button>
-                    <div class="code-block">.material-theme {
+                    <div class="material-theme">
+                        <oslc-selection-button button-text="Material Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.material-theme oslc-selection-button {
     --oslc-button-background: #1976d2;
     --oslc-button-color: white;
     --oslc-button-font-weight: 500;
@@ -335,8 +337,10 @@ <h4>Material Design</h4>
                 
                 <div class="demo-item">
                     <h4>Bootstrap Style</h4>
-                    <oslc-selection-button class="bootstrap-theme" button-text="Bootstrap Button"></oslc-selection-button>
-                    <div class="code-block">.bootstrap-theme {
+                    <div class="bootstrap-theme">
+                        <oslc-selection-button button-text="Bootstrap Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.bootstrap-theme oslc-selection-button {
     --oslc-button-border: 1px solid #007bff;
     --oslc-button-background: #007bff;
     --oslc-button-color: #ffffff;
@@ -346,8 +350,10 @@ <h4>Bootstrap Style</h4>
                 
                 <div class="demo-item">
                     <h4>Rounded Theme</h4>
-                    <oslc-selection-button class="rounded-theme" button-text="Rounded Button"></oslc-selection-button>
-                    <div class="code-block">.rounded-theme {
+                    <div class="rounded-theme">
+                        <oslc-selection-button button-text="Rounded Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.rounded-theme oslc-selection-button {
     --oslc-button-border-radius: 25px;
     --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --oslc-button-hover-transform: translateY(-2px);
@@ -356,8 +362,10 @@ <h4>Rounded Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Dark Theme</h4>
-                    <oslc-selection-button class="dark-theme" button-text="Dark Button"></oslc-selection-button>
-                    <div class="code-block">.dark-theme {
+                    <div class="dark-theme">
+                        <oslc-selection-button button-text="Dark Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.dark-theme oslc-selection-button {
     --oslc-button-background: #495057;
     --oslc-button-color: #ffffff;
     --oslc-button-border: 1px solid #6c757d;
@@ -366,8 +374,10 @@ <h4>Dark Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Outline Theme</h4>
-                    <oslc-selection-button class="outline-theme" button-text="Outline Button"></oslc-selection-button>
-                    <div class="code-block">.outline-theme {
+                    <div class="outline-theme">
+                        <oslc-selection-button button-text="Outline Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.outline-theme oslc-selection-button {
     --oslc-button-background: transparent;
     --oslc-button-color: #007bff;
     --oslc-button-border: 2px solid #007bff;
@@ -378,8 +388,10 @@ <h4>Outline Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Success Theme</h4>
-                    <oslc-selection-button class="success-theme" button-text="Success Button"></oslc-selection-button>
-                    <div class="code-block">.success-theme {
+                    <div class="success-theme">
+                        <oslc-selection-button button-text="Success Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.success-theme oslc-selection-button {
     --oslc-button-background: #28a745;
     --oslc-button-color: white;
     --oslc-button-hover-background: #218838;
@@ -388,8 +400,10 @@ <h4>Success Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Large Theme</h4>
-                    <oslc-selection-button class="large-theme" button-text="Large Button"></oslc-selection-button>
-                    <div class="code-block">.large-theme {
+                    <div class="large-theme">
+                        <oslc-selection-button button-text="Large Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.large-theme oslc-selection-button {
     --oslc-button-padding: 16px 32px;
     --oslc-button-font-size: 1.2rem;
     --oslc-button-font-weight: 600;
@@ -399,8 +413,10 @@ <h4>Large Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Compact Theme</h4>
-                    <oslc-selection-button class="compact-theme" button-text="Compact"></oslc-selection-button>
-                    <div class="code-block">.compact-theme {
+                    <div class="compact-theme">
+                        <oslc-selection-button button-text="Compact"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.compact-theme oslc-selection-button {
     --oslc-button-padding: 4px 8px;
     --oslc-button-font-size: 0.875rem;
     --oslc-button-border-radius: 2px;
@@ -409,8 +425,10 @@ <h4>Compact Theme</h4>
                 
                 <div class="demo-item">
                     <h4>Animated Theme</h4>
-                    <oslc-selection-button class="animated-theme" button-text="Animated Button"></oslc-selection-button>
-                    <div class="code-block">.animated-theme {
+                    <div class="animated-theme">
+                        <oslc-selection-button button-text="Animated Button"></oslc-selection-button>
+                    </div>
+                    <div class="code-block">.animated-theme oslc-selection-button {
     --oslc-button-background: #ff6b6b;
     --oslc-button-hover-transform: scale(1.05);
     --oslc-button-active-transform: scale(0.95);
diff --git a/src/oslc-selection-react-demo/src/components/StylingExamples.jsx b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
index acea9e6..f47bad7 100644
--- a/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
+++ b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
@@ -10,7 +10,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Material Design',
       className: 'material-theme',
-      code: `.material-theme {
+      code: `.material-theme oslc-selection-button {
   --oslc-button-background: #1976d2;
   --oslc-button-color: white;
   --oslc-button-font-weight: 500;
@@ -20,7 +20,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Bootstrap Style',
       className: 'bootstrap-theme',
-      code: `.bootstrap-theme {
+      code: `.bootstrap-theme oslc-selection-button {
   --oslc-button-border: 1px solid #007bff;
   --oslc-button-background: #007bff;
   --oslc-button-color: #ffffff;
@@ -30,7 +30,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Rounded Theme',
       className: 'rounded-theme',
-      code: `.rounded-theme {
+      code: `.rounded-theme oslc-selection-button {
   --oslc-button-border-radius: 25px;
   --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --oslc-button-hover-transform: translateY(-2px);
@@ -39,7 +39,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Dark Theme',
       className: 'dark-theme',
-      code: `.dark-theme {
+      code: `.dark-theme oslc-selection-button {
   --oslc-button-background: #495057;
   --oslc-button-color: #ffffff;
   --oslc-button-border: 1px solid #6c757d;
@@ -48,7 +48,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Outline Theme',
       className: 'outline-theme',
-      code: `.outline-theme {
+      code: `.outline-theme oslc-selection-button {
   --oslc-button-background: transparent;
   --oslc-button-color: #007bff;
   --oslc-button-border: 2px solid #007bff;
@@ -59,7 +59,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Success Theme',
       className: 'success-theme',
-      code: `.success-theme {
+      code: `.success-theme oslc-selection-button {
   --oslc-button-background: #28a745;
   --oslc-button-color: white;
   --oslc-button-hover-background: #218838;
@@ -68,7 +68,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Large Theme',
       className: 'large-theme',
-      code: `.large-theme {
+      code: `.large-theme oslc-selection-button {
   --oslc-button-padding: 16px 32px;
   --oslc-button-font-size: 1.2rem;
   --oslc-button-font-weight: 600;
@@ -78,7 +78,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Compact Theme',
       className: 'compact-theme',
-      code: `.compact-theme {
+      code: `.compact-theme oslc-selection-button {
   --oslc-button-padding: 4px 8px;
   --oslc-button-font-size: 0.875rem;
   --oslc-button-border-radius: 2px;
@@ -87,7 +87,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Animated Theme',
       className: 'animated-theme',
-      code: `.animated-theme {
+      code: `.animated-theme oslc-selection-button {
   --oslc-button-background: #ff6b6b;
   --oslc-button-hover-transform: scale(1.05);
   --oslc-button-active-transform: scale(0.95);
@@ -105,16 +105,17 @@ const StylingExamples = ({ oslcLoaded }) => {
         {themes.map((theme, index) => (
           <div key={index} className="demo-item">
             <h4>{theme.name}</h4>
-            {oslcLoaded ? (
-              <oslc-selection-button 
-                className={theme.className}
-                button-text={`${theme.name} Button`}>
-              </oslc-selection-button>
-            ) : (
-              <button className="btn btn-secondary" disabled>
-                Loading...
-              </button>
-            )}
+            <div className={theme.className}>
+              {oslcLoaded ? (
+                <oslc-selection-button 
+                  button-text={`${theme.name} Button`}>
+                </oslc-selection-button>
+              ) : (
+                <button className="btn btn-secondary" disabled>
+                  Loading...
+                </button>
+              )}
+            </div>
             <div className="code-block">{theme.code}</div>
           </div>
         ))}
diff --git a/src/oslc-selection-react-demo/src/index.css b/src/oslc-selection-react-demo/src/index.css
index 49e9a5e..7de2a2c 100644
--- a/src/oslc-selection-react-demo/src/index.css
+++ b/src/oslc-selection-react-demo/src/index.css
@@ -14,7 +14,7 @@ body {
 /* Theme Examples - CSS Custom Properties for Styling */
 
 /* Material Design Theme */
-.material-theme {
+.material-theme oslc-selection-button {
   --oslc-button-border-radius: 4px;
   --oslc-button-background: #1976d2;
   --oslc-button-color: white;
@@ -26,7 +26,7 @@ body {
 }
 
 /* Bootstrap Theme */
-.bootstrap-theme {
+.bootstrap-theme oslc-selection-button {
   --oslc-button-border-radius: 0.375rem;
   --oslc-button-padding: 0.375rem 0.75rem;
   --oslc-button-font-size: 1rem;
@@ -39,7 +39,7 @@ body {
 }
 
 /* Rounded Theme */
-.rounded-theme {
+.rounded-theme oslc-selection-button {
   --oslc-button-border-radius: 25px;
   --oslc-button-padding: 12px 24px;
   --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -51,7 +51,7 @@ body {
 }
 
 /* Dark Theme */
-.dark-theme {
+.dark-theme oslc-selection-button {
   --oslc-button-background: #495057;
   --oslc-button-color: #ffffff;
   --oslc-button-border: 1px solid #6c757d;
@@ -61,7 +61,7 @@ body {
 }
 
 /* Outline Theme */
-.outline-theme {
+.outline-theme oslc-selection-button {
   --oslc-button-background: transparent;
   --oslc-button-color: #007bff;
   --oslc-button-border: 2px solid #007bff;
@@ -71,7 +71,7 @@ body {
 }
 
 /* Success Theme */
-.success-theme {
+.success-theme oslc-selection-button {
   --oslc-button-background: #28a745;
   --oslc-button-color: white;
   --oslc-button-border: 1px solid #28a745;
@@ -81,7 +81,7 @@ body {
 }
 
 /* Large Button Theme */
-.large-theme {
+.large-theme oslc-selection-button {
   --oslc-button-padding: 16px 32px;
   --oslc-button-font-size: 1.2rem;
   --oslc-button-font-weight: 600;
@@ -90,14 +90,14 @@ body {
 }
 
 /* Compact Theme */
-.compact-theme {
+.compact-theme oslc-selection-button {
   --oslc-button-padding: 4px 8px;
   --oslc-button-font-size: 0.875rem;
   --oslc-button-border-radius: 2px;
 }
 
 /* Custom Animation Theme */
-.animated-theme {
+.animated-theme oslc-selection-button {
   --oslc-button-background: #ff6b6b;
   --oslc-button-color: white;
   --oslc-button-border: none;

From 6fb2348c49364cb3c0f99e4ecff8b23d0333482f Mon Sep 17 00:00:00 2001
From: Andrew Berezovskyi <andrew@berezovskyi.me>
Date: Thu, 10 Jul 2025 21:28:11 +0200
Subject: [PATCH 3/3] fix; styled button URIs

Signed-off-by: Andrew Berezovskyi <andrew@berezovskyi.me>
---
 src/oslc-selection-demo/index.html             | 18 +++++++++---------
 src/oslc-selection-react-demo/src/App.jsx      |  8 +++++++-
 .../src/components/LiveDemo.jsx                |  6 ++++--
 .../src/components/StylingExamples.jsx         | 17 +++++++++++++++--
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/oslc-selection-demo/index.html b/src/oslc-selection-demo/index.html
index b06e95d..6106391 100644
--- a/src/oslc-selection-demo/index.html
+++ b/src/oslc-selection-demo/index.html
@@ -325,7 +325,7 @@ <h4>Default Theme</h4>
                 <div class="demo-item">
                     <h4>Material Design</h4>
                     <div class="material-theme">
-                        <oslc-selection-button button-text="Material Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Material Button" button-class="btn"></oslc-selection-button>
                     </div>
                     <div class="code-block">.material-theme oslc-selection-button {
     --oslc-button-background: #1976d2;
@@ -338,7 +338,7 @@ <h4>Material Design</h4>
                 <div class="demo-item">
                     <h4>Bootstrap Style</h4>
                     <div class="bootstrap-theme">
-                        <oslc-selection-button button-text="Bootstrap Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Bootstrap Button" button-class="btn btn-primary"></oslc-selection-button>
                     </div>
                     <div class="code-block">.bootstrap-theme oslc-selection-button {
     --oslc-button-border: 1px solid #007bff;
@@ -351,7 +351,7 @@ <h4>Bootstrap Style</h4>
                 <div class="demo-item">
                     <h4>Rounded Theme</h4>
                     <div class="rounded-theme">
-                        <oslc-selection-button button-text="Rounded Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Rounded Button" button-class="btn"></oslc-selection-button>
                     </div>
                     <div class="code-block">.rounded-theme oslc-selection-button {
     --oslc-button-border-radius: 25px;
@@ -363,7 +363,7 @@ <h4>Rounded Theme</h4>
                 <div class="demo-item">
                     <h4>Dark Theme</h4>
                     <div class="dark-theme">
-                        <oslc-selection-button button-text="Dark Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Dark Button" button-class="btn btn-dark"></oslc-selection-button>
                     </div>
                     <div class="code-block">.dark-theme oslc-selection-button {
     --oslc-button-background: #495057;
@@ -375,7 +375,7 @@ <h4>Dark Theme</h4>
                 <div class="demo-item">
                     <h4>Outline Theme</h4>
                     <div class="outline-theme">
-                        <oslc-selection-button button-text="Outline Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Outline Button" button-class="btn btn-outline-primary"></oslc-selection-button>
                     </div>
                     <div class="code-block">.outline-theme oslc-selection-button {
     --oslc-button-background: transparent;
@@ -389,7 +389,7 @@ <h4>Outline Theme</h4>
                 <div class="demo-item">
                     <h4>Success Theme</h4>
                     <div class="success-theme">
-                        <oslc-selection-button button-text="Success Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Success Button" button-class="btn btn-success"></oslc-selection-button>
                     </div>
                     <div class="code-block">.success-theme oslc-selection-button {
     --oslc-button-background: #28a745;
@@ -401,7 +401,7 @@ <h4>Success Theme</h4>
                 <div class="demo-item">
                     <h4>Large Theme</h4>
                     <div class="large-theme">
-                        <oslc-selection-button button-text="Large Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Large Button" button-class="btn btn-primary btn-lg"></oslc-selection-button>
                     </div>
                     <div class="code-block">.large-theme oslc-selection-button {
     --oslc-button-padding: 16px 32px;
@@ -414,7 +414,7 @@ <h4>Large Theme</h4>
                 <div class="demo-item">
                     <h4>Compact Theme</h4>
                     <div class="compact-theme">
-                        <oslc-selection-button button-text="Compact"></oslc-selection-button>
+                        <oslc-selection-button button-text="Compact" button-class="btn btn-primary btn-sm"></oslc-selection-button>
                     </div>
                     <div class="code-block">.compact-theme oslc-selection-button {
     --oslc-button-padding: 4px 8px;
@@ -426,7 +426,7 @@ <h4>Compact Theme</h4>
                 <div class="demo-item">
                     <h4>Animated Theme</h4>
                     <div class="animated-theme">
-                        <oslc-selection-button button-text="Animated Button"></oslc-selection-button>
+                        <oslc-selection-button button-text="Animated Button" button-class="btn"></oslc-selection-button>
                     </div>
                     <div class="code-block">.animated-theme oslc-selection-button {
     --oslc-button-background: #ff6b6b;
diff --git a/src/oslc-selection-react-demo/src/App.jsx b/src/oslc-selection-react-demo/src/App.jsx
index c993eeb..785ac50 100644
--- a/src/oslc-selection-react-demo/src/App.jsx
+++ b/src/oslc-selection-react-demo/src/App.jsx
@@ -15,6 +15,7 @@ function App() {
   const [oslcLoaded, setOslcLoaded] = useState(false)
   const [loadError, setLoadError] = useState(null)
   const [selectedResources, setSelectedResources] = useState([])
+  const [currentDialogUrl, setCurrentDialogUrl] = useState('')
 
   useEffect(() => {
     // Check if the OSLC component is available
@@ -61,6 +62,10 @@ function App() {
     setSelectedResources(prev => prev.filter((_, i) => i !== index))
   }
 
+  const handleDialogUrlChange = (url) => {
+    setCurrentDialogUrl(url)
+  }
+
   return (
     <div className="App">
       <HeroSection oslcLoaded={oslcLoaded} loadError={loadError} />
@@ -70,6 +75,7 @@ function App() {
           oslcLoaded={oslcLoaded} 
           selectedResources={selectedResources}
           onSelectionUpdate={setSelectedResources}
+          onDialogUrlChange={handleDialogUrlChange}
         />
         
         <ResultsSection 
@@ -78,7 +84,7 @@ function App() {
           onRemoveResource={removeResource}
         />
         
-        <StylingExamples oslcLoaded={oslcLoaded} />
+        <StylingExamples oslcLoaded={oslcLoaded} dialogUrl={currentDialogUrl} />
         
         <IntegrationExamples />
         
diff --git a/src/oslc-selection-react-demo/src/components/LiveDemo.jsx b/src/oslc-selection-react-demo/src/components/LiveDemo.jsx
index fa80d6d..7743f21 100644
--- a/src/oslc-selection-react-demo/src/components/LiveDemo.jsx
+++ b/src/oslc-selection-react-demo/src/components/LiveDemo.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 
-const LiveDemo = ({ oslcLoaded, selectedResources, onSelectionUpdate }) => {
+const LiveDemo = ({ oslcLoaded, selectedResources, onSelectionUpdate, onDialogUrlChange }) => {
   const [dialogUrl, setDialogUrl] = useState('https://rm.refimpl.oslc.ldsw.eu/services/serviceProviders/sp_single/service1/requirements/selector')
   const [protocol, setProtocol] = useState('#oslc-core-postMessage-1.0')
   const buttonRef = useRef(null)
@@ -12,7 +12,9 @@ const LiveDemo = ({ oslcLoaded, selectedResources, onSelectionUpdate }) => {
     if (buttonRef.current && oslcLoaded) {
       buttonRef.current.setAttribute('dialog-url', fullUrl)
     }
-  }, [fullUrl, oslcLoaded])
+    // Notify parent component of URL change
+    onDialogUrlChange?.(fullUrl)
+  }, [fullUrl, oslcLoaded, onDialogUrlChange])
 
   const parseUrlAndSetProtocol = (url) => {
     if (url.includes('#oslc-core-windowName-1.0')) {
diff --git a/src/oslc-selection-react-demo/src/components/StylingExamples.jsx b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
index f47bad7..2353838 100644
--- a/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
+++ b/src/oslc-selection-react-demo/src/components/StylingExamples.jsx
@@ -1,15 +1,17 @@
 import React from 'react'
 
-const StylingExamples = ({ oslcLoaded }) => {
+const StylingExamples = ({ oslcLoaded, dialogUrl }) => {
   const themes = [
     {
       name: 'Default Theme',
       className: '',
+      buttonClass: 'btn btn-primary',
       code: '/* No custom properties needed for default styling */'
     },
     {
       name: 'Material Design',
       className: 'material-theme',
+      buttonClass: 'btn',
       code: `.material-theme oslc-selection-button {
   --oslc-button-background: #1976d2;
   --oslc-button-color: white;
@@ -20,6 +22,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Bootstrap Style',
       className: 'bootstrap-theme',
+      buttonClass: 'btn btn-primary',
       code: `.bootstrap-theme oslc-selection-button {
   --oslc-button-border: 1px solid #007bff;
   --oslc-button-background: #007bff;
@@ -30,6 +33,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Rounded Theme',
       className: 'rounded-theme',
+      buttonClass: 'btn',
       code: `.rounded-theme oslc-selection-button {
   --oslc-button-border-radius: 25px;
   --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -39,6 +43,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Dark Theme',
       className: 'dark-theme',
+      buttonClass: 'btn btn-dark',
       code: `.dark-theme oslc-selection-button {
   --oslc-button-background: #495057;
   --oslc-button-color: #ffffff;
@@ -48,6 +53,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Outline Theme',
       className: 'outline-theme',
+      buttonClass: 'btn btn-outline-primary',
       code: `.outline-theme oslc-selection-button {
   --oslc-button-background: transparent;
   --oslc-button-color: #007bff;
@@ -59,6 +65,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Success Theme',
       className: 'success-theme',
+      buttonClass: 'btn btn-success',
       code: `.success-theme oslc-selection-button {
   --oslc-button-background: #28a745;
   --oslc-button-color: white;
@@ -68,6 +75,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Large Theme',
       className: 'large-theme',
+      buttonClass: 'btn btn-primary btn-lg',
       code: `.large-theme oslc-selection-button {
   --oslc-button-padding: 16px 32px;
   --oslc-button-font-size: 1.2rem;
@@ -78,6 +86,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Compact Theme',
       className: 'compact-theme',
+      buttonClass: 'btn btn-primary btn-sm',
       code: `.compact-theme oslc-selection-button {
   --oslc-button-padding: 4px 8px;
   --oslc-button-font-size: 0.875rem;
@@ -87,6 +96,7 @@ const StylingExamples = ({ oslcLoaded }) => {
     {
       name: 'Animated Theme',
       className: 'animated-theme',
+      buttonClass: 'btn',
       code: `.animated-theme oslc-selection-button {
   --oslc-button-background: #ff6b6b;
   --oslc-button-hover-transform: scale(1.05);
@@ -108,7 +118,10 @@ const StylingExamples = ({ oslcLoaded }) => {
             <div className={theme.className}>
               {oslcLoaded ? (
                 <oslc-selection-button 
-                  button-text={`${theme.name} Button`}>
+                  button-text={`${theme.name} Button`}
+                  button-class={theme.buttonClass}
+                  dialog-url={dialogUrl}
+                  dialog-title={`${theme.name} Selection`}>
                 </oslc-selection-button>
               ) : (
                 <button className="btn btn-secondary" disabled>