cboard-org · shayc · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [22, 24]
+
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - run: npm ci --ignore-scripts
+      - run: npm run check
+      - run: npm pack --dry-run --ignore-scripts
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/README.md b/README.md
@@ -38,3 +38,18 @@ class Example extends Component {
 ## License
 
 MIT © [shayc](https://github.com/shayc)
+
+## Development
+
+This project uses Vite 8 (powered by Rolldown) for the library and demo builds, and Vitest for
+tests. The published CommonJS and ESM filenames, automatic CSS injection, and legacy JavaScript
+syntax compatibility are retained for existing consumers.
+
+```bash
+npm install
+npm test
+npm run build
+npm run styleguide
+```
+
+Run the complete release-oriented verification with `npm run check`.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Interactive examples for react-scannable" />
+    <title>React Scannable</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>
diff --git a/demo/main.jsx b/demo/main.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Scannable, Scanner } from '../src';
+import './styles.css';
+
+const items = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
+
+function Demo() {
+  const [isActive, setIsActive] = useState(false);
+  const [message, setMessage] = useState('Activate the scanner to begin.');
+
+  return (
+    <main>
+      <header>
+        <span className="eyebrow">React component library</span>
+        <h1>react-scannable</h1>
+        <p>
+          Move focus with a click, Space, Tab, or the arrow keys. Select the focused item with Enter
+          or a context-menu action.
+        </p>
+      </header>
+
+      <Scanner
+        active={isActive}
+        strategy="manual"
+        onDeactivation={() => setIsActive(false)}
+        onSelect={(_, scannable) => setMessage(`Selected ${scannable.scannableId}`)}
+      >
+        <section className="panel" aria-label="Scanner demo">
+          <Scannable>
+            <button
+              className="toggle"
+              type="button"
+              onClick={() => {
+                setIsActive((active) => !active);
+                setMessage(isActive ? 'Scanner deactivated.' : 'Scanner active.');
+              }}
+            >
+              {isActive ? 'Deactivate scanner' : 'Activate scanner'}
+            </button>
+          </Scannable>
+
+          <div className="items">
+            {items.map((item) => (
+              <Scannable key={item} onSelect={() => setMessage(`${item} selected.`)}>
+                <button type="button">{item}</button>
+              </Scannable>
+            ))}
+            <Scannable disabled>
+              <button type="button" disabled>
+                Disabled item
+              </button>
+            </Scannable>
+          </div>
+
+          <output aria-live="polite">{message}</output>
+        </section>
+      </Scanner>
+    </main>
+  );
+}
+
+ReactDOM.render(<Demo />, document.getElementById('root'));
diff --git a/demo/styles.css b/demo/styles.css
@@ -0,0 +1,110 @@
+:root {
+  color: #172033;
+  background: #f4f6fb;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+main {
+  width: min(760px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 72px 0;
+}
+
+header {
+  margin-bottom: 32px;
+}
+
+.eyebrow {
+  color: #53617d;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 8px 0 12px;
+  font-size: clamp(2.5rem, 8vw, 5rem);
+  letter-spacing: -0.06em;
+  line-height: 0.95;
+}
+
+p {
+  max-width: 620px;
+  color: #53617d;
+  font-size: 1.05rem;
+  line-height: 1.65;
+}
+
+.panel {
+  padding: 24px;
+  border: 1px solid #dce1eb;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 20px 60px rgb(32 47 77 / 10%);
+}
+
+button {
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 1px solid #c7cfdd;
+  border-radius: 9px;
+  color: inherit;
+  background: #fff;
+  cursor: pointer;
+  font: inherit;
+}
+
+button:hover:not(:disabled) {
+  border-color: #6b55d9;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.toggle {
+  border-color: #6b55d9;
+  color: #fff;
+  background: #6b55d9;
+  font-weight: 700;
+}
+
+.items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin: 24px 0;
+}
+
+.items button {
+  width: 100%;
+}
+
+output {
+  display: block;
+  min-height: 48px;
+  padding: 13px 16px;
+  border-radius: 9px;
+  color: #3b2f79;
+  background: #f0edff;
+}