npm - ps-access - Versions diffs - 0.0.1 - Mend

ps-access 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/PROTOCOL.md +210 -0
package/README.md +203 -0
package/bridge.mjs +231 -0
package/cli.mjs +339 -0
package/lib/bridge-sinks.mjs +81 -0
package/lib/hid-node.mjs +67 -0
package/lib/uinput-helper.py +143 -0
package/package.json +53 -0
package/web/access-protocol.mjs +310 -0
package/web/bridge-core.mjs +132 -0
package/web/bridge-map.mjs +102 -0
package/web/controller-render.mjs +79 -0
package/web/hid-capture.html +142 -0
package/web/hid-web.mjs +65 -0
package/web/icon.svg +14 -0
package/web/index.html +346 -0
package/web/manifest.webmanifest +14 -0
package/web/monitor.html +121 -0
package/web/monitor.js +117 -0
package/web/profile-library.mjs +181 -0
package/web/serve.json +10 -0
package/web/sw.js +39 -0
package/web/xmb.js +1069 -0

package/web/hid-capture.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Access Controller — input report RE</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Crect width=%2732%27 height=%2732%27 rx=%277%27 fill=%27%23121a26%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%277%27 fill=%27%236fa8ff%27/%3E%3C/svg%3E" />
+<style>
+  body { font: 13px ui-monospace, Menlo, monospace; background: #0f1216; color: #e6edf3; margin: 0; padding: 18px; }
+  h1 { font-size: 15px; margin: 0 0 6px; }
+  .sub { color: #93a1b0; margin-bottom: 14px; }
+  button { font: inherit; background: #2f6bd6; color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; margin-right: 8px; }
+  button.alt { background: #1f2630; border: 1px solid #2b333f; }
+  #status { margin: 10px 0; color: #45d29a; }
+  /* live byte/bit grid */
+  #grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px 14px; margin: 14px 0; max-width: 1100px; }
+  .byte { border: 1px solid #2b333f; border-radius: 6px; padding: 4px 6px; }
+  .byte.volatile { opacity: .35; }
+  .byte .idx { color: #93a1b0; font-size: 11px; }
+  .byte .bits { display: flex; gap: 2px; margin-top: 2px; }
+  .bit { width: 14px; height: 16px; display: grid; place-items: center; border-radius: 3px; background: #1a2029; color: #5c6b7a; font-size: 10px; }
+  .bit.hi { background: #2f6bd6; color: #fff; }
+  .bit.changed { outline: 2px solid #ffcd5e; }
+  #log { white-space: pre; background: #0a0d12; border: 1px solid #2b333f; border-radius: 8px; padding: 12px; max-height: 320px; overflow: auto; }
+  .row { margin: 2px 0; }
+  .hl { color: #ffcd5e; }
+</style>
+</head>
+<body>
+  <h1>Access Controller — input report reverse-engineering</h1>
+  <div class="sub">Connect, stay still for the idle baseline, then press <b>one physical button at a time</b>. Each distinct press is logged with the bits that flipped.</div>
+  <button id="connect">Connect controller</button>
+  <button id="rebaseline" class="alt">Re-take idle baseline</button>
+  <button id="clear" class="alt">Clear log</button>
+  <div id="status">Not connected.</div>
+  <div id="grid"></div>
+  <h1>Press log</h1>
+  <div id="log">(press buttons after baseline is taken)</div>
+<script type="module">
+const VID = 0x054c, PID = 0x0e5f;
+const $ = (s) => document.querySelector(s);
+let device = null;
+let baseline = null;        // stable baseline byte array (data, no report id)
+let volatile = new Set();   // byte indices that vary while idle
+let idle = [];              // idle samples
+let phase = "init";         // init -> baselining -> watch
+let lastKey = "";
+const log = [];
+async function connect() {
+  try {
+    let devs = (await navigator.hid.getDevices()).filter(d => d.vendorId === VID && d.productId === PID);
+    if (!devs.length) devs = await navigator.hid.requestDevice({ filters: [{ vendorId: VID, productId: PID }] });
+    device = devs[0];
+    if (!device) { $("#status").textContent = "No controller selected."; return; }
+    if (!device.opened) await device.open();
+    device.oninputreport = onReport;
+    startBaseline();
+  } catch (e) { $("#status").textContent = "Error: " + (e.message || e); }
+}
+function startBaseline() {
+  baseline = null; volatile = new Set(); idle = []; phase = "baselining";
+  $("#status").textContent = "Taking idle baseline — keep hands OFF the controller…";
+  setTimeout(() => {
+    if (!idle.length) { $("#status").textContent = "No input reports received (is it on USB?)."; return; }
+    const len = idle[0].length;
+    baseline = idle[idle.length - 1].slice();
+    for (let i = 0; i < len; i++) {
+      const vals = new Set(idle.map(s => s[i]));
+      if (vals.size > 1) volatile.add(i); // changes while idle => counter/timestamp/axis jitter
+    }
+    phase = "watch";
+    $("#status").textContent = `Baseline set (${idle.length} samples, ${len} bytes). Volatile bytes ignored: [${[...volatile].join(", ")}]. Now press buttons one at a time.`;
+  }, 1600);
+}
+// Physical-button bytes (found via RE): byte 15 = the 8 perimeter buttons, byte 16 = center + stick-click.
+const BTN_BYTES = [15, 16];
+function onReport(e) {
+  const b = new Uint8Array(e.data.buffer.slice(e.data.byteOffset, e.data.byteOffset + e.data.byteLength));
+  if (phase === "baselining") { idle.push([...b]); return; }
+  if (phase !== "watch") return;
+  // grid shows all non-volatile changes; the press LOG keys only on the button bytes (noise-free)
+  const changedAll = [], changedBtn = [];
+  for (let i = 0; i < b.length; i++) {
+    if (volatile.has(i)) continue;
+    const diff = (b[i] ^ baseline[i]) & 0xff;
+    if (!diff) continue;
+    for (let bit = 0; bit < 8; bit++) if (diff & (1 << bit)) {
+      changedAll.push(`${i}.${bit}`);
+      if (BTN_BYTES.includes(i)) changedBtn.push(`${i}.${bit}`);
+    }
+  }
+  renderGrid(b, changedAll);
+  const key = changedBtn.slice().sort().join(",");
+  if (key && key !== lastKey) {
+    log.push({ key, hex: [...b].map(x => x.toString(16).padStart(2, "0")).join(" ") });
+    renderLog();
+  }
+  lastKey = key;
+}
+function renderGrid(b, changed) {
+  const g = $("#grid");
+  if (!g.children.length || g.children.length !== b.length) {
+    g.innerHTML = "";
+    for (let i = 0; i < b.length; i++) {
+      const d = document.createElement("div"); d.className = "byte"; d.dataset.i = i;
+      d.innerHTML = `<div class="idx">b${i}</div><div class="bits"></div>`;
+      g.append(d);
+    }
+  }
+  const changedSet = new Set(changed);
+  for (let i = 0; i < b.length; i++) {
+    const cell = g.children[i];
+    cell.classList.toggle("volatile", volatile.has(i));
+    const bitsEl = cell.querySelector(".bits");
+    if (bitsEl.children.length !== 8) { bitsEl.innerHTML = ""; for (let bit = 7; bit >= 0; bit--) { const s = document.createElement("div"); s.className = "bit"; s.textContent = bit; bitsEl.append(s); } }
+    for (let bit = 7; bit >= 0; bit--) {
+      const el = bitsEl.children[7 - bit];
+      el.classList.toggle("hi", !!(b[i] & (1 << bit)));
+      el.classList.toggle("changed", changedSet.has(`${i}.${bit}`));
+    }
+  }
+}
+function renderLog() {
+  $("#log").innerHTML = log.map((e, n) =>
+    `<div class="row"><span class="hl">press #${n + 1}</span>  bits: ${e.key || "(none)"}</div>`
+  ).join("") || "(none)";
+}
+$("#connect").onclick = connect;
+$("#rebaseline").onclick = startBaseline;
+$("#clear").onclick = () => { log.length = 0; lastKey = ""; renderLog(); };
+if (!("hid" in navigator)) $("#status").textContent = "WebHID not supported — use Chrome/Edge.";
+</script>
+</body>
+</html>

package/web/hid-web.mjs ADDED Viewed

@@ -0,0 +1,65 @@
+// WebHID transport for the Access Controller, mirroring lib/hid-node.mjs.
+import {
+  VENDOR_ID, PRODUCT_ID, REPORT_ID_CMD, REPORT_ID_DATA, BT_ONLY_REPORT_ID,
+  PROFILE_SIZE, PACKETS_PER_PROFILE, buildReadCommand, assembleProfile, buildWritePackets,
+  buildSetActiveCommand,
+} from "./access-protocol.mjs";
+export function hidSupported() {
+  return "hid" in navigator;
+}
+// Already-granted Access Controllers.
+export async function grantedControllers() {
+  const devices = await navigator.hid.getDevices();
+  return devices.filter((d) => d.vendorId === VENDOR_ID && d.productId === PRODUCT_ID);
+}
+// Prompt the user to grant access to one or more controllers.
+export async function requestControllers() {
+  const devices = await navigator.hid.requestDevice({
+    filters: [{ vendorId: VENDOR_ID, productId: PRODUCT_ID }],
+  });
+  return devices.filter((d) => d.vendorId === VENDOR_ID && d.productId === PRODUCT_ID);
+}
+export async function ensureOpen(device) {
+  if (!device.opened) await device.open();
+  const ids = device.collections?.[0]?.featureReports?.map((r) => r.reportId) ?? [];
+  // The profile channel (0x60/0x61) is only exposed over USB. Report 99 marks the
+  // Bluetooth collection, where profile read/write isn't available.
+  const usbReady = ids.includes(REPORT_ID_CMD) && ids.includes(REPORT_ID_DATA) && !ids.includes(BT_ONLY_REPORT_ID);
+  if (!usbReady) throw new Error("Connect the Access controller with a USB-C cable — profiles can't be read/written over Bluetooth.");
+  return device;
+}
+function dvToU8(dv) {
+  return new Uint8Array(dv.buffer, dv.byteOffset, dv.byteLength);
+}
+export async function readProfileRaw(device, profileNumber) {
+  const cmd = buildReadCommand(profileNumber);
+  await device.sendFeatureReport(REPORT_ID_CMD, cmd);
+  const packets = [];
+  for (let i = 0; i < PACKETS_PER_PROFILE; i++) {
+    const dv = await device.receiveFeatureReport(REPORT_ID_DATA);
+    packets.push(dvToU8(dv));
+  }
+  return assembleProfile(packets);
+}
+// Switch the controller's active profile (1..3) — like pressing its profile button.
+export async function setActiveProfile(device, profileNumber) {
+  await device.sendFeatureReport(REPORT_ID_CMD, buildSetActiveCommand(profileNumber));
+}
+export async function writeProfileRaw(device, profileNumber, profileBytes) {
+  if (profileBytes.length < PROFILE_SIZE) throw new Error(`profile must be ${PROFILE_SIZE} bytes`);
+  const packets = buildWritePackets(profileNumber, profileBytes);
+  for (const pkt of packets) await device.sendFeatureReport(REPORT_ID_CMD, pkt);
+  // Drain post-write status until "remaining" byte (offset 2) is zero.
+  for (let i = 0; i < 32; i++) {
+    const dv = await device.receiveFeatureReport(REPORT_ID_DATA);
+    if (dvToU8(dv)[2] === 0) break;
+  }
+}

package/web/icon.svg ADDED Viewed

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="ps-access">
+  <rect width="512" height="512" rx="112" fill="#0b1320"/>
+  <!-- stylized Access Controller: ring of buttons around a central stick -->
+  <g fill="none" stroke="#6fa8ff" stroke-width="22">
+    <circle cx="256" cy="256" r="120"/>
+  </g>
+  <circle cx="256" cy="256" r="46" fill="#2f6bd6" stroke="#6fa8ff" stroke-width="10"/>
+  <g fill="#6fa8ff">
+    <circle cx="256" cy="96" r="26"/>
+    <circle cx="256" cy="416" r="26"/>
+    <circle cx="96" cy="256" r="26"/>
+    <circle cx="416" cy="256" r="26"/>
+  </g>
+</svg>

package/web/index.html ADDED Viewed

@@ -0,0 +1,346 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Access Controller — XMB</title>
+<link rel="manifest" href="./manifest.webmanifest" />
+<meta name="theme-color" content="#05070c" />
+<link rel="apple-touch-icon" href="./icon.svg" />
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Crect width=%2732%27 height=%2732%27 rx=%277%27 fill=%27%23121a26%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%277%27 fill=%27%236fa8ff%27/%3E%3C/svg%3E" />
+<style>
+  :root {
+    --ink: #eaf1f8; --dim: #9fb3c6; --accent: #6fa8ff; --accent2: #2f6bd6;
+    --ok: #45d29a; --warn: #ffcd5e; --glass: rgba(18,26,38,.42);
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    font: 300 16px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
+    color: var(--ink); background: #05070c; overflow: hidden; user-select: none;
+  }
+  /* animated wave background */
+  #wave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
+  #vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
+    background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%); }
+  /* top status bar */
+  .topbar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center;
+    gap: 16px; padding: 16px 26px; font-size: 13px; color: var(--dim); }
+  .topbar .clock { margin-left: auto; letter-spacing: .04em; }
+  .topbar .device { display: inline-flex; align-items: flex-start; gap: 8px; }
+  .topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); margin-top: 5px; }
+  .topbar a { color: var(--dim); text-decoration: none; border: 1px solid rgba(255,255,255,.14);
+    padding: 4px 10px; border-radius: 999px; }
+  .topbar a:hover { color: var(--ink); border-color: var(--accent); }
+  /* the cross stage */
+  #stage { position: fixed; inset: 0; z-index: 3; }
+  /* horizontal blade ribbon */
+  #blades { position: absolute; left: 0; right: 0; top: 38%; height: 0;
+    display: flex; align-items: center; gap: 60px;
+    transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease, filter .42s ease; will-change: transform; }
+  #blades.drilled { opacity: .28; filter: blur(1.5px); }
+  .blade { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
+    gap: 10px; opacity: .5; filter: saturate(.7);
+    transform: scale(.62); transform-origin: center bottom;
+    transition: opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1), filter .42s ease; }
+  .blade.focused { opacity: 1; filter: none; transform: scale(1); }
+  .blade .icon { width: 168px; height: 168px; display: grid; place-items: center; }
+  .blade.focused .icon { filter: drop-shadow(0 6px 26px rgba(111,168,255,.5)); }
+  .blade .icon svg, .blade .icon .glyph { width: 100%; height: 100%; }
+  .blade .glyph { display: grid; place-items: center; font-size: 64px; font-weight: 200;
+    border-radius: 24px; background: var(--glass); border: 1px solid rgba(255,255,255,.08);
+    backdrop-filter: blur(8px); }
+  .ctrl-icon { width: 82%; height: 82%; }
+  .save-icon { width: 64%; height: 64%; }
+  .blade .label { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
+  .blade.focused .label { color: var(--ink); }
+  /* vertical item list, hung under the focused blade at the crossing column */
+  #items { position: absolute; z-index: 4; left: 0; top: 0; min-width: 280px;
+    transition: left .42s cubic-bezier(.22,.61,.36,1); }
+  .item { padding: 9px 4px; font-size: 18px; color: var(--dim); opacity: .55; letter-spacing: .01em;
+    display: flex; align-items: center; gap: 12px; transform: scale(.92); transform-origin: left center;
+    transition: opacity .2s, transform .2s, color .2s; white-space: nowrap; }
+  .item .chev { opacity: 0; transition: opacity .2s; }
+  .item.sel { opacity: 1; color: var(--ink); transform: scale(1.08); font-weight: 400;
+    text-shadow: 0 2px 18px rgba(111,168,255,.45); }
+  .item.sel .chev { opacity: .8; }
+  .item .val { margin-left: auto; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
+  .item .val .sym { font-size: 20px; }
+  .item.sel .val .arrow { opacity: .9; }
+  .item .val .arrow { opacity: 0; transition: opacity .2s; color: var(--dim); }
+  /* hero render of the focused profile */
+  /* controller render (blade icons + hero) */
+  .icon svg, #hero svg { overflow: visible; }
+  .icon svg .seg, #hero svg .seg { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.20); stroke-width: 2; stroke-linejoin: round; transition: fill .12s, stroke .12s; }
+  .icon svg .seg.on, #hero svg .seg.on { fill: var(--accent2); stroke: var(--accent); }
+  .icon svg .seg.foc, #hero svg .seg.foc { stroke: var(--accent); stroke-width: 4; fill: rgba(111,168,255,.16); }
+  .icon svg .lab, #hero svg .lab { fill: var(--ink); font: 300 22px sans-serif; text-anchor: middle; }
+  .icon svg .lab.big, #hero svg .lab.big { font-size: 34px; }
+  .icon svg .lab.sm, #hero svg .lab.sm { font-size: 15px; fill: var(--dim); }
+  .icon svg .stickwell, #hero svg .stickwell { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.2); stroke-width: 2; }
+  .icon svg .stickwell.foc, #hero svg .stickwell.foc { stroke: var(--accent); stroke-width: 4; }
+  .icon svg .thumb, #hero svg .thumb { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.22); stroke-width: 2; transition: fill .1s, cx .05s, cy .05s; }
+  .icon svg .thumb.on, #hero svg .thumb.on { fill: var(--accent2); stroke: var(--accent); }
+  .icon svg .thumb.foc, #hero svg .thumb.foc { stroke: var(--accent); stroke-width: 4; }
+  #hero { position: absolute; z-index: 4; right: 9%; top: 52%; transform: translateY(-50%);
+    width: 33vmin; max-width: 380px; opacity: 0;
+    filter: drop-shadow(0 10px 40px rgba(0,0,0,.5)); pointer-events: none;
+    transition: opacity .4s ease; }
+  #hero svg { width: 100%; height: auto; }
+  /* breadcrumb / hint footer */
+  .footer { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; display: flex; gap: 22px;
+    padding: 16px 26px; font-size: 12px; color: var(--dim); letter-spacing: .03em; }
+  .footer .key { display: inline-flex; align-items: center; gap: 7px; }
+  .footer .k { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
+    border-radius: 6px; border: 1px solid rgba(255,255,255,.16); font-size: 11px; color: var(--ink); }
+  .footer .gp { margin-left: auto; color: var(--dim); }
+  .footer .gp.on { color: var(--ok); }
+  #toast { position: fixed; z-index: 9; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(20px);
+    background: var(--glass); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px);
+    color: var(--ink); padding: 10px 18px; border-radius: 12px; opacity: 0; transition: opacity .25s, transform .25s; }
+  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  .rename-input { background: rgba(0,0,0,.4); border: 1px solid var(--accent); color: var(--ink);
+    font: inherit; font-size: 18px; padding: 4px 8px; border-radius: 8px; }
+  #unsupported { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; text-align: center;
+    background: #05070c; padding: 40px; }
+  #unsupported.show { display: grid; }
+  /* monitor blade icon (live signal) */
+  .mon-icon { width: 80%; height: 80%; }
+  .mon-icon .wave { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
+  .blade.focused .mon-icon .wave { stroke: var(--ink); }
+  /* full live monitor overlay */
+  #monitor { position: fixed; z-index: 6; inset: 56px 36px 24px; display: none; }
+  #monitor.show { display: block; }
+  #monitor .mon-grid { display: grid; grid-template-columns: minmax(340px,1.1fr) minmax(330px,1fr);
+    gap: 36px; align-items: center; height: 100%; }
+  #mon-render { display: grid; place-items: center; }
+  #mon-render svg { width: 100%; max-width: 420px; height: auto; overflow: visible; filter: drop-shadow(0 10px 40px rgba(0,0,0,.5)); }
+  #mon-render .seg { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.2); stroke-width: 2; stroke-linejoin: round; transition: fill .07s, stroke .07s; }
+  #mon-render .seg.on { fill: var(--accent2); stroke: var(--accent); }
+  #mon-render .lab { fill: var(--ink); font: 300 22px sans-serif; text-anchor: middle; }
+  #mon-render .lab.big { font-size: 34px; } #mon-render .lab.sm { font-size: 15px; fill: var(--dim); }
+  #mon-render .stickwell { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.2); stroke-width: 2; }
+  #mon-render .thumb { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.22); stroke-width: 2; transition: fill .07s, cx .04s linear, cy .04s linear; }
+  #mon-render .thumb.on { fill: var(--accent2); stroke: var(--accent); }
+  #monitor .panel { background: var(--glass); border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
+    backdrop-filter: blur(10px); padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; max-height: 100%; overflow: auto; }
+  #monitor .panel h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; font-weight: 600; }
+  #monitor .chips { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
+  #monitor .chip { text-align: center; padding: 9px 4px; border-radius: 9px; font-size: 13px;
+    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--dim); transition: all .07s; }
+  #monitor .chip.on { background: var(--accent2); border-color: var(--accent); color: #fff; box-shadow: 0 0 14px rgba(111,168,255,.5); }
+  #monitor .chip small { display: block; font-size: 10px; opacity: .7; }
+  #monitor .stickrow { display: flex; align-items: center; gap: 18px; }
+  #monitor .crosshair { position: relative; width: 96px; height: 96px; border-radius: 50%;
+    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02); flex: 0 0 auto; }
+  #monitor .crosshair::before, #monitor .crosshair::after { content: ""; position: absolute; background: rgba(255,255,255,.08); }
+  #monitor .crosshair::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
+  #monitor .crosshair::after { top: 50%; left: 8%; right: 8%; height: 1px; }
+  #monitor .crosshair .dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
+    left: 50%; top: 50%; transform: translate(-50%,-50%); transition: left .04s linear, top .04s linear; box-shadow: 0 0 10px var(--accent); }
+  #monitor .axisvals { font: 13px ui-monospace, monospace; color: var(--dim); }
+  #monitor .axisvals b { color: var(--ink); font-weight: 400; }
+  #mon-raw { display: grid; grid-template-columns: repeat(16,1fr); gap: 3px; font: 11px ui-monospace, monospace; }
+  #mon-raw .b { text-align: center; padding: 3px 0; border-radius: 4px; background: rgba(255,255,255,.03); color: #6c7a89; }
+  #mon-raw .b.nz { color: var(--ink); background: rgba(255,255,255,.07); }
+  #mon-raw .b.btn { outline: 1.5px solid var(--accent); color: var(--accent); }
+  #mon-done { position: absolute; top: -2px; right: 0; font: inherit; font-size: 13px; color: var(--dim);
+    background: var(--glass); border: 1px solid rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; cursor: pointer; z-index: 7; }
+  #mon-done:hover { color: var(--ink); border-color: var(--accent); }
+  .devcol { display: inline-flex; flex-direction: column; line-height: 1.25; }
+  #mon-prof { font-size: 11px; color: var(--dim); letter-spacing: .02em; }
+  #mon-prof:empty { display: none; }
+  #mon-prof b { color: var(--accent); font-weight: 500; }
+  /* warning / confirm gate before entering live monitor */
+  /* Full-screen PS3-style system dialog (the wave ribbon shows through behind it). */
+  #mon-warn { position: fixed; inset: 0; z-index: 8; display: none;
+    background: radial-gradient(135% 105% at 50% 30%, rgba(3,6,11,.46) 0%, rgba(1,3,7,.84) 66%, rgba(0,0,0,.93) 100%); }
+  #mon-warn.show { display: block; }
+  #mon-warn .warn-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; gap: 20px; text-align: center; padding: 0 24px; }
+  #mon-warn .warn-eyebrow { display: flex; align-items: center; gap: 11px; font-size: 12px; letter-spacing: .24em;
+    text-transform: uppercase; color: var(--accent); font-weight: 400; }
+  #mon-warn .warn-eyebrow svg { width: 28px; height: 21px; }
+  #mon-warn .warn-eyebrow .wv { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
+  #mon-warn h2 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 200; letter-spacing: .01em; color: #fff; }
+  #mon-warn .warn-sub { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: var(--dim); font-weight: 300; }
+  #mon-warn .warn-opts { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
+  #mon-warn .warn-opt { font: inherit; font-size: 18px; font-weight: 300; color: var(--dim); background: transparent;
+    border: 0; padding: 12px 48px; border-radius: 8px; cursor: pointer; letter-spacing: .015em; position: relative;
+    transition: color .12s, background .12s; }
+  #mon-warn .warn-opt:hover { color: var(--ink); }
+  #mon-warn .warn-opt.sel { color: #fff;
+    background: linear-gradient(90deg, rgba(111,168,255,0) 0%, rgba(111,168,255,.2) 50%, rgba(111,168,255,0) 100%); }
+  #mon-warn .warn-opt.sel::before { content: "▸"; position: absolute; left: 22px; color: var(--accent); font-size: 14px; }
+  #mon-warn .warn-foot { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; padding: 0 24px;
+    font-size: 12.5px; line-height: 1.55; color: var(--dim); font-weight: 300; }
+  #mon-warn .warn-foot b { color: #ffdf9b; font-weight: 500; }
+  /* ============================ accessibility ============================ */
+  /* Screen-reader-only text (announcer + instructions): present to AT, invisible on screen. */
+  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
+  /* High-visibility focus ring on the selected item — OPT-IN (off by default) so it doesn't
+     fight the XMB look. Toggle in Help (?). OS contrast prefs force it on (see media queries). */
+  body.hi-focus .item.sel { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
+  /* Real focusable controls (buttons) keep a standard keyboard-focus ring. */
+  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
+  /* Key Bridge: highlight the option whose physical button is currently pressed. */
+  .item.physdown { color: var(--ok); }
+  .item.physdown .lab { text-shadow: 0 0 14px rgba(69,210,154,.5); }
+  /* Respect users who ask for less motion: kill the animated wave + all transitions. */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { transition: none !important; animation: none !important; }
+    #wave { display: none; }
+    body { background: radial-gradient(120% 90% at 50% 35%, #0a1422 0%, #05070c 70%); }
+  }
+  /* Higher contrast on request — also forces the focus ring on regardless of the toggle. */
+  @media (prefers-contrast: more) {
+    :root { --ink: #ffffff; --dim: #cdd9e6; --accent: #9cc4ff; }
+    .item { opacity: .8; }
+    .item.sel { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
+  }
+  /* Windows High Contrast / forced-colors: use system colors, keep focus visible. */
+  @media (forced-colors: active) {
+    #wave, #vignette { display: none; }
+    .item.sel, :focus-visible { outline: 3px solid Highlight; }
+    .item, .blade .label { color: CanvasText; }
+  }
+  /* Help dialog (controls reference) — keyboard accessible, focus-trapped. */
+  #help { position: fixed; inset: 0; z-index: 12; display: none; place-items: center;
+    background: rgba(2,5,10,.72); padding: 24px; }
+  #help.show { display: grid; }
+  #help .card { background: #0b1320; border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
+    max-width: 560px; width: 100%; padding: 26px 28px; color: var(--ink);
+    max-height: 88vh; overflow: auto; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
+  #help h2 { margin: 0 0 4px; font-size: 20px; font-weight: 400; }
+  #help p.sub { margin: 0 0 16px; color: var(--dim); font-size: 13px; }
+  #help dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
+  #help dt { color: var(--accent); font-weight: 400; white-space: nowrap; }
+  #help dd { margin: 0; color: var(--dim); }
+  #help .close { margin-top: 20px; font: inherit; font-size: 14px; color: var(--ink);
+    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
+    padding: 8px 16px; cursor: pointer; }
+  #help .close:hover { border-color: var(--accent); }
+</style>
+</head>
+<body>
+  <canvas id="wave"></canvas>
+  <div id="vignette"></div>
+  <div class="topbar">
+    <span class="device"><span class="dot" id="dev-dot"></span><span class="devcol"><span id="dev-name">No controller</span><span id="mon-prof"></span></span></span>
+    <span id="crumb"></span>
+    <span class="clock" id="clock"></span>
+  </div>
+  <!-- Screen-reader live region: every navigation/value change is announced here. -->
+  <div id="sr" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
+  <p id="app-instructions" class="visually-hidden">
+    Access Controller configurator. Use the Left and Right arrow keys to move between sections,
+    Up and Down to move between options, and Left or Right to change a value. Press Enter to
+    confirm and Escape or Backspace to go back. Press the question-mark key for the full list of
+    controls. You can also use the Access Controller itself: the stick navigates, the center or
+    stick-click confirms, and any ring button goes back.
+  </p>
+  <div id="stage" role="application" aria-label="Access Controller configurator" aria-describedby="app-instructions">
+    <div id="blades"></div>
+    <div id="items"></div>
+    <div id="hero" aria-hidden="true"></div>
+  </div>
+  <div id="monitor">
+    <button id="mon-done">Done · Esc</button>
+    <div class="mon-grid">
+      <div id="mon-render"></div>
+      <div class="panel">
+        <div>
+          <h2>Buttons (physical)</h2>
+          <div class="chips" id="mon-chips"></div>
+        </div>
+        <div>
+          <h2>Stick</h2>
+          <div class="stickrow">
+            <div class="crosshair"><div class="dot" id="mon-stickdot"></div></div>
+            <div class="axisvals">X <b id="mon-ax">0.00</b><br>Y <b id="mon-ay">0.00</b></div>
+          </div>
+        </div>
+        <div>
+          <h2>Raw input report (id 0x01)</h2>
+          <div id="mon-raw"></div>
+          <div class="legend" style="font-size:11px;color:var(--dim);margin-top:6px">outlined = <b style="color:var(--accent)">byte 15</b> (perimeter) &amp; <b style="color:var(--accent)">byte 16</b> (center / stick-click)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="mon-warn">
+    <div class="warn-body">
+      <div class="warn-eyebrow"><svg viewBox="0 0 120 92" aria-hidden="true"><polyline class="wv" points="12,52 30,52 40,30 52,68 64,22 76,52 86,44 108,44"/></svg> Live Input Monitor</div>
+      <h2>Start the live monitor?</h2>
+      <p class="warn-sub">The controller is only observed here — menu navigation pauses so you can press every button and fully move the stick without scrolling the bar.</p>
+      <div class="warn-opts">
+        <button class="warn-opt sel" id="warn-start" data-i="0">Start monitoring</button>
+        <button class="warn-opt" id="warn-cancel" data-i="1">Cancel</button>
+      </div>
+    </div>
+    <div class="warn-foot">To leave the monitor you'll need the <b>keyboard</b> — press <b>Esc</b> — or click <b>Done</b>. The controller can't exit this view on its own.</div>
+  </div>
+  <div class="footer">
+    <span class="key"><span class="k">↑</span><span class="k">↓</span><span class="k">←</span><span class="k">→</span> navigate</span>
+    <span class="key"><span class="k">⏎</span> / center · stick-click — confirm</span>
+    <span class="key"><span class="k">⌫</span> / any ring button — back</span>
+    <span class="key"><span class="k">M</span> sound</span>
+    <span class="key"><span class="k">?</span> help</span>
+    <span class="gp" id="gp-status">controller: not detected</span>
+  </div>
+  <div id="toast" role="status" aria-live="polite"></div>
+  <div id="help" role="dialog" aria-modal="true" aria-labelledby="help-title" aria-hidden="true">
+    <div class="card">
+      <h2 id="help-title">Controls</h2>
+      <p class="sub">This configurator works with the keyboard, the mouse, or the Access Controller itself.</p>
+      <dl>
+        <dt>← →</dt><dd>Move between sections (Controllers, Profiles, Save, Library, Monitor)</dd>
+        <dt>↑ ↓</dt><dd>Move between options in a section</dd>
+        <dt>← → (in an option)</dt><dd>Change the highlighted value</dd>
+        <dt>Enter</dt><dd>Confirm / open the highlighted option</dd>
+        <dt>Esc / Backspace</dt><dd>Go back / close</dd>
+        <dt>Stick</dt><dd>Navigate (on the Access Controller)</dd>
+        <dt>Center / stick-click</dt><dd>Confirm</dd>
+        <dt>Any ring button</dt><dd>Go back</dd>
+        <dt>M</dt><dd>Toggle navigation sounds</dd>
+        <dt>?</dt><dd>Open this help</dd>
+      </dl>
+      <button class="close" id="help-focus" aria-pressed="false" style="margin-top:18px;margin-right:8px">High-visibility focus ring: Off</button>
+      <button class="close" id="help-close">Close · Esc</button>
+    </div>
+  </div>
+  <div id="unsupported"><div>
+    <h2>WebHID isn't available</h2>
+    <p style="color:var(--dim)">Open this in Chrome or Edge (desktop) to use the XMB configurator.</p>
+  </div></div>
+  <script type="module" src="./xmb.js"></script>
+</body>
+</html>

package/web/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "Access Controller Configurator",
+  "short_name": "ps-access",
+  "description": "Read, edit, share, and back up PlayStation Access Controller profiles from a PC over USB-C — no PS5 required.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "landscape",
+  "background_color": "#05070c",
+  "theme_color": "#05070c",
+  "icons": [
+    { "src": "./icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
+  ]
+}