From 1d3347b764092111b213890a5f93ca4d7d02db3b Mon Sep 17 00:00:00 2001
From: user_1781515504933 <email_1781515504933>
Date: Tue, 29 Sep 2026 17:19:25 +0700
Subject: [PATCH 1/5] feat: add Noir Gear M2-NEX OpenMouse integration

---
 public/devices/README.md                 |   6 +
 src/app/OverviewPage.tsx                 | 309 +++++----
 src/app/cards/AdvancedCards.tsx          | 646 ++++++++++++++++++-
 src/app/cards/DpiCard.tsx                |  14 +-
 src/app/cards/availability.test.ts       |  56 ++
 src/app/cards/availability.ts            |  16 +-
 src/app/workspace-tabs.test.ts           |  23 +-
 src/app/workspace-tabs.ts                |   7 +-
 src/control-profiles.css                 |  14 +
 src/control.css                          | 762 ++++++++++++++++++++---
 src/device/controller.ts                 | 321 +++++++++-
 src/device/m2nex-profiles.test.ts        |  72 +++
 src/device/m2nex-profiles.ts             | 134 ++++
 src/device/types.ts                      |  16 +-
 src/i18n-ar.ts                           |   1 +
 src/i18n-de.ts                           |   1 +
 src/i18n-es.ts                           |   1 +
 src/i18n-fr.ts                           |   1 +
 src/i18n-ja.ts                           |   1 +
 src/i18n-ko.ts                           |   1 +
 src/i18n-pt.ts                           |   1 +
 src/i18n-ru.ts                           |   1 +
 src/i18n-vi.ts                           |   1 +
 src/i18n-zh.ts                           |   1 +
 src/i18n.ts                              |   1 +
 src/supported-devices-crosscheck.test.ts |  14 +-
 src/supported-devices-data.ts            |   1 +
 src/ui/device-images.test.ts             |   5 +
 src/ui/device-images.ts                  |   4 +
 29 files changed, 2195 insertions(+), 236 deletions(-)
 create mode 100644 src/device/m2nex-profiles.test.ts
 create mode 100644 src/device/m2nex-profiles.ts

diff --git a/public/devices/README.md b/public/devices/README.md
index 1b299421..d0750956 100644
--- a/public/devices/README.md
+++ b/public/devices/README.md
@@ -145,6 +145,12 @@ trusted.
 4. Keep this note as provenance. Vendor product art — treat as a request
    pending licensing review.
 
+`noir-m2-nex.png` is reserved for the name-fallback mapping for Noir Gear's
+M2-NEX. A local render from the vendor configurator may be used for development
+previews, but it is deliberately not committed here. Before publishing the
+asset, Noir Gear must confirm redistribution rights or OpenMouse should use a
+maintainer-created silhouette instead.
+
 `attackshark-r5-ultra.png` is the top-down render of the Attack Shark R5 Ultra
 extracted from Attack Shark's official product gallery
 (`cdn.shopify.com/s/files/1/0823/5050/6282/files/R5ULTRA_C06_3.png`), keyed
diff --git a/src/app/OverviewPage.tsx b/src/app/OverviewPage.tsx
index ad0cb314..5278c61a 100644
--- a/src/app/OverviewPage.tsx
+++ b/src/app/OverviewPage.tsx
@@ -4,6 +4,7 @@ import {
   Clock,
   Gauge,
   ImageUp,
+  Keyboard,
   Layers,
   Lightbulb,
   MousePointerClick,
@@ -40,16 +41,18 @@ import {
   ProcessingCard,
   RazerButtonCard,
   ButtonMappingCard,
+  KsnakeMacroCard,
   PowerModeCard,
   OnboardProfileCard,
   PulsarProCard,
   SignalCard,
   SleepCard,
+  KsnakeScrollCard,
   DpiLightingCard,
 } from "./cards/AdvancedCards";
 import { cardAvailability } from "./cards/availability";
 import { TeevolutionProfileCard } from "./cards/teevolution/ProfileCard";
-import { deviceImage, isUnknownDevice, showcaseDeviceImageUrls } from "../ui/device-images";
+import { deviceImage, deviceImageFilename, isUnknownDevice, showcaseDeviceImageUrls } from "../ui/device-images";
 import { BatteryIcon } from "./ui";
 import { availableWorkspaceTab, availableWorkspaceTabs } from "./workspace-tabs";
 
@@ -62,6 +65,7 @@ const TAB_ICON: Record<WorkspaceTab, LucideIcon> = {
   performance: BarChart3,
   lighting: Lightbulb,
   buttons: MousePointerClick,
+  macro: Keyboard,
   profiles: Layers,
   advanced: Settings2,
 };
@@ -71,21 +75,27 @@ export function TabIcon({ tab }: { tab: WorkspaceTab }): ReactNode {
   return <Icon size={13} strokeWidth={1.8} aria-hidden="true" />;
 }
 
-interface DiagramAnnotation {
-  key: string;
-  side: "left" | "right";
-  label: string;
-  value: string;
-  anchorX: number; // fraction of the artwork width
-  anchorY: number; // fraction of the artwork height
-  chipY: number;   // vertical fraction where the label chip sits
+interface ButtonMarkerPosition {
+  x: number;
+  y: number;
 }
 
-// Leader-line geometry, in artwork fractions. The chip text is inset this far
-// from the box edge and the line's horizontal tick stops just short of it, so
-// no line ever crosses the label text.
-const DIAGRAM_RAIL = { left: 0.09, right: 0.91 };   // vertical trunk column
-const DIAGRAM_TICK = { left: 0, right: 100 };       // tick end at canvas edge
+// The M2-NEX artwork is a fixed top-down render, so these coordinates keep
+// the remap numbers attached to the physical controls instead of making a
+// generic layout guess for every other mouse shape.
+const M2_NEX_BUTTON_MARKER_POSITIONS: Readonly<Record<string, ButtonMarkerPosition>> = {
+  left: { x: 0.23, y: 0.27 },
+  right: { x: 0.77, y: 0.27 },
+  middle: { x: 0.5, y: 0.19 },
+  forward: { x: 0.045, y: 0.39 },
+  backward: { x: 0.045, y: 0.51 },
+  "scroll up": { x: 0.62, y: 0.14 },
+  "scroll down": { x: 0.62, y: 0.29 },
+};
+
+function m2NexButtonMarkerPosition(button: string): ButtonMarkerPosition | null {
+  return M2_NEX_BUTTON_MARKER_POSITIONS[button.trim().toLowerCase()] ?? null;
+}
 
 // Device artwork requests go straight to the documented GitHub issue form
 // (public/devices/README.md, .github/ISSUE_TEMPLATE/device-artwork.yml).
@@ -110,81 +120,18 @@ function DeviceShowcase({ snapshot }: {
   );
   const artworkIssueHref = `${ARTWORK_ISSUE_URL}${status.name ? `&title=${encodeURIComponent(`Artwork request: ${status.name}`)}` : ""}`;
 
-  const annotations: DiagramAnnotation[] = ([
-    {
-      key: "connection",
-      side: "left",
-      label: "Connection",
-      value: status.connectionType ? connectionText(locale, status.connectionType) : "",
-      anchorX: 0.38,
-      anchorY: 0.3,
-      chipY: 0.2,
-    },
-    {
-      key: "dpi",
-      side: "left",
-      label: "DPI",
-      value: status.dpi > 0 ? status.dpi.toLocaleString() : "",
-      anchorX: 0.42,
-      anchorY: 0.52,
-      chipY: 0.5,
-    },
-    {
-      key: "battery",
-      side: "left",
-      label: "Battery",
-      value: status.batteryPercent != null ? `${status.batteryPercent}%` : "",
-      anchorX: 0.36,
-      anchorY: 0.72,
-      chipY: 0.8,
-    },
-    {
-      key: "polling",
-      side: "right",
-      label: "Polling rate",
-      value: status.pollingRateHz ? `${status.pollingRateHz.toLocaleString()} Hz` : "",
-      anchorX: 0.64,
-      anchorY: 0.36,
-      chipY: 0.35,
-    },
-    {
-      key: "profile",
-      side: "right",
-      label: "Profile",
-      value: status.activeProfile != null ? `Profile ${status.activeProfile}` : "",
-      anchorX: 0.66,
-      anchorY: 0.68,
-      chipY: 0.65,
-    },
-  ] as DiagramAnnotation[]).filter((annotation) => annotation.value !== "");
-
-  const leftAnnotations = annotations.filter((annotation) => annotation.side === "left");
-  const rightAnnotations = annotations.filter((annotation) => annotation.side === "right");
-
   return (
     <div className="device-showcase">
       <h1 className="device-showcase-name">{status.name}</h1>
       <p className="device-showcase-brand">{status.brand}</p>
       <div className="device-diagram">
-        <div className="device-diagram-rail device-diagram-rail--left">
-          {leftAnnotations.map((annotation, index) => (
-            <div
-              key={annotation.key}
-              className="device-diagram-chip device-diagram-chip--left"
-              style={{ top: `${annotation.chipY * 100}%`, animationDelay: `${0.3 + index * 0.06}s` }}
-            >
-              <span className="device-diagram-chip-label">{annotation.label}</span>
-              <span className="device-diagram-chip-value">{annotation.value}</span>
-            </div>
-          ))}
-        </div>
         <div
           className="device-diagram-canvas"
           style={{
             aspectRatio: artSize ? `${artSize.w} / ${artSize.h}` : "1 / 1",
             width: artSize ? `min(100%, ${Math.round((artSize.w / artSize.h) * 56)}vh)` : "min(100%, 480px)",
           }}
-        >
+          >
           <div className="device-diagram-art">
             {image ? (
               <img
@@ -204,47 +151,55 @@ function DeviceShowcase({ snapshot }: {
               />
             ) : null}
           </div>
-          {annotations.length > 0 ? (
-            <svg className="device-diagram-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-              {annotations.map((annotation) => {
-                const x = annotation.anchorX * 100;
-                const y = annotation.anchorY * 100;
-                const cy = annotation.chipY * 100;
-                const railX = annotation.side === "left" ? DIAGRAM_RAIL.left * 100 : DIAGRAM_RAIL.right * 100;
-                const tickX = annotation.side === "left" ? DIAGRAM_TICK.left : DIAGRAM_TICK.right;
-                return (
-                  <g key={annotation.key}>
-                    <polyline
-                      points={`${x},${y} ${railX},${y} ${railX},${cy} ${tickX},${cy}`}
-                      vectorEffect="non-scaling-stroke"
-                    />
-                  </g>
-                );
-              })}
-            </svg>
-          ) : null}
-          {annotations.map((annotation) => (
-            <span
-              key={`${annotation.key}-dot`}
-              className="device-diagram-dot"
-              style={{ left: `${annotation.anchorX * 100}%`, top: `${annotation.anchorY * 100}%` }}
-              aria-hidden="true"
-            />
-          ))}
-        </div>
-        <div className="device-diagram-rail device-diagram-rail--right">
-          {rightAnnotations.map((annotation, index) => (
-            <div
-              key={annotation.key}
-              className="device-diagram-chip device-diagram-chip--right"
-              style={{ top: `${annotation.chipY * 100}%`, animationDelay: `${0.3 + index * 0.06}s` }}
-            >
-              <span className="device-diagram-chip-label">{annotation.label}</span>
-              <span className="device-diagram-chip-value">{annotation.value}</span>
-            </div>
-          ))}
         </div>
       </div>
+      <div className="device-showcase-status-pill" aria-label="Device status">
+        <span className="device-showcase-status-primary">
+          <span className="device-showcase-dot" aria-hidden="true" />
+          {t(locale, "side.connected")}
+        </span>
+        {status.connectionType ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-muted">{connectionText(locale, status.connectionType)}</span>
+          </>
+        ) : null}
+        {status.dpi > 0 ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-label">DPI</span>
+              <span className="device-showcase-status-value">{status.dpi.toLocaleString()}</span>
+            </span>
+          </>
+        ) : null}
+        {status.batteryPercent !== null ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <BatteryIcon percent={status.batteryPercent} state={status.batteryState} />
+              <span className="device-showcase-status-value">{status.batteryPercent}%</span>
+            </span>
+          </>
+        ) : null}
+        {status.pollingRateHz > 0 ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-value">{status.pollingRateHz.toLocaleString()} Hz</span>
+            </span>
+          </>
+        ) : null}
+        {status.activeProfile != null ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-label">Profile</span>
+              <span className="device-showcase-status-value">{status.activeProfile}</span>
+            </span>
+          </>
+        ) : null}
+      </div>
       {needsArtwork ? (
         <a
           className="artwork-upload-trigger"
@@ -260,16 +215,100 @@ function DeviceShowcase({ snapshot }: {
   );
 }
 
+function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  if (status?.brand !== "Noir Gear" || status.name !== "M2-NEX" || snapshot.m2nexProfiles === null) return null;
+  const profile = snapshot.m2nexProfiles[snapshot.activeM2NexProfile];
+  if (!profile) return null;
+  const applyDisabled = snapshot.settingInProgress || snapshot.pending.count > 0;
+  return (
+    <section
+      id="m2nex-profile-overview"
+      className="m2nex-profile-overview"
+      aria-label="M2-NEX profile controls"
+    >
+      <div className="m2nex-profile-overview-title">
+        <span>PROFILE</span>
+        <strong>M2-NEX</strong>
+      </div>
+      <label className="m2nex-profile-overview-picker" htmlFor="m2nex-profile-overview-select">
+        <select
+          id="m2nex-profile-overview-select"
+          aria-label="Select M2-NEX profile"
+          value={snapshot.activeM2NexProfile}
+          disabled={snapshot.settingInProgress || snapshot.pending.busy}
+          onChange={(event) => control.selectM2NexProfile(Number(event.currentTarget.value))}
+        >
+          {snapshot.m2nexProfiles.map((entry, index) => (
+            <option key={entry.id} value={index}>{entry.name}</option>
+          ))}
+        </select>
+      </label>
+      <span className={`m2nex-profile-overview-state${snapshot.m2nexProfileDirty ? " is-dirty" : ""}`}>
+        {snapshot.m2nexProfileDirty ? "Pending" : "Saved"}
+      </span>
+      <div className="m2nex-profile-overview-actions">
+        <button
+          className="m2nex-profile-overview-apply"
+          type="button"
+          disabled={applyDisabled}
+          onClick={() => void control.applyM2NexProfile()}
+        >
+          Apply
+        </button>
+        <button
+          type="button"
+          disabled={snapshot.settingInProgress}
+          onClick={control.saveCurrentM2NexProfile}
+        >
+          Save
+        </button>
+      </div>
+    </section>
+  );
+}
+
 export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   if (!status) return null;
   const locale = snapshot.preferences.locale;
   const image = snapshot.deviceArtwork;
+  const showButtonMarkers = snapshot.workspaceTab === "buttons"
+    && status.brand === "Noir Gear"
+    && status.name === "M2-NEX"
+    && status.buttonMappings != null;
 
   return (
     <div className="showcase-sidebar">
       <div className="showcase-sidebar-visual">
-        {image ? (
+        {image ? showButtonMarkers ? (
+          <div className="button-map-showcase-art">
+            <img
+              className="showcase-sidebar-image button-map-showcase-image"
+              src={image}
+              alt={status.name}
+              onError={(event) => {
+                event.currentTarget.onerror = null;
+                event.currentTarget.src = deviceImage(null);
+              }}
+            />
+            <div className="button-map-markers" aria-hidden="true">
+              {Object.keys(status.buttonMappings ?? {}).map((button, index) => {
+                const position = m2NexButtonMarkerPosition(button);
+                if (!position) return null;
+                return (
+                  <span
+                    key={button}
+                    className="button-map-marker"
+                    style={{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }}
+                  >
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
           <img
             className="showcase-sidebar-image"
             src={image}
@@ -391,6 +430,7 @@ function OverviewContent({ snapshot }: {
   const powerOverview = status.ui?.powerOverview === true;
   return (
     <>
+      <M2NexProfileOverview snapshot={snapshot} />
       <DeviceShowcase snapshot={snapshot} />
       {powerOverview && (has.teevolutionDpiLighting || has.sleep) ? (
         <section id="power-overview-settings" className="settings-grid device-data" aria-label="Power settings">
@@ -453,6 +493,12 @@ export function Workspace({
     show(has.atkButtons, ["buttons"]) ? <AtkButtonCard key="atk-buttons" snapshot={snapshot} /> : null,
     show(has.buttonMapping && !snapshot.traits.teevolution, ["buttons"])
       ? <ButtonMappingCard key="button-mapping" snapshot={snapshot} /> : null,
+    show(has.ksnakeScroll, ["buttons"])
+      ? <KsnakeScrollCard key="ksnake-scroll" snapshot={snapshot} /> : null,
+  ].filter((node) => node !== null);
+
+  const macro = [
+    show(has.ksnakeMacros, ["macro"]) ? <KsnakeMacroCard key="ksnake-macros" snapshot={snapshot} /> : null,
   ].filter((node) => node !== null);
 
   const advanced = [
@@ -489,7 +535,7 @@ export function Workspace({
   const showDiagnostics = device && on(tab, ["advanced"]);
   const showOverview = on(tab, ["overview"]);
 
-  const anyPanel = performance.length > 0 || advanced.length > 0 || lighting.length > 0
+  const anyPanel = performance.length > 0 || macro.length > 0 || advanced.length > 0 || lighting.length > 0
     || showProfiles || showTeevolutionProfiles || showNapeLayers || showSuperstrike
     || showLogitechDetails || showMxMaster || showDiagnostics || showOverview;
 
@@ -540,6 +586,19 @@ export function Workspace({
         </section>
       ) : null}
 
+      {macro.length > 0 ? (
+        <section
+          id="macro-settings"
+          className="settings-grid device-data"
+          data-workspace-host
+          role="tabpanel"
+          aria-labelledby="workspace-tab-macro"
+          aria-label="Macro settings"
+        >
+          {macro}
+        </section>
+      ) : null}
+
       {lighting.length > 0 ? (
         <section
           id="lighting-settings"
@@ -611,6 +670,10 @@ function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
               const liveStatus = connected ? snapshot.deviceStatus : null;
               const pollText = liveStatus?.pollingRateHz ? `${liveStatus.pollingRateHz} Hz` : "–";
               const batteryText = liveStatus?.batteryPercent != null ? `${liveStatus.batteryPercent}%` : "–%";
+              const imageSrc = deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name);
+              const imageClass = deviceImageFilename(device.name) === "noir-m2-nex.png"
+                ? " device-tile-image-is-portrait"
+                : "";
               return (
                 <li
                 className={`device-tile${connected ? " is-connected" : ""}${device.kind === "keyboard" ? " is-keyboard" : ""}`}
@@ -650,8 +713,8 @@ function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
                   </div>
                   <div className="device-tile-visual">
                     <img
-                      className="device-tile-image"
-                      src={deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name)}
+                      className={`device-tile-image${imageClass}`}
+                      src={imageSrc}
                       alt={device.name}
                       loading="lazy"
                       draggable={false}
@@ -700,7 +763,9 @@ export function OverviewPage({
   const { preferences } = snapshot;
   const locale = preferences.locale;
 
-  const tabs = availableWorkspaceTabs(status !== null, cardAvailability(snapshot));
+  const tabs = availableWorkspaceTabs(status !== null, cardAvailability(snapshot), {
+    hideLighting: status?.brand === "Noir Gear" && status.name === "M2-NEX",
+  });
   const workspaceTab = availableWorkspaceTab(snapshot.workspaceTab, tabs);
   const workspaceSnapshot = workspaceTab === snapshot.workspaceTab
     ? snapshot
diff --git a/src/app/cards/AdvancedCards.tsx b/src/app/cards/AdvancedCards.tsx
index f0295971..49e0ab9a 100644
--- a/src/app/cards/AdvancedCards.tsx
+++ b/src/app/cards/AdvancedCards.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Plus, Save, Trash2 } from "lucide-react";
 import {
   EGG_BUTTON_MAPPINGS,
   EGG_BUTTON_NAMES,
@@ -18,6 +19,7 @@ import {
   type RazerToggleControl,
 } from "@openmouse/protocol/razer";
 import { teevolutionSensorModeUi } from "@openmouse/protocol/teevolution";
+import type { KsnakeMacroProfile, KsnakeMacroStep } from "@openmouse/protocol/ksnake";
 import { isPulsarProProtocol } from "../../device/traits";
 import * as control from "../../device/controller";
 import { PULSAR_SLEEP_OPTIONS } from "../../device/controller";
@@ -277,6 +279,43 @@ export function SleepCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNod
   );
 }
 
+/** K-snake stores the wheel direction in its persistent config block. */
+export function KsnakeScrollCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  if (status?.ui?.family !== "ksnake" || status.scrollDirection == null) return null;
+  const staged = snapshot.pending.keys.includes("ksnake-scroll-direction");
+  return (
+    <article id="ksnake-scroll-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading compact">
+        <div><p>WHEEL</p><h2>Scroll direction</h2></div>
+      </div>
+      <div className="button-map-list">
+        <label className="button-map-row" htmlFor="ksnake-scroll-direction">
+          <span className="button-map-control">
+            <span className="button-map-index" aria-hidden="true">W</span>
+            <span className="button-map-name">Wheel</span>
+          </span>
+          <span className="button-map-connector" aria-hidden="true">to</span>
+          <span className="button-map-select-wrap">
+            <select
+              id="ksnake-scroll-direction"
+              value={status.scrollDirection}
+              disabled={snapshot.settingsPending}
+              onChange={(event) => control.applyKsnakeScrollDirection(
+                event.currentTarget.value as NonNullable<typeof status.scrollDirection>,
+              )}
+            >
+              <option value="Forward">Forward</option>
+              <option value="Reverse">Reverse</option>
+            </select>
+          </span>
+        </label>
+      </div>
+      <small className="setting-note">Stored in the mouse and restored when OpenMouse reconnects.</small>
+    </article>
+  );
+}
+
 export function LowPowerCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
@@ -1346,6 +1385,555 @@ export function OnboardProfileCard({ snapshot }: { snapshot: ControlSnapshot }):
   );
 }
 
+const KSNAKE_MACRO_TYPES: ReadonlyArray<readonly [KsnakeMacroStep["type"], string]> = [
+  [1, "Modifier"],
+  [2, "Keyboard"],
+  [3, "Mouse"],
+];
+
+const KSNAKE_MACRO_ACTIONS: ReadonlyArray<readonly [KsnakeMacroStep["action"], string]> = [
+  [1, "Press"],
+  [2, "Release"],
+];
+
+const KSNAKE_KEY_LABELS: Readonly<Record<number, string>> = {
+  0: "None",
+  4: "A", 5: "B", 6: "C", 7: "D", 8: "E", 9: "F", 10: "G", 11: "H", 12: "I", 13: "J",
+  14: "K", 15: "L", 16: "M", 17: "N", 18: "O", 19: "P", 20: "Q", 21: "R", 22: "S", 23: "T",
+  24: "U", 25: "V", 26: "W", 27: "X", 28: "Y", 29: "Z",
+  40: "Enter", 41: "Escape", 42: "Backspace", 43: "Tab", 44: "Space",
+  79: "Right", 80: "Left", 81: "Down", 82: "Up",
+  58: "F1", 59: "F2", 60: "F3", 61: "F4", 62: "F5", 63: "F6",
+  64: "F7", 65: "F8", 66: "F9", 67: "F10", 68: "F11", 69: "F12",
+};
+
+const KSNAKE_MOUSE_LABELS: Readonly<Record<number, string>> = {
+  0: "None",
+  1: "Left button",
+  2: "Right button",
+  4: "Middle button",
+  8: "Back button",
+  16: "Forward button",
+};
+
+const KSNAKE_MODIFIER_LABELS: Readonly<Record<number, string>> = {
+  1: "Left Ctrl", 2: "Left Shift", 4: "Left Alt", 8: "Left GUI",
+  16: "Right Ctrl", 32: "Right Shift", 64: "Right Alt", 128: "Right GUI",
+};
+
+const KSNAKE_MODIFIER_BY_EVENT_CODE: Readonly<Record<string, number>> = {
+  ControlLeft: 1,
+  ShiftLeft: 2,
+  AltLeft: 4,
+  MetaLeft: 8,
+  OSLeft: 8,
+  ControlRight: 16,
+  ShiftRight: 32,
+  AltRight: 64,
+  MetaRight: 128,
+  OSRight: 128,
+};
+
+const KSNAKE_KEY_CODE_BY_EVENT_CODE: Readonly<Record<string, number>> = {
+  ...Object.fromEntries("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map((letter, index) => [`Key${letter}`, 4 + index])),
+  ...Object.fromEntries(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((digit, index) => [`Digit${digit}`, 30 + index])),
+  Enter: 40,
+  Escape: 41,
+  Backspace: 42,
+  Tab: 43,
+  Space: 44,
+  Minus: 45,
+  Equal: 46,
+  BracketLeft: 47,
+  BracketRight: 48,
+  Backslash: 49,
+  Semicolon: 51,
+  Quote: 52,
+  Backquote: 53,
+  Comma: 54,
+  Period: 55,
+  Slash: 56,
+  CapsLock: 57,
+  ...Object.fromEntries(Array.from({ length: 12 }, (_, index) => [`F${index + 1}`, 58 + index])),
+  PrintScreen: 70,
+  ScrollLock: 71,
+  Pause: 72,
+  Insert: 73,
+  Home: 74,
+  PageUp: 75,
+  Delete: 76,
+  End: 77,
+  PageDown: 78,
+  ArrowRight: 79,
+  ArrowLeft: 80,
+  ArrowDown: 81,
+  ArrowUp: 82,
+  NumLock: 83,
+  NumpadDivide: 84,
+  NumpadMultiply: 85,
+  NumpadSubtract: 86,
+  NumpadAdd: 87,
+  NumpadEnter: 88,
+  ...Object.fromEntries(Array.from({ length: 9 }, (_, index) => [`Numpad${index + 1}`, 89 + index])),
+  Numpad0: 98,
+  NumpadDecimal: 99,
+};
+
+const KSNAKE_MOUSE_CODE_BY_BUTTON: Readonly<Record<number, number>> = {
+  0: 1,
+  1: 4,
+  2: 2,
+  3: 8,
+  4: 16,
+};
+
+function ksnakeMacroCodeLabel(type: KsnakeMacroStep["type"], code: number): string {
+  if (type === 1) return KSNAKE_MODIFIER_LABELS[code] ?? `Modifier mask ${code}`;
+  if (type === 2) return KSNAKE_KEY_LABELS[code] ?? `Keyboard code ${code}`;
+  return KSNAKE_MOUSE_LABELS[code] ?? `Mouse code ${code}`;
+}
+
+function ksnakeMacroStepFromKeyboard(
+  event: KeyboardEvent,
+  action: KsnakeMacroStep["action"],
+): KsnakeMacroStep | null {
+  const modifier = KSNAKE_MODIFIER_BY_EVENT_CODE[event.code];
+  if (modifier !== undefined) return { type: 1, action, delayMs: 0, code: modifier };
+  const code = KSNAKE_KEY_CODE_BY_EVENT_CODE[event.code];
+  return code === undefined ? null : { type: 2, action, delayMs: 0, code };
+}
+
+function ksnakeMacroStepFromMouse(
+  button: number,
+  action: KsnakeMacroStep["action"],
+): KsnakeMacroStep | null {
+  const code = KSNAKE_MOUSE_CODE_BY_BUTTON[button];
+  return code === undefined ? null : { type: 3, action, delayMs: 0, code };
+}
+
+function ksnakeMacroStepLabel(step: KsnakeMacroStep): string {
+  return `${step.action === 1 ? "Press" : "Release"} · ${ksnakeMacroCodeLabel(step.type, step.code)}`;
+}
+
+type KsnakeMacroTimingMode = "no-delay" | "recorded" | "fixed";
+
+function applyKsnakeMacroTiming(
+  steps: readonly KsnakeMacroStep[],
+  timingMode: KsnakeMacroTimingMode,
+  fixedDelayMs: number,
+): KsnakeMacroStep[] {
+  return steps.map((step) => ({
+    ...step,
+    delayMs: timingMode === "no-delay"
+      ? 0
+      : timingMode === "fixed"
+        ? fixedDelayMs
+        : step.delayMs,
+  }));
+}
+
+function cloneKsnakeMacroProfile(profile: KsnakeMacroProfile | undefined): KsnakeMacroProfile {
+  return { steps: (profile?.steps ?? []).map((step) => ({ ...step })) };
+}
+
+/**
+ * Onboard macro editor for the shared K-snake/M2-NEX protocol. The physical
+ * button assignment remains in ButtonMappingCard; this card edits the macro
+ * slot that an assignment points at.
+ */
+export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const isM2Nex = status?.brand === "Noir Gear" && status.name === "M2-NEX";
+  const macroCapable = status?.ui?.family === "ksnake" || isM2Nex;
+  // Keep the card usable while an older hot-reloaded controller snapshot is
+  // still missing the newly added field. Treat that state as "not loaded" so
+  // the local editor is prepared instead of silently hiding the card.
+  const profiles = snapshot.ksnakeMacros ?? null;
+  const [slot, setSlot] = useState(0);
+  const [draft, setDraft] = useState<KsnakeMacroProfile | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timingMode, setTimingMode] = useState<KsnakeMacroTimingMode>("no-delay");
+  const [fixedDelayMs, setFixedDelayMs] = useState(10);
+  const [recordedSteps, setRecordedSteps] = useState<KsnakeMacroStep[]>([]);
+  const recordedStepsRef = useRef<KsnakeMacroStep[]>([]);
+  const recordingOriginalStepsRef = useRef<KsnakeMacroStep[] | null>(null);
+  const recordingClockRef = useRef<number | null>(null);
+  const staged = snapshot.pending.keys.includes("ksnake-macros");
+  const disabled = snapshot.settingInProgress || snapshot.pending.busy;
+  const controlsDisabled = disabled || isRecording;
+
+  useEffect(() => {
+    if (profiles) setDraft(cloneKsnakeMacroProfile(profiles[slot]));
+  }, [profiles, slot]);
+
+  useEffect(() => {
+    if (macroCapable
+      && profiles === null
+      && !snapshot.ksnakeMacrosLoading
+      && snapshot.ksnakeMacrosError === null) {
+      control.loadKsnakeMacros();
+    }
+  }, [macroCapable, profiles, snapshot.ksnakeMacrosLoading, snapshot.ksnakeMacrosError]);
+
+  const appendRecordedStep = (step: KsnakeMacroStep): void => {
+    const now = performance.now();
+    const previous = recordingClockRef.current;
+    recordingClockRef.current = now;
+    const delayMs = previous === null
+      ? 0
+      : Math.min(65535, Math.max(0, Math.round(now - previous)));
+    const next = [...recordedStepsRef.current];
+    // M2-NEX interprets the delay stored on an event as the pause after that
+    // event. The interval measured before the new event therefore belongs to
+    // the previously recorded step, not to the new step itself.
+    if (next.length > 0 && previous !== null) {
+      next[next.length - 1] = { ...next[next.length - 1], delayMs };
+    }
+    next.push({ ...step, delayMs: 0 });
+    recordedStepsRef.current = next;
+    setRecordedSteps(next);
+  };
+
+  const finishRecording = (): void => {
+    const next = applyKsnakeMacroTiming(recordedStepsRef.current, timingMode, fixedDelayMs);
+    setIsRecording(false);
+    setDraft({ steps: next });
+    setRecordedSteps([]);
+    recordedStepsRef.current = [];
+    recordingOriginalStepsRef.current = null;
+    recordingClockRef.current = null;
+  };
+
+  const cancelRecording = (): void => {
+    const original = recordingOriginalStepsRef.current ?? [];
+    setIsRecording(false);
+    setDraft({ steps: original.map((step) => ({ ...step })) });
+    setRecordedSteps([]);
+    recordedStepsRef.current = [];
+    recordingOriginalStepsRef.current = null;
+    recordingClockRef.current = null;
+  };
+
+  const changeTimingMode = (next: KsnakeMacroTimingMode): void => {
+    setTimingMode(next);
+    // Apply the selected preset to an existing draft as well, so switching to
+    // Fast or Fixed does not require recording the same macro again.
+    if (!isRecording && next !== "recorded" && draft) {
+      setDraft({ steps: applyKsnakeMacroTiming(draft.steps, next, fixedDelayMs) });
+    }
+  };
+
+  const changeFixedDelay = (value: string): void => {
+    const next = Math.min(65535, Math.max(0, Number(value) || 0));
+    setFixedDelayMs(next);
+    if (!isRecording && timingMode === "fixed" && draft) {
+      setDraft({ steps: applyKsnakeMacroTiming(draft.steps, "fixed", next) });
+    }
+  };
+
+  const startRecording = (): void => {
+    if (disabled || isRecording || !draft) return;
+    recordingOriginalStepsRef.current = draft.steps.map((step) => ({ ...step }));
+    recordedStepsRef.current = [];
+    setRecordedSteps([]);
+    recordingClockRef.current = performance.now();
+    setIsRecording(true);
+  };
+
+  useEffect(() => {
+    if (!isRecording) return undefined;
+
+    const isRecorderControl = (target: EventTarget | null): boolean => (
+      target instanceof Element && Boolean(target.closest("[data-macro-recorder-control]"))
+    );
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      if (event.code === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        finishRecording();
+        return;
+      }
+      if (event.repeat) return;
+      const step = ksnakeMacroStepFromKeyboard(event, 1);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onKeyUp = (event: KeyboardEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromKeyboard(event, 2);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onMouseDown = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromMouse(event.button, 1);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onMouseUp = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromMouse(event.button, 2);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onContextMenu = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    window.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("mouseup", onMouseUp, true);
+    window.addEventListener("contextmenu", onContextMenu, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("keyup", onKeyUp, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("mouseup", onMouseUp, true);
+      window.removeEventListener("contextmenu", onContextMenu, true);
+    };
+  }, [isRecording]);
+
+  if (!status || !macroCapable) return null;
+
+  const updateStep = (index: number, change: Partial<KsnakeMacroStep>): void => {
+    setDraft((current) => current
+      ? { steps: current.steps.map((step, stepIndex) => stepIndex === index ? { ...step, ...change } : step) }
+      : current);
+  };
+  const addStep = (): void => {
+    setDraft((current) => current
+      ? { steps: [...current.steps, { type: 2, action: 1, delayMs: 0, code: 0 }] }
+      : current);
+  };
+  const removeStep = (index: number): void => {
+    setDraft((current) => current
+      ? { steps: current.steps.filter((_, stepIndex) => stepIndex !== index) }
+      : current);
+  };
+
+  if (snapshot.ksnakeMacrosLoading) {
+    return (
+      <article id="ksnake-macro-settings" className="setting-card">
+        <div className="setting-heading compact"><div><p>MACRO EDITOR</p><h2>Build a macro</h2></div></div>
+        <p className="field-note">Preparing the 32 macro slots…</p>
+      </article>
+    );
+  }
+
+  if (snapshot.ksnakeMacrosError !== null) {
+    return (
+      <article id="ksnake-macro-settings" className="setting-card">
+        <div className="setting-heading compact"><div><p>MACRO EDITOR</p><h2>Build a macro</h2></div></div>
+        <p className="field-note">{snapshot.ksnakeMacrosError}</p>
+        <div className="setting-action"><button type="button" onClick={() => control.loadKsnakeMacros()}>Retry</button></div>
+      </article>
+    );
+  }
+
+  if (!profiles || !draft) return null;
+  return (
+    <article id="ksnake-macro-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading ksnake-macro-heading">
+        <div>
+          <p>MACRO EDITOR</p>
+          <h2>Build a macro</h2>
+          <p className="ksnake-macro-lead">Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.</p>
+        </div>
+      </div>
+      <p className="ksnake-macro-notice">
+        {isM2Nex
+          ? "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table."
+          : "Saving updates the onboard macro table on the mouse."}
+      </p>
+      <label className="ksnake-macro-slot-picker">
+        <span>Macro slot</span>
+        <select value={slot} disabled={controlsDisabled} onChange={(event) => setSlot(Number(event.currentTarget.value))}>
+          {profiles.map((profile, index) => {
+            const stepCount = index === slot
+              ? (isRecording ? recordedSteps.length : draft.steps.length)
+              : profile.steps.length;
+            return <option key={index} value={index}>Macro {index + 1}{stepCount ? ` · ${stepCount} steps` : " · empty"}</option>;
+          })}
+        </select>
+      </label>
+      <section className={`ksnake-macro-recorder${isRecording ? " is-recording" : ""}`} aria-live="polite">
+        <div className="ksnake-macro-recorder-status">
+          <span className="ksnake-macro-recorder-dot" aria-hidden="true" />
+          <div>
+            <strong>{isRecording ? "Recording input" : "Add actions"}</strong>
+            <span>{isRecording
+              ? `${recordedSteps.length} events · Press Esc to stop`
+              : "Record input or add an action manually."}</span>
+          </div>
+        </div>
+        <div className="ksnake-macro-recorder-tools">
+          <label className="ksnake-macro-timing-picker">
+            <span>Timing</span>
+            <select
+              value={timingMode}
+              disabled={disabled || isRecording}
+              data-macro-recorder-control
+              onChange={(event) => changeTimingMode(event.currentTarget.value as KsnakeMacroTimingMode)}
+            >
+              <option value="no-delay">Fast · no delay</option>
+              <option value="recorded">Recorded timing</option>
+              <option value="fixed">Fixed delay</option>
+            </select>
+          </label>
+          {timingMode === "fixed" ? (
+            <label className="ksnake-macro-fixed-delay-picker">
+              <span>Delay</span>
+              <span className="ksnake-macro-fixed-delay-control">
+                <input
+                  type="number"
+                  min={0}
+                  max={65535}
+                  step={1}
+                  aria-label="Fixed delay in milliseconds"
+                  value={fixedDelayMs}
+                  disabled={disabled || isRecording}
+                  data-macro-recorder-control
+                  onChange={(event) => changeFixedDelay(event.currentTarget.value)}
+                />
+                <small>ms</small>
+              </span>
+            </label>
+          ) : null}
+          {isRecording ? (
+            <div className="ksnake-macro-recorder-actions">
+              <button className="ksnake-macro-stop" type="button" data-macro-recorder-control onClick={finishRecording}>Stop recording</button>
+              <button className="ksnake-macro-cancel" type="button" data-macro-recorder-control onClick={cancelRecording}>Cancel</button>
+            </div>
+          ) : (
+            <div className="ksnake-macro-recorder-actions">
+              <button className="ksnake-macro-record" type="button" data-macro-recorder-control onClick={startRecording} disabled={disabled}>Record input</button>
+              <button className="ksnake-macro-manual-add" type="button" data-macro-recorder-control onClick={addStep} disabled={controlsDisabled}>
+                <Plus size={15} strokeWidth={2.2} aria-hidden="true" />
+                Add manually
+              </button>
+            </div>
+          )}
+        </div>
+      </section>
+      {isRecording ? (
+        <div className="ksnake-macro-recording-list">
+          <div className="ksnake-macro-recording-list-heading">
+            <span>Live event list</span>
+            <span>{recordedSteps.length} events</span>
+          </div>
+          {recordedSteps.length === 0 ? (
+            <p className="ksnake-macro-recording-empty">Press a key or mouse button to add the first event.</p>
+          ) : (
+            <ol>
+              {recordedSteps.map((step, index) => (
+                <li key={`${slot}-recording-${index}`}>
+                  <span className="ksnake-macro-recording-step-number">{String(index + 1).padStart(2, "0")}</span>
+                  <strong>{ksnakeMacroStepLabel(step)}</strong>
+                  <small>{timingMode === "no-delay"
+                    ? "Fast"
+                    : timingMode === "fixed"
+                      ? `${fixedDelayMs} ms`
+                      : step.delayMs > 0
+                        ? `After +${step.delayMs} ms`
+                        : index === recordedSteps.length - 1 ? "Waiting…" : "Next"}</small>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+      ) : (
+        <div className="ksnake-macro-steps">
+          {draft.steps.length === 0 ? (
+            <div className="ksnake-macro-empty">
+              <strong>No actions in this slot</strong>
+              <span>Choose Record input or Add manually above to get started.</span>
+            </div>
+          ) : null}
+          {draft.steps.map((step, index) => (
+            <div className="ksnake-macro-step" key={`${slot}-${index}`}>
+              <span className="ksnake-macro-step-number">{String(index + 1).padStart(2, "0")}</span>
+              <label className="ksnake-macro-step-field">
+                <span>Input</span>
+                <select
+                  aria-label={`Macro ${slot + 1} step ${index + 1} type`}
+                  value={step.type}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { type: Number(event.currentTarget.value) as KsnakeMacroStep["type"] })}
+                >
+                  {KSNAKE_MACRO_TYPES.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+                </select>
+              </label>
+              <label className="ksnake-macro-step-field">
+                <span>Action</span>
+                <select
+                  aria-label={`Macro ${slot + 1} step ${index + 1} action`}
+                  value={step.action}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { action: Number(event.currentTarget.value) as KsnakeMacroStep["action"] })}
+                >
+                  {KSNAKE_MACRO_ACTIONS.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+                </select>
+              </label>
+              <label className="ksnake-macro-number ksnake-macro-code-field">Code
+                <input
+                  type="number"
+                  min={0}
+                  max={255}
+                  value={step.code}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { code: Math.min(255, Math.max(0, Number(event.currentTarget.value) || 0)) })}
+                />
+              </label>
+              <label className="ksnake-macro-number ksnake-macro-delay-field">Delay after
+                <input
+                  type="number"
+                  min={0}
+                  max={65535}
+                  value={step.delayMs}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { delayMs: Math.min(65535, Math.max(0, Number(event.currentTarget.value) || 0)) })}
+                />
+              </label>
+              <small className="ksnake-macro-preview" title={ksnakeMacroCodeLabel(step.type, step.code)}>{ksnakeMacroCodeLabel(step.type, step.code)}</small>
+              <button type="button" className="ksnake-macro-delete" disabled={controlsDisabled} onClick={() => removeStep(index)} aria-label={`Remove macro step ${index + 1}`} title="Remove action">
+                <Trash2 size={16} strokeWidth={2} aria-hidden="true" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="setting-action ksnake-macro-actions">
+        <button className="ksnake-macro-save" type="button" onClick={() => control.applyKsnakeMacro(slot, draft)} disabled={controlsDisabled}>
+          <Save size={16} strokeWidth={2.2} aria-hidden="true" />
+          Save macro
+        </button>
+        <button className="ksnake-macro-clear" type="button" onClick={() => setDraft({ steps: [] })} disabled={controlsDisabled || draft.steps.length === 0}>Clear slot</button>
+      </div>
+      <details className="ksnake-macro-help">
+        <summary>Need help with codes?</summary>
+        <p>Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.</p>
+      </details>
+    </article>
+  );
+}
+
 /**
  * Button remapping for drivers that publish a plain name -> action map. Stays
  * brand-agnostic: the driver supplies both the button list and the vocabulary,
@@ -1356,30 +1944,50 @@ export function ButtonMappingCard({ snapshot }: { snapshot: ControlSnapshot }):
   if (!status?.buttonMappings || !status.buttonOptions?.length) return null;
   const locale = snapshot.preferences.locale;
   const options = status.buttonOptions;
+  const isM2Nex = status.brand === "Noir Gear"
+    && status.name === "M2-NEX"
+    && snapshot.m2nexProfiles !== null;
+  const selectedM2NexProfile = isM2Nex
+    ? snapshot.m2nexProfiles?.[snapshot.activeM2NexProfile]
+    : null;
+  const mappings = selectedM2NexProfile?.buttonMappings ?? status.buttonMappings;
   // fixedButtons lands with mouse-protocol#68; read defensively so this
   // builds against the published protocol until then.
   const fixed = new Set((status as unknown as { fixedButtons?: readonly string[] }).fixedButtons ?? []);
   return (
     <article id="button-mapping-settings" className="setting-card">
       <div className="setting-heading compact"><div><p>BUTTONS</p><h2>{t(locale, "map.remap")}</h2></div></div>
-      {Object.entries(status.buttonMappings).map(([button, assigned]) => (
-        <label key={button} className="field-label spaced">
-          {button}
-          <select
-            id={`button-${button.toLowerCase()}-select`}
-            value={options.includes(assigned) ? assigned : ""}
-            disabled={fixed.has(button)}
-            onChange={(event) => control.applyDeviceButtonMapping(button, event.currentTarget.value)}
-          >
-            {/* A macro or an assignment this build cannot name still shows. */}
-            {!options.includes(assigned) && <option value="">{assigned}</option>}
-            {options.map((option) => <option key={option} value={option}>{option}</option>)}
-          </select>
-        </label>
-      ))}
-      <p className="field-note">
-        {t(locale, "map.defaultNote")}
-      </p>
+      <div className="button-map-list">
+        {Object.entries(status.buttonMappings).map(([button, deviceAssigned], index) => {
+          const assigned = mappings[button] ?? deviceAssigned;
+          const selectId = `button-${button.toLowerCase()}-select`;
+          const isFixed = fixed.has(button) || (isM2Nex && button === "Left");
+          return (
+            <label key={button} className={`button-map-row${isFixed ? " is-fixed" : ""}`} htmlFor={selectId}>
+              <span className="button-map-control">
+                <span className="button-map-index" aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>
+                <span className="button-map-name">{button}</span>
+              </span>
+              <span className="button-map-connector" aria-hidden="true">to</span>
+              <span className="button-map-select-wrap">
+                <select
+                  id={selectId}
+                  value={options.includes(assigned) ? assigned : ""}
+                  disabled={isFixed}
+                  onChange={(event) => control.applyDeviceButtonMapping(button, event.currentTarget.value)}
+                >
+                  {/* A macro or an assignment this build cannot name still shows. */}
+                  {!options.includes(assigned) && <option value="">{assigned}</option>}
+                  {options.map((option) => <option key={option} value={option}>{option}</option>)}
+                </select>
+              </span>
+            </label>
+          );
+        })}
+      </div>
+      {!selectedM2NexProfile ? (
+        <p className="field-note">{t(locale, "map.defaultNote")}</p>
+      ) : null}
     </article>
   );
 }
diff --git a/src/app/cards/DpiCard.tsx b/src/app/cards/DpiCard.tsx
index 6ae5ad39..17bae9c2 100644
--- a/src/app/cards/DpiCard.tsx
+++ b/src/app/cards/DpiCard.tsx
@@ -47,6 +47,7 @@ function DpiStageEditor({
 
   const naturalMode: "logitech" | "stage" | "generic" = isLogitech ? "logitech" : isStage ? "stage" : "generic";
   const mode: "logitech" | "stage" | "generic" = editorView === "single" ? "generic" : naturalMode;
+  const showM2NexStageColors = mode === "stage" && status?.brand === "Noir Gear" && status.name === "M2-NEX";
   const limits = snapshot.profile.slotLimits;
   // The single-DPI (generic) view writes the live DPI, not the profile, so it
   // must not be gated behind the profile's slot-write lock.
@@ -262,7 +263,7 @@ function DpiStageEditor({
   const enabledCount = rows.filter((row) => row.enabled).length;
 
   return (
-    <div id="dpi-stage-editor" className={`dpi-editor mode-${mode}`}>
+    <div id="dpi-stage-editor" className={`dpi-editor mode-${mode}${showM2NexStageColors ? " has-m2nex-stage-colors" : ""}`}>
       <div className="dpi-editor-bar">
         <span className="dpi-editor-bar-label">
           {t(locale, mode === "logitech" ? "dpi.slotsInUse" : mode === "stage" ? "dpi.stagesInUse" : "dpi.presetsInUse")}
@@ -278,8 +279,12 @@ function DpiStageEditor({
             ? compactIndex(index) === snapshot.dpiSlotPlan.defaultIndex
             : false;
           const highlighted = mode === "generic" ? row.enabled : mode === "stage" ? isActive === true : isStarting;
+          const stageColorClass = showM2NexStageColors ? ` m2nex-stage-${index + 1}` : "";
           return (
-            <div key={index} className={`dpi-editor-row${row.enabled ? "" : " is-off"}${highlighted ? " is-active" : ""}`}>
+            <div
+              key={index}
+              className={`dpi-editor-row${row.enabled ? "" : " is-off"}${highlighted ? " is-active" : ""}${stageColorClass}`}
+            >
               <input
                 type="checkbox"
                 className="dpi-editor-tick"
@@ -296,7 +301,8 @@ function DpiStageEditor({
                 aria-pressed={highlighted}
                 onClick={() => setActive(index)}
               >
-                {index + 1}
+                {showM2NexStageColors ? <span className="dpi-editor-stage-swatch" aria-hidden="true" /> : null}
+                <span>{index + 1}</span>
               </button>
               <input
                 type="number"
@@ -536,4 +542,4 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
       ) : null}
     </article>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index 7bb3b38d..9cebb41d 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -330,6 +330,62 @@ test("the generic button card follows the K-snake key-map read", () => {
   assert.equal(silent.buttonMapping, false);
 });
 
+test("a K-snake sleep capability exposes the shared auto-sleep card", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      sleepTimeout: 300,
+    },
+    capabilities: { sleepOptions: [60, 180, 300] },
+  }));
+  assert.equal(has.sleep, true);
+});
+
+test("a K-snake config exposes its lighting and scroll controls", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      lighting: {
+        zone: "Mouse",
+        modes: ["Off", "Wave"],
+        mode: "Wave",
+        color: null,
+        color2: null,
+        colorModes: [],
+        dualColorModes: [],
+        reactiveModes: [],
+        speeds: [],
+        speed: null,
+      },
+      scrollDirection: "Forward",
+    },
+  }));
+  assert.equal(has.lighting, true);
+  assert.equal(has.ksnakeScroll, true);
+});
+
+test("M2-NEX exposes the macro capability even when its UI family is absent", () => {
+  const has = cardAvailability(snapshot({
+    status: { brand: "Noir Gear", name: "M2-NEX", ui: { showAdvancedSection: true } },
+  }));
+  assert.equal(has.ksnakeMacros, true);
+});
+
+test("M2-NEX keeps lighting out of Advanced", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      name: "M2-NEX",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      lighting: {} as never,
+    },
+  }));
+  assert.equal(has.lighting, true);
+  assert.equal(has.lightingAdvanced, false);
+});
+
 test("the Incott card follows the fields the device reported, not a brand trait", () => {
   // Wireless: both controls are present.
   const wireless = cardAvailability(snapshot({
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index c401fbac..458fbc0f 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -13,6 +13,7 @@ export interface CardAvailability {
   signal: boolean;
   debounce: boolean;
   sleep: boolean;
+  ksnakeScroll: boolean;
   lowPower: boolean;
   processing: boolean;
   ninjutsoSensor: boolean;
@@ -35,6 +36,7 @@ export interface CardAvailability {
   pulsarPro: boolean;
   onboardProfiles: boolean;
   buttonMapping: boolean;
+  ksnakeMacros: boolean;
   powerMode: boolean;
   profiles: boolean;
   keychronNapeLayers: boolean;
@@ -53,6 +55,7 @@ const NOTHING: CardAvailability = {
   signal: false,
   debounce: false,
   sleep: false,
+  ksnakeScroll: false,
   lowPower: false,
   processing: false,
   ninjutsoSensor: false,
@@ -75,6 +78,7 @@ const NOTHING: CardAvailability = {
   pulsarPro: false,
   onboardProfiles: false,
   buttonMapping: false,
+  ksnakeMacros: false,
   powerMode: false,
   profiles: false,
   keychronNapeLayers: false,
@@ -89,6 +93,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
   const { traits, capabilities } = snapshot;
   const ready = !snapshot.settingsPending;
   const host = traits.advancedSection;
+  const isM2Nex = status.brand === "Noir Gear" && status.name === "M2-NEX";
 
   const sensor = !(!status.gamingSurfaceMode
     && Array.isArray(status.supportedLiftOffDistances)
@@ -130,9 +135,14 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     lightforce: Boolean(status.lightforceSwitchMode),
     superstrike: traits.logitech && status.analogButtonTuning?.buttons.length === 2,
     lighting: Boolean(status.lighting || status.lightingZones?.length),
-    lightingAdvanced: host && Boolean(status.lighting || status.lightingZones?.length),
+    lightingAdvanced: host && !isM2Nex && Boolean(status.lighting || status.lightingZones?.length),
     onboardProfiles: (status.profileCount ?? 0) > 1 && status.activeProfile != null,
     buttonMapping: host && Boolean(status.buttonMappings) && Boolean(status.buttonOptions?.length),
+    // K-snake/M2-NEX exposes the macro write/commit path. The editor starts
+    // with local slots because this firmware does not expose a reliable macro
+    // read through the browser.
+    ksnakeMacros: ui?.family === "ksnake"
+      || (status.brand === "Noir Gear" && status.name === "M2-NEX"),
     powerMode: host && Boolean(status.powerModes?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
@@ -143,7 +153,9 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     signal: host && traits.signal,
     debounce: host && traits.debounce
       && status.debounceMs !== null && status.debounceMs !== undefined,
-    sleep: host && (traits.sleep || razerSleep) && ui?.hideSleepCard !== true,
+    sleep: host && (traits.sleep || capabilities?.sleepOptions != null || razerSleep)
+      && ui?.hideSleepCard !== true,
+    ksnakeScroll: ui?.family === "ksnake" && status.scrollDirection != null,
     lowPower: host && razerLowPower,
     processing: host && processing,
     ninjutsoSensor: host && traits.ninjutso
diff --git a/src/app/workspace-tabs.test.ts b/src/app/workspace-tabs.test.ts
index 6be426b1..38370074 100644
--- a/src/app/workspace-tabs.test.ts
+++ b/src/app/workspace-tabs.test.ts
@@ -28,5 +28,26 @@ test("an unavailable selected tab falls back to overview", () => {
 });
 
 test("the disconnected state keeps every navigation tab", () => {
-  assert.equal(availableWorkspaceTabs(false, availability({})).length, 6);
+  assert.deepEqual(availableWorkspaceTabs(false, availability({})), [
+    "overview", "performance", "buttons", "macro", "lighting", "profiles", "advanced",
+  ]);
+});
+
+test("the macro tab follows the onboard macro capability", () => {
+  const tabs = availableWorkspaceTabs(true, availability({ ksnakeMacros: true }));
+  assert.deepEqual(tabs, ["overview", "performance", "macro", "advanced"]);
+});
+
+test("M2-NEX can hide the lighting tab without changing other capabilities", () => {
+  const tabs = availableWorkspaceTabs(true, availability({
+    lighting: true,
+    buttonMapping: true,
+    ksnakeMacros: true,
+  }), { hideLighting: true });
+  assert.deepEqual(tabs, ["overview", "performance", "buttons", "macro", "advanced"]);
+});
+
+test("a K-snake scroll control is placed behind the Buttons tab", () => {
+  const tabs = availableWorkspaceTabs(true, availability({ ksnakeScroll: true }));
+  assert.deepEqual(tabs, ["overview", "performance", "buttons", "advanced"]);
 });
diff --git a/src/app/workspace-tabs.ts b/src/app/workspace-tabs.ts
index f67d818e..b9b44567 100644
--- a/src/app/workspace-tabs.ts
+++ b/src/app/workspace-tabs.ts
@@ -4,15 +4,18 @@ import type { CardAvailability } from "./cards/availability.ts";
 export function availableWorkspaceTabs(
   connected: boolean,
   has: CardAvailability,
+  options: { hideLighting?: boolean } = {},
 ): readonly WorkspaceTab[] {
   if (!connected) return WORKSPACE_TAB_ORDER;
   const hasButtons = has.eggButtons || has.razerButtons || has.mxMasterButtons || has.atkButtons
-    || has.buttonMapping || has.debounce || has.lightforce || has.eggSpdt || has.superstrike;
+    || has.buttonMapping || has.debounce || has.lightforce || has.eggSpdt || has.superstrike
+    || has.ksnakeScroll;
   const hasProfiles = has.profiles || has.keychronNapeLayers || has.atkProfile
     || has.onboardProfiles || has.pulsarPro;
   return WORKSPACE_TAB_ORDER.filter((tab) => {
-    if (tab === "lighting") return has.lighting || has.teevolutionDpiLighting;
+    if (tab === "lighting") return !options.hideLighting && (has.lighting || has.teevolutionDpiLighting);
     if (tab === "buttons") return hasButtons;
+    if (tab === "macro") return has.ksnakeMacros;
     if (tab === "profiles") return hasProfiles;
     return true;
   });
diff --git a/src/control-profiles.css b/src/control-profiles.css
index d46fdfa9..7e799e61 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -246,6 +246,20 @@
 .dpi-editor-row > input.dpi-editor-value:hover:not(:disabled) { border-color:var(--ghost) }
 .dpi-editor-row > input.dpi-editor-value:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
 .dpi-editor-row > input[type="range"].dpi-editor-slider { width:100%;min-width:0;height:1.2rem;margin:0;accent-color:var(--ui-accent);cursor:pointer }
+.dpi-editor.has-m2nex-stage-colors { --m2nex-stage-1:#ff0000;--m2nex-stage-2:#00ff00;--m2nex-stage-3:#0000ff;--m2nex-stage-4:#ffff00;--m2nex-stage-5:#00ffff;--m2nex-stage-6:#ff00ff }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-1 { --dpi-stage-color:var(--m2nex-stage-1) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-2 { --dpi-stage-color:var(--m2nex-stage-2) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-3 { --dpi-stage-color:var(--m2nex-stage-3) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-4 { --dpi-stage-color:var(--m2nex-stage-4) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-5 { --dpi-stage-color:var(--m2nex-stage-5) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-6 { --dpi-stage-color:var(--m2nex-stage-6) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row { grid-template-columns:1.4rem 2.35rem 5.2rem minmax(0,1fr) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index { display:inline-flex;align-items:center;justify-content:center;gap:.28rem;border-color:color-mix(in srgb, var(--dpi-stage-color) 58%, var(--border));box-shadow:inset 0 -2px 0 var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index:hover:not(:disabled) { border-color:var(--dpi-stage-color);color:var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row.is-active > button.dpi-editor-index { border-color:var(--dpi-stage-color);background:color-mix(in srgb, var(--dpi-stage-color) 15%, var(--surface-raised));color:var(--dpi-stage-color);box-shadow:inset 0 -2px 0 var(--dpi-stage-color),0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 28%, transparent) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="number"].dpi-editor-value { border-color:color-mix(in srgb, var(--dpi-stage-color) 42%, var(--border));color:var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="range"].dpi-editor-slider { accent-color:var(--dpi-stage-color) }
+.dpi-editor-stage-swatch { width:.42rem;height:.42rem;flex:0 0 auto;border-radius:999px;background:var(--dpi-stage-color);box-shadow:0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 65%, white) }
 .dpi-editor-lod { width:7rem;justify-self:end }
 .slot-lod-list { display:grid;gap:.35rem }
 .slot-lod-row { display:flex;align-items:center;justify-content:space-between;gap:.5rem }
diff --git a/src/control.css b/src/control.css
index c92d963e..b83f28d4 100644
--- a/src/control.css
+++ b/src/control.css
@@ -1303,6 +1303,39 @@ nav { display: grid; gap: .3rem; margin-top: 1.4rem; }
   object-fit: contain;
   filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent));
 }
+.button-map-showcase-art {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+.button-map-showcase-art .button-map-showcase-image {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}
+.button-map-markers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.button-map-marker {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  width: 1.55rem;
+  height: 1.55rem;
+  place-items: center;
+  border: 1px solid var(--ui-accent);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--ui-accent) 88%, var(--surface-strong));
+  box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--ui-accent) 22%, transparent), 0 3px 10px rgb(0 0 0 / 35%);
+  color: var(--ui-accent-ink);
+  font: 700 .61rem var(--font-mono);
+  letter-spacing: .02em;
+  line-height: 1;
+  transform: translate(-50%, -50%);
+}
 .showcase-sidebar-info { width: 100%; min-width: 0; margin-top: 1rem; }
 .showcase-sidebar-name {
   margin: 0;
@@ -1551,18 +1584,19 @@ body { height: 100vh; overflow: hidden; }
 .workspace-tab-empty small { display: block; margin-top: .45rem; color: var(--text-soft); font-size: .68rem; }
 
 #performance-settings { order: 3; }
-#lighting-settings { order: 4; }
-#logitech-onboard, #nape-layers { order: 5; }
+#macro-settings { order: 4; }
+#lighting-settings { order: 5; }
+#logitech-onboard, #nape-layers { order: 6; }
 /* The MX Master feature cards are the primary Advanced-tab content; without an
    order they fall to 0 and render above the sticky tab nav (order 1), pushing
    it into the middle of the page. Place them just before Device details. */
-#logitech-mx-master-settings { order: 5; }
-#logitech-device-details { order: 6; }
-#logitech-analog-button-settings { order: 7; }
-#pulsar-advanced { order: 8; }
-.testing-note { order: 9; }
-#device-debug-details { order: 10; }
-#interface-settings-page { order: 11; }
+#logitech-mx-master-settings { order: 6; }
+#logitech-device-details { order: 7; }
+#logitech-analog-button-settings { order: 8; }
+#pulsar-advanced { order: 9; }
+.testing-note { order: 10; }
+#device-debug-details { order: 11; }
+#interface-settings-page { order: 12; }
 
 .control-shell .settings-grid {
   display: grid;
@@ -1619,6 +1653,549 @@ body { height: 100vh; overflow: hidden; }
 }
 .setting-note { margin-top: .65rem; }
 
+/* The generic remap component keeps the OpenMouse data contract, but gets a
+   more deliberate control surface than a stack of unstyled native labels. */
+#button-mapping-settings,
+#ksnake-macro-settings,
+#ksnake-scroll-settings {
+  width: 100%;
+  max-width: 960px;
+  min-width: 0;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+#button-mapping-settings .field-note,
+#ksnake-macro-settings .field-note {
+  max-width: 72ch;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+#ksnake-macro-settings {
+  padding: clamp(1.1rem, 2.3vw, 1.8rem);
+}
+.m2nex-profile-overview {
+  display: flex;
+  align-items: center;
+  gap: .55rem;
+  width: min(100% - 2rem, 960px);
+  margin: .25rem auto .1rem;
+  padding: .45rem .65rem;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-panel);
+  box-shadow: 0 6px 18px -16px rgb(0 0 0 / 55%);
+}
+.m2nex-profile-overview-title {
+  display: inline-flex;
+  align-items: baseline;
+  flex: 0 0 auto;
+  gap: .4rem;
+  white-space: nowrap;
+}
+.m2nex-profile-overview-title span {
+  color: var(--text-soft);
+  font: .58rem var(--font-mono);
+  letter-spacing: .1em;
+}
+.m2nex-profile-overview-title strong {
+  color: var(--text-hover);
+  font-size: .74rem;
+  font-weight: 700;
+}
+.m2nex-profile-overview-state {
+  flex: 0 0 auto;
+  padding: .2rem .38rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--dim);
+  font: .56rem var(--font-mono);
+  white-space: nowrap;
+}
+.m2nex-profile-overview-state.is-dirty {
+  border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--border));
+  color: var(--ui-accent);
+}
+.m2nex-profile-overview-picker {
+  display: flex;
+  align-items: center;
+  flex: 0 1 12rem;
+  min-width: 0;
+  gap: .4rem;
+  color: var(--text-soft);
+  font-size: .64rem;
+}
+.m2nex-profile-overview-picker-label {
+  flex: 0 0 auto;
+  color: var(--dim);
+  font: .58rem var(--font-mono);
+}
+.m2nex-profile-overview-picker select {
+  width: 100%;
+  min-width: 8rem;
+  min-height: 1.85rem;
+  padding: .32rem 1.65rem .32rem .55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font: .69rem var(--font-sans);
+}
+.m2nex-profile-overview-picker select:hover:not(:disabled) { border-color: var(--border-hover); }
+.m2nex-profile-overview-actions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  gap: .45rem;
+  flex-wrap: wrap;
+}
+.m2nex-profile-overview-actions button {
+  min-height: 1.85rem;
+  padding: .32rem .55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-control);
+  color: var(--text-soft);
+  font-size: .65rem;
+  font-weight: 650;
+}
+.m2nex-profile-overview-actions button:hover:not(:disabled) {
+  border-color: var(--border-hover);
+  color: var(--text-hover);
+}
+.m2nex-profile-overview-actions .m2nex-profile-overview-apply {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+}
+.m2nex-profile-overview-actions .m2nex-profile-overview-apply:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+}
+@media (max-width: 760px) {
+  .m2nex-profile-overview {
+    width: calc(100% - 1rem);
+    flex-wrap: wrap;
+    gap: .4rem .5rem;
+    padding: .5rem .55rem;
+  }
+  .m2nex-profile-overview-title {
+    margin-inline-end: auto;
+  }
+  .m2nex-profile-overview-picker {
+    flex: 1 1 10rem;
+  }
+  .m2nex-profile-overview-actions {
+    margin-inline-start: 0;
+  }
+}
+.ksnake-macro-heading {
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+}
+.ksnake-macro-heading > div { min-width: 0; }
+.ksnake-macro-heading h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
+.ksnake-macro-lead {
+  max-width: 52ch;
+  margin: .45rem 0 0;
+  color: var(--text-soft);
+  font-size: .78rem;
+  line-height: 1.45;
+}
+.ksnake-macro-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .45rem;
+  min-height: 2.55rem;
+  padding: .62rem .95rem;
+  border: 1px solid var(--ui-accent);
+  border-radius: 8px;
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+  font-size: .78rem;
+  font-weight: 750;
+  white-space: nowrap;
+}
+.ksnake-macro-save:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  transform: translateY(-1px);
+}
+.ksnake-macro-save:active:not(:disabled) { transform: translateY(1px); }
+.ksnake-macro-save:focus-visible,
+.ksnake-macro-clear:focus-visible,
+.ksnake-macro-delete:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+.ksnake-macro-notice {
+  margin: 0 0 1rem;
+  padding: .65rem .8rem;
+  border-inline-start: 3px solid var(--ui-accent);
+  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-raised));
+  color: var(--text-soft);
+  font-size: .72rem;
+  line-height: 1.45;
+}
+.ksnake-macro-slot-picker {
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 20rem);
+  align-items: center;
+  gap: .8rem;
+  margin: 0;
+  color: var(--text-hover);
+  font-size: .76rem;
+  font-weight: 650;
+}
+.ksnake-macro-slot-picker span { color: var(--text-soft); }
+.ksnake-macro-slot-picker select {
+  width: 100%;
+  min-height: 2.55rem;
+  box-sizing: border-box;
+  padding: .58rem .7rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .78rem;
+  font-weight: 650;
+}
+.ksnake-macro-slot-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
+.ksnake-macro-recorder {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: .9rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-control) 72%, transparent);
+}
+.ksnake-macro-recorder.is-recording {
+  border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--border));
+  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-control));
+}
+.ksnake-macro-recorder-status {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+  min-width: 0;
+}
+.ksnake-macro-recorder-status > div {
+  display: grid;
+  gap: .2rem;
+  min-width: 0;
+}
+.ksnake-macro-recorder-status strong {
+  color: var(--text-hover);
+  font-size: .78rem;
+  font-weight: 750;
+}
+.ksnake-macro-recorder-status span:not(.ksnake-macro-recorder-dot) {
+  color: var(--text-soft);
+  font-size: .7rem;
+  line-height: 1.4;
+}
+.ksnake-macro-recorder-dot {
+  flex: 0 0 .62rem;
+  width: .62rem;
+  height: .62rem;
+  border-radius: 50%;
+  background: var(--text-faint);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-faint) 12%, transparent);
+}
+.ksnake-macro-recorder.is-recording .ksnake-macro-recorder-dot {
+  background: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 15%, transparent);
+  animation: ksnake-macro-recording-pulse 1.2s ease-in-out infinite;
+}
+.ksnake-macro-recorder-tools {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  gap: .65rem;
+}
+.ksnake-macro-timing-picker {
+  display: grid;
+  gap: .2rem;
+  color: var(--text-soft);
+  font-size: .62rem;
+  font-weight: 650;
+}
+.ksnake-macro-timing-picker select {
+  min-height: 2.35rem;
+  padding: .5rem 1.8rem .5rem .65rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .7rem;
+  font-weight: 650;
+}
+.ksnake-macro-timing-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
+.ksnake-macro-fixed-delay-picker {
+  display: grid;
+  gap: .2rem;
+  color: var(--text-soft);
+  font-size: .62rem;
+  font-weight: 650;
+}
+.ksnake-macro-fixed-delay-control {
+  display: flex;
+  align-items: center;
+  gap: .3rem;
+}
+.ksnake-macro-fixed-delay-control input {
+  width: 4.4rem;
+  min-height: 2.35rem;
+  box-sizing: border-box;
+  padding: .5rem .55rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font: 650 .7rem var(--font-mono);
+}
+.ksnake-macro-fixed-delay-control input:hover:not(:disabled),
+.ksnake-macro-fixed-delay-control input:focus-visible { border-color: var(--ui-accent); }
+.ksnake-macro-fixed-delay-control input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
+.ksnake-macro-fixed-delay-control small {
+  color: var(--text-soft);
+  font: .64rem var(--font-mono);
+}
+.ksnake-macro-recorder-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: .45rem;
+}
+.ksnake-macro-record,
+.ksnake-macro-stop,
+.ksnake-macro-cancel,
+.ksnake-macro-manual-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .4rem;
+  min-height: 2.35rem;
+  padding: .55rem .8rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--surface-control);
+  color: var(--text-hover);
+  font-size: .72rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.ksnake-macro-record,
+.ksnake-macro-stop {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+}
+.ksnake-macro-record:hover:not(:disabled),
+.ksnake-macro-stop:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+}
+.ksnake-macro-cancel:hover:not(:disabled) {
+  border-color: var(--border-hover);
+  background: var(--surface-hover-soft);
+}
+.ksnake-macro-manual-add:hover:not(:disabled) {
+  border-color: var(--ui-accent);
+  background: var(--surface-hover-soft);
+  color: var(--text-hover);
+  transform: translateY(-1px);
+}
+.ksnake-macro-record:focus-visible,
+.ksnake-macro-stop:focus-visible,
+.ksnake-macro-cancel:focus-visible,
+.ksnake-macro-manual-add:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+.ksnake-macro-recording-list {
+  margin-top: 1rem;
+  overflow: hidden;
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--surface-input);
+}
+.ksnake-macro-recording-list-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .8rem;
+  padding: .65rem .8rem;
+  border-bottom: 1px solid var(--line-soft);
+  color: var(--text-soft);
+  font: 650 .64rem var(--font-mono);
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+.ksnake-macro-recording-list-heading span:last-child { color: var(--ui-accent); }
+.ksnake-macro-recording-empty {
+  margin: 0;
+  padding: 1rem .8rem;
+  color: var(--text-soft);
+  font-size: .74rem;
+}
+.ksnake-macro-recording-list ol {
+  display: grid;
+  max-height: 18rem;
+  margin: 0;
+  padding: .35rem;
+  overflow: auto;
+  list-style: none;
+}
+.ksnake-macro-recording-list li {
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: .6rem;
+  min-width: 0;
+  padding: .55rem .45rem;
+  border-bottom: 1px solid var(--line-soft);
+}
+.ksnake-macro-recording-list li:last-child { border-bottom: 0; }
+.ksnake-macro-recording-step-number {
+  color: var(--text-soft);
+  font: 650 .66rem var(--font-mono);
+  text-align: center;
+}
+.ksnake-macro-recording-list li strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-hover);
+  font-size: .74rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ksnake-macro-recording-list li small {
+  color: var(--text-soft);
+  font: .64rem var(--font-mono);
+  white-space: nowrap;
+}
+@keyframes ksnake-macro-recording-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .48; transform: scale(.8); }
+}
+.reduce-interface-motion .ksnake-macro-recorder-dot { animation: none; }
+.button-map-list {
+  display: grid;
+  gap: .45rem;
+  margin-top: .15rem;
+}
+.button-map-row {
+  display: grid;
+  grid-template-columns: minmax(9rem, .9fr) auto minmax(13rem, 1.1fr);
+  align-items: center;
+  gap: .75rem;
+  min-width: 0;
+  padding: .55rem .65rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--surface-control) 74%, transparent);
+  color: var(--text-soft);
+  font-size: .72rem;
+  transition: border-color .15s ease, background .15s ease;
+}
+.button-map-row:hover {
+  border-color: var(--border-hover);
+  background: var(--surface-hover-soft);
+}
+.button-map-row:focus-within {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-accent-soft);
+}
+.button-map-control {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  min-width: 0;
+}
+.button-map-index {
+  display: grid;
+  flex: 0 0 1.7rem;
+  width: 1.7rem;
+  height: 1.7rem;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--dim);
+  font: .6rem var(--font-mono);
+  letter-spacing: .03em;
+}
+.button-map-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-hover);
+  font-weight: 550;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.button-map-connector {
+  color: var(--dim);
+  font: .58rem var(--font-mono);
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.button-map-select-wrap {
+  position: relative;
+  min-width: 0;
+}
+.button-map-select-wrap::after {
+  position: absolute;
+  top: 50%;
+  right: .75rem;
+  width: .38rem;
+  height: .38rem;
+  border-right: 1px solid var(--text-soft);
+  border-bottom: 1px solid var(--text-soft);
+  content: "";
+  pointer-events: none;
+  transform: translateY(-65%) rotate(45deg);
+}
+.button-map-select-wrap select {
+  width: 100%;
+  min-width: 0;
+  padding: .55rem 2rem .55rem .7rem;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .72rem;
+  cursor: pointer;
+  appearance: none;
+}
+.button-map-select-wrap select:hover:not(:disabled) {
+  border-color: var(--border-hover);
+}
+.button-map-select-wrap select:disabled {
+  background: var(--surface-strong);
+  color: var(--text-soft);
+  cursor: not-allowed;
+  opacity: .72;
+}
+.button-map-select-wrap:has(select:disabled)::after { opacity: .45; }
+@media (max-width: 620px) {
+  .button-map-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: .4rem;
+  }
+  .button-map-connector { display: none; }
+}
+
 #pulsar-advanced {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: .72rem;
@@ -1764,6 +2341,51 @@ body { height: 100vh; overflow: hidden; }
 .button-remap-diverted { margin-top: .6rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--surface-panel)); border-radius: 7px; background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel)); }
 .button-remap-diverted p { margin: 0 0 .5rem; color: color-mix(in srgb, var(--warning) 66%, var(--text-soft)); font-size: .66rem; line-height: 1.45; }
 .button-remap-diverted button { padding: .32rem .6rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--surface-panel)); border-radius: 6px; background: color-mix(in srgb, var(--warning) 16%, var(--surface-panel)); color: color-mix(in srgb, var(--warning) 78%, var(--text-hover)); font-size: .64rem; }
+.ksnake-macro-steps { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
+.ksnake-macro-step { display: grid; grid-template-columns: 2rem minmax(8rem, 1.05fr) minmax(7rem, .9fr) 5.5rem 6rem minmax(9rem, 1.2fr) 2.25rem; align-items: end; gap: .55rem; padding: .7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-input); }
+.ksnake-macro-step-number { align-self: center; color: var(--text-soft); font: 650 .7rem var(--font-mono); text-align: center; }
+.ksnake-macro-step-field,
+.ksnake-macro-number { display: grid; gap: .28rem; min-width: 0; color: var(--muted); font-size: .62rem; }
+.ksnake-macro-step select, .ksnake-macro-number input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 2.3rem; padding: .55rem .55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); font-size: .76rem; }
+.ksnake-macro-step select:hover:not(:disabled), .ksnake-macro-number input:hover:not(:disabled) { border-color: var(--border-hover); }
+.ksnake-macro-step small { align-self: end; min-width: 0; overflow: hidden; padding-bottom: .62rem; color: var(--text-soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
+.ksnake-macro-preview::before { content: "Preview · "; color: var(--dim); }
+.ksnake-macro-delete { display: grid; width: 2.25rem; height: 2.3rem; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--muted); }
+.ksnake-macro-delete:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
+.ksnake-macro-empty { display: grid; justify-items: start; gap: .3rem; padding: 1.2rem 1.1rem; border: 1px dashed var(--border-hover); border-radius: 10px; background: color-mix(in srgb, var(--surface-raised) 74%, transparent); }
+.ksnake-macro-empty strong { color: var(--text-hover); font-size: .9rem; }
+.ksnake-macro-empty span { color: var(--text-soft); font-size: .76rem; }
+.ksnake-macro-empty-action { margin-top: .45rem; }
+.ksnake-macro-actions { display: flex; justify-content: flex-start; gap: .6rem; margin-top: 1rem; }
+.ksnake-macro-actions .ksnake-macro-save { min-width: 9.5rem; }
+.ksnake-macro-clear { min-height: 2.55rem; padding: .6rem .9rem; border: 1px solid var(--border-hover); border-radius: 8px; background: var(--surface-control); color: var(--text-soft); font-size: .76rem; font-weight: 650; }
+.ksnake-macro-clear:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--text-hover); }
+.ksnake-macro-help { margin-top: 1rem; border-top: 1px solid var(--line-soft); padding-top: .75rem; color: var(--text-soft); }
+.ksnake-macro-help summary { width: max-content; color: var(--text-soft); cursor: pointer; font-size: .7rem; font-weight: 650; }
+.ksnake-macro-help summary:hover { color: var(--text-hover); }
+.ksnake-macro-help p { max-width: 72ch; margin: .55rem 0 0; font-size: .68rem; line-height: 1.5; }
+@media (max-width: 760px) {
+  .ksnake-macro-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
+  .ksnake-macro-add { width: 100%; }
+  .ksnake-macro-slot-picker { grid-template-columns: 1fr; gap: .4rem; }
+  .ksnake-macro-recorder { align-items: stretch; flex-direction: column; }
+  .ksnake-macro-recorder-tools { align-items: stretch; flex-direction: column; }
+  .ksnake-macro-timing-picker select { width: 100%; }
+  .ksnake-macro-fixed-delay-control input { width: 100%; }
+  .ksnake-macro-record,
+  .ksnake-macro-stop,
+  .ksnake-macro-cancel,
+  .ksnake-macro-manual-add { flex: 1; }
+  .ksnake-macro-recorder-actions { width: 100%; }
+  .ksnake-macro-step { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2.25rem; align-items: end; }
+  .ksnake-macro-step-field:nth-of-type(1) { grid-column: 2; }
+  .ksnake-macro-step-field:nth-of-type(2) { grid-column: 3; }
+  .ksnake-macro-step-number { grid-row: 1; }
+  .ksnake-macro-code-field { grid-column: 2; grid-row: 2; }
+  .ksnake-macro-delay-field { grid-column: 3; grid-row: 2; }
+  .ksnake-macro-step small { grid-column: 2 / 4; grid-row: 3; padding-bottom: 0; }
+  .ksnake-macro-delete { grid-column: 4; grid-row: 1; }
+}
 
 /* ═══════════════════════════════════════════════════════════════════════
    Desktop shell — ported from Desktop/src/App.css
@@ -2048,6 +2670,8 @@ body { height: 100vh; overflow: hidden; }
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
   padding: 1rem 0 2rem;
   text-align: center;
 }
@@ -2065,23 +2689,12 @@ body { height: 100vh; overflow: hidden; }
 }
 .device-diagram {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
   gap: 1rem;
   width: 100%;
   margin: 0 auto 1.25rem;
 }
-/* The artwork sits in the middle canvas (sized to the image's own aspect
-   ratio); the pills live in their own rails beside it so they never overlap
-   the artwork. Leader lines end at the canvas edge, right at the pill. */
-.device-diagram-rail {
-  position: relative;
-  flex: 0 0 auto;
-  width: 12.5rem;
-  min-width: 0;
-}
-.device-diagram-rail--left { text-align: start; }
-.device-diagram-rail--right { text-align: end; }
 .device-diagram-canvas {
   position: relative;
   flex: 0 0 auto;
@@ -2100,81 +2713,53 @@ body { height: 100vh; overflow: hidden; }
   object-fit: contain;
   filter: drop-shadow(0 22px 32px rgb(0 0 0 / 45%));
 }
-.device-diagram-lines {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  pointer-events: none;
-  overflow: visible;
-}
-.device-diagram-lines polyline {
-  fill: none;
-  stroke: var(--faint);
-  stroke-width: 1.5;
-  animation: device-diagram-draw 0.55s cubic-bezier(0.33, 1, 0.68, 1) 0.28s both;
-}
-.device-diagram-dot {
-  position: absolute;
-  z-index: 2;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--ui-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent);
-  transform: translate(-50%, -50%);
-}
-@keyframes device-diagram-draw {
-  from { stroke-dasharray: 600; stroke-dashoffset: 600; }
-  to   { stroke-dasharray: 600; stroke-dashoffset: 0; }
-}
-.device-diagram-chip {
-  position: absolute;
-  z-index: 3;
+.device-showcase-status-pill {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  transform: translateY(-50%);
-  padding: 0.38rem 0.9rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  width: max-content;
+  max-width: calc(100% - 1rem);
+  margin: -0.35rem auto 0;
+  padding: 0.34rem 0.62rem;
+  border: 1px solid var(--border-soft);
   border-radius: 999px;
   background: var(--surface-strong);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
-  font-size: 0.72rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 4%);
+  color: var(--faint);
+  font-size: 0.62rem;
   line-height: 1;
-  white-space: nowrap;
 }
-.device-diagram-chip--left {
-  inset-inline-start: auto;
-  inset-inline-end: 0.4rem;
-  animation: device-diagram-chip-in-l 0.32s ease both;
+.device-showcase-status-primary,
+.device-showcase-status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
 }
-.device-diagram-chip--right {
-  inset-inline-start: 0.4rem;
-  inset-inline-end: auto;
-  animation: device-diagram-chip-in-r 0.32s ease both;
+.device-showcase-status-primary {
+  color: var(--success);
+  font-weight: 700;
 }
-.device-diagram-chip-label {
+.device-showcase-status-muted { color: var(--faint); }
+.device-showcase-status-separator { color: var(--text-faint); }
+.device-showcase-status-label {
   color: var(--text-soft);
-  font-size: 0.6rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
+  font-size: 0.53rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.device-diagram-chip-value {
+.device-showcase-status-value {
   color: var(--bright);
   font-family: var(--font-mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-}
-@keyframes device-diagram-chip-in-l {
-  from { opacity: 0; transform: translateY(-50%) translateX(6px); }
-  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
-}
-@keyframes device-diagram-chip-in-r {
-  from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
-  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
+  font-size: 0.66rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
 }
+.device-showcase-status-pill .device-showcase-dot { width: 5px; height: 5px; }
+.device-showcase-status-pill .battery-icon { width: 0.95rem; }
 .device-showcase-status-detail {
   color: var(--faint);
   font-weight: 400;
@@ -2219,6 +2804,14 @@ body { height: 100vh; overflow: hidden; }
     device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
     device-glow-sidebar .7s ease both;
 }
+.control-shell .button-map-showcase-art {
+  animation:
+    device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
+    device-glow-sidebar .7s ease both;
+}
+.control-shell .button-map-showcase-art .button-map-showcase-image {
+  animation: none;
+}
 .control-shell .device-showcase-image {
   animation:
     device-display-back-home .7s cubic-bezier(.22, .61, .36, 1) both,
@@ -2749,6 +3342,11 @@ body { height: 100vh; overflow: hidden; }
   filter: none;
   transform: scale(1.1);
 }
+/* M2-NEX's supplied render is a tall portrait asset. Normalize its visual
+   weight against the square-ish renders in the adjacent device chooser tile. */
+.welcome-with-devices .device-grid .device-tile-image-is-portrait {
+  transform: scale(.75);
+}
 .detected-devices-head {
   display: flex;
   align-items: center;
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 6f9e1553..5a03e17a 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -101,6 +101,13 @@ import {
   decodeProfileKey, encodeProfileKey, profileKeyMatchesDevice, type ProfileKeyPayload,
 } from "./profile-key";
 import type { MouseLighting, MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
+import {
+  cloneM2NexProfile,
+  loadM2NexProfiles,
+  saveM2NexProfiles,
+  type M2NexProfile,
+} from "./m2nex-profiles";
 import {
   LOGITECH_HAPTIC_EFFECTS,
   LOGITECH_HAPTIC_PRESETS,
@@ -267,6 +274,14 @@ const pulsarClient = (): PulsarClient | null =>
 
 let onboardProfiles: OnboardProfile[] | null = null;
 let buttons: LogitechReprogrammableControl[] | null = null;
+const KSNAKE_MACROS_KEY = "ksnake-macros";
+let ksnakeMacros: KsnakeMacroProfile[] | null = null;
+let stagedKsnakeMacros: KsnakeMacroProfile[] | null = null;
+let ksnakeMacrosLoading = false;
+let ksnakeMacrosError: string | null = null;
+let m2nexProfiles: M2NexProfile[] | null = null;
+let activeM2NexProfile = 0;
+let m2nexProfileDirty = false;
 let napeKeymap: KeychronNapeLayerKeymap | null = null;
 const napeKeymaps = new Map<number, KeychronNapeLayerKeymap>();
 const stagedNapeAssignments = new Map<string, StagedNapeAssignment>();
@@ -465,6 +480,12 @@ function buildSnapshot(): ControlSnapshot {
     stagedProfileRates,
     stagedProfileName,
     stagedButtonMappings: Object.fromEntries(stagedButtonMappings),
+    ksnakeMacros: stagedKsnakeMacros ?? ksnakeMacros,
+    ksnakeMacrosLoading,
+    ksnakeMacrosError,
+    m2nexProfiles: m2nexProfiles?.map(cloneM2NexProfile) ?? null,
+    activeM2NexProfile,
+    m2nexProfileDirty,
     stagedProfileButtonAssignments: [...stagedProfileButtonEdits.entries()]
       .filter(([key]) => isPendingChange(key))
       .map(([, edit]) => ({
@@ -626,6 +647,267 @@ function clientHasMethod(method: string): boolean {
   return typeof client?.[method] === "function";
 }
 
+type KsnakeMacroClient = {
+  setMacros(profiles: readonly KsnakeMacroProfile[]): Promise<void>;
+};
+
+type M2NexProfileClient = KsnakeMacroClient & {
+  setButtonMapping(button: string, action: string): Promise<unknown>;
+  setDpiStageValue(stage: number, dpi: number): Promise<unknown>;
+  setActiveDpiStage(stage: number): Promise<unknown>;
+  setPollingRate(rate: number): Promise<unknown>;
+};
+
+function ksnakeMacroClient(): KsnakeMacroClient | null {
+  const client = active as unknown as Partial<KsnakeMacroClient> | null;
+  return typeof client?.setMacros === "function"
+    ? client as KsnakeMacroClient
+    : null;
+}
+
+function isM2NexStatus(status: MouseStatus | null | undefined = latestDeviceStatus): boolean {
+  return status?.brand === "Noir Gear" && status.name === "M2-NEX";
+}
+
+function persistM2NexProfiles(): void {
+  if (m2nexProfiles !== null) saveM2NexProfiles(localStorage, m2nexProfiles);
+}
+
+function profileMacroTable(): KsnakeMacroProfile[] | null {
+  return (stagedKsnakeMacros ?? ksnakeMacros)
+    ? cloneKsnakeMacros(stagedKsnakeMacros ?? ksnakeMacros ?? [])
+    : null;
+}
+
+function seedM2NexProfiles(status: MouseStatus): void {
+  if (!isM2NexStatus(status)) {
+    m2nexProfiles = null;
+    activeM2NexProfile = 0;
+    m2nexProfileDirty = false;
+    return;
+  }
+  m2nexProfiles = loadM2NexProfiles(localStorage, {
+    dpi: status.dpi,
+    dpiStages: status.dpiStages,
+    activeDpiStage: status.activeDpiStage,
+    pollingRateHz: status.pollingRateHz,
+    buttonMappings: status.buttonMappings,
+    macros: null,
+  });
+  activeM2NexProfile = Math.min(activeM2NexProfile, m2nexProfiles.length - 1);
+  m2nexProfileDirty = false;
+}
+
+function setEditorToM2NexProfile(): void {
+  const profile = m2nexProfiles?.[activeM2NexProfile];
+  if (!profile) return;
+  ksnakeMacros = cloneKsnakeMacros(profile.macros ?? []);
+  stagedKsnakeMacros = null;
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+}
+
+function cloneKsnakeMacros(profiles: readonly KsnakeMacroProfile[]): KsnakeMacroProfile[] {
+  return Array.from({ length: 32 }, (_, slot) => ({
+    steps: (profiles[slot]?.steps ?? []).map((step) => ({ ...step })),
+  }));
+}
+
+/**
+ * Prepare the onboard macro editor when the macro card is opened.
+ *
+ * M2-NEX exposes the macro write/commit commands, but its live HID
+ * descriptor does not expose a reliable macro-read command. The vendor
+ * configurator therefore treats macro definitions as editor data and writes
+ * the complete table on save. OpenMouse starts with 32 empty local slots;
+ * this avoids a fake read timeout while keeping the actual write path live.
+ */
+export function loadKsnakeMacros(): void {
+  if (ksnakeMacrosLoading || ksnakeMacros !== null) return;
+  const client = ksnakeMacroClient();
+  if (!client) {
+    ksnakeMacrosError = "The connected M2-NEX driver does not expose onboard macro access yet.";
+    emit();
+    return;
+  }
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+  if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) setEditorToM2NexProfile();
+  else ksnakeMacros = cloneKsnakeMacros([]);
+  stagedKsnakeMacros = null;
+  emit();
+}
+
+/** Select one of the local M2-NEX profile slots. The device is unchanged until Apply profile. */
+export function selectM2NexProfile(index: number): void {
+  if (!isM2NexStatus() || !m2nexProfiles?.[index]) return;
+  if (hasPendingChanges()) {
+    setReadStatus("Apply or discard current changes before switching profiles.");
+    return;
+  }
+  activeM2NexProfile = index;
+  setEditorToM2NexProfile();
+  setReadStatus(`${m2nexProfiles[index].name} selected. Apply it when you are ready.`);
+  emit();
+}
+
+/** Edit the selected profile without touching the mouse yet. */
+export function updateM2NexProfileButton(button: string, action: string): void {
+  if (!isM2NexStatus() || !m2nexProfiles?.[activeM2NexProfile]) return;
+  if (button === "Left") return;
+  const current = m2nexProfiles[activeM2NexProfile];
+  m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+    ? { ...profile, buttonMappings: { ...profile.buttonMappings, [button]: action } }
+    : profile);
+  m2nexProfileDirty = true;
+  persistM2NexProfiles();
+  setReadStatus(`${current.name} updated. Apply the profile to send it to the mouse.`);
+  emit();
+}
+
+/** Save the currently displayed device settings into the selected local slot. */
+export function saveCurrentM2NexProfile(): void {
+  if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[activeM2NexProfile]) return;
+  const status = withPendingChanges(latestDeviceStatus);
+  const current = m2nexProfiles[activeM2NexProfile];
+  const macros = profileMacroTable();
+  m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+    ? {
+        ...profile,
+        dpiStages: status.dpiStages?.slice() ?? [status.dpi],
+        activeDpiStage: status.activeDpiStage ?? 0,
+        pollingRateHz: status.pollingRateHz,
+        buttonMappings: { ...(status.buttonMappings ?? {}) },
+        macros: macros ?? profile.macros,
+      }
+    : profile);
+  m2nexProfileDirty = false;
+  persistM2NexProfiles();
+  setReadStatus(`${current.name} saved from the current mouse settings.`);
+  pushToast("success", `${current.name} saved`, "Buttons, DPI, polling rate, and available macros are stored locally.");
+  emit();
+}
+
+/** Apply a complete local M2-NEX profile through the same verified setters as the individual controls. */
+export async function applyM2NexProfile(index = activeM2NexProfile): Promise<void> {
+  if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[index]) return;
+  if (hasPendingChanges()) {
+    setReadStatus("Apply or discard the current changes before applying a profile.");
+    return;
+  }
+  if (settingInProgress) {
+    setReadStatus(st("ctl.waitFlash"));
+    return;
+  }
+  const rawClient = active as unknown as Partial<M2NexProfileClient> | null;
+  if (!rawClient
+    || typeof rawClient.setButtonMapping !== "function"
+    || typeof rawClient.setDpiStageValue !== "function"
+    || typeof rawClient.setActiveDpiStage !== "function"
+    || typeof rawClient.setPollingRate !== "function") {
+    setReadStatus("The connected M2-NEX interface cannot apply a complete profile yet.");
+    return;
+  }
+  const profile = m2nexProfiles[index];
+  const before = latestDeviceStatus;
+  activeM2NexProfile = index;
+  settingInProgress = true;
+  pendingStatusText = `Applying ${profile.name}…`;
+  readStatus = pendingStatusText;
+  emit();
+  try {
+    // Macro references are written first, so a button assigned to Macro N
+    // always points at the table just selected by this profile.
+    if (profile.macros !== null) {
+      if (typeof rawClient.setMacros !== "function") throw new Error("The M2-NEX macro interface is not available.");
+      await rawClient.setMacros(profile.macros);
+    }
+
+    const currentMappings = before.buttonMappings ?? {};
+    const options = before.buttonOptions ?? [];
+    for (const [button, action] of Object.entries(profile.buttonMappings)) {
+      if (button === "Left" || action.startsWith("Custom (") || action === "Unknown") continue;
+      if (!options.includes(action) || currentMappings[button] === action) continue;
+      pendingStatusText = `Applying ${profile.name}: ${button}…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setButtonMapping(button, action);
+    }
+
+    const currentStages = before.dpiStages ?? [];
+    for (const [stage, dpi] of profile.dpiStages.entries()) {
+      if (currentStages[stage] === dpi) continue;
+      pendingStatusText = `Applying ${profile.name}: DPI stage ${stage + 1}…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setDpiStageValue(stage, dpi);
+    }
+    if (before.activeDpiStage !== profile.activeDpiStage) {
+      pendingStatusText = `Applying ${profile.name}: active DPI stage…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setActiveDpiStage(profile.activeDpiStage);
+    }
+    if (before.pollingRateHz !== profile.pollingRateHz) {
+      pendingStatusText = `Applying ${profile.name}: polling rate…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setPollingRate(profile.pollingRateHz);
+    }
+
+    const status = await statusAfterWrite(active as SupportedClient);
+    applyStatus(status);
+    m2nexProfileDirty = false;
+    persistM2NexProfiles();
+    setReadStatus(`${profile.name} applied to M2-NEX.`);
+    pushToast("success", `${profile.name} applied`, "The mouse is now using this profile.");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unable to apply the M2-NEX profile.";
+    setReadStatus(message);
+    pushToast("error", "Profile apply failed", message);
+  } finally {
+    pendingStatusText = null;
+    settingInProgress = false;
+    emit();
+  }
+}
+
+/** Stage one edited slot while preserving other macro slots in the draft. */
+export function applyKsnakeMacro(slot: number, profile: KsnakeMacroProfile): void {
+  if (!Number.isInteger(slot) || slot < 0 || slot >= 32) return;
+  const current = stagedKsnakeMacros ?? ksnakeMacros;
+  if (!current) {
+    setReadStatus("The macro editor is not ready yet. Reopen the Buttons tab and try again.");
+    emit();
+    return;
+  }
+  const next = cloneKsnakeMacros(current);
+  next[slot] = { steps: profile.steps.map((step) => ({ ...step })) };
+  stagedKsnakeMacros = next;
+  stageChange({
+    key: KSNAKE_MACROS_KEY,
+    label: `Macro ${slot + 1}`,
+    command: `Save M2-NEX macro ${slot + 1}`,
+    progress: `Saving M2-NEX macro ${slot + 1}…`,
+    apply: async () => {
+      const client = ksnakeMacroClient();
+      if (!client) throw new Error("The M2-NEX macro interface is no longer connected.");
+      await client.setMacros(next);
+      if (active === client) {
+        ksnakeMacros = cloneKsnakeMacros(next);
+        stagedKsnakeMacros = null;
+        if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) {
+          m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+            ? { ...profile, macros: cloneKsnakeMacros(next) }
+            : profile);
+          persistM2NexProfiles();
+        }
+        emit();
+      }
+    },
+  });
+}
+
 function readCapabilities(): DeviceCapabilities {
   const razer = activeAs<RazerHidClient>(RazerHidClient);
   const dm = dmClient();
@@ -2101,13 +2383,21 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
   while (refreshInProgress) {
     await new Promise<void>((resolve) => window.setTimeout(resolve, 25));
   }
+  const switchingDevice = activeDevice !== client.device;
   if (active && active !== client) await active.close().catch(() => undefined);
   clearPendingChanges();
   latestDeviceStatus = null;
   clearActiveClients();
-  if (activeDevice !== client.device) {
+  if (switchingDevice) {
     onboardProfiles = null;
     editedNapeLayer = null;
+    ksnakeMacros = null;
+    stagedKsnakeMacros = null;
+    ksnakeMacrosLoading = false;
+    ksnakeMacrosError = null;
+    m2nexProfiles = null;
+    activeM2NexProfile = 0;
+    m2nexProfileDirty = false;
   }
   buttons = null;
   clearNapeKeymaps();
@@ -2137,6 +2427,12 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     // tuning are editable on the first status snapshot.
     capabilities = readCapabilities();
     applyStatus(status);
+    if (isM2NexStatus(status) && m2nexProfiles === null) seedM2NexProfiles(status);
+    if (!isM2NexStatus(status)) {
+      m2nexProfiles = null;
+      activeM2NexProfile = 0;
+      m2nexProfileDirty = false;
+    }
     await readButtons();
     await loadNapeKeymap(status.napeLayer ?? editedNapeLayer ?? 1);
     if (dm) {
@@ -2189,6 +2485,13 @@ function showDisconnectedState(): void {
   activeDevice = null;
   onboardProfiles = null;
   editedNapeLayer = null;
+  ksnakeMacros = null;
+  stagedKsnakeMacros = null;
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+  m2nexProfiles = null;
+  activeM2NexProfile = 0;
+  m2nexProfileDirty = false;
   lastRenderedStatusKey = null;
   capabilities = null;
   clearPendingChanges();
@@ -3823,6 +4126,21 @@ export function toggleSleep(enabled: boolean): void {
   applyPulsarValue("sleep", enabled ? lastSleepSeconds : WLMOUSE_SLEEP_NEVER);
 }
 
+export function applyKsnakeScrollDirection(
+  direction: NonNullable<MouseStatus["scrollDirection"]>,
+): void {
+  if (activeSettingsClient() === null || latestDeviceStatus?.scrollDirection == null) return;
+  if (direction !== "Forward" && direction !== "Reverse") return;
+  stageChange({
+    key: "ksnake-scroll-direction",
+    label: `Scroll direction ${direction.toLowerCase()}`,
+    command: `Set scroll direction to ${direction.toLowerCase()}`,
+    progress: `Setting scroll direction to ${direction.toLowerCase()}…`,
+    preview: (status) => { status.scrollDirection = direction; },
+    apply: () => callClientMethod("setScrollDirection", "scroll direction", direction),
+  });
+}
+
 export function applyLowPowerThreshold(percent: number): void {
   if (!razerClient()) return;
   stageChange({
@@ -4642,6 +4960,7 @@ export function start(): void {
     }
     if (!isPendingChange("gaming-surface")) stagedGamingSurface = null;
     if (!isPendingChange("lightforce-switch-mode")) stagedLightforce = null;
+    if (!isPendingChange(KSNAKE_MACROS_KEY)) stagedKsnakeMacros = null;
     if (!isPendingChange("haptic-strength")) stagedHapticIntensity = null;
     if (!isPendingChange("haptic-enabled")) stagedHapticEnabled = null;
     if (!isPendingChange("haptic-battery-saving")) stagedHapticBatterySaving = null;
diff --git a/src/device/m2nex-profiles.test.ts b/src/device/m2nex-profiles.test.ts
new file mode 100644
index 00000000..a056b3e5
--- /dev/null
+++ b/src/device/m2nex-profiles.test.ts
@@ -0,0 +1,72 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  M2NEX_PROFILE_STORAGE_KEY,
+  defaultM2NexProfiles,
+  loadM2NexProfiles,
+  saveM2NexProfiles,
+  type M2NexProfileSeed,
+} from "./m2nex-profiles.ts";
+
+function seed(): M2NexProfileSeed {
+  return {
+    dpi: 800,
+    dpiStages: [800, 1600, 3200],
+    activeDpiStage: 1,
+    pollingRateHz: 1000,
+    buttonMappings: { Left: "Left click", Right: "Right click" },
+    macros: [{ steps: [] }],
+  };
+}
+
+function storage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => { values.set(key, value); },
+    removeItem: () => undefined,
+    clear: () => values.clear(),
+    key: (index) => [...values.keys()][index] ?? null,
+    get length() { return values.size; },
+  };
+}
+
+test("M2-NEX defaults mirror the vendor app's three profile slots", () => {
+  const profiles = defaultM2NexProfiles(seed());
+
+  assert.deepEqual(profiles.map((profile) => profile.name), ["Profile 1", "Profile 2", "Profile 3"]);
+  assert.deepEqual(profiles[1]?.dpiStages, [800, 1600, 3200]);
+  assert.equal(profiles[1]?.activeDpiStage, 1);
+  assert.deepEqual(profiles[1]?.buttonMappings, seed().buttonMappings);
+  assert.deepEqual(profiles[1]?.macros, seed().macros);
+});
+
+test("M2-NEX profiles round-trip through browser storage without sharing mutable data", () => {
+  const store = storage();
+  const profiles = defaultM2NexProfiles(seed());
+  profiles[0]!.name = "FPS";
+  profiles[0]!.buttonMappings.Right = "Macro 1";
+  profiles[0]!.macros = [{ steps: [{ type: 2, action: 1, code: 4, delayMs: 0 }] }];
+
+  saveM2NexProfiles(store, profiles);
+  const loaded = loadM2NexProfiles(store, seed());
+  assert.equal(loaded[0]?.name, "FPS");
+  assert.equal(loaded[0]?.buttonMappings.Right, "Macro 1");
+  assert.deepEqual(loaded[0]?.macros, profiles[0]?.macros);
+
+  loaded[0]!.dpiStages[0] = 400;
+  loaded[0]!.buttonMappings.Right = "Forward";
+  assert.equal(profiles[0]?.dpiStages[0], 800);
+  assert.equal(profiles[0]?.buttonMappings.Right, "Macro 1");
+  assert.ok(store.getItem(M2NEX_PROFILE_STORAGE_KEY));
+});
+
+test("invalid stored profiles fall back to current mouse settings", () => {
+  const store = storage();
+  store.setItem(M2NEX_PROFILE_STORAGE_KEY, JSON.stringify({ version: 1, profiles: [] }));
+
+  const loaded = loadM2NexProfiles(store, seed());
+  assert.deepEqual(loaded.map((profile) => profile.name), ["Profile 1", "Profile 2", "Profile 3"]);
+  assert.deepEqual(loaded[0]?.dpiStages, [800, 1600, 3200]);
+});
diff --git a/src/device/m2nex-profiles.ts b/src/device/m2nex-profiles.ts
new file mode 100644
index 00000000..ed2053e7
--- /dev/null
+++ b/src/device/m2nex-profiles.ts
@@ -0,0 +1,134 @@
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
+import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+
+/** The same three-slot mental model used by the M2-NEX vendor application. */
+export const M2NEX_PROFILE_COUNT = 3;
+export const M2NEX_PROFILE_STORAGE_KEY = "openmouse.m2-nex.profiles.v1";
+
+export interface M2NexProfile {
+  id: number;
+  name: string;
+  /** The complete DPI stage table, not only the currently active value. */
+  dpiStages: number[];
+  activeDpiStage: number;
+  pollingRateHz: number;
+  buttonMappings: Record<string, string>;
+  /** Null means this profile has no trustworthy macro table yet. */
+  macros: KsnakeMacroProfile[] | null;
+}
+
+interface StoredM2NexProfiles {
+  version: 1;
+  profiles: M2NexProfile[];
+}
+
+export type M2NexProfileSeed = Pick<
+  MouseStatus,
+  "dpi" | "dpiStages" | "activeDpiStage" | "pollingRateHz" | "buttonMappings"
+> & {
+  macros?: readonly KsnakeMacroProfile[] | null;
+};
+
+function cloneMacros(macros: readonly KsnakeMacroProfile[] | null | undefined): KsnakeMacroProfile[] | null {
+  if (macros === null || macros === undefined) return null;
+  return macros.map((profile) => ({
+    steps: profile.steps.map((step) => ({ ...step })),
+  }));
+}
+
+export function cloneM2NexProfile(profile: M2NexProfile): M2NexProfile {
+  return {
+    id: profile.id,
+    name: profile.name,
+    dpiStages: [...profile.dpiStages],
+    activeDpiStage: profile.activeDpiStage,
+    pollingRateHz: profile.pollingRateHz,
+    buttonMappings: { ...profile.buttonMappings },
+    macros: cloneMacros(profile.macros),
+  };
+}
+
+function seedProfile(id: number, seed: M2NexProfileSeed): M2NexProfile {
+  const stages = seed.dpiStages?.length ? [...seed.dpiStages] : [seed.dpi];
+  return {
+    id,
+    name: `Profile ${id + 1}`,
+    dpiStages: stages,
+    activeDpiStage: Math.min(Math.max(seed.activeDpiStage ?? 0, 0), stages.length - 1),
+    pollingRateHz: seed.pollingRateHz,
+    buttonMappings: { ...(seed.buttonMappings ?? {}) },
+    macros: cloneMacros(seed.macros),
+  };
+}
+
+export function defaultM2NexProfiles(seed: M2NexProfileSeed): M2NexProfile[] {
+  return Array.from({ length: M2NEX_PROFILE_COUNT }, (_, id) => seedProfile(id, seed));
+}
+
+function validProfile(value: unknown): value is M2NexProfile {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const profile = value as Partial<M2NexProfile>;
+  return Number.isInteger(profile.id)
+    && typeof profile.name === "string"
+    && Array.isArray(profile.dpiStages)
+    && profile.dpiStages.length > 0
+    && profile.dpiStages.every((dpi) => typeof dpi === "number" && Number.isFinite(dpi))
+    && Number.isInteger(profile.activeDpiStage)
+    && typeof profile.pollingRateHz === "number"
+    && Number.isFinite(profile.pollingRateHz)
+    && typeof profile.buttonMappings === "object"
+    && profile.buttonMappings !== null
+    && Object.values(profile.buttonMappings).every((action) => typeof action === "string")
+    && (profile.macros === null || profile.macros === undefined || Array.isArray(profile.macros));
+}
+
+function normalizeProfiles(raw: unknown): M2NexProfile[] | null {
+  if (!Array.isArray(raw) || raw.length !== M2NEX_PROFILE_COUNT || !raw.every(validProfile)) return null;
+  return raw.map((value, id) => {
+    const profile = value as M2NexProfile;
+    const stages = profile.dpiStages.slice();
+    return {
+      id,
+      name: profile.name.trim() || `Profile ${id + 1}`,
+      dpiStages: stages,
+      activeDpiStage: Math.min(Math.max(profile.activeDpiStage, 0), stages.length - 1),
+      pollingRateHz: profile.pollingRateHz,
+      buttonMappings: { ...profile.buttonMappings },
+      macros: cloneMacros(profile.macros),
+    };
+  });
+}
+
+/** Load the three profile slots for M2-NEX from browser-local storage. */
+export function loadM2NexProfiles(
+  storage: Pick<Storage, "getItem">,
+  seed: M2NexProfileSeed,
+): M2NexProfile[] {
+  const defaults = defaultM2NexProfiles(seed);
+  try {
+    const raw = storage.getItem(M2NEX_PROFILE_STORAGE_KEY);
+    if (!raw) return defaults;
+    const parsed = JSON.parse(raw) as Partial<StoredM2NexProfiles>;
+    return parsed.version === 1
+      ? normalizeProfiles(parsed.profiles) ?? defaults
+      : defaults;
+  } catch {
+    return defaults;
+  }
+}
+
+/** Persist all slots together, matching the vendor app's profile-table model. */
+export function saveM2NexProfiles(
+  storage: Pick<Storage, "setItem">,
+  profiles: readonly M2NexProfile[],
+): void {
+  const payload: StoredM2NexProfiles = {
+    version: 1,
+    profiles: profiles.map(cloneM2NexProfile),
+  };
+  try {
+    storage.setItem(M2NEX_PROFILE_STORAGE_KEY, JSON.stringify(payload));
+  } catch {
+    // The in-memory profile remains usable when browser storage is blocked or full.
+  }
+}
diff --git a/src/device/types.ts b/src/device/types.ts
index 14009e06..0f8b3b01 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -1,18 +1,21 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
 import type { KeychronNapeLayerKeymap } from "@openmouse/protocol/keychron";
 import type { LogitechReprogrammableControl } from "@openmouse/protocol/logitech";
 import type { DpiStageCapabilities, DpiStagePlan, OnboardProfile } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import type { InterfacePreferences } from "../interface-preferences";
 import type { PreviewMode } from "../preview-modes";
 import type { DriverTraits } from "./traits";
+import type { M2NexProfile } from "./m2nex-profiles";
 
-export type WorkspaceTab = "overview" | "performance" | "lighting" | "buttons" | "profiles" | "advanced";
+export type WorkspaceTab = "overview" | "performance" | "buttons" | "macro" | "lighting" | "profiles" | "advanced";
 
 export const WORKSPACE_TAB_ORDER: readonly WorkspaceTab[] = [
   "overview",
   "performance",
-  "lighting",
   "buttons",
+  "macro",
+  "lighting",
   "profiles",
   "advanced",
 ];
@@ -198,6 +201,15 @@ export interface ControlSnapshot {
   stagedProfileName: string | null;
   /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
+  /** M2-NEX/K-snake onboard macro slots, prepared locally for a full-table write. */
+  ksnakeMacros: KsnakeMacroProfile[] | null;
+  ksnakeMacrosLoading: boolean;
+  ksnakeMacrosError: string | null;
+  /** Local profile slots matching the M2-NEX vendor configurator. */
+  m2nexProfiles: M2NexProfile[] | null;
+  activeM2NexProfile: number;
+  /** True when the selected local profile differs from the device. */
+  m2nexProfileDirty: boolean;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
   /** Nape Pro VIA keymap for the layer currently open in the Buttons tab. */
   napeKeymap: KeychronNapeLayerKeymap | null;
diff --git a/src/i18n-ar.ts b/src/i18n-ar.ts
index 62f12c2e..543643cb 100644
--- a/src/i18n-ar.ts
+++ b/src/i18n-ar.ts
@@ -52,6 +52,7 @@ export const ar: Record<I18nKey, string> = {
   "tab.overview": "نظرة عامة",
   "tab.performance": "الأداء",
   "tab.buttons": "الأزرار",
+  "tab.macro": "الماكرو",
   "tab.profiles": "الملفات",
   "tab.advanced": "متقدم",
   "tab.lighting": "الإضاءة",
diff --git a/src/i18n-de.ts b/src/i18n-de.ts
index 7aa93016..a896c0b3 100644
--- a/src/i18n-de.ts
+++ b/src/i18n-de.ts
@@ -52,6 +52,7 @@ export const de: Record<I18nKey, string> = {
   "tab.overview": "Übersicht",
   "tab.performance": "Leistung",
   "tab.buttons": "Tasten",
+  "tab.macro": "Makro",
   "tab.profiles": "Profile",
   "tab.advanced": "Erweitert",
   "tab.lighting": "Beleuchtung",
diff --git a/src/i18n-es.ts b/src/i18n-es.ts
index 4b2e7281..5148ea51 100644
--- a/src/i18n-es.ts
+++ b/src/i18n-es.ts
@@ -52,6 +52,7 @@ export const es: Record<I18nKey, string> = {
   "tab.overview": "Resumen",
   "tab.performance": "Rendimiento",
   "tab.buttons": "Botones",
+  "tab.macro": "Macro",
   "tab.profiles": "Perfiles",
   "tab.advanced": "Avanzado",
   "tab.lighting": "Iluminación",
diff --git a/src/i18n-fr.ts b/src/i18n-fr.ts
index fa29ef5d..692a0935 100644
--- a/src/i18n-fr.ts
+++ b/src/i18n-fr.ts
@@ -52,6 +52,7 @@ export const fr: Record<I18nKey, string> = {
   "tab.overview": "Aperçu",
   "tab.performance": "Performance",
   "tab.buttons": "Boutons",
+  "tab.macro": "Macro",
   "tab.profiles": "Profils",
   "tab.advanced": "Avancé",
   "tab.lighting": "Éclairage",
diff --git a/src/i18n-ja.ts b/src/i18n-ja.ts
index 0b9d35b6..8c7ea056 100644
--- a/src/i18n-ja.ts
+++ b/src/i18n-ja.ts
@@ -52,6 +52,7 @@ export const ja: Record<I18nKey, string> = {
   "tab.overview": "概要",
   "tab.performance": "パフォーマンス",
   "tab.buttons": "ボタン",
+  "tab.macro": "マクロ",
   "tab.profiles": "プロファイル",
   "tab.advanced": "詳細設定",
   "tab.lighting": "ライティング",
diff --git a/src/i18n-ko.ts b/src/i18n-ko.ts
index 3b59959a..d1763a81 100644
--- a/src/i18n-ko.ts
+++ b/src/i18n-ko.ts
@@ -52,6 +52,7 @@ export const ko: Record<I18nKey, string> = {
   "tab.overview": "개요",
   "tab.performance": "성능",
   "tab.buttons": "버튼",
+  "tab.macro": "매크로",
   "tab.profiles": "프로필",
   "tab.advanced": "고급",
   "tab.lighting": "조명",
diff --git a/src/i18n-pt.ts b/src/i18n-pt.ts
index 7ef466a2..3d75c10b 100644
--- a/src/i18n-pt.ts
+++ b/src/i18n-pt.ts
@@ -52,6 +52,7 @@ export const pt: Record<I18nKey, string> = {
   "tab.overview": "Visão geral",
   "tab.performance": "Desempenho",
   "tab.buttons": "Botões",
+  "tab.macro": "Macro",
   "tab.profiles": "Perfis",
   "tab.advanced": "Avançado",
   "tab.lighting": "Iluminação",
diff --git a/src/i18n-ru.ts b/src/i18n-ru.ts
index 5b0232d3..d126eb20 100644
--- a/src/i18n-ru.ts
+++ b/src/i18n-ru.ts
@@ -52,6 +52,7 @@ export const ru: Record<I18nKey, string> = {
   "tab.overview": "Обзор",
   "tab.performance": "Производительность",
   "tab.buttons": "Кнопки",
+  "tab.macro": "Макрос",
   "tab.profiles": "Профили",
   "tab.advanced": "Дополнительно",
   "tab.lighting": "Подсветка",
diff --git a/src/i18n-vi.ts b/src/i18n-vi.ts
index 0261042d..23662dd8 100644
--- a/src/i18n-vi.ts
+++ b/src/i18n-vi.ts
@@ -52,6 +52,7 @@ export const vi: Record<I18nKey, string> = {
   "tab.overview": "Tổng quan",
   "tab.performance": "Hiệu năng",
   "tab.buttons": "Nút",
+  "tab.macro": "Macro",
   "tab.profiles": "Profiles",
   "tab.advanced": "Nâng cao",
   "tab.lighting": "Đèn",
diff --git a/src/i18n-zh.ts b/src/i18n-zh.ts
index 46f3c9d6..c4fbab5f 100644
--- a/src/i18n-zh.ts
+++ b/src/i18n-zh.ts
@@ -52,6 +52,7 @@ export const zh: Record<I18nKey, string> = {
   "tab.overview": "概览",
   "tab.performance": "性能",
   "tab.buttons": "按键",
+  "tab.macro": "宏",
   "tab.profiles": "配置文件",
   "tab.advanced": "高级",
   "tab.lighting": "灯光",
diff --git a/src/i18n.ts b/src/i18n.ts
index 7fd1227d..e1a2d65a 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -55,6 +55,7 @@ const en = {
   "tab.overview": "Overview",
   "tab.performance": "Performance",
   "tab.buttons": "Buttons",
+  "tab.macro": "Macro",
   "tab.profiles": "Profiles",
   "tab.advanced": "Advanced",
   "tab.lighting": "Lighting",
diff --git a/src/supported-devices-crosscheck.test.ts b/src/supported-devices-crosscheck.test.ts
index d26e488a..3d51cd11 100644
--- a/src/supported-devices-crosscheck.test.ts
+++ b/src/supported-devices-crosscheck.test.ts
@@ -63,6 +63,18 @@ test("pid matches prefer the row whose brand matches the device", () => {
   assert.equal(result.pageModel, "G23 V2 (SE / Pro)");
 });
 
+test("M2-NEX resolves to the Noir Gear supported row despite the shared OEM PID", () => {
+  const result = crosscheckSupportedDevices(
+    device({ brand: "Noir Gear", name: "M2-NEX", vendorId: 0xa8a4, productId: 0x2255 }),
+    "pass",
+  );
+  assert.equal(result.listed, true);
+  assert.equal(result.matchedBy, "pid");
+  assert.equal(result.status, "supported");
+  assert.equal(result.pageModel, "M2-NEX");
+  assert.match(result.detail, /already listed as Supported/);
+});
+
 test("brand+model name match on a likely row with a passing run qualifies for Supported", () => {
   const result = crosscheckSupportedDevices(
     device({ brand: "ATK", name: "F1 Ultimate" }),
@@ -126,4 +138,4 @@ test("statuses other than supported and likely phrase the page row", () => {
 test("detail stays within a single embed field", () => {
   const result = crosscheckSupportedDevices(device({ brand: "ATK", name: "F1 Ultimate" }), "pass");
   assert.ok(result.detail.length <= 300);
-});
\ No newline at end of file
+});
diff --git a/src/supported-devices-data.ts b/src/supported-devices-data.ts
index 1c505fa3..2df48794 100644
--- a/src/supported-devices-data.ts
+++ b/src/supported-devices-data.ts
@@ -317,6 +317,7 @@ export const SUPPORTED_DEVICES: readonly SupportedDeviceEntry[] = [
   { brand: "Cooler Master", model: "MasterMouse MM720", status: "driver" },
   { brand: "Cooler Master", model: "MM711", status: "driver" },
   { brand: "K-snake", model: "X11", status: "supported", pids: [0x2255] },
+  { brand: "Noir Gear", model: "M2-NEX", status: "supported", pids: [0x2255] },
   { brand: "Hitscan", model: "Hyperlight", status: "unknown" },
   { brand: "RAWM", model: "Leviathan V4", status: "unknown" },
   { brand: "AJAZZ", model: "AJ159 Apex", status: "unknown" },
diff --git a/src/ui/device-images.test.ts b/src/ui/device-images.test.ts
index 2b5ececd..b0296d78 100644
--- a/src/ui/device-images.test.ts
+++ b/src/ui/device-images.test.ts
@@ -221,6 +221,11 @@ test("K-snake X11 resolves by name regardless of transport", () => {
   assert.equal(deviceImage(null, "K-snake X11"), CDN + "ksnake-x11.png");
 });
 
+test("Noir Gear M2-NEX resolves to its maintainer-hosted artwork", () => {
+  assert.equal(deviceImage(null, "M2-NEX"), CDN + "noir-m2-nex.png");
+  assert.equal(deviceImage(null, "Noir Gear M2-NEX"), CDN + "noir-m2-nex.png");
+});
+
 test("Attack Shark X11 does not inherit K-snake artwork", () => {
   assert.equal(deviceImage(null, "Attack Shark X11"), CDN + "unknown-device.png");
   assert.equal(deviceImage(null, "Attack Shark X11 SE"), CDN + "unknown-device.png");
diff --git a/src/ui/device-images.ts b/src/ui/device-images.ts
index db76a1bc..c23106e9 100644
--- a/src/ui/device-images.ts
+++ b/src/ui/device-images.ts
@@ -153,6 +153,10 @@ function resolveDeviceImageFilename(_device: HIDDevice | null | undefined, displ
   // Pulsar 4K Wireless Receiver ships with the X2 V2 4K dongle kit; the receiver
   // product id is not yet published, so match the name reported by WebHID.
   if (/pulsar/i.test(displayName)) return "pulsar-x2-v2.png";
+  // Noir Gear M2-NEX uses the shared K-snake transport, but has its own
+  // retail shell. Keep its artwork match name-based so USB and 2.4 GHz
+  // receiver connections resolve to the same product image.
+  if (/m2\s*[-_]?\s*nex/i.test(displayName)) return "noir-m2-nex.png";
   if (/fantech/i.test(displayName)) return "unknown-device.png";
   return "unknown-device.png";
 }

From cdd2f77e63908c6295f0ea65017937a6055ba80d Mon Sep 17 00:00:00 2001
From: ydw1904 <ydw25@mails.tsinghua.edu.cn>
Date: Wed, 30 Sep 2026 01:10:12 +0800
Subject: [PATCH 2/5] feat(keychron): wire the G3 Air into the panel

Keychron8kNordicHidClient (family keychron-8k-nordic, from
mouse-protocol) gets the advanced section with the sleep and debounce
cards, since it reads and writes both and publishes its own option
lists. It joins NEEDS_OPEN so the device opens before the first read.
DPI stages, polling, lift-off, the processing toggles, angle tuning,
profiles and the button remapper all dispatch generically.

Needs a protocol release with the driver and a bump from 0.19.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/device/controller.ts | 3 ++-
 src/device/traits.ts     | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/device/controller.ts b/src/device/controller.ts
index 3c5ec76c..4b199e6c 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -138,6 +138,7 @@ import { VgnF2HidClient } from "@openmouse/protocol/drivers/vgn/hid";
 import { KeychronNapeHidClient } from "@openmouse/protocol/drivers/keychron/nape-hid";
 import { KeychronM6HidClient } from "@openmouse/protocol/drivers/keychron/m6-hid";
 import { Keychron4kHidClient } from "@openmouse/protocol/drivers/keychron/mouse-4k-hid";
+import { Keychron8kNordicHidClient } from "@openmouse/protocol/drivers/keychron/mouse-8k-nordic-hid";
 import type { GloriousLighting } from "@openmouse/protocol/glorious";
 import { GloriousHidClient } from "@openmouse/protocol/drivers/glorious/hid";
 import { GloriousClassicHidClient } from "@openmouse/protocol/drivers/glorious/classic-hid";
@@ -243,7 +244,7 @@ function activeAs<T>(...classes: ClientClass<T>[]): T | null {
 
 const DM_CLASSES = [WLMouseHidClient, LamzuHidClient, LamzuAtlantisHidClient, AtkHidClient, AtkBitmouseHidClient, NinjutsoHidClient] as const;
 const RAZER_CLASSES = [RazerHidClient, RazerViperMiniHidClient, RazerViperHidClient, RazerCobraHidClient] as const;
-const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, KeychronM6HidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient] as const;
+const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, KeychronM6HidClient, Keychron8kNordicHidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient] as const;
 const PULSAR_CLASSES = [PulsarHidClient, PulsarProHidClient, PulsarXs1HidClient] as const;
 
 const logitechClient = (): LogitechHidppClient | null => activeAs(LogitechHidppClient);
diff --git a/src/device/traits.ts b/src/device/traits.ts
index 622b54f3..737f986c 100644
--- a/src/device/traits.ts
+++ b/src/device/traits.ts
@@ -53,6 +53,9 @@ const BY_FAMILY: Readonly<Record<string, Partial<DriverTraits>>> = {
   "keychron-m6": { advancedSection: true, sleep: true, debounce: true },
   // Launcher offers no sleep setting for the 4K family, so only debounce.
   "keychron-4k": { advancedSection: true, debounce: true },
+  // The 8K Nordic family (G3 Air) keeps debounce and sleep in its system block
+  // and publishes its own option lists for both.
+  "keychron-8k-nordic": { advancedSection: true, sleep: true, debounce: true },
   // The Beast X 4K skips the compx transport the rest of WLMouse uses and
   // publishes its own sleep and debounce lists, so it takes the plain flags.
   "wlmouse-4k": { advancedSection: true, sleep: true, debounce: true },

From df218f96eadd176e514a52123fb0c477ae728ac1 Mon Sep 17 00:00:00 2001
From: LinkPass888 <57739158+LinkPass888@users.noreply.github.com>
Date: Wed, 30 Sep 2026 14:25:54 +0800
Subject: [PATCH 3/5] feat(rapoo): drive the VT9 Pro through the Rapoo HID
 client

The mouse-protocol PR that adds the Rapoo codec and its WebHID client
also adds RapooHidClient, and it was not on the list of clients the
controller opens on connect. Without that entry the driver never gets to
run against a device that is already picked, which is the whole point of
the client: it answers on its own vendor collection, so nothing else
notices it.

The client reports the battery on its own when the transport has no
receiveInputReport (WebHID alone cannot read the register channel), and
when OpenMouse Bridge supplies it the same connect path unlocks DPI,
polling rate and the sensor settings.
---
 src/device/controller.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/device/controller.ts b/src/device/controller.ts
index 3c5ec76c..b3915a9f 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -169,6 +169,7 @@ import { MicrosoftHidClient } from "@openmouse/protocol/drivers/microsoft/hid";
 import { DareuHidClient } from "@openmouse/protocol/drivers/dareu/hid";
 import { IncottHidClient } from "@openmouse/protocol/drivers/incott/hid";
 import { BytechHidClient } from "@openmouse/protocol/drivers/bytech/hid";
+import { RapooHidClient } from "@openmouse/protocol/drivers/rapoo/hid";
 import { parsePreviewMode, previewsEnabled, type PreviewMode } from "../preview-modes";
 import { sleepLabel } from "./options";
 import { traitsFor } from "./traits";
@@ -243,7 +244,12 @@ function activeAs<T>(...classes: ClientClass<T>[]): T | null {
 
 const DM_CLASSES = [WLMouseHidClient, LamzuHidClient, LamzuAtlantisHidClient, AtkHidClient, AtkBitmouseHidClient, NinjutsoHidClient] as const;
 const RAZER_CLASSES = [RazerHidClient, RazerViperMiniHidClient, RazerViperHidClient, RazerCobraHidClient] as const;
-const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, KeychronM6HidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient] as const;
+// Rapoo's VT9 Pro listens on its own vendor collection and answers reads
+// through GET_REPORT(Input), which in the browser means OpenMouse Bridge:
+// opening it on connect is what makes the register walk in readStatus()
+// possible, and the driver reports the battery on its own when Bridge is
+// absent rather than failing.
+const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, KeychronM6HidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient, RapooHidClient] as const;
 const PULSAR_CLASSES = [PulsarHidClient, PulsarProHidClient, PulsarXs1HidClient] as const;
 
 const logitechClient = (): LogitechHidppClient | null => activeAs(LogitechHidppClient);

From a0bd3079ab3a31e8bc99205be38ef02191a5e348 Mon Sep 17 00:00:00 2001
From: snekxs <snekxs@users.noreply.github.com>
Date: Wed, 30 Sep 2026 16:11:37 -0600
Subject: [PATCH 4/5] fix(m2nex): route button edits to the selected profile
 and key the new strings

The Buttons card read the selected M2-NEX profile but its onChange wrote
straight to the device, so edits never surfaced in the UI and the exported
updateM2NexProfileButton was dead. Also move the new macro, scroll and
profile strings into src/i18n.ts keys (replicated across locales so
missingTranslations stays empty) and replace the hardcoded per-stage DPI
palette with --stage-color-* tokens for both themes.
---
 src/app/OverviewPage.tsx        | 15 ++---
 src/app/cards/AdvancedCards.tsx | 98 ++++++++++++++++++---------------
 src/control-profiles.css        |  5 +-
 src/control.css                 | 13 +++++
 src/device/controller.ts        | 30 +++++-----
 src/i18n-ar.ts                  | 74 ++++++++++++++++++++++++-
 src/i18n-de.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-es.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-fr.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-ja.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-ko.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-pt.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-ru.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-vi.ts                  | 72 +++++++++++++++++++++++-
 src/i18n-zh.ts                  | 72 +++++++++++++++++++++++-
 src/i18n.ts                     | 70 +++++++++++++++++++++++
 16 files changed, 874 insertions(+), 79 deletions(-)

diff --git a/src/app/OverviewPage.tsx b/src/app/OverviewPage.tsx
index e5230b0f..326df2f6 100644
--- a/src/app/OverviewPage.tsx
+++ b/src/app/OverviewPage.tsx
@@ -218,6 +218,7 @@ function DeviceShowcase({ snapshot }: {
 
 function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
+  const locale = snapshot.preferences.locale;
   if (status?.brand !== "Noir Gear" || status.name !== "M2-NEX" || snapshot.m2nexProfiles === null) return null;
   const profile = snapshot.m2nexProfiles[snapshot.activeM2NexProfile];
   if (!profile) return null;
@@ -226,16 +227,16 @@ function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): Reac
     <section
       id="m2nex-profile-overview"
       className="m2nex-profile-overview"
-      aria-label="M2-NEX profile controls"
+      aria-label={t(locale, "m2nex.controls")}
     >
       <div className="m2nex-profile-overview-title">
-        <span>PROFILE</span>
-        <strong>M2-NEX</strong>
+        <span>{t(locale, "m2nex.overline")}</span>
+        <strong>{t(locale, "m2nex.label")}</strong>
       </div>
       <label className="m2nex-profile-overview-picker" htmlFor="m2nex-profile-overview-select">
         <select
           id="m2nex-profile-overview-select"
-          aria-label="Select M2-NEX profile"
+          aria-label={t(locale, "m2nex.select")}
           value={snapshot.activeM2NexProfile}
           disabled={snapshot.settingInProgress || snapshot.pending.busy}
           onChange={(event) => control.selectM2NexProfile(Number(event.currentTarget.value))}
@@ -246,7 +247,7 @@ function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): Reac
         </select>
       </label>
       <span className={`m2nex-profile-overview-state${snapshot.m2nexProfileDirty ? " is-dirty" : ""}`}>
-        {snapshot.m2nexProfileDirty ? "Pending" : "Saved"}
+        {snapshot.m2nexProfileDirty ? t(locale, "m2nex.pending") : t(locale, "m2nex.saved")}
       </span>
       <div className="m2nex-profile-overview-actions">
         <button
@@ -255,14 +256,14 @@ function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): Reac
           disabled={applyDisabled}
           onClick={() => void control.applyM2NexProfile()}
         >
-          Apply
+          {t(locale, "m2nex.apply")}
         </button>
         <button
           type="button"
           disabled={snapshot.settingInProgress}
           onClick={control.saveCurrentM2NexProfile}
         >
-          Save
+          {t(locale, "m2nex.save")}
         </button>
       </div>
     </section>
diff --git a/src/app/cards/AdvancedCards.tsx b/src/app/cards/AdvancedCards.tsx
index 9298aecc..8fe2ed24 100644
--- a/src/app/cards/AdvancedCards.tsx
+++ b/src/app/cards/AdvancedCards.tsx
@@ -291,18 +291,19 @@ export function SleepCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNod
 /** K-snake stores the wheel direction in its persistent config block. */
 export function KsnakeScrollCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
+  const locale = snapshot.preferences.locale;
   if (status?.ui?.family !== "ksnake" || status.scrollDirection == null) return null;
   const staged = snapshot.pending.keys.includes("ksnake-scroll-direction");
   return (
     <article id="ksnake-scroll-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
       <div className="setting-heading compact">
-        <div><p>WHEEL</p><h2>Scroll direction</h2></div>
+        <div><p>{t(locale, "adv.scrollWheel")}</p><h2>{t(locale, "adv.scrollDirection")}</h2></div>
       </div>
       <div className="button-map-list">
         <label className="button-map-row" htmlFor="ksnake-scroll-direction">
           <span className="button-map-control">
             <span className="button-map-index" aria-hidden="true">W</span>
-            <span className="button-map-name">Wheel</span>
+            <span className="button-map-name">{t(locale, "adv.scrollWheel")}</span>
           </span>
           <span className="button-map-connector" aria-hidden="true">to</span>
           <span className="button-map-select-wrap">
@@ -314,13 +315,13 @@ export function KsnakeScrollCard({ snapshot }: { snapshot: ControlSnapshot }): R
                 event.currentTarget.value as NonNullable<typeof status.scrollDirection>,
               )}
             >
-              <option value="Forward">Forward</option>
-              <option value="Reverse">Reverse</option>
+              <option value="Forward">{t(locale, "conn.forward")}</option>
+              <option value="Reverse">{t(locale, "conn.reverse")}</option>
             </select>
           </span>
         </label>
       </div>
-      <small className="setting-note">Stored in the mouse and restored when OpenMouse reconnects.</small>
+      <small className="setting-note">{t(locale, "adv.scrollStored")}</small>
     </article>
   );
 }
@@ -1539,6 +1540,7 @@ function cloneKsnakeMacroProfile(profile: KsnakeMacroProfile | undefined): Ksnak
  */
 export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
+  const locale = snapshot.preferences.locale;
   const isM2Nex = status?.brand === "Noir Gear" && status.name === "M2-NEX";
   const macroCapable = status?.ui?.family === "ksnake" || isM2Nex;
   // Keep the card usable while an older hot-reloaded controller snapshot is
@@ -1727,8 +1729,8 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   if (snapshot.ksnakeMacrosLoading) {
     return (
       <article id="ksnake-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>MACRO EDITOR</p><h2>Build a macro</h2></div></div>
-        <p className="field-note">Preparing the 32 macro slots…</p>
+        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <p className="field-note">{t(locale, "macro.loading")}</p>
       </article>
     );
   }
@@ -1736,9 +1738,9 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   if (snapshot.ksnakeMacrosError !== null) {
     return (
       <article id="ksnake-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>MACRO EDITOR</p><h2>Build a macro</h2></div></div>
+        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
         <p className="field-note">{snapshot.ksnakeMacrosError}</p>
-        <div className="setting-action"><button type="button" onClick={() => control.loadKsnakeMacros()}>Retry</button></div>
+        <div className="setting-action"><button type="button" onClick={() => control.loadKsnakeMacros()}>{t(locale, "set.retry")}</button></div>
       </article>
     );
   }
@@ -1748,24 +1750,22 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
     <article id="ksnake-macro-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
       <div className="setting-heading ksnake-macro-heading">
         <div>
-          <p>MACRO EDITOR</p>
-          <h2>Build a macro</h2>
-          <p className="ksnake-macro-lead">Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.</p>
+          <p>{t(locale, "macro.overline")}</p>
+          <h2>{t(locale, "macro.build")}</h2>
+          <p className="ksnake-macro-lead">{t(locale, "macro.lead")}</p>
         </div>
       </div>
       <p className="ksnake-macro-notice">
-        {isM2Nex
-          ? "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table."
-          : "Saving updates the onboard macro table on the mouse."}
+        {isM2Nex ? t(locale, "macro.noticeM2nex") : t(locale, "macro.notice")}
       </p>
       <label className="ksnake-macro-slot-picker">
-        <span>Macro slot</span>
+        <span>{t(locale, "macro.slotLabel")}</span>
         <select value={slot} disabled={controlsDisabled} onChange={(event) => setSlot(Number(event.currentTarget.value))}>
           {profiles.map((profile, index) => {
             const stepCount = index === slot
               ? (isRecording ? recordedSteps.length : draft.steps.length)
               : profile.steps.length;
-            return <option key={index} value={index}>Macro {index + 1}{stepCount ? ` · ${stepCount} steps` : " · empty"}</option>;
+            return <option key={index} value={index}>{t(locale, "macro.option")} {index + 1}{stepCount ? ` · ${tp(locale, "macro.steps", { n: stepCount })}` : ` · ${t(locale, "macro.empty")}`}</option>;
           })}
         </select>
       </label>
@@ -1773,36 +1773,36 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
         <div className="ksnake-macro-recorder-status">
           <span className="ksnake-macro-recorder-dot" aria-hidden="true" />
           <div>
-            <strong>{isRecording ? "Recording input" : "Add actions"}</strong>
+            <strong>{isRecording ? t(locale, "macro.recording") : t(locale, "macro.addActions")}</strong>
             <span>{isRecording
-              ? `${recordedSteps.length} events · Press Esc to stop`
-              : "Record input or add an action manually."}</span>
+              ? tp(locale, "macro.eventsHint", { n: recordedSteps.length })
+              : t(locale, "macro.recorderHint")}</span>
           </div>
         </div>
         <div className="ksnake-macro-recorder-tools">
           <label className="ksnake-macro-timing-picker">
-            <span>Timing</span>
+            <span>{t(locale, "macro.timing")}</span>
             <select
               value={timingMode}
               disabled={disabled || isRecording}
               data-macro-recorder-control
               onChange={(event) => changeTimingMode(event.currentTarget.value as KsnakeMacroTimingMode)}
             >
-              <option value="no-delay">Fast · no delay</option>
-              <option value="recorded">Recorded timing</option>
-              <option value="fixed">Fixed delay</option>
+              <option value="no-delay">{t(locale, "macro.timingFast")}</option>
+              <option value="recorded">{t(locale, "macro.timingRecorded")}</option>
+              <option value="fixed">{t(locale, "macro.timingFixed")}</option>
             </select>
           </label>
           {timingMode === "fixed" ? (
             <label className="ksnake-macro-fixed-delay-picker">
-              <span>Delay</span>
+              <span>{t(locale, "macro.delay")}</span>
               <span className="ksnake-macro-fixed-delay-control">
                 <input
                   type="number"
                   min={0}
                   max={65535}
                   step={1}
-                  aria-label="Fixed delay in milliseconds"
+                  aria-label={t(locale, "macro.delayAria")}
                   value={fixedDelayMs}
                   disabled={disabled || isRecording}
                   data-macro-recorder-control
@@ -1814,15 +1814,15 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
           ) : null}
           {isRecording ? (
             <div className="ksnake-macro-recorder-actions">
-              <button className="ksnake-macro-stop" type="button" data-macro-recorder-control onClick={finishRecording}>Stop recording</button>
-              <button className="ksnake-macro-cancel" type="button" data-macro-recorder-control onClick={cancelRecording}>Cancel</button>
+              <button className="ksnake-macro-stop" type="button" data-macro-recorder-control onClick={finishRecording}>{t(locale, "macro.stopRecording")}</button>
+              <button className="ksnake-macro-cancel" type="button" data-macro-recorder-control onClick={cancelRecording}>{t(locale, "set.cancel")}</button>
             </div>
           ) : (
             <div className="ksnake-macro-recorder-actions">
-              <button className="ksnake-macro-record" type="button" data-macro-recorder-control onClick={startRecording} disabled={disabled}>Record input</button>
+              <button className="ksnake-macro-record" type="button" data-macro-recorder-control onClick={startRecording} disabled={disabled}>{t(locale, "macro.recordInput")}</button>
               <button className="ksnake-macro-manual-add" type="button" data-macro-recorder-control onClick={addStep} disabled={controlsDisabled}>
                 <Plus size={15} strokeWidth={2.2} aria-hidden="true" />
-                Add manually
+                {t(locale, "macro.addManually")}
               </button>
             </div>
           )}
@@ -1831,11 +1831,11 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
       {isRecording ? (
         <div className="ksnake-macro-recording-list">
           <div className="ksnake-macro-recording-list-heading">
-            <span>Live event list</span>
-            <span>{recordedSteps.length} events</span>
+            <span>{t(locale, "macro.liveEvents")}</span>
+            <span>{tp(locale, "macro.events", { n: recordedSteps.length })}</span>
           </div>
           {recordedSteps.length === 0 ? (
-            <p className="ksnake-macro-recording-empty">Press a key or mouse button to add the first event.</p>
+            <p className="ksnake-macro-recording-empty">{t(locale, "macro.recordingEmpty")}</p>
           ) : (
             <ol>
               {recordedSteps.map((step, index) => (
@@ -1858,15 +1858,15 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
         <div className="ksnake-macro-steps">
           {draft.steps.length === 0 ? (
             <div className="ksnake-macro-empty">
-              <strong>No actions in this slot</strong>
-              <span>Choose Record input or Add manually above to get started.</span>
+              <strong>{t(locale, "macro.noActions")}</strong>
+              <span>{t(locale, "macro.noActionsHint")}</span>
             </div>
           ) : null}
           {draft.steps.map((step, index) => (
             <div className="ksnake-macro-step" key={`${slot}-${index}`}>
               <span className="ksnake-macro-step-number">{String(index + 1).padStart(2, "0")}</span>
               <label className="ksnake-macro-step-field">
-                <span>Input</span>
+                <span>{t(locale, "macro.colInput")}</span>
                 <select
                   aria-label={`Macro ${slot + 1} step ${index + 1} type`}
                   value={step.type}
@@ -1877,7 +1877,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
                 </select>
               </label>
               <label className="ksnake-macro-step-field">
-                <span>Action</span>
+                <span>{t(locale, "macro.colAction")}</span>
                 <select
                   aria-label={`Macro ${slot + 1} step ${index + 1} action`}
                   value={step.action}
@@ -1887,7 +1887,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
                   {KSNAKE_MACRO_ACTIONS.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                 </select>
               </label>
-              <label className="ksnake-macro-number ksnake-macro-code-field">Code
+              <label className="ksnake-macro-number ksnake-macro-code-field">{t(locale, "macro.colCode")}
                 <input
                   type="number"
                   min={0}
@@ -1897,7 +1897,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
                   onChange={(event) => updateStep(index, { code: Math.min(255, Math.max(0, Number(event.currentTarget.value) || 0)) })}
                 />
               </label>
-              <label className="ksnake-macro-number ksnake-macro-delay-field">Delay after
+              <label className="ksnake-macro-number ksnake-macro-delay-field">{t(locale, "macro.colDelay")}
                 <input
                   type="number"
                   min={0}
@@ -1908,7 +1908,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
                 />
               </label>
               <small className="ksnake-macro-preview" title={ksnakeMacroCodeLabel(step.type, step.code)}>{ksnakeMacroCodeLabel(step.type, step.code)}</small>
-              <button type="button" className="ksnake-macro-delete" disabled={controlsDisabled} onClick={() => removeStep(index)} aria-label={`Remove macro step ${index + 1}`} title="Remove action">
+              <button type="button" className="ksnake-macro-delete" disabled={controlsDisabled} onClick={() => removeStep(index)} aria-label={tp(locale, "macro.removeStep", { n: index + 1 })} title={t(locale, "macro.removeStepTitle")}>
                 <Trash2 size={16} strokeWidth={2} aria-hidden="true" />
               </button>
             </div>
@@ -1918,13 +1918,13 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
       <div className="setting-action ksnake-macro-actions">
         <button className="ksnake-macro-save" type="button" onClick={() => control.applyKsnakeMacro(slot, draft)} disabled={controlsDisabled}>
           <Save size={16} strokeWidth={2.2} aria-hidden="true" />
-          Save macro
+          {t(locale, "macro.save")}
         </button>
-        <button className="ksnake-macro-clear" type="button" onClick={() => setDraft({ steps: [] })} disabled={controlsDisabled || draft.steps.length === 0}>Clear slot</button>
+        <button className="ksnake-macro-clear" type="button" onClick={() => setDraft({ steps: [] })} disabled={controlsDisabled || draft.steps.length === 0}>{t(locale, "macro.clearSlot")}</button>
       </div>
       <details className="ksnake-macro-help">
-        <summary>Need help with codes?</summary>
-        <p>Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.</p>
+        <summary>{t(locale, "macro.helpToggle")}</summary>
+        <p>{t(locale, "macro.helpBody")}</p>
       </details>
     </article>
   );
@@ -1970,7 +1970,15 @@ export function ButtonMappingCard({ snapshot }: { snapshot: ControlSnapshot }):
                   id={selectId}
                   value={options.includes(assigned) ? assigned : ""}
                   disabled={isFixed}
-                  onChange={(event) => control.applyDeviceButtonMapping(button, event.currentTarget.value)}
+                  onChange={(event) => {
+                    // M2-NEX edits its selected local profile slot; every other
+                    // driver writes straight through to the device.
+                    if (selectedM2NexProfile) {
+                      control.updateM2NexProfileButton(button, event.currentTarget.value);
+                      return;
+                    }
+                    control.applyDeviceButtonMapping(button, event.currentTarget.value);
+                  }}
                 >
                   {/* A macro or an assignment this build cannot name still shows. */}
                   {!options.includes(assigned) && <option value="">{assigned}</option>}
diff --git a/src/control-profiles.css b/src/control-profiles.css
index c6d23921..eae49928 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -252,7 +252,10 @@
 .dpi-editor-row > input.dpi-editor-value:hover:not(:disabled) { border-color:var(--ghost) }
 .dpi-editor-row > input.dpi-editor-value:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
 .dpi-editor-row > input[type="range"].dpi-editor-slider { width:100%;min-width:0;height:1.2rem;margin:0;accent-color:var(--ui-accent);cursor:pointer }
-.dpi-editor.has-m2nex-stage-colors { --m2nex-stage-1:#ff0000;--m2nex-stage-2:#00ff00;--m2nex-stage-3:#0000ff;--m2nex-stage-4:#ffff00;--m2nex-stage-5:#00ffff;--m2nex-stage-6:#ff00ff }
+/* Per-stage colour ramp for the M2-NEX editor. Kept as theme tokens so the
+   cards stay legible in light and dark themes (the raw marker hues are too
+   bright against the light surface). */
+.dpi-editor.has-m2nex-stage-colors { --m2nex-stage-1:var(--stage-color-1);--m2nex-stage-2:var(--stage-color-2);--m2nex-stage-3:var(--stage-color-3);--m2nex-stage-4:var(--stage-color-4);--m2nex-stage-5:var(--stage-color-5);--m2nex-stage-6:var(--stage-color-6) }
 .dpi-editor.has-m2nex-stage-colors .m2nex-stage-1 { --dpi-stage-color:var(--m2nex-stage-1) }
 .dpi-editor.has-m2nex-stage-colors .m2nex-stage-2 { --dpi-stage-color:var(--m2nex-stage-2) }
 .dpi-editor.has-m2nex-stage-colors .m2nex-stage-3 { --dpi-stage-color:var(--m2nex-stage-3) }
diff --git a/src/control.css b/src/control.css
index f0439ef5..e1d76383 100644
--- a/src/control.css
+++ b/src/control.css
@@ -69,6 +69,13 @@
   background: var(--ink);
   font-family: var(--font-sans);
   font-synthesis: none;
+  /* Per-stage DPI ramp used by the M2-NEX editor (has-m2nex-stage-colors). */
+  --stage-color-1: #ff5a5a;
+  --stage-color-2: #4ade80;
+  --stage-color-3: #60a5fa;
+  --stage-color-4: #facc15;
+  --stage-color-5: #22d3ee;
+  --stage-color-6: #e879f9;
 }
 
 * { box-sizing: border-box; }
@@ -159,6 +166,12 @@ button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid
   --tone-mantle: #efefea;
   --tone-s0: #fbfbf8;
   --tone-s1: #f5f5f1;
+  --stage-color-1: #d92d20;
+  --stage-color-2: #1a9e4b;
+  --stage-color-3: #2270c9;
+  --stage-color-4: #b7791f;
+  --stage-color-5: #0e8f9e;
+  --stage-color-6: #b23bbf;
 }
 /* Light-theme battery icons: the base types hard-code near-white shades that
    would vanish on light surfaces. */
diff --git a/src/device/controller.ts b/src/device/controller.ts
index e27c6576..a76af942 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -735,7 +735,7 @@ export function loadKsnakeMacros(): void {
   if (ksnakeMacrosLoading || ksnakeMacros !== null) return;
   const client = ksnakeMacroClient();
   if (!client) {
-    ksnakeMacrosError = "The connected M2-NEX driver does not expose onboard macro access yet.";
+    ksnakeMacrosError = st("m2nex.macrosUnavailable");
     emit();
     return;
   }
@@ -751,12 +751,12 @@ export function loadKsnakeMacros(): void {
 export function selectM2NexProfile(index: number): void {
   if (!isM2NexStatus() || !m2nexProfiles?.[index]) return;
   if (hasPendingChanges()) {
-    setReadStatus("Apply or discard current changes before switching profiles.");
+    setReadStatus(st("m2nex.switchBlocked"));
     return;
   }
   activeM2NexProfile = index;
   setEditorToM2NexProfile();
-  setReadStatus(`${m2nexProfiles[index].name} selected. Apply it when you are ready.`);
+  setReadStatus(st("m2nex.selected", { name: m2nexProfiles[index].name }));
   emit();
 }
 
@@ -770,7 +770,7 @@ export function updateM2NexProfileButton(button: string, action: string): void {
     : profile);
   m2nexProfileDirty = true;
   persistM2NexProfiles();
-  setReadStatus(`${current.name} updated. Apply the profile to send it to the mouse.`);
+  setReadStatus(st("m2nex.updated", { name: current.name }));
   emit();
 }
 
@@ -792,8 +792,8 @@ export function saveCurrentM2NexProfile(): void {
     : profile);
   m2nexProfileDirty = false;
   persistM2NexProfiles();
-  setReadStatus(`${current.name} saved from the current mouse settings.`);
-  pushToast("success", `${current.name} saved`, "Buttons, DPI, polling rate, and available macros are stored locally.");
+  setReadStatus(st("m2nex.saveDone", { name: current.name }));
+  pushToast("success", st("m2nex.saved", { name: current.name }), st("m2nex.savedDetail"));
   emit();
 }
 
@@ -801,7 +801,7 @@ export function saveCurrentM2NexProfile(): void {
 export async function applyM2NexProfile(index = activeM2NexProfile): Promise<void> {
   if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[index]) return;
   if (hasPendingChanges()) {
-    setReadStatus("Apply or discard the current changes before applying a profile.");
+    setReadStatus(st("m2nex.applyBlocked"));
     return;
   }
   if (settingInProgress) {
@@ -814,14 +814,14 @@ export async function applyM2NexProfile(index = activeM2NexProfile): Promise<voi
     || typeof rawClient.setDpiStageValue !== "function"
     || typeof rawClient.setActiveDpiStage !== "function"
     || typeof rawClient.setPollingRate !== "function") {
-    setReadStatus("The connected M2-NEX interface cannot apply a complete profile yet.");
+    setReadStatus(st("m2nex.incomplete"));
     return;
   }
   const profile = m2nexProfiles[index];
   const before = latestDeviceStatus;
   activeM2NexProfile = index;
   settingInProgress = true;
-  pendingStatusText = `Applying ${profile.name}…`;
+  pendingStatusText = st("m2nex.applyProgress", { name: profile.name });
   readStatus = pendingStatusText;
   emit();
   try {
@@ -858,7 +858,7 @@ export async function applyM2NexProfile(index = activeM2NexProfile): Promise<voi
       await rawClient.setActiveDpiStage(profile.activeDpiStage);
     }
     if (before.pollingRateHz !== profile.pollingRateHz) {
-      pendingStatusText = `Applying ${profile.name}: polling rate…`;
+      pendingStatusText = st("m2nex.applyPolling", { name: profile.name });
       readStatus = pendingStatusText;
       emit();
       await rawClient.setPollingRate(profile.pollingRateHz);
@@ -868,12 +868,12 @@ export async function applyM2NexProfile(index = activeM2NexProfile): Promise<voi
     applyStatus(status);
     m2nexProfileDirty = false;
     persistM2NexProfiles();
-    setReadStatus(`${profile.name} applied to M2-NEX.`);
-    pushToast("success", `${profile.name} applied`, "The mouse is now using this profile.");
+    setReadStatus(st("m2nex.applyDone", { name: profile.name }));
+    pushToast("success", st("m2nex.applied", { name: profile.name }), st("m2nex.appliedDetail"));
   } catch (error) {
-    const message = error instanceof Error ? error.message : "Unable to apply the M2-NEX profile.";
+    const message = error instanceof Error ? error.message : st("m2nex.applyError");
     setReadStatus(message);
-    pushToast("error", "Profile apply failed", message);
+    pushToast("error", st("m2nex.applyFailed"), message);
   } finally {
     pendingStatusText = null;
     settingInProgress = false;
@@ -886,7 +886,7 @@ export function applyKsnakeMacro(slot: number, profile: KsnakeMacroProfile): voi
   if (!Number.isInteger(slot) || slot < 0 || slot >= 32) return;
   const current = stagedKsnakeMacros ?? ksnakeMacros;
   if (!current) {
-    setReadStatus("The macro editor is not ready yet. Reopen the Buttons tab and try again.");
+    setReadStatus(st("macro.notReady"));
     emit();
     return;
   }
diff --git a/src/i18n-ar.ts b/src/i18n-ar.ts
index c0f37a5e..445a5f22 100644
--- a/src/i18n-ar.ts
+++ b/src/i18n-ar.ts
@@ -52,7 +52,6 @@ export const ar: Record<I18nKey, string> = {
   "tab.overview": "نظرة عامة",
   "tab.performance": "الأداء",
   "tab.buttons": "الأزرار",
-  "tab.macro": "الماكرو",
   "tab.profiles": "الملفات الشخصية",
   "tab.advanced": "متقدم",
   "tab.lighting": "الإضاءة",
@@ -141,6 +140,7 @@ export const ar: Record<I18nKey, string> = {
   "set.languageTitle": "اللغة",
   "set.languageBody": "اختر لغة الواجهة. تبقى رسائل الجهاز بالإنجليزية حاليًا.",
   "set.english": "English",
+  "set.arabic": "العربيّة",
   "set.portuguese": "Português",
   "set.spanish": "Español",
   "set.french": "Français",
@@ -150,7 +150,6 @@ export const ar: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
-  "set.arabic": "العربية",
   "set.motion": "الحركة",
   "set.animations": "المؤثرات المتحركة",
   "set.animationsBody": "تفعيل التغيرات والانتقالات الحركية في الواجهة.",
@@ -1020,4 +1019,75 @@ export const ar: Record<I18nKey, string> = {
   "adm.peakConcurrent": "ذروة متزامنة {n}",
   "tab.unavailable": "عناصر تحكم {tab} غير متاحة لهذا الجهاز.",
   "tab.chooseAnother": "اختر تبويبًا آخر لمتابعة ضبط الجهاز.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 };
diff --git a/src/i18n-de.ts b/src/i18n-de.ts
index b641f584..15a3ff0b 100644
--- a/src/i18n-de.ts
+++ b/src/i18n-de.ts
@@ -52,7 +52,6 @@ export const de: Record<I18nKey, string> = {
   "tab.overview": "Übersicht",
   "tab.performance": "Leistung",
   "tab.buttons": "Tasten",
-  "tab.macro": "Makro",
   "tab.profiles": "Profile",
   "tab.advanced": "Erweitert",
   "tab.lighting": "Beleuchtung",
@@ -1022,4 +1021,75 @@ export const de: Record<I18nKey, string> = {
 
   "tab.unavailable": "Die Steuerelemente für {tab} sind für dieses Gerät nicht verfügbar.",
   "tab.chooseAnother": "Wähle einen anderen Tab, um mit der Konfiguration des Geräts fortzufahren.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-es.ts b/src/i18n-es.ts
index e78df8e1..96560c90 100644
--- a/src/i18n-es.ts
+++ b/src/i18n-es.ts
@@ -52,7 +52,6 @@ export const es: Record<I18nKey, string> = {
   "tab.overview": "Resumen",
   "tab.performance": "Rendimiento",
   "tab.buttons": "Botones",
-  "tab.macro": "Macro",
   "tab.profiles": "Perfiles",
   "tab.advanced": "Avanzado",
   "tab.lighting": "Iluminación",
@@ -1022,4 +1021,75 @@ export const es: Record<I18nKey, string> = {
 
   "tab.unavailable": "Los controles de {tab} no están disponibles para este dispositivo.",
   "tab.chooseAnother": "Elige otra pestaña para seguir configurando el dispositivo.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-fr.ts b/src/i18n-fr.ts
index 8dc6abce..bddb2ec1 100644
--- a/src/i18n-fr.ts
+++ b/src/i18n-fr.ts
@@ -52,7 +52,6 @@ export const fr: Record<I18nKey, string> = {
   "tab.overview": "Aperçu",
   "tab.performance": "Performance",
   "tab.buttons": "Boutons",
-  "tab.macro": "Macro",
   "tab.profiles": "Profils",
   "tab.advanced": "Avancé",
   "tab.lighting": "Éclairage",
@@ -1022,4 +1021,75 @@ export const fr: Record<I18nKey, string> = {
 
   "tab.unavailable": "Les commandes de {tab} ne sont pas disponibles pour cet appareil.",
   "tab.chooseAnother": "Choisissez un autre onglet pour continuer à configurer l’appareil.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ja.ts b/src/i18n-ja.ts
index 63a9406e..eef11f5a 100644
--- a/src/i18n-ja.ts
+++ b/src/i18n-ja.ts
@@ -52,7 +52,6 @@ export const ja: Record<I18nKey, string> = {
   "tab.overview": "概要",
   "tab.performance": "パフォーマンス",
   "tab.buttons": "ボタン",
-  "tab.macro": "マクロ",
   "tab.profiles": "プロファイル",
   "tab.advanced": "詳細設定",
   "tab.lighting": "ライティング",
@@ -1022,4 +1021,75 @@ export const ja: Record<I18nKey, string> = {
 
   "tab.unavailable": "このデバイスでは{tab}の設定を利用できません。",
   "tab.chooseAnother": "別のタブを選択してデバイスの設定を続けてください。",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ko.ts b/src/i18n-ko.ts
index 04e07377..6314e926 100644
--- a/src/i18n-ko.ts
+++ b/src/i18n-ko.ts
@@ -52,7 +52,6 @@ export const ko: Record<I18nKey, string> = {
   "tab.overview": "개요",
   "tab.performance": "성능",
   "tab.buttons": "버튼",
-  "tab.macro": "매크로",
   "tab.profiles": "프로필",
   "tab.advanced": "고급",
   "tab.lighting": "조명",
@@ -1022,4 +1021,75 @@ export const ko: Record<I18nKey, string> = {
 
   "tab.unavailable": "이 장치에서는 {tab} 설정을 사용할 수 없습니다.",
   "tab.chooseAnother": "다른 탭을 선택해 장치 설정을 계속하세요.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-pt.ts b/src/i18n-pt.ts
index 3115a3c3..b03bbd45 100644
--- a/src/i18n-pt.ts
+++ b/src/i18n-pt.ts
@@ -52,7 +52,6 @@ export const pt: Record<I18nKey, string> = {
   "tab.overview": "Visão geral",
   "tab.performance": "Desempenho",
   "tab.buttons": "Botões",
-  "tab.macro": "Macro",
   "tab.profiles": "Perfis",
   "tab.advanced": "Avançado",
   "tab.lighting": "Iluminação",
@@ -1022,4 +1021,75 @@ export const pt: Record<I18nKey, string> = {
 
   "tab.unavailable": "Os controles de {tab} não estão disponíveis para este dispositivo.",
   "tab.chooseAnother": "Escolha outra aba para continuar configurando o dispositivo.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ru.ts b/src/i18n-ru.ts
index bc1b384c..a937ba89 100644
--- a/src/i18n-ru.ts
+++ b/src/i18n-ru.ts
@@ -52,7 +52,6 @@ export const ru: Record<I18nKey, string> = {
   "tab.overview": "Обзор",
   "tab.performance": "Производительность",
   "tab.buttons": "Кнопки",
-  "tab.macro": "Макрос",
   "tab.profiles": "Профили",
   "tab.advanced": "Дополнительно",
   "tab.lighting": "Подсветка",
@@ -1022,4 +1021,75 @@ export const ru: Record<I18nKey, string> = {
 
   "tab.unavailable": "Настройки «{tab}» недоступны для этого устройства.",
   "tab.chooseAnother": "Выберите другую вкладку, чтобы продолжить настройку устройства.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-vi.ts b/src/i18n-vi.ts
index fd98cce1..33f33efd 100644
--- a/src/i18n-vi.ts
+++ b/src/i18n-vi.ts
@@ -52,7 +52,6 @@ export const vi: Record<I18nKey, string> = {
   "tab.overview": "Tổng quan",
   "tab.performance": "Hiệu năng",
   "tab.buttons": "Nút",
-  "tab.macro": "Macro",
   "tab.profiles": "Profiles",
   "tab.advanced": "Nâng cao",
   "tab.lighting": "Đèn",
@@ -1028,4 +1027,75 @@ export const vi: Record<I18nKey, string> = {
 
   "conn.addMouse": "Thêm chuột",
   "common.done": "Xong",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-zh.ts b/src/i18n-zh.ts
index 88e65d1e..a8d54b86 100644
--- a/src/i18n-zh.ts
+++ b/src/i18n-zh.ts
@@ -52,7 +52,6 @@ export const zh: Record<I18nKey, string> = {
   "tab.overview": "概览",
   "tab.performance": "性能",
   "tab.buttons": "按键",
-  "tab.macro": "宏",
   "tab.profiles": "配置文件",
   "tab.advanced": "高级",
   "tab.lighting": "灯光",
@@ -1022,4 +1021,75 @@ export const zh: Record<I18nKey, string> = {
 
   "tab.unavailable": "此设备不支持 {tab} 控制项。",
   "tab.chooseAnother": "请选择其他标签页以继续配置设备。",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n.ts b/src/i18n.ts
index 70dffc6d..0d1f3e84 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1025,6 +1025,76 @@ const en = {
 
   "tab.unavailable": "{tab} controls are not available for this device.",
   "tab.chooseAnother": "Choose another tab to continue configuring the device.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.events": "{n} events",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.addManually": "Add manually",
+  "macro.liveEvents": "Live event list",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActions": "No actions in this slot",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.removeStepTitle": "Remove action",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
 } as const;
 
 export type I18nKey = keyof typeof en;

From e387b2a932d7901628ba459d44076e34b3dc2c81 Mon Sep 17 00:00:00 2001
From: snekxs <snekxs@users.noreply.github.com>
Date: Wed, 30 Sep 2026 16:41:18 -0600
Subject: [PATCH 5/5] chore(protocol): bump @openmouse/protocol to 0.22.0

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b2255146..c0b419a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.0.0",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@openmouse/protocol": "0.19.0",
+        "@openmouse/protocol": "0.22.0",
         "lucide-react": "^1.43.0",
         "preact": "^10.29.8"
       },
@@ -481,9 +481,9 @@
       }
     },
     "node_modules/@openmouse/protocol": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@openmouse/protocol/-/protocol-0.19.0.tgz",
-      "integrity": "sha512-Bxuk9gtWTOtoVufHcqGAxkVlHKyWIlhNZozhUfDv02RcUKxZCpocN0kqIquuWBgaGXj3/pnnbsPIGH7kKGHviQ==",
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/@openmouse/protocol/-/protocol-0.22.0.tgz",
+      "integrity": "sha512-b5gwx0Ot1QOfyfYD7RkMUBRVKtT51AJO3xdyTTOqn/tCIF6bf+byPxewziTlPb2LUVBgzLB4S0CVG7FdQAglfA==",
       "engines": {
         "node": ">=20"
       }
diff --git a/package.json b/package.json
index 32355be9..eb86bb09 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@openmouse/protocol": "0.19.0",
+    "@openmouse/protocol": "0.22.0",
     "lucide-react": "^1.43.0",
     "preact": "^10.29.8"
   },