feat(ui): add momentary keyboard control surface

packages/ui-react/src/KeyButton.tsx

@@ -0,0 +1,17 @@
+import {forwardRef, type ButtonHTMLAttributes} from 'react';
+import {cn} from './cn.js';
+
+export interface KeyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Controlled physical/pointer input indication; this is never a toggle. */
+  pressed?: boolean;
+  label: string;
+}
+
+/** A momentary key surface. The consumer owns input, focus scope and release policy. */
+export const KeyButton = forwardRef<HTMLButtonElement, KeyButtonProps>(function KeyButton(
+  {pressed=false,label,children,className,type='button',disabled,...props},ref,
+) {
+  return <button {...props} ref={ref} type={type} disabled={disabled}
+    aria-label={label} title={label} aria-pressed={pressed && !disabled}
+    className={cn('nodedc-key-button',className)}>{children}</button>;
+});

packages/ui-react/src/index.ts

@@ -35,3 +35,4 @@ export * from "./EnvironmentSettingsWindow.js";
 export * from "./EnvironmentMediaPlaylistEditor.js";
 export * from "./EnvironmentBackgroundMedia.js";
 export * from "./LandingStage.js";
+export {KeyButton, type KeyButtonProps} from './KeyButton.js';