memlnaut-nisps/docs/redesign/manifold-export/ui_kits/memlnaut/console/InputMini.jsx
monkey-w1n5t0n 24057e7b5f docs(redesign): Manifold research findings + design specs + build plan
Phase-1 audits (feedback-behaviour, engine-surface, design/Manifold), the
judge-panelled rl-feedback-design, dock/backends/inputs specs, the
upstream-firmware survey, the Manifold design mirror, and BUILD-PLAN.md
(resume anchor + locked decisions).
2026-06-28 04:14:12 +02:00

25 lines
1.4 KiB
JavaScript

/* Console 2.0 — InputMini: the input demoted to a small secondary control for
the output-first views. A compact joy-map / XY pad in a glass card; still
drives inference, but no longer the hero. */
function InputMini({ mode, pos, onMove, noiseCap, size = 132, corner = 'bottom-left' }) {
const DS = window.ManifoldDesignSystem_490915;
const Pad = mode.input === 'joystick' ? DS.VirtualJoystick : DS.XYPad;
const place = {
'bottom-left': { bottom: 14, left: 14 },
'bottom-right': { bottom: 14, right: 14 },
'top-left': { top: 14, left: 14 },
}[corner];
return (
<div style={{ position: 'absolute', zIndex: 22, ...place,
background: 'var(--glass)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
border: '1px solid var(--glass-line)', borderRadius: 'var(--r-2)', padding: 'var(--sp-2)',
display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
<span style={{ fontSize: 10, color: 'var(--fg-dim)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>input · {mode.input === 'joystick' ? 'joy' : 'xy'}</span>
<span style={{ fontSize: 10, color: 'var(--fg-mute)', fontVariantNumeric: 'tabular-nums' }}>{pos[0].toFixed(2)},{pos[1].toFixed(2)}</span>
</div>
<Pad size={size} position={pos} onMove={(x, y) => onMove(x, y)} showGrid />
</div>
);
}
window.InputMini = InputMini;